/* Littleton Archival Services: family album page, archival box, brass and manila */

:root {
  /* Materials */
  --paper: #f3eee3;        /* acid-free paper: page ground */
  --paper-2: #e9e2d3;      /* deeper paper: quiet panels */
  --mat: #f7f2e8;          /* print mat */
  --album: #2d2823;        /* faded album-page black */
  --album-deep: #1c1915;
  --white-ink: #ede6d6;    /* album caption ink */
  --white-ink-2: #cfc6b4;
  --manila: #e6d3a3;       /* intake tag */
  --brass: #c9a45c;        /* label-holder brass: actions on dark */
  --brass-deep: #b08a45;
  --brass-light: #dcc08a;
  --board: #d6ccbc;        /* museum board: the box-size band */
  --ink: #26211c;          /* warm black ink */
  --ink-2: #57504a;        /* secondary text on paper */
  --sepia: #6b3f1d;        /* sepia toner: links, numerals */
  --pencil: #6a675f;
  --rule: rgba(38, 33, 28, 0.2);
  --rule-strong: rgba(38, 33, 28, 0.42);
  --error: #9b2c1f;
  --error-bg: #f6e3dc;

  /* Roles: field = header, hero and quote ground; band = box-size band */
  --field: var(--album);
  --field-text: #f1ebdf;
  --field-text-2: #d9cfbd;
  --field-focus: #d8b46a;
  --field-action: var(--brass);
  --field-action-deep: var(--brass-deep);
  --field-action-text: var(--ink);
  --band: var(--board);
  --band-text: var(--ink);
  --band-text-2: var(--ink-2);
  --box: var(--album);
  --box-text: #f1ebdf;
  --box-cta: var(--brass);
  --box-cta-text: var(--ink);
  --box-cta-hover: var(--brass-light);
  --shelf: var(--album-deep);
  --hole: #0b0908;
  --hole-rim: #6f6152;
  --box-lid: #3a342d;
  --line: #7a6a55;
  --action: var(--album);
  --action-deep: #120f0c;
  --action-text: #f1ebdf;
  --tag: var(--manila);
  --tag-ring: #cdb57f;
  --mark-box: var(--brass);
  --mark-lid: var(--brass-light);
  --footer-bg: var(--album-deep);

  /* Type */
  --font-display: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-small: 1.1875rem;
  --fs-body: clamp(1.1875rem, 1.12rem + 0.25vw, 1.3125rem);
  --fs-lede: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-h2: clamp(2.125rem, 1.55rem + 2.3vw, 3.5rem);
  --fs-h1: clamp(2.875rem, 1.5rem + 4vw, 4.75rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8rem);
  --radius: 4px;

  --shadow-print: 0 1px 2px rgba(38, 33, 28, 0.18), 0 22px 44px -14px rgba(38, 33, 28, 0.45);
  --shadow-lift: 0 1px 2px rgba(38, 33, 28, 0.16), 0 10px 24px -10px rgba(38, 33, 28, 0.4);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  accent-color: var(--sepia);
  scrollbar-color: var(--line) var(--paper-2);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  caret-color: var(--sepia);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sepia); color: var(--paper); }

a { color: var(--sepia); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--sepia); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* Placeholders the owner must fill */
.todo {
  background: #ffe97a; color: #2b2200;
  outline: 1.5px dashed #8a6d00; outline-offset: 1px; border-radius: 2px;
  padding: 0 0.3em; font-family: var(--font-text); font-size: 0.85em; font-weight: 700; font-style: normal; letter-spacing: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a .todo { text-decoration: none; }

.sample-badge {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  padding: 0.15rem 0.5rem; border-radius: 2px;
  background: var(--manila); color: var(--ink);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.num { font-family: var(--font-display); font-variant-numeric: lining-nums; }
.sample { display: block; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.sample--dark { color: var(--white-ink-2); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3.5rem; padding: 0.875rem 1.5rem;
  background: var(--action); color: var(--action-text);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-text); font-size: 1.1875rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 0 var(--action-deep);
  transition: background-color 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.button:hover { background: var(--action-deep); color: var(--action-text); text-decoration: none; }
.button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--action-deep); }
.button__icon { width: 1.35em; height: 1.35em; transition: transform 200ms var(--ease-out); }
.button:hover .button__icon { transform: translateX(3px); }
.button--small { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 1.0625rem; }
.button--wide { width: 100%; }

/* Header */
.site-header { background: var(--field); color: var(--field-text); position: relative; z-index: 10; }
.site-header :focus-visible, .hero :focus-visible, .quote :focus-visible { outline-color: var(--field-focus); }
.site-header .button { background: var(--field-action); color: var(--field-action-text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 0 var(--field-action-deep); }
.site-header .button:hover { background: var(--field-action-deep); color: var(--field-action-text); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); }

.wordmark { display: flex; align-items: center; gap: var(--s-3); color: var(--field-text); text-decoration: none; }
.wordmark:hover { color: var(--field-text); }
.wordmark__mark { width: 2.75rem; height: 2.75rem; flex: none; }
.wordmark__text { display: grid; line-height: 1.15; }
.wordmark__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.005em; }
.wordmark__tag { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--field-text); opacity: 0.86; }

