@layer reset, tokens, frame, rooms, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button, input { font: inherit; color: inherit; }
  a { color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --xl-ink: #262525;
    --xl-graphite: #636262;
    --xl-orange: #f07e1e;
    --xl-orange-deep: #c9620c;
    --xl-paper: #f6f4f1;
    --xl-stone: #e9e6e1;
    --xl-line: #d9d5cf;
    --xl-white: #fff;
    --xl-display: "Archivo", "Arial Narrow", sans-serif;
    --xl-text: "Figtree", system-ui, sans-serif;
    --xl-gutter: clamp(16px, 3vw, 40px);
    --xl-max: 1360px;
  }
}

@layer frame {
  body { background: var(--xl-paper); color: var(--xl-ink); font: 400 16px/1.6 var(--xl-text); }
  h1, h2, h3 { font-family: var(--xl-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
  .eyebrow { font: 700 12px/1 var(--xl-text); letter-spacing: .16em; text-transform: uppercase; color: var(--xl-orange-deep); margin-block-end: 12px; }
  :focus-visible { outline: 3px solid var(--xl-orange); outline-offset: 2px; }

  /* lintel: black strip with rotating notes */
  .lintel { background: var(--xl-ink); color: var(--xl-paper); font: 600 13px/1 var(--xl-text); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; block-size: 38px; }
  .lintel__track { display: grid; animation: lintel 12s steps(1) infinite; }
  .lintel__note { grid-area: 1 / 1; display: grid; place-items: center; block-size: 38px; padding-inline: 16px; text-align: center; opacity: 0; animation: lintel-fade 12s infinite; }
  .lintel__note:nth-child(2) { animation-delay: 4s; }
  .lintel__note:nth-child(3) { animation-delay: 8s; }
  @keyframes lintel-fade { 0%, 30% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .lintel__note { animation: none; } .lintel__note:first-child { opacity: 1; } }

  /* porch: rooms | sign | rooms + stamp */
  .porch { position: sticky; inset-block-start: 0; z-index: 20; background: var(--xl-paper); border-block-end: 1px solid var(--xl-line);
    display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 24px; padding: 14px var(--xl-gutter); }
  .porch__latch, .porch__burger, .porch__drawer { display: none; }
  .porch__rooms ul { display: flex; gap: clamp(14px, 2vw, 30px); }
  .porch__rooms--east ul { justify-content: flex-end; }
  .porch__rooms a { font: 800 17px/1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; padding-block: 8px; border-block-end: 2px solid transparent; }
  .porch__rooms a:hover { border-color: var(--xl-orange); }
  .porch__sign img { inline-size: clamp(130px, 12vw, 170px); }
  .stamp { display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 999px; transition: background .2s, transform .2s; }
  .stamp img { inline-size: 100%; }
  .stamp--porch { background: var(--xl-ink); padding: 11px 18px; inline-size: 190px; }
  .stamp--porch:hover { background: var(--xl-orange-deep); }

  /* basement: dark footer + giant wordmark */
  .basement { background: var(--xl-ink); color: #cfcac3; margin-block-start: 80px; padding: 64px var(--xl-gutter) 28px; }
  .basement__top { max-inline-size: var(--xl-max); margin-inline: auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
  .basement__say { font: 800 26px/1.1 var(--xl-display); font-stretch: 72%; text-transform: uppercase; color: var(--xl-paper); }
  .basement__price { font-size: 13px; margin-block-start: 14px; }
  .basement__col h2 { font-size: 16px; color: var(--xl-orange); margin-block-end: 14px; letter-spacing: .06em; }
  .basement__col li + li { margin-block-start: 8px; }
  .basement__col a { text-decoration: none; font-size: 14px; }
  .basement__col a:hover { color: var(--xl-paper); text-decoration: underline; }
  .basement__sign { max-inline-size: var(--xl-max); margin: 64px auto 0; }
  .basement__sign img { inline-size: min(100%, 720px); opacity: .95; }
  .basement__fine { max-inline-size: var(--xl-max); margin: 24px auto 0; font-size: 13px; border-block-start: 1px solid #3c3a3a; padding-block-start: 18px; }

  .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--xl-graphite); }
  .crumbs li + li::before { content: "/"; margin-inline-end: 8px; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--xl-orange-deep); }

  .plank { display: inline-block; background: var(--xl-paper); color: var(--xl-ink); font: 800 15px/1 var(--xl-display); font-stretch: 80%; letter-spacing: .06em;
    text-transform: uppercase; text-decoration: none; padding: 16px 30px; border-radius: 4px; transition: background .2s, color .2s; }
  .plank:hover { background: var(--xl-orange); color: var(--xl-white); }
  .plank--dark { background: var(--xl-ink); color: var(--xl-paper); }

  @media (max-width: 1080px) {
    .porch { grid-template-columns: auto 1fr auto; gap: 14px; }
    .porch__rooms { display: none; }
    .porch__burger { display: grid; gap: 5px; cursor: pointer; padding: 8px 4px; }
    .porch__burger i { display: block; inline-size: 24px; block-size: 2px; background: var(--xl-ink); }
    .porch__sign { justify-self: center; }
    .stamp--porch { inline-size: 150px; padding: 10px 14px; }
    .porch__latch:checked ~ .porch__drawer { display: block; grid-column: 1 / -1; }
    .porch__drawer li { border-block-start: 1px solid var(--xl-line); }
    .porch__drawer a { display: block; padding: 14px 4px; font: 800 20px/1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; text-decoration: none; }
    .basement__top { grid-template-columns: 1fr 1fr; }
    .basement__lede { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .stamp--porch { inline-size: 118px; padding: 9px 11px; }
    .porch__sign img { inline-size: 112px; }
  }
}

@layer rooms {
  section { max-inline-size: var(--xl-max); margin-inline: auto; padding-inline: var(--xl-gutter); }
  section > h2, .shelf__head h2 { font-size: clamp(30px, 4vw, 46px); }

  /* foyer: ridge triptych */
  .foyer { max-inline-size: none; padding: 0; display: grid; grid-template-columns: 1fr 2.4fr 1fr; block-size: clamp(420px, 44vw, 620px); overflow: hidden; }
  .foyer img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .foyer__side { background: var(--xl-stone); display: grid; place-items: center; }
  .foyer__side img { object-fit: contain; mix-blend-mode: multiply; inline-size: 88%; block-size: 88%; }
  .foyer__center { position: relative; }
  .foyer__center::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,19,.25), rgba(20,19,19,.62)); }
  .foyer__words { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; color: var(--xl-white); gap: 18px; }
  .foyer h1 { font-size: clamp(38px, 4.6vw, 68px); max-inline-size: 17ch; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  .foyer p { max-inline-size: 46ch; font-size: 17px; }

  .pips { background: linear-gradient(90deg, var(--xl-orange) var(--r), #cfcac3 var(--r)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 1px; }
  .band { max-inline-size: var(--xl-max); margin: 56px auto 0; padding-inline: var(--xl-gutter); }
  .band img { inline-size: 100%; }
  .band--home { margin-block-start: 80px; }

  /* coat-hooks: ridge category tiles */
  .coat-hooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 44px; }
  .coat-hook { background: var(--xl-stone); text-decoration: none; text-align: center; padding: 26px 22px 0; display: grid; justify-items: center; gap: 8px; overflow: hidden; }
  .coat-hook h3 { font-size: 26px; }
  .coat-hook p { font-size: 15px; color: var(--xl-graphite); max-inline-size: 30ch; }
  .coat-hook__go { font: 800 14px/1 var(--xl-display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; border-block-end: 2px solid var(--xl-ink); padding-block-end: 3px; }
  .coat-hook img { inline-size: 62%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; margin-block-start: 8px; transition: transform .35s; }
  .coat-hook:hover img { transform: translateY(-8px); }
  .coat-hook:hover .coat-hook__go { color: var(--xl-orange-deep); border-color: var(--xl-orange); }

  /* threshold: journey icon strip */
  .threshold { margin-block-start: 56px; }
  .threshold ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-block: 1px solid var(--xl-line); padding-block: 34px; }
  .threshold li { text-align: center; display: grid; justify-items: center; gap: 8px; }
  .glyph { inline-size: 40px; block-size: 40px; color: var(--xl-orange); }
  .threshold h3 { font-size: 22px; }
  .threshold p { font-size: 14px; color: var(--xl-graphite); max-inline-size: 28ch; }
  .threshold--slim ul { padding-block: 22px; }
  .threshold--slim .glyph { inline-size: 30px; block-size: 30px; }
  .threshold--slim h3 { font-size: 18px; }

  /* windows: twin promo panels */
  .windows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block-start: 56px; }
  .window { position: relative; display: block; block-size: clamp(380px, 40vw, 560px); overflow: hidden; text-decoration: none; color: var(--xl-white); }
  .window img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 50%; transition: transform .6s; }
  .window:hover img { transform: scale(1.04); }
  .window:nth-child(2) img { object-position: 50% 88%; }
  .window__glass { position: absolute; inset: auto 0 0; padding: 60px 28px 28px; display: grid; gap: 8px; justify-items: start;
    background: linear-gradient(0deg, rgba(20,19,19,.85), transparent); }
  .window strong { font: 800 clamp(28px, 3vw, 40px)/1 var(--xl-display); font-stretch: 72%; text-transform: uppercase; }
  .window em { font-style: normal; max-inline-size: 44ch; font-size: 15px; }
  .window b { background: var(--xl-paper); color: var(--xl-ink); font: 800 13px/1 var(--xl-display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px; border-radius: 3px; margin-block-start: 6px; }

  /* shelf + keyring cards (esr-style dots) */
  .shelf { margin-block-start: 72px; }
  .shelf__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-block-end: 24px; flex-wrap: wrap; }
  .shelf__head a { font-weight: 700; text-decoration: none; border-block-end: 2px solid var(--xl-orange); }
  .shelf__intro { max-inline-size: 70ch; color: var(--xl-graphite); flex-basis: 100%; }
  .shelf__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .keyring { background: var(--xl-white); display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--xl-line); }
  .keyring__pic { background: var(--xl-stone); display: block; aspect-ratio: 1; overflow: hidden; }
  .keyring__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s; }
  .keyring:hover .keyring__pic img { transform: scale(1.05); }
  .keyring__body { padding: 16px 16px 10px; display: grid; gap: 6px; align-content: start; }
  .keyring__dots { display: flex; gap: 6px; align-items: center; }
  .keyring__dots li { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
  .keyring__dots .keyring__more { inline-size: auto; block-size: auto; background: none; box-shadow: none; font-size: 12px; color: var(--xl-graphite); }
  .keyring__sizes { font-size: 12px; color: var(--xl-graphite); }
  .keyring__name { font-size: 22px; }
  .keyring__name a { text-decoration: none; }
  .keyring__name a:hover { color: var(--xl-orange-deep); }
  .keyring__rate { font-size: 13px; color: var(--xl-graphite); }
  .keyring__rate span { color: var(--xl-orange); letter-spacing: 1px; }
  .keyring__line { font-size: 14px; }
  .keyring__price { font: 800 22px/1 var(--xl-display); font-stretch: 80%; margin-block-start: 4px; }
  .keyring__price--soon { font-size: 15px; color: var(--xl-graphite); }
  .stamp--keyring { background: var(--xl-orange); padding: 14px 18px; border-radius: 0; inline-size: 100%; }
  .stamp--keyring img { inline-size: min(100%, 210px); }
  .stamp--keyring:hover { background: #f59a4c; }

  /* latch: journey "how does it work" */
  .latch { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; margin-block-start: 80px; background: var(--xl-stone); padding: 0; }
  .latch__pic img { inline-size: 100%; }
  .latch__words { padding: clamp(28px, 5vw, 64px); align-self: center; }
  .latch h2 { font-size: clamp(30px, 3.6vw, 46px); margin-block-end: 26px; }
  .latch__steps { display: grid; gap: 20px; margin-block-end: 30px; }
  .latch__steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .latch__steps span { grid-row: span 2; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--xl-orange); color: var(--xl-white); display: grid; place-items: center; font: 800 20px/1 var(--xl-display); }
  .latch__steps h3 { font-size: 20px; margin-block: 4px 4px; }
  .latch__steps p { color: var(--xl-graphite); font-size: 15px; }

  /* ledger: magbak comparison table */
  .ledger { margin-block-start: 80px; }
  .ledger__lede { color: var(--xl-graphite); margin-block: 8px 22px; }
  .ledger__scroll { overflow-x: auto; }
  .ledger table, .note table { inline-size: 100%; min-inline-size: 640px; background: var(--xl-white); font-size: 15px; }
  .ledger th, .ledger td, .note th, .note td { text-align: start; padding: 14px 16px; border-block-end: 1px solid var(--xl-line); }
  .ledger thead th, .note thead th { background: var(--xl-ink); color: var(--xl-paper); font: 800 14px/1 var(--xl-display); font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; }
  .ledger tbody tr:nth-child(even) { background: #faf9f7; }
  .ledger tbody th a { font-weight: 700; text-decoration: none; }
  .ledger tbody th a:hover { color: var(--xl-orange-deep); }

  /* skylight: ridge wide banner */
  .skylight { position: relative; display: block; max-inline-size: var(--xl-max); margin: 80px auto 0; overflow: hidden; color: var(--xl-white); text-decoration: none; }
  .skylight img { inline-size: 100%; aspect-ratio: 2.44; object-fit: cover; }
  .skylight__words { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 20px;
    background: linear-gradient(90deg, rgba(20,19,19,.15), rgba(20,19,19,.7) 50%, rgba(20,19,19,.15)); }
  .skylight strong { font: 800 clamp(30px, 4.4vw, 60px)/1 var(--xl-display); font-stretch: 72%; text-transform: uppercase; }
  .skylight em { font-style: normal; max-inline-size: 52ch; }
  .skylight b { background: var(--xl-paper); color: var(--xl-ink); font: 800 13px/1 var(--xl-display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; padding: 12px 22px; border-radius: 3px; }

  /* guestbook: 6 reviews */
  .guestbook { margin-block-start: 80px; }
  .guestbook__wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 24px; }
  .guestbook__note { background: var(--xl-white); border-block-start: 4px solid var(--xl-orange); padding: 24px; display: grid; gap: 12px; align-content: start; }
  .guestbook__stars { color: var(--xl-orange); letter-spacing: 2px; }
  .guestbook blockquote { font-size: 16px; }
  .guestbook figcaption { font-weight: 700; font-size: 14px; color: var(--xl-graphite); }
  .guestbook__fine { font-size: 13px; color: var(--xl-graphite); margin-block-start: 14px; }

  /* which-door: magbak picker */
  .which-door { margin-block-start: 80px; }
  .which-door ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-block-start: 24px; }
  .which-door a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; background: var(--xl-ink); color: var(--xl-paper); text-decoration: none; transition: background .2s; }
  .which-door a:hover { background: var(--xl-orange-deep); }
  .which-door__need { font-size: 17px; }
  .which-door__answer { font: 800 18px/1.1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; text-align: end; color: var(--xl-orange); }
  .which-door a:hover .which-door__answer { color: var(--xl-white); }
  .which-door i { font-style: normal; }

  /* fridge: SEO block */
  .fridge { margin-block-start: 80px; }
  .fridge h2 { max-inline-size: 22ch; }
  .fridge__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-block-start: 22px; color: #3d3b3b; }
  .fridge__cols p + p { margin-block-start: 14px; }

  /* doorframe: ridge trust row */
  .doorframe { margin-block-start: 80px; }
  .doorframe h2 { text-align: center; }
  .doorframe ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-block-start: 30px; }
  .doorframe li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
  .doorframe .glyph { inline-size: 32px; block-size: 32px; color: var(--xl-ink); }
  .doorframe h3 { font-size: 20px; margin-block-end: 4px; }
  .doorframe p { font-size: 14px; color: var(--xl-graphite); }

  @media (max-width: 1080px) {
    .foyer { grid-template-columns: 1fr; block-size: 520px; }
    .foyer__side { display: none; }
    .coat-hooks, .guestbook__wall { grid-template-columns: repeat(2, 1fr); }
    .shelf__grid { grid-template-columns: repeat(3, 1fr); }
    .threshold ul, .doorframe ul { grid-template-columns: repeat(2, 1fr); }
    .latch { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .coat-hooks, .guestbook__wall, .windows, .which-door ul, .fridge__cols { grid-template-columns: 1fr; }
    .shelf__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .keyring__name { font-size: 18px; }
    .keyring__body { padding: 12px 12px 8px; }
    .skylight img { aspect-ratio: 1.1; }
    .which-door a { flex-direction: column; align-items: start; }
    .which-door__answer { text-align: start; }
    .doorframe ul { grid-template-columns: 1fr; }
  }
}

