/* GENERATED — do not hand-edit.
   Sliced from experiments/episode_browse/proto/procession.html's <style>
   block by utilities/website/site_chrome.py (chrome_css()). Edit the
   proto; this file is regenerated on every site build. */

/* ── The face the stack has always named ─────────────────────────
   --font-display has declared 'EB Garamond' from the first commit, and
   nothing has ever loaded it, so every heading on this page — and on every
   page built from it — has been rendering the Georgia fallback. The old
   site loaded the same family from Google Fonts, which is why the converted
   pages read plainer than what they replaced.

   Self-hosted, because the page's standing rule is that it links no webfont
   from anyone else's server: two files, OFL, subset to Latin, ~50KB the
   pair. Only the weights the register actually asks for exist here — every
   font-weight in the whole system is 400 — and the italic is not optional:
   the foot's own rule pairs var(--font-display) with font-style:italic, and
   without a real italic face the browser synthesises a slanted roman.

   font-display:swap, so the text is readable in Georgia from the first
   paint and re-sets when the face lands. The path is root-absolute: these
   ship through build_site.copy_static_files() from static/fonts/. Opened
   straight off disk the proto will 404 them and fall back to Georgia — that
   is the dev-only cost of not hardcoding a relative depth into the slice
   that becomes /chrome.css. */
@font-face{
  font-family:'EB Garamond';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/eb-garamond-400.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond';
  font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/eb-garamond-400-italic.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────────────
   Lifted from the live site palette so this page reads as
   rangeroftherealms.com rather than a generic demo. Folded in rather than
   linked: this file stands alone. */
:root {
    color-scheme: dark;

    /* Site palette */
    --slate-dark: #0d1117;
    --slate-medium: #161b22;
    --slate-light: #4a5f7f;
    --mist: #8b9bb4;
    --gold: #c9a875;
    --warm-gold: #e8c89a;
    --text-light: #e8e4dd;
    --text-muted: #a0a8b5;
    --shadow: rgba(0, 0, 0, 0.5);
    --border-subtle: rgba(201, 168, 117, 0.2);

    /* Immersion extras (darker than the live site, for gallery-dark rooms) */
    --void: #07090d;          /* deepest page background */
    --candle: rgba(232, 200, 154, 0.12);  /* warm light wash */

    /* Type — matches the live site stacks */
    --font-serif: 'Georgia', 'Palatino', 'Book Antiqua', serif;
    --font-display: 'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-serif);
    background: var(--void);
    color: var(--text-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--warm-gold); }

::selection { background: var(--gold); color: var(--slate-dark); }

/* ═══════════════════════════════════════════════════════════════════
   THE PROCESSION
   The works pass through one standing lamp. The light does not follow
   the paintings; the paintings walk into the light.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --gilt-hi:  #f2dcb4;
  --gilt-mid: #b18d55;
  --gilt-low: #6b5530;
  --rabbet:   #17100a;
  --axis:     42%;          /* the hanging line — solved in JS */
  --w0:       760px;        /* neighbour width, set by JS */
  --edge:     clamp(20px, 3.4vw, 56px);
  --cardw:    clamp(244px, 21vw, 348px);
  --cardgap:  clamp(15px, 1.5vw, 26px);
  --room-lo:  #04060a;
}

html{ scrollbar-gutter:stable; }
body{ min-height:100%; }
/* while a work is open or the feature runs, the page beneath holds still */
/* The page does not move while the find is open. overflow:hidden holds a
   desktop — a wheel has nothing left to scroll — but it does NOT hold a
   phone: iOS scrolls the document under it regardless. The touch half of
   the lock is enforced in script, below, by refusing every drag that is not
   inside the answers. */