.menu-toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: 0.5rem 0.875rem;
  background: transparent; border: 1.5px solid var(--field-text); border-radius: var(--radius);
  font-weight: 700; font-size: 1.0625rem; color: var(--field-text);
}
.menu-toggle svg { width: 1.375rem; height: 1.375rem; }

.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav ul { display: flex; gap: var(--s-5); list-style: none; padding: 0; }
.site-nav ul a { color: var(--field-text); font-weight: 600; font-size: 1.0625rem; text-decoration: none; padding-block: var(--s-2); }
.site-nav ul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav__phone { color: var(--field-text); font-weight: 700; white-space: nowrap; }

/* Hero */
.hero { background: var(--field); color: var(--field-text); padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 6.5rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.hero__title { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.02em; max-width: 11ch; }
.hero__lede { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.45; max-width: 32ch; }

/* Manila intake tag */
.tag { position: relative; isolation: isolate; color: var(--ink); margin-top: var(--s-6); padding: var(--s-5) var(--s-5) var(--s-5) 3.75rem; filter: drop-shadow(0 1px 1px rgba(38, 33, 28, 0.25)) drop-shadow(0 14px 18px rgba(38, 33, 28, 0.22)); max-width: 34rem; }
.tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tag);
  clip-path: polygon(1.75rem 0, 100% 0, 100% 100%, 1.75rem 100%, 0 calc(100% - 1.75rem), 0 1.75rem);
}
.tag__eyelet { position: absolute; left: 1.125rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); border-radius: 50%; background: var(--field); box-shadow: 0 0 0 4px var(--tag-ring), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.tag fieldset { border: 0; padding: 0; min-width: 0; }
.tag__legend { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; padding: 0; margin-bottom: var(--s-3); }
.tag .button { margin-top: var(--s-5); }
.tag__call { margin-top: var(--s-4); font-size: var(--fs-small); }
.tag__call a { color: var(--ink); font-weight: 700; }

/* Checkbox chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 2.75rem; padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.6);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip span::before {
  content: ""; width: 1rem; height: 1rem; flex: none; border: 1.5px solid currentColor; border-radius: 2px;
  background: transparent center / 0.8rem no-repeat;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:checked + span::before { background-color: var(--paper); border-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%2326211c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip input:focus-visible + span { outline: 3px solid var(--sepia); outline-offset: 2px; }

/* Mounted print */
.print { position: relative; }
.print__mat { position: relative; background: var(--mat); padding: clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem) 3rem; box-shadow: var(--shadow-print); }
.print__pencil { position: absolute; left: clamp(0.75rem, 1.6vw, 1.5rem); bottom: 0.85rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--pencil); letter-spacing: 0.01em; }
.print__caption { display: grid; gap: var(--s-1); margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.45; }
.print__caption > span:first-child { font-weight: 700; }
.print__caption .sample { color: var(--field-text-2); }
.tag :focus-visible, .intake :focus-visible { outline-color: var(--sepia); }

/* Before/after compare */
.compare { position: relative; overflow: hidden; background: var(--album-deep); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare img { width: 100%; height: auto; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__before img { width: 100%; height: 100%; object-fit: cover; }
.compare__aged { filter: sepia(0.92) saturate(0.85) contrast(0.6) brightness(1.16) blur(0.5px); }
.compare__damage { position: absolute; inset: 0; }
.compare__gray { filter: grayscale(1) contrast(1.06); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--mat); box-shadow: 0 0 0 1px rgba(38, 33, 28, 0.25); pointer-events: none; }
.compare__grip {
  position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--mat); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 200ms var(--ease-out);
}
.compare__grip svg { width: 1.6rem; height: 1.6rem; }
.compare:hover .compare__grip { transform: translate(-50%, -50%) scale(1.06); }
.compare:has(.compare__range:focus-visible) .compare__grip { outline: 3px solid var(--sepia); outline-offset: 3px; }
.compare--color:has(.compare__range:focus-visible) .compare__grip { outline-color: var(--white-ink); }
.compare__label {
  position: absolute; top: var(--s-3); padding: 0.2rem 0.55rem; border-radius: 2px;
  background: rgba(38, 33, 28, 0.78); color: var(--paper);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; pointer-events: none;
}
.compare__label--before { left: var(--s-3); }
.compare__label--after { right: var(--s-3); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100vh; background: transparent; }
.compare__range::-moz-range-thumb { width: 2px; height: 100%; border: 0; background: transparent; }

