/* Reign Wala, the pages beside the homepage: Our Story, FAQ, Shipping & Returns, Contact, Privacy, Cart, 404.
   Same ground, ink, type and hairlines as the homepage. Each page opens with a large serif title set on the left
   and runs in two columns from 900px: a narrow rail for section names, a wider column for the words.
   Nothing is tied to the scroll; each page head and what follows arrive once, in the homepage's language
   (css/motion.css). */

.page .mast { margin-bottom: 0; }                      /* the header sits above the page, not over a photograph */
.page main { padding-bottom: var(--gap-in); }

/* ------------------------------------------------------------ page head */
/* the hairline under the head is its ::after, so it can draw in (data-reveal="draw") */
.page-head { position: relative; padding-top: clamp(52px, 9vw, 128px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-head::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: var(--line); }
.page-head h1 { margin-top: 14px; font-size: var(--t-title); line-height: 0.98; letter-spacing: -0.028em; max-width: 11em; }
/* three letters can carry more than a long title: FAQ is set at the top of the range */
.page-faq .page-head h1 { font-size: clamp(56px, 6vw, 78px); }
.page-head .lede { margin-top: 24px; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.42; letter-spacing: -0.004em; color: var(--soft); max-width: 28em; text-wrap: balance; }
.page-head .lede a, .prose a, .qa dd a, .aside-note a { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size 420ms var(--ease); }
.page-head .lede a:hover, .prose a:hover, .qa dd a:hover, .aside-note a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ------------------------------------------------- rail and column sections */
.block { padding-top: var(--gap-in); display: grid; gap: 22px; }
.block + .block { margin-top: var(--gap-in); background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; }
.block-head h2 { font-size: var(--t-h2-s); line-height: 1.06; letter-spacing: -0.018em; max-width: 9em; }
.block-head .label { display: block; margin-bottom: 12px; }
.prose p:not(.label) { color: var(--soft); max-width: 36em; }
.prose p + p { margin-top: 16px; }
.prose p.big { font-family: var(--serif); font-size: var(--t-lede); line-height: 1.42; letter-spacing: -0.006em; color: var(--ink); max-width: 26em; }

.page-story .block { padding-top: var(--gap); }

/* a head that holds a lede: from 900 the lede sits beside the title, on its baseline (FAQ and Our Story) */
@media (min-width: 900px) {
  .page-head:has(.lede) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
  .page-head:has(.lede) > .label { grid-column: 1 / -1; }
  .page-head:has(.lede) h1 { grid-column: 1; }
  .page-head:has(.lede) .lede { grid-column: 2; margin-top: 0; padding-bottom: 0.15em; }
}

/* questions and answers: open, never folded */
.qa { border-top: 1px solid var(--line); }
.qa > div { padding: 22px 0 24px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.qa dt { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.006em; color: var(--ink); text-wrap: balance; }
.qa dd { color: var(--soft); max-width: 38em; }
.qa dd + dd { margin-top: 8px; }

/* ------------------------------------------------------------ closing row */
/* Our Story, FAQ and Shipping end on a powder band (.band--close) that meets the navy footer: the body carries
   .has-close so main gives up its bottom padding (no cream strip), with no reliance on :has. The row is one heading
   and two actions: stacked on a phone; from 900 the heading sits in the rail and the actions start where the page's
   words start (the same 4 / 8 columns as the blocks above), the two centred on each other. */
.band--close { --band-pad: clamp(56px, 7vw, 104px); }
.has-close main { padding-bottom: 0; }
.page-close { display: grid; gap: 24px; justify-items: start; }
.page-close h2 { font-size: var(--t-h2-s); line-height: 1.1; letter-spacing: -0.016em; max-width: 12em; }
.page-close .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* ================================================================== FAQ */
.faq-index { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 28px; }
/* the topic being read (aria-current, set in js/motion.js) is ink with a short rule drawn under it */
.faq-index a { position: relative; align-self: flex-start; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); min-height: 36px; display: inline-flex; align-items: center; transition: color 240ms; }
.faq-index a::after { content: ""; position: absolute; left: 0; right: 0.14em; top: calc(50% + 11px); height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease); }
.faq-index a:hover, .faq-index a[aria-current="true"] { color: var(--ink); }
.faq-index a[aria-current="true"]::after { transform: scaleX(1); }
/* a jump lands with the group's heading about 40px under the header */
.faq-group { padding-top: var(--gap-in); scroll-margin-top: calc(40px - var(--gap-in)); display: grid; gap: 20px; }
.faq-group h2 { font-size: var(--t-h2-s); letter-spacing: -0.016em; }