@layer pages {
  /* category vestibule: esr banner */
  .vestibule { max-inline-size: none; padding: 0; background: linear-gradient(100deg, var(--xl-paper) 35%, var(--xl-stone)); display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-block-size: 360px; }
  .vestibule__words { padding: 40px var(--xl-gutter); max-inline-size: 720px; justify-self: end; inline-size: 100%; display: grid; gap: 16px; }
  .vestibule h1 { font-size: clamp(40px, 5vw, 68px); }
  .vestibule__sub { font-size: 19px; color: var(--xl-graphite); }
  .vestibule__pic img { inline-size: min(100%, 420px); mix-blend-mode: multiply; margin-inline: auto; }
  .shelf--room { margin-block-start: 48px; }
  .shelf--room .shelf__head h2 { font-size: 28px; }
  .folds { margin-block-start: 64px; max-inline-size: 900px; }
  .folds h2 { font-size: 32px; margin-block-end: 16px; }
  .fold { border-block-end: 1px solid var(--xl-line); }
  .fold summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 700; font-size: 17px; position: relative; }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary::after { content: "+"; position: absolute; inset-inline-end: 4px; inset-block-start: 12px; font: 400 26px/1 var(--xl-text); color: var(--xl-orange); }
  .fold[open] summary::after { content: "–"; }
  .fold p { padding-block-end: 18px; color: #3d3b3b; }
  .next-rooms { margin-block-start: 64px; }
  .next-rooms h2 { font-size: 30px; margin-block-end: 18px; }
  .next-rooms ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .next-rooms a { display: grid; gap: 8px; text-decoration: none; background: var(--xl-stone); padding-block-end: 14px; text-align: center; }
  .next-rooms img { aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .next-rooms span { font: 800 17px/1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; }
  .next-rooms__plain { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 28px; }
  .next-rooms__plain .plank { background: var(--xl-ink); color: var(--xl-paper); }

  /* product: journey layout */
  .pdp__crumbs { max-inline-size: var(--xl-max); margin: 22px auto 0; padding-inline: var(--xl-gutter); }
  .pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); margin-block-start: 18px; }
  .gallery { display: grid; gap: 12px; align-content: start; position: sticky; inset-block-start: 90px; }
  .gallery__stage { background: var(--xl-white); border: 1px solid var(--xl-line); aspect-ratio: 1; display: grid; place-items: center; }
  .gallery__stage img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .gallery__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .gallery__thumb { padding: 0; border: 1px solid var(--xl-line); background: var(--xl-white); cursor: pointer; aspect-ratio: 1; }
  .gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .gallery__thumb.is-on { outline: 2px solid var(--xl-orange); outline-offset: -2px; }
  .pdp__buy { display: grid; gap: 16px; align-content: start; }
  .pdp__buy h1 { font-size: clamp(34px, 3.6vw, 52px); }
  .pdp__rate { font-size: 14px; color: var(--xl-graphite); }
  .pdp__rate span { color: var(--xl-orange); letter-spacing: 1px; }
  .pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-block: 1px solid var(--xl-line); padding-block: 14px; }
  .pdp__amount { font: 800 38px/1 var(--xl-display); font-stretch: 80%; }
  .pdp__amount--soon { font-size: 22px; }
  .pdp__asof { font-size: 13px; color: var(--xl-graphite); }
  .pdp__lede { font-size: 17px; }
  .stamp--pdp { background: var(--xl-orange); padding: 20px; border-radius: 4px; inline-size: 100%; }
  .stamp--pdp img { inline-size: min(100%, 260px); }
  .stamp--pdp:hover { background: #f59a4c; }
  .pdp__colors p { font-weight: 700; font-size: 14px; margin-block-end: 8px; }
  .pdp__colors ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .pdp__colors li { display: flex; align-items: center; gap: 6px; font-size: 12px; background: var(--xl-white); border: 1px solid var(--xl-line); padding: 4px 9px 4px 5px; border-radius: 999px; }
  .pdp__colors i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
  .pdp__sizes { font-size: 14px; color: var(--xl-graphite); }
  .pdp__ticks { display: grid; gap: 10px; }
  .pdp__ticks li { padding-inline-start: 28px; position: relative; }
  .pdp__ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 6px; inline-size: 16px; block-size: 10px; border-inline-start: 3px solid var(--xl-orange); border-block-end: 3px solid var(--xl-orange); transform: rotate(-45deg); }
  .panels { margin-block-start: 64px; display: grid; gap: 20px; }
  .panel { display: grid; grid-template-columns: .85fr 1.15fr; background: var(--xl-stone); align-items: center; }
  .panel img { inline-size: 100%; aspect-ratio: 1; object-fit: contain; background: var(--xl-white); }
  .panel--flip { grid-template-columns: 1.15fr .85fr; }
  .panel > div { padding: clamp(24px, 4vw, 56px); }
  .panel h3 { font-size: clamp(26px, 2.8vw, 38px); margin-block-end: 12px; }
  .panel--flip img { order: 2; }
  .tabs { margin-block-start: 64px; display: grid; grid-template-columns: repeat(3, max-content); }
  .tabs input { position: absolute; opacity: 0; pointer-events: none; }
  .tabs label { font: 800 17px/1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; letter-spacing: .04em; padding: 16px 22px; cursor: pointer; border-block-end: 3px solid var(--xl-line); }
  .tabs input:checked + label { border-color: var(--xl-orange); color: var(--xl-orange-deep); }
  .tabs input:focus-visible + label { outline: 3px solid var(--xl-orange); }
  .tabs__pane { display: none; grid-column: 1 / -1; padding-block: 26px; max-inline-size: 900px; }
  #tab-a:checked ~ .tabs__pane--a, #tab-b:checked ~ .tabs__pane--b, #tab-c:checked ~ .tabs__pane--c { display: block; }
  .specs { inline-size: 100%; background: var(--xl-white); }
  .specs th, .specs td { text-align: start; padding: 13px 16px; border-block-end: 1px solid var(--xl-line); }
  .specs th { inline-size: 34%; font-weight: 700; }

  /* guides: magbak article */
  .note { max-inline-size: 780px; margin: 36px auto 0; padding-inline: var(--xl-gutter); }
  .note h1 { font-size: clamp(36px, 4.6vw, 58px); margin-block: 16px 14px; }
  .note__lede { font-size: 19px; color: var(--xl-graphite); margin-block-end: 20px; }
  .note h2 { font-size: 28px; margin-block: 34px 12px; }
  .note p { margin-block-end: 12px; }
  .note figure { margin-block: 22px; }
  .note > ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 6px; }
  .note__steps { counter-reset: s; display: grid; gap: 12px; }
  .note__steps li { counter-increment: s; padding-inline-start: 44px; position: relative; }
  .note__steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--xl-orange); color: var(--xl-white); display: grid; place-items: center; font-weight: 700; }
  .note table { min-inline-size: 520px; }
  .note__box { background: var(--xl-ink); color: var(--xl-paper); padding: 34px; text-align: center; margin-block-start: 40px; display: grid; gap: 10px; justify-items: center; }
  .note__box strong { font: 800 28px/1 var(--xl-display); font-stretch: 72%; text-transform: uppercase; }
  .note__more { margin-block-start: 44px; }
  .note__more li { border-block-end: 1px solid var(--xl-line); }
  .note__more a { display: block; padding: 14px 0; font-weight: 700; text-decoration: none; }
  .note__more a:hover { color: var(--xl-orange-deep); }

  /* service pages */
  .service { max-inline-size: 960px; margin-block-start: 36px; }
  .service h1 { font-size: clamp(40px, 5vw, 64px); margin-block: 16px 10px; }
  .service__lede { font-size: 19px; color: var(--xl-graphite); margin-block-end: 30px; }
  .rooms > div { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding-block: 22px; border-block-start: 1px solid var(--xl-line); }
  .rooms dt { display: flex; gap: 10px; align-items: center; font: 800 21px/1.1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; }
  .rooms .glyph { inline-size: 26px; block-size: 26px; }
  .rules { counter-reset: r; background: var(--xl-white); border: 2px solid var(--xl-ink); padding: 30px 34px; display: grid; gap: 16px; }
  .rules li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; }
  .rules li::before { content: counter(r, decimal-leading-zero); font: 800 22px/1.2 var(--xl-display); color: var(--xl-orange-deep); }
  .rules__date { font-size: 13px; color: var(--xl-graphite); margin-block-start: 14px; }
  .route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: rt; }
  .route li { counter-increment: rt; padding: 56px 20px 0 0; position: relative; border-block-start: 3px solid var(--xl-ink); }
  .route li::before { content: counter(rt); position: absolute; inset-block-start: -20px; inset-inline-start: 0; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--xl-orange); color: var(--xl-white); display: grid; place-items: center; font: 800 18px/1 var(--xl-display); }
  .route strong { display: block; font: 800 20px/1.1 var(--xl-display); font-stretch: 78%; text-transform: uppercase; margin-block-end: 8px; }
  .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .doors__leaf { padding: 30px; }
  .doors__leaf--in { background: var(--xl-stone); }
  .doors__leaf--out { background: var(--xl-ink); color: var(--xl-paper); }
  .doors h2 { font-size: 26px; margin-block-end: 16px; }
  .doors li { padding-block: 10px; border-block-start: 1px solid rgba(128,128,128,.3); }
  .bells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .bells li { background: var(--xl-white); border: 1px solid var(--xl-line); padding: 26px; display: grid; gap: 8px; align-content: start; }
  .bells h2 { font-size: 20px; color: var(--xl-orange-deep); }
  .bells__big { font: 800 22px/1.15 var(--xl-display); font-stretch: 80%; overflow-wrap: anywhere; }
  .sieve { display: grid; gap: 8px; margin-block-end: 18px; font-weight: 700; }
  .sieve input { padding: 14px 16px; border: 2px solid var(--xl-ink); background: var(--xl-white); border-radius: 4px; }
  .sieve__none { margin-block-start: 16px; color: var(--xl-graphite); }
  .keycaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .keycaps li { background: var(--xl-white); border: 1px solid var(--xl-line); padding: 22px; display: grid; gap: 12px; align-content: start; }
  .keycaps kbd { justify-self: start; font: 800 16px/1 var(--xl-display); font-stretch: 80%; text-transform: uppercase; background: var(--xl-ink); color: var(--xl-paper); padding: 10px 14px; border-radius: 6px; box-shadow: 0 4px 0 var(--xl-orange); }
  .service--lost { text-align: center; padding-block: 60px 20px; }

  @media (max-width: 1080px) {
    .pdp { grid-template-columns: 1fr; }
    .gallery { position: static; }
    .next-rooms ul { grid-template-columns: repeat(3, 1fr); }
    .route { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  }
  @media (max-width: 720px) {
    .vestibule { grid-template-columns: 1fr; }
    .vestibule__words { justify-self: stretch; }
    .vestibule__pic img { inline-size: 240px; }
    .panel { grid-template-columns: 1fr; }
    .panel--flip img { order: 0; }
    .next-rooms ul { grid-template-columns: repeat(2, 1fr); }
    .rooms > div { grid-template-columns: 1fr; gap: 8px; }
    .route, .doors, .bells, .keycaps { grid-template-columns: 1fr; }
    .tabs label { padding: 14px 12px; font-size: 15px; }
    .gallery__rail { grid-template-columns: repeat(6, 1fr); gap: 5px; }
  }
}