/* Claim ticket */
.ticket-band { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: 1px solid var(--rule); }
.ticket { --stub: 10.5rem; position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); background: #fbf8f1; box-shadow: var(--shadow-lift); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(var(--stub) - 0.7rem); width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--paper); }
.ticket::before { top: -0.7rem; box-shadow: inset 0 -2px 2px -1px rgba(38, 33, 28, 0.18); }
.ticket::after { bottom: -0.7rem; box-shadow: inset 0 2px 2px -1px rgba(38, 33, 28, 0.18); }
.ticket__stub { display: grid; align-content: center; justify-items: center; gap: var(--s-1); padding: var(--s-5) var(--s-4); border-right: 2px dashed var(--rule-strong); text-align: center; font-family: var(--font-display); line-height: 1.2; }
.ticket__stub span { font-style: italic; font-size: 1.0625rem; color: var(--ink-2); }
.ticket__stub strong { font-weight: 600; font-size: 1.625rem; color: var(--sepia); white-space: nowrap; }
.ticket__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket__list li { padding: var(--s-5); font-size: var(--fs-body); line-height: 1.45; }
.ticket__list li:nth-child(even) { border-left: 1px solid var(--rule); }
.ticket__list li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
.ticket__list strong { display: block; font-weight: 700; text-wrap: balance; }

/* Sections */
.section { padding-block: var(--section); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head p { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); }

/* Price list */
.pricelist { border-bottom: 1px solid var(--rule); }
.pricelist__row { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; column-gap: var(--s-4); align-items: baseline; padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.pricelist__row h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
/* Without prices (parked for now) the name and description sit side by side */
.pricelist--no-prices .pricelist__row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
.pricelist--no-prices .pricelist__desc { grid-column: auto; margin-top: 0; max-width: 50ch; }
.pricelist__desc { grid-column: 1 / -1; margin-top: var(--s-2); color: var(--ink-2); max-width: 62ch; }
.pricelist__leader { height: 0; border-bottom: 2.5px dotted var(--rule-strong); }
.pricelist__price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.pricelist__price .pricelist__unit, .pricelist__price > :not(.todo) { font-family: var(--font-text); }
.pricelist__unit { font-size: 1rem; font-weight: 400; color: var(--ink-2); }

.also { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-5) var(--s-7); margin-top: var(--s-8); }
.also__title { font-size: var(--fs-h3); }
.also__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.also__list > div { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.also__list dt { font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.also__list dd { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; }
.also__ask { grid-column: 2; font-size: 1.125rem; }

/* Album page */
.album { background: var(--album); color: var(--white-ink); background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 70%); }
.album :focus-visible { outline-color: var(--white-ink); }
.album .section__head p { color: var(--white-ink-2); }
.album .wrap { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.album .section__head { grid-column: 1; }
.album__page { display: contents; }
.mounted--wide { grid-column: 1; }
.mounted__photo { position: relative; }
.mounted__photo img { width: 100%; height: auto; }
.mounted__caption { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-5); }
.mounted__title { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; line-height: 1.3; color: var(--white-ink); }
.mounted--tall { grid-column: 2; grid-row: 1 / span 2; }

.corner { position: absolute; z-index: 3; width: 2.25rem; height: 2.25rem; background: #e7dfcd; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.corner--tl { top: -0.5rem; left: -0.5rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
.corner--tr { top: -0.5rem; right: -0.5rem; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner--bl { bottom: -0.5rem; left: -0.5rem; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.corner--br { bottom: -0.5rem; right: -0.5rem; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Flip card */
.flip { perspective: 1800px; }
.flip__inner { display: grid; transform-style: preserve-3d; transition: transform 800ms var(--ease-out); }
.flip__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__back { transform: rotateY(180deg); }
.flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }

.record {
  height: 100%; padding: 1rem 1.25rem;
  background-color: #fbf8f1;
  background-image:
    linear-gradient(#c8473a, #c8473a),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(2rem - 1px), rgba(107, 63, 29, 0.2) calc(2rem - 1px), rgba(107, 63, 29, 0.2) 2rem);
  background-size: 100% 2px, 100% calc(100% - 3.1rem);
  background-position: 0 3.25rem, 0 3.1rem;
  background-repeat: no-repeat;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
}
.record__head { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 2rem; margin-bottom: 0.5rem; }
.record dl > div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; }
.record dt, .record dd { line-height: 2rem; }
.record dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.record dd { font-size: var(--fs-body); }
.record__quote { font-family: var(--font-display); font-style: italic; }
.record__file { font-size: 0.9375rem !important; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.flip__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: 0.5rem 1rem;
  background: transparent; color: var(--white-ink);
  border: 1.5px solid var(--white-ink-2); border-radius: var(--radius);
  font-weight: 700; font-size: 1.0625rem;
  transition: background-color 160ms ease, color 160ms ease;
}
.flip__toggle:hover { background: var(--white-ink); color: var(--album); }
.flip__toggle svg { width: 1.25rem; height: 1.25rem; }

/* Custody steps */
.how .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: start; }
.custody { display: grid; gap: var(--s-6); counter-reset: step; position: relative; max-width: 40rem; }
.custody li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: calc(-1 * var(--s-6)); border-left: 2px dashed var(--line); }
.custody li { position: relative; counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-5); align-items: start; }
.custody li::before {
  content: counter(step);
  position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--s-4);
  border-radius: 50%; background: var(--paper); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--sepia);
}
.custody h3 { font-size: 1.375rem; padding-top: 0.6rem; }
.custody li::before { grid-row: span 2; margin-bottom: 0; }
.custody p { margin-top: var(--s-2); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }

/* Box sizes */
.boxes { background: var(--band); color: var(--band-text); }
.boxes :focus-visible { outline-color: var(--band-text); }
.boxes .section__head p { color: var(--band-text-2); }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; padding-bottom: 0.875rem; background: linear-gradient(var(--shelf), var(--shelf)) bottom / 100% 0.875rem no-repeat; }
.box {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4);
  padding: calc(1.125rem + clamp(1.25rem, 2.2vw, 1.75rem)) clamp(1.25rem, 2.2vw, 1.75rem) 3.75rem;
  background: var(--box); color: var(--box-text);
  box-shadow: inset 0 0 0 2px rgba(38, 33, 28, 0.28), 0 -1px 0 rgba(255, 255, 255, 0.15) inset;
}
.box::before { content: ""; position: absolute; left: -3px; right: -3px; top: 0; height: 1.125rem; background: var(--box-lid); border-bottom: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); }
.box::after { content: ""; position: absolute; left: 50%; bottom: 1.25rem; width: 3.5rem; height: 1.125rem; transform: translateX(-50%); border-radius: 999px; background: var(--hole); box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.75), 0 0 0 2px var(--hole-rim), 0 1px 0 2px rgba(255, 255, 255, 0.08); }
.box--s { min-height: 25rem; }
.box--m { min-height: 29rem; }
.box--l { min-height: 33rem; }
.box__label { background: var(--paper); color: var(--ink); padding: var(--s-4) var(--s-4) var(--s-4); border: 3px solid #3a3129; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.box__label h3 { font-size: 1.625rem; }
.box__size { margin-top: var(--s-1); font-size: 1.0625rem; color: var(--ink-2); }
.box__price { margin-top: var(--s-3); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.box__note { font-size: 1.0625rem; line-height: 1.5; }
.box__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; background: var(--box-cta); color: var(--box-cta-text); border-radius: var(--radius); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.box__cta:hover { background: var(--box-cta-hover); color: var(--box-cta-text); }
.boxes .box :focus-visible { outline-color: var(--box-text); }

/* Local + care */
.local__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: start; }
.local__title { grid-column: 1 / -1; max-width: 22ch; }
.local__photo { position: relative; }
.local__mount { position: relative; }
.local__photo .sample-badge { top: var(--s-3); bottom: auto; }
.local__photo img { width: 100%; height: auto; background: var(--paper-2); box-shadow: var(--shadow-lift); }
.local__photo figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.local__text h3 { margin-top: var(--s-6); font-size: 1.5rem; }
.local__text .todo-block { margin-top: 0; }
.todo-block { color: var(--ink-2); }
.care { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.care li { position: relative; padding-left: 1.5rem; }
.care li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; background: var(--sepia); }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 1.25rem; height: 1.25rem; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--sepia); transition: transform 240ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--sepia); }
.faq details p { padding-bottom: var(--s-5); max-width: 62ch; color: var(--ink-2); }