/* ===================================================== Shipping & Returns */
/* the conditions and the return address: one band of facts under a single ink rule, side by side from 760 */
.return-terms { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ink); display: grid; gap: 32px; }
.conditions .label, .address .label { display: block; }
.conditions ul { margin-top: 14px; display: grid; gap: 12px; }
.conditions li { position: relative; padding-left: 22px; color: var(--soft); max-width: 36em; }
.conditions li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 10px; height: 1px; background: var(--ink); }
.address { display: grid; gap: 14px; align-content: start; }
.prose .address p, .address p { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.45; color: var(--ink); }

/* ============================================================== Contact */
.contact-grid { display: grid; gap: 44px; padding-top: var(--gap-in); }
.mail-big { display: inline-block; margin-top: 12px; font-family: var(--serif); font-size: var(--t-mail); line-height: 1.04; letter-spacing: -0.024em; color: var(--ink); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 6px; transition: background-size 520ms var(--ease); }
.mail-big:hover { background-size: 100% 1px; }
.topics { margin-top: 30px; }
.topics p { color: var(--soft); }
.topics ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--t-small); color: var(--ink); transition: box-shadow 240ms, background-color 240ms, color 240ms, transform 140ms; }
.topics a:focus-visible { background: var(--ink); color: var(--on-navy); box-shadow: inset 0 0 0 1px var(--ink); }
.topics a:active { transform: translateY(1px); }
@media (hover: hover) { .topics a:hover { background: var(--ink); color: var(--on-navy); box-shadow: inset 0 0 0 1px var(--ink); } }
/* the other ways begin level with the email label: no rule above the first, so both columns start on the same line */
.ways-in > div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.ways-in > div:first-child { padding-top: 0; }
.ways-in dt { font-size: var(--t-label); line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.ways-in dd { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.35; color: var(--ink); }
.ways-in dd small { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--t-small); line-height: 1.55; color: var(--soft); }
.ways-in dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 1px; transition: background-size 420ms var(--ease); }
.ways-in dd a:hover { background-size: 100% 1px; }

/* ============================================================== Privacy */
.policy { padding-top: var(--gap-in); }
.aside-note { margin-top: 18px; color: var(--soft); max-width: 36em; }

/* ================================================================= Cart */
.page-cart .page-head { padding-bottom: 0; }
.page-cart .page-head::after { content: none; }
.cart-page { padding-top: clamp(32px, 4vw, 56px); display: grid; gap: 40px; }
.cart-page .lines { border-top: 1px solid var(--line); }
.cart-page .line { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-page .line .shot { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cart-page .line .shot img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); mix-blend-mode: multiply; }
.cart-page .head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cart-page .nm { display: block; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; }
.cart-page .fin { margin-top: 2px; font-size: var(--t-small); color: var(--quiet); }
.cart-page .amt { font-variant-numeric: tabular-nums; }
.cart-page .note { margin-top: 8px; font-size: var(--t-small); color: var(--soft); }
.cart-page .qty { display: flex; align-items: center; margin-top: 8px; margin-left: -14px; }
.cart-page .qty button { width: 44px; height: 44px; font-size: var(--t-body); }
.cart-page .qty span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-page .qty .remove { width: auto; margin-left: 18px; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.cart-sum { display: grid; gap: 14px; align-content: start; }
.cart-sum .rows { border-top: 1px solid var(--ink); }
.cart-sum .rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-sum .rows dt { color: var(--soft); }
.cart-sum .rows .total dt, .cart-sum .rows .total dd { font-family: var(--serif); font-size: var(--t-h3); color: var(--ink); }
.cart-sum .btn { width: 100%; margin-top: 8px; }
.cart-sum .fine { font-size: var(--t-small); line-height: 1.55; color: var(--quiet); }
.cart-sum .keep { justify-self: center; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); min-height: 44px; display: inline-flex; align-items: center; }
.cart-page .lines:empty { display: none; }
/* empty: the hairline spans the column; the sentence and button, then the six leathers as a row to choose from */
.cart-empty { padding: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid var(--line); display: grid; gap: 22px; justify-items: start; }
.cart-empty p { font-family: var(--serif); font-size: var(--t-sub); line-height: 1.3; color: var(--soft); }
.mini-bags { justify-self: stretch; margin-top: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 14px; }
.mini-bags a { display: grid; gap: 12px; align-content: start; }
.mini-shot { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mini-shot img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); mix-blend-mode: multiply; transition: scale 320ms var(--ease); }
.mini-name { justify-self: start; font-family: var(--serif); font-size: var(--t-body); line-height: 1.3; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 420ms var(--ease); }
.mini-bags a:focus-visible .mini-name { background-size: 100% 1px; }
@media (hover: hover) { .mini-bags a:hover .mini-name { background-size: 100% 1px; } .mini-bags a:hover .mini-shot img { scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .mini-shot img, .mini-name, .faq-index a::after { transition: none; } }

/* ================================================================== 404 */
.lost { display: grid; }
.lost-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #55522f; }
.lost-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 70%; }
.lost-words { padding: 44px var(--pad) 64px; display: grid; gap: 18px; justify-items: start; align-content: center; }
.lost-words h1 { font-size: var(--t-title-s); line-height: 1.02; letter-spacing: -0.026em; max-width: 8em; }
.lost-words .sub { font-family: var(--serif); font-size: var(--t-lede); color: var(--soft); }
.lost-words .acts { margin-top: 10px; display: grid; gap: 18px; justify-items: start; }
.page-404 main { padding-bottom: 0; }