html.locked{ overflow:hidden; }
/* ── The document, pinned ────────────────────────────────────────
   overflow:hidden holds a wheel and does not hold a finger: WebKit scrolls
   the document under it anyway, and refusing touchmove is not enough either
   — with the answers filling the screen every drag begins inside the allowed
   scroller, and when they are shorter than the viewport WebKit hands the
   drag on to the page regardless of overscroll-behavior. So on a phone the
   page is taken out of the scroll model entirely while the find is open.
   The offset is carried on body.style.top and given back on the way out. */
body.pinned{ position:fixed; left:0; right:0; width:100%; }

html{ scroll-behavior:auto; }

body{
  background:
    radial-gradient(120% 46% at 50% 6%, rgba(232,200,154,.035) 0%, rgba(232,200,154,0) 64%),
    linear-gradient(180deg, #090c11 0%, var(--void) 34%, var(--room-lo) 100%);
  overscroll-behavior:none;
}
body::after{                 /* plaster tooth — inline SVG, nothing fetched */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:400; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.slide.lit{ cursor:pointer; }

/* ── The house's name ────────────────────────────────────────────
   At the left end of the band, and a link home. */
/* The house's mark rides at the head of the band, before its name — where
   it is present on every screen and at every scroll position, and costs the
   hero not one pixel of height. A grid rather than a flex row so the mark
   can stand beside BOTH lines of the wordmark without a wrapper element
   the contract would have to grow. */
.ident{
  display:grid; grid-template-columns:auto 1fr;
  grid-template-areas:"mark name" "mark rule";
  align-items:center; column-gap:clamp(9px,.8vw,13px);
  text-decoration:none; user-select:none; -webkit-user-drag:none;
}
/* The mark carries its own blue-grey ground, so it is cropped round and
   struck with a gold ring — a medallion, which is what it now is. */
.identMark{
  grid-area:mark;
  display:block; width:clamp(30px,2.4vw,38px); height:clamp(30px,2.4vw,38px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px rgba(201,168,117,.34), 0 2px 10px rgba(0,0,0,.5);
  transition:box-shadow .45s ease;
}
.ident:hover .identMark{ box-shadow:0 0 0 1px rgba(232,200,154,.72), 0 2px 14px rgba(0,0,0,.6); }
.identName{
  grid-area:name;
  display:block; font-family:var(--font-serif); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.3em; white-space:nowrap;
  color:rgba(232,200,154,.86); transition:color .45s ease;
}
.identRule{
  grid-area:rule;
  display:block; width:30px; height:1px; margin:5px 0 4px;
  background:linear-gradient(90deg, rgba(232,200,154,.7), rgba(232,200,154,0));
  transition:background .45s ease;
}
.ident:hover .identName{ color:var(--warm-gold); }
.ident:hover .identRule{ background:linear-gradient(90deg, var(--gold), rgba(201,168,117,0)); }
.ident:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:6px; }

/* ══════════════════════════════════════════════════════════════════════
   THE CHROME.  A hairline band above the room, a centred masthead beneath
   it, and the smallest possible legal foot at the very bottom.
   ══════════════════════════════════════════════════════════════════════ */

.topBand{
  position:relative; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:clamp(11px,2vh,22px) var(--edge) clamp(9px,1.7vh,19px);
  border-bottom:1px solid rgba(201,168,117,.13);
}
.bandLeft{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); }
.bandNav{ display:flex; align-items:baseline; gap:clamp(14px,1.8vw,28px); }
/* Legible at a glance without becoming the loudest thing on the wall: the
   catalogue's warm register at rest, full warm-gold under the pointer, so
   rest and hover stay a clear step apart. */
.bandNav a{
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(232,200,154,.72); transition:color .4s ease;
}
.bandNav a:hover, .bandNav a.active{ color:var(--warm-gold); }
/* the site's own grouping, spoken quietly: a hairline panel on the room's
   dark ground rather than the site's blur bar */
.bandGroup{ position:relative; display:flex; align-items:baseline; }
.bandGroupToggle{
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(232,200,154,.72); transition:color .4s ease;
}
.bandGroup:hover .bandGroupToggle,
.bandGroup.open .bandGroupToggle{ color:var(--warm-gold); }
.bandGroupToggle:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }
.bandCaret{ font-size:.62em; line-height:1; transition:transform .3s ease; }
.bandGroup:hover .bandCaret, .bandGroup.open .bandCaret{ transform:rotate(180deg); }
.bandDrop{
  position:absolute; top:100%; left:50%; z-index:80;
  transform:translateX(-50%) translateY(10px);
  min-width:190px; max-width:min(15rem, calc(100vw - 2 * var(--edge)));
  display:flex; flex-direction:column;
  padding:9px 0; background:rgba(9,12,17,.97);
  border:1px solid rgba(201,168,117,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.bandGroup:hover .bandDrop, .bandGroup.open .bandDrop{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(5px);
}
/* a panel near the end of the bar hangs from its own right edge instead */
.bandDrop.toRight{ left:auto; right:0; transform:translateX(0) translateY(10px); }
.bandGroup:hover .bandDrop.toRight,
.bandGroup.open .bandDrop.toRight{ transform:translateX(0) translateY(5px); }
.bandDrop a{ padding:8px 18px; white-space:nowrap; }
.bandMenu{ display:none; background:none; border:0; cursor:pointer; padding:4px 2px;
  color:rgba(232,200,154,.72); font-size:15px; line-height:1; letter-spacing:.1em; }
.bandMenu:hover{ color:var(--warm-gold); }
body.expanded .topBand,
body.in-theater .topBand{ opacity:0; pointer-events:none; }
.topBand{ transition:opacity .38s ease; }

/* ── The masthead ────────────────────────────────────────────────
   Not a label strip: the house speaking first, at reading size. What this
   is, when it ships, where to find us — then the newest tale. */
.masthead{
  position:relative; z-index:20;
  display:block; text-align:center;
  padding:clamp(20px,2.9vh,38px) var(--edge) clamp(17px,2.5vh,32px);
  border-bottom:1px solid rgba(201,168,117,.13);
}
.mhLeft{ max-width:min(94ch,100%); margin:0 auto; }
.mhDesc{
  margin:0;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(16px,1.34vw,22px); line-height:1.44;
  letter-spacing:.004em; color:rgba(232,228,221,.88); text-wrap:balance;
}
.mhCadence{
  display:block; margin-top:clamp(11px,1.5vh,17px);
  font-family:var(--font-serif); font-size:clamp(14px,1.08vw,16.5px);
  line-height:1.4; letter-spacing:.012em; color:rgba(232,228,221,.84);
}
.mhCadence a{
  color:var(--warm-gold);
  border-bottom:1px solid rgba(232,200,154,.55); padding-bottom:1px;
}
.mhCadence a:hover{ color:#f6e3bf; border-bottom-color:#f6e3bf; }
.mhMarks{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(11px,1.4vw,20px);
  margin-top:clamp(11px,1.6vh,19px);
}
/* real targets, not decorations: 22px glyph in a 34px box */
.mhMarks a{
  display:block; padding:6px; color:rgba(232,200,154,.72);
  transition:color .4s ease;
}
.mhMarks a:hover{ color:var(--warm-gold); }
.mhMarks svg{ display:block; fill:currentColor; }
.mhMarks .instagram-link svg{ fill:none; }

/* the smallest possible legal foot: /returns/ has to stay discoverable */
/* The foot is the house signing its name, not a legal line. The page this
   site replaced closed on a centred brand block — the name, the tagline
   under it, the five platforms in a row, the tip jar on its own line, the
   copyright last — and that is what closes it again, in this room's own
   face and palette. A hairline above it does the separating; nothing else
   needs to.

   Returns lives on the SHOP page, in its own buy block, where a shopper is
   actually standing when the question occurs to them. It is not sitewide
   furniture. */
.legalFoot{
  position:relative; z-index:20; text-align:center;
  margin-top:clamp(44px,6.5vh,84px);
  border-top:1px solid rgba(201,168,117,.13);
  padding:clamp(38px,6vh,66px) var(--edge) clamp(34px,5vh,56px);
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.8);
}
.footName{
  display:block;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,1.9vw,26px); line-height:1.1;
  letter-spacing:.012em; text-transform:none;
  color:var(--warm-gold);
}
.footTag{
  display:block; margin-top:.5em;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(14px,1.15vw,16px); line-height:1.3;
  letter-spacing:.012em; text-transform:none;
  color:rgba(139,155,180,.92);
}
.footMarks{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(17px,2.3vw,28px);
  margin-top:clamp(22px,3.2vh,32px);
}
.footMarks a{
  /* .72 measured 4.05:1 on the ground — under the standing floor. */
  display:block; color:rgba(139,155,180,.92);
  transition:color .35s ease;
}
.footMarks a:hover{ color:var(--warm-gold); }
.footMarks svg{ display:block; }
.legalFoot .footKofi{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:clamp(20px,2.8vh,28px);
  color:rgba(201,168,117,.85);
}
.legalFoot .footKofi svg{ fill:currentColor; display:block; }
.legalFoot .footKofi:hover{ color:#ff5e5b; }
.footLegal{ margin-top:clamp(18px,2.6vh,26px); }
.legalFoot a{ color:rgba(201,168,117,.85); }
.legalFoot a:hover{ color:var(--warm-gold); }

@media (max-width: 860px), (hover: none){

  /* ── the band, and the drawer it opens ─────────────────────────── */
  .bandNav{ display:none; }
  /* the only way into the house on a phone: it should look like it knows
     that. A 44pt box, a stroke that carries against the band, and a
     press it answers. */
  .bandMenu{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; padding:0; margin-right:-12px;
    font-size:28px;                     /* the GLYPH, not only the box */
    color:rgba(244,231,206,.98);
  }
  .identMark{ width:30px; height:30px; }
  .bandNav.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    padding:6px 0 10px; background:#090c11;   /* opaque: a drawer, not a veil */
    border-top:1px solid rgba(201,168,117,.16);
    border-bottom:1px solid rgba(201,168,117,.16);
    box-shadow:0 22px 44px rgba(0,0,0,.6); z-index:70;
  }
  .bandNav.open > a,
  .bandNav.open .bandGroupToggle{
    padding:13px var(--edge); min-height:44px;   /* a real row, not a line */
    display:flex; align-items:center; width:100%;
  }
  /* in a drawer a group is an accordion: it opens in place, downward */
  .bandNav.open .bandGroup{ position:static; display:block; }
  .bandNav.open .bandGroupToggle{ justify-content:space-between; }
  .bandNav.open .bandDrop{
    position:static; transform:none; min-width:0; max-width:none;
    border:0; box-shadow:none; background:rgba(255,255,255,.028);
    padding:0; max-height:0; overflow:hidden;
    opacity:1; visibility:visible;
    transition:max-height .3s ease;
  }
  .bandNav.open .bandGroup.open .bandDrop{ max-height:260px; }
  .bandNav.open .bandDrop a{
    padding:12px var(--edge) 12px calc(var(--edge) + 18px); min-height:44px;
    display:flex; align-items:center;
  }
  /* a phone has no pointer to hover with; only the press opens a group */
  .bandNav.open .bandGroup:hover .bandDrop{ max-height:0; }
  .bandNav.open .bandGroup.open:hover .bandDrop{ max-height:260px; }

  /* ── the masthead ──────────────────────────────────────────────── */
  .masthead{ padding:clamp(16px,2.2vh,26px) var(--edge) clamp(14px,2vh,22px); }
  .mhDesc{ font-size:15.5px; line-height:1.45; }
  .mhCadence{ font-size:14px; margin-top:10px; }
  .mhMarks{ gap:6px; margin-top:14px; }
  .mhMarks a{ padding:11px; }            /* measured: 44x44, not 42 */
}