/* Quote */
.quote { background: var(--field); color: var(--field-text); }
.quote__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: start; }
.quote__intro p { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.5; }
.quote__intro .quote__alt { font-size: var(--fs-body); }
.quote__alt a { color: var(--field-text); font-weight: 700; }

.intake {
  position: relative; display: grid; gap: var(--s-5);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: #fbf8f1; color: var(--ink); box-shadow: var(--shadow-print);
  border-top: 3px solid #c8473a;
}
.intake__head { font-family: var(--font-display); font-style: italic; color: var(--pencil); font-size: 1rem; margin-bottom: calc(var(--s-2) * -1); }
.intake__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-content: start; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; padding: 0; }
fieldset.field > legend { margin-bottom: var(--s-2); }
.field__optional { font-weight: 400; color: var(--ink-2); }
.field[hidden] { display: none; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 0.875rem;
  background: #fffdf8; color: var(--ink);
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 1.125rem; line-height: 1.4;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field ::placeholder { color: #6f6860; opacity: 1; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2326211c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--sepia); box-shadow: 0 0 0 3px rgba(107, 63, 29, 0.28); }
.field input[type="file"] { width: 100%; max-width: 100%; font-size: 1.0625rem; padding: 0.5rem 0; }
.field input[type="file"]::file-selector-button { margin-right: var(--s-3); min-height: 2.75rem; padding: 0.5rem 1rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.field input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); }
.field [aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(155, 44, 31, 0.18) !important; }
.field__error { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--error); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.field__error::before { content: ""; width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.05rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%239b2c1f'/%3E%3Cpath d='M10 5.5v5.6' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.3' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.field__error[hidden] { display: none; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.radios label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; font-size: 1.0625rem; cursor: pointer; }
.radios input { width: 1.25rem; height: 1.25rem; margin: 0; }
.chips--form .chip span { background: #fffdf8; }
.field--trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.intake__submit { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
.intake__fine { font-size: var(--fs-small); color: var(--ink-2); }
.button__spinner { display: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2.5px solid rgba(243, 238, 227, 0.4); border-top-color: var(--paper); animation: spin 800ms linear infinite; }
.button[data-loading="true"] { pointer-events: none; opacity: 0.85; }
.button[data-loading="true"] .button__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--radius); border: 1.5px solid currentColor; font-size: var(--fs-body); line-height: 1.5; }
.notice:focus { outline: 3px solid var(--sepia); outline-offset: 3px; }
.notice__text { width: 100%; min-height: 9rem; padding: 0.75rem 0.875rem; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: #fffdf8; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; resize: vertical; }
.notice .button { justify-self: start; }
.notice[hidden] { display: none; }
.notice--error { color: var(--error); background: var(--error-bg); }
.notice--info { color: var(--ink); background: #fff3c4; border-color: #8a6d00; }
.notice strong { display: block; }
.notice a { color: inherit; font-weight: 700; }

/* Footer */
.site-footer { background: var(--footer-bg); border-top: 1px solid rgba(241, 235, 223, 0.12); color: #e9e3d6; padding-block: var(--s-8) var(--s-6); font-size: var(--fs-body); }
.site-footer a { color: #f3eee3; }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.site-footer__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin-bottom: var(--s-2); color: var(--paper); }
.site-footer h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: #cfc6b4; margin-bottom: var(--s-2); }
.site-footer__col p + p { margin-top: var(--s-3); }
.site-footer__legal { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid rgba(233, 227, 214, 0.18); font-size: 1rem; color: #c9c3b6; }
.credits { margin-top: var(--s-3); }
.credits summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 0.2em; }
.credits p { margin-top: var(--s-2); max-width: 80ch; font-size: 0.9375rem; line-height: 1.55; }

/* Sticky mobile CTA */
.mobile-cta { display: none; }

/* Small pages */
.page { padding-block: var(--section); }
.page__inner { max-width: 44rem; }
.page h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -0.015em; }
.page h2 { font-size: 1.625rem; margin-top: var(--s-7); }
.page p, .page ul { margin-top: var(--s-4); }
.page ul { padding-left: 1.25rem; }
.page li + li { margin-top: var(--s-2); }
.page .button { margin-top: var(--s-6); }
.page__lede { font-size: var(--fs-lede); color: var(--ink-2); }

/* Responsive */
@media (max-width: 1100px) {
  .site-nav ul { gap: var(--s-4); }
}

@media (max-width: 959px) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav[data-open="true"] { display: grid; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { position: static; width: 100%; display: grid; gap: var(--s-4); padding-block: var(--s-3) var(--s-4); border-top: 1px solid var(--rule-strong); }
  .site-nav ul { display: grid; gap: 0; }
  .site-nav ul a { display: block; padding-block: var(--s-3); font-size: 1.25rem; border-bottom: 1px solid var(--rule); }
  .site-nav .button { justify-self: start; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__title { max-width: 12ch; }
  .tag { margin-top: var(--s-6); }
  .print { order: 2; }


  .pricelist__price { white-space: normal; }

  .also { grid-template-columns: minmax(0, 1fr); }
  .also__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .also__ask { grid-column: auto; }

  .album .wrap { grid-template-columns: minmax(0, 1fr); }
  .mounted--tall { grid-column: 1; grid-row: auto; margin-top: var(--s-7); max-width: 26rem; }

  .shelf { grid-template-columns: minmax(0, 1fr); background: none; padding-bottom: 0; gap: var(--s-6); }
  .box--s, .box--m, .box--l { min-height: 0; }
  .box { border-bottom: 0.875rem solid var(--shelf); }

  .local__inner, .faq__inner, .quote__inner, .how .wrap { grid-template-columns: minmax(0, 1fr); }

  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }

  .mobile-cta {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule-strong); box-shadow: 0 -8px 24px -12px rgba(38, 33, 28, 0.4);
    transform: translateY(110%); transition: transform 320ms var(--ease-out);
  }
  .mobile-cta[data-visible="true"] { transform: none; }
  .mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3.25rem; padding: 0.5rem 1.125rem; border-radius: var(--radius); font-weight: 700; font-size: 1.125rem; text-decoration: none; }
  .mobile-cta__call { border: 1.5px solid var(--ink); color: var(--ink); }
  .mobile-cta__call svg { width: 1.25rem; height: 1.25rem; }
  .mobile-cta__quote { background: var(--action); color: var(--action-text); }
  .site-footer { padding-bottom: calc(var(--s-6) + 4.5rem); }
}

@media (max-width: 599px) {
  .wordmark__tag { display: none; }
  .wordmark__mark { width: 2.5rem; height: 2.5rem; }
  .wordmark__name { font-size: 1.0625rem; }
  .menu-toggle { padding: 0.5rem; min-width: 2.75rem; justify-content: center; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tag { padding: var(--s-5) var(--s-4) var(--s-5) 3.25rem; }
  .tag .button { width: 100%; }
  .print__pencil { font-size: 0.9375rem; }
  .compare__label { font-size: 0.8125rem; }
  .compare__grip { width: 2.75rem; height: 2.75rem; }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket::before, .ticket::after { display: none; }
  .ticket__stub { border-right: 0; border-bottom: 2px dashed var(--rule-strong); justify-items: start; grid-auto-flow: column; justify-content: start; gap: var(--s-3); align-items: baseline; padding-block: var(--s-4); }
  .ticket__list { grid-template-columns: minmax(0, 1fr); }
  .ticket__list li { border-left: 0 !important; padding-block: var(--s-4); }
  .ticket__list li + li { border-top: 1px solid var(--rule); }
  .pricelist__row, .pricelist--no-prices .pricelist__row { grid-template-columns: minmax(0, 1fr); }
  .pricelist--no-prices .pricelist__desc { margin-top: var(--s-2); }

  .pricelist__leader { display: none; }
  .pricelist__desc { order: 2; }
  .pricelist__price { order: 3; margin-top: var(--s-3); text-align: left; }
  .custody { row-gap: var(--s-5); }
  .custody li:not(:last-child)::after { bottom: calc(-1 * var(--s-5)); }
  .custody li { column-gap: var(--s-4); }
  .intake__row { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .flip__inner { transform: none !important; }
  .flip__face { backface-visibility: visible; transition: opacity 1ms; }
  .flip__back { transform: none; opacity: 0; }
  .flip[data-flipped="true"] .flip__front { opacity: 0; }
  .flip[data-flipped="true"] .flip__back { opacity: 1; }
}

@media print {
  .site-header nav, .menu-toggle, .tag, .mobile-cta, .quote, .flip__toggle { display: none !important; }
  body { background: #fff; }
  .hero, .boxes, .album, .site-footer { background: #fff !important; color: #000 !important; }
}