/* =============================================================== Our Story */
.story-open { padding-top: var(--gap-in); display: grid; gap: 26px; }
.story-open figure .ph { aspect-ratio: 3 / 4; }
.story-open figcaption, .duo figcaption, .founder figcaption { margin-top: 10px; }
.story-open .words { display: grid; gap: 18px; align-content: center; }
.story-line { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.018em; max-width: 11em; }
.bridge { padding-top: var(--gap); text-align: center; }
.bridge .lead { margin: 14px auto 0; font-family: var(--serif); font-size: var(--t-sub); line-height: 1.3; letter-spacing: -0.012em; max-width: 24em; text-wrap: balance; }
/* the two points: a matched pair on the column, each on its own hairline, her words as written */
.bridge ol { margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; display: grid; gap: 36px; text-align: left; }
.bridge li { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.bridge li p { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.42; letter-spacing: -0.004em; color: var(--ink); max-width: 30em; text-wrap: pretty; }
/* the belief: the page's one statement, on a navy band of its own */
.belief { text-align: center; }
.belief .big { margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: var(--t-say); line-height: 1.2; letter-spacing: -0.016em; color: var(--on-navy); max-width: 19em; text-wrap: balance; }
.belief p:not(.big) { margin: clamp(24px, 3vw, 40px) auto 0; color: var(--on-navy-soft); max-width: 32em; text-wrap: pretty; }
.founder { padding-top: var(--gap); display: grid; gap: 26px; }
.founder .ph { aspect-ratio: 3 / 4; }
.founder .words { display: grid; gap: 16px; align-content: center; }
.founder h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; }
.founder .words p { color: var(--soft); max-width: 34em; }
.how { padding-top: var(--gap); display: grid; gap: 26px; }
.how-head h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; margin-top: 10px; }
.how-head figure { margin-top: 26px; }
.how-head .ph { aspect-ratio: 4 / 5; }
.waste { padding-top: var(--gap); }
.waste-head { text-align: center; max-width: 36em; margin: 0 auto; }
.waste-head h2 { margin-top: 10px; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; }
.waste-head p:not(.label) { margin: 16px auto 0; color: var(--soft); max-width: 34em; }
.duo { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 28px; }
.duo .ph { aspect-ratio: 1 / 1; }

/* ============================================================== 760 and up */
@media (min-width: 760px) {
  .bridge ol { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
  .return-terms { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(32px, 5vw, 80px); }
  .mini-bags { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 28px); }
  .duo .ph { aspect-ratio: 5 / 4; }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); }
}

/* ============================================================== 900 and up */
@media (min-width: 900px) {
  .prose p:not(.big):not(.label), .qa dd, .founder .words p:not(.label), .belief p:not(.big), .waste-head p:not(.label), .conditions li { font-size: var(--t-body); line-height: 1.65; }
  .block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
  .block-head { position: sticky; top: calc(var(--mast) + 32px); align-self: start; }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
  .faq-index { position: sticky; top: calc(var(--mast) + 32px); align-self: start; flex-direction: column; gap: 2px; padding-top: var(--gap-in); }
  .faq-group { grid-template-columns: 1fr; }
  .cart-page { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .cart-page .line { grid-template-columns: 168px 1fr; gap: 28px; }
  .cart-sum { position: sticky; top: calc(var(--mast) + 32px); }
  .lost { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: calc(100vh - var(--mast) - var(--tick)); min-height: calc(100svh - var(--mast) - var(--tick)); }
  .lost-words { order: -1; padding: 64px clamp(32px, 5vw, 80px) 64px max(var(--pad), 8.9vw); }
  .lost-photo { aspect-ratio: auto; }
  .page-close { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .cart-page.is-empty { grid-template-columns: minmax(0, 1fr); }
  .story-open { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
  .story-open .words { padding-left: clamp(0px, 2vw, 32px); }
  .founder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
  .founder figure { order: 2; }
  .how { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .how-head { position: sticky; top: calc(var(--mast) + 32px); }
}
.page-close .acts .link { padding-top: 4px; }   /* the underline's 4px below balances the 4px above: the words centre on the button */