.account-page {
  padding-block: clamp(35px, 5vw, 80px) clamp(48px, 6vw, 100px);
  min-height: 68vh;
}

.account-intro,
.account-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 7vw, 120px);
  max-width: 1280px;
  margin-inline: auto;
}
.account-guest-copy { max-width: 580px; }
.account-page h1 {
  margin: 13px 0 22px;
  color: #32382d;
  font-size: clamp(54px, 6.5vw, 100px);
  line-height: .97;
}
.account-page h1 em,
.account-tools h2 em { color: #646b4c; }
.account-guest-copy h2,
.account-details h2 { font-size: clamp(29px, 2.4vw, 39px); line-height: 1.1; }
.account-guest-copy > p:not(.eyeline),
.account-error > p:not(.eyeline) {
  max-width: 47ch;
  margin: 12px 0 20px;
  color: #555a4d;
  font-size: 16px;
  line-height: 1.65;
}
.account-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1px 0 27px;
  padding: 3px;
  border: 1px solid #bbbbac;
}
.account-switch a {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding-inline: clamp(18px, 2.2vw, 32px);
  color: #4a5142;
  font-size: 14px;
  font-weight: 600;
}
.account-switch a:hover { background: #e6e6d9; }
.account-switch a[aria-current="page"] { background: var(--green); color: #fffaf0; }
.account-art { background: #e7e0d2; }
.account-art img { display: block; width: 100%; height: auto; aspect-ratio: 1.19; object-fit: cover; }
.account-art figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px clamp(12px, 1.5vw, 23px);
  color: rgb(70,70,70);
}
.account-art a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 41px;
  font: italic 21px/1.2 'Instrument Serif', Georgia, serif;
}
.account-art a:hover { text-decoration: underline; text-underline-offset: 4px; }
.account-art a .arr { transform: scale(.65); }
.account-pigments { display: flex; width: clamp(65px, 8vw, 112px); height: 9px; }
.account-pigments i { flex: 1; background: #55554f; }
.account-pigments i:nth-child(2) { background: #99998e; }
.account-pigments i:nth-child(3) { background: #c4b6a3; }
.account-pigments i:nth-child(4) { background: #d9cdc0; }
.account-pigments i:nth-child(5) { background: #f0e9d9; }

.account-heading { max-width: 1280px; margin-inline: auto; }
.account-heading h1 { margin-bottom: clamp(28px, 3.5vw, 52px); }
.account-desk {
  align-items: start;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(25px, 5vw, 76px);
}
.account-details {
  padding: clamp(22px, 3vw, 46px);
  color: #faf5e7;
  background: #344131;
}
.account-details h2 { color: #fff8e9; }
.account-details dl { margin: 19px 0 14px; }
.account-details dl > div { padding: 12px 0; border-top: 1px solid #64705f; }
.account-details dt {
  color: #e2e6d7;
  font-size: 12px;
  letter-spacing: .025em;
}
.account-details dd {
  margin: 2px 0 0;
  color: #fffbf0;
  font-size: 17px;
  overflow-wrap: anywhere;
}
.account-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 22px; }
.account-details .line-link:hover { color: #dfd8b9; }
.account-details :focus-visible { outline-color: #f2d49a; }
.account-tools h2 { margin: 0 0 18px; font-size: clamp(35px, 3.6vw, 57px); }
.account-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 13px 4px 13px 0;
  border-top: 1px solid var(--line);
}
.account-tool:last-of-type { border-bottom: 1px solid var(--line); }
.account-tool strong { display: block; font-size: 16px; }
.account-tool small { display: block; margin-top: 2px; color: #565c50; font-size: 14px; line-height: 1.45; }
.account-tool:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.account-checkout,
.account-availability { margin-top: 18px; padding: 16px 18px; background: #eae9da; }
.account-checkout p,
.account-availability { font-size: 14px; line-height: 1.55; }
.account-checkout button { margin-top: 12px; }
.account-error { max-width: 800px; margin-inline: auto; padding-block: clamp(20px, 5vw, 80px); }
@media (max-width: 730px) {
  .account-intro,
  .account-desk { grid-template-columns: 1fr; gap: 28px; }
  .account-art { max-width: 580px; }
  .account-art img { aspect-ratio: 1.65; }
  .account-guest-copy { max-width: 600px; }
  .account-switch { margin-bottom: 20px; }
  .account-tools h2 { margin-bottom: 12px; }
}
@media (max-width: 400px) {
  .account-page h1 { font-size: 49px; }
  .account-guest-copy .button { width: 100%; padding-inline: 12px; }
  .account-details { padding: 20px 16px; }
}

.account-auth-form { display: grid; gap: 13px; max-width: 455px; }
.account-field { display: grid; gap: 4px; }
.account-field label,
.receipt-key label { font-size: 14px; font-weight: 600; }
.account-field input,
.receipt-key textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #979d8b;
  border-radius: 2px;
  background: #fffdf7;
  color: #292c24;
  font: 400 16px/1.4 var(--sans);
}
.account-field small { color: #59604f; font-size: 13px; }
.account-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.account-native { max-width: 455px; margin-top: 19px; padding-top: 13px; border-top: 1px solid var(--line); }
.account-native p { margin-bottom: 7px; color: #555a4d; font-size: 14px; line-height: 1.5; }
.account-native-button { border-color: #74806d; background: transparent; color: #35422e; }
.account-native-button:hover { background: #eaeadd; }
.account-guest-copy .account-plan-choice { margin-block: 12px; font-size: 14px; }
.account-auth-error { padding: 11px 14px; border-left: 3px solid #9b4938; background: #f6e9e0; color: #67392f; font-size: 14px; }
.account-guest-copy > .account-auth-error { color: #67392f; font-size: 14px; }
.account-logout { color: inherit; padding: 0; }
.account-email-settings { margin-top: 12px; padding-top: 17px; border-top: 1px solid #687460; }
.account-email-settings h3,
.account-email-settings summary { font: 600 16px/1.5 var(--sans); letter-spacing: 0; }
.account-email-settings summary { display: list-item; cursor: pointer; min-height: 43px; padding: 8px 0; }
.account-email-settings p { margin: 6px 0 12px; color: #e9ecde; font-size: 14px; line-height: 1.55; }
.account-email-settings .account-auth-error { color: #67392f; }
.account-email-settings .account-field small { color: #e5e6d8; }
.account-email-settings input[readonly] { background: #e1e5d9; color: #3f4d36; }
.account-email-settings .button { justify-self: start; background: #f2eada; color: #35422e; }
.account-email-settings .button:hover { background: #fff8e7; }
.receipt-header { border-bottom: 1px solid var(--line); }
.receipt-header .frame { display: flex; align-items: center; min-height: 68px; }
.recovery-receipt { max-width: 700px; margin: 0 auto; }
.recovery-receipt p:not(.eyeline) { max-width: 56ch; color: #515748; font-size: 16px; line-height: 1.6; }
.receipt-key { margin-top: 21px; padding: clamp(13px, 2vw, 22px); border: 1px solid #c8c8b7; background: #eeeddf; }
.receipt-key textarea {
  display: block;
  margin-top: 6px;
  resize: none;
  overflow-wrap: anywhere;
  font-family: ui-monospace, monospace;
  letter-spacing: .04em;
  user-select: all;
}
.receipt-copy { display: flex; align-items: center; gap: 10px 17px; flex-wrap: wrap; }
.receipt-copy button { padding-inline: 0; }
.receipt-copy span { font-size: 13px; color: #4b5742; }
.recovery-receipt #receipt-help { margin: 8px 0 20px; font-size: 14px; }
@media (max-width: 400px) {
  .account-form-actions .line-link { justify-content: flex-start; }
  .account-email-settings .button { width: 100%; }
}