/* ============ The Clearing @ Fugue Gallery — shared styles ============
   THE ONE CLOCK: every duration and curve is a token from /tokens.css; the rules are
   in DESIGN.md (Motion). Motion belongs to thresholds only: arriving, reserving, so the
   landing has no scroll reveals (Sha, July 13, 2026). Literal values carry a `motion:` reason: the loader
   (tuned against fugue.js), the caret blink, the footer asterisks' three spin speeds
   and the hero's arrival stagger.
   =================================================================== */
:root{
  --maxw:1080px; --measure:680px;   /* colors, faces, time and curves: /tokens.css, loaded first */
  /* "Forma DJR Text" (the poster's bold sans) is not wired in yet. */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--serif);
  font-size:1.07rem; line-height:1.72; font-weight:var(--w-read);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 2rem;}
@media(max-width:640px){ .wrap{padding:0 1.3rem;} }
h1,h2,h3{font-weight:var(--w-head); line-height:1.12; margin:0; letter-spacing:-.01em;}
a{color:inherit; text-decoration:none;}
.label{font-family:var(--label); text-transform:uppercase; letter-spacing:.18em; font-weight:500;}
/* every link's underline and hover (.link, .flink, the event recap): /clearing/assets/links.css,
   one behavior for the whole site (Oct 7, 2026; the underline that drew in from the left is gone) */


/* ---------- nav ---------- */
nav.bar{position:fixed; top:0; left:0; right:0; z-index:40; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; transition:background var(--answer), color var(--answer), border-color var(--answer);
  border-bottom:1px solid transparent;}
@media(max-width:640px){ nav.bar{padding:.85rem 1.3rem;} }
nav.bar .logo{display:flex; align-items:center; gap:3px;}
nav.bar .logo img{display:block; filter:brightness(0) invert(1); transition:filter var(--answer);}
nav.bar .logo-word{height:30px;}
nav.bar .logo-star{height:16px; margin-bottom:12px; will-change:transform;}
nav.bar .actions{display:flex; align-items:center; gap:1.5rem;}
nav.bar.scrolled{color:var(--ink); background:rgba(244,242,236,.85); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); border-bottom-color:var(--line);}
nav.bar.scrolled .logo img{filter:none;}
/* magical-realism: after a reservation, the mark reads backwards — mirrored across the
   y-axis (no transition, so it's simply already like that when the screen fades back) */
body.reserved nav.bar .logo{transform:scaleX(-1);}
body.reserved [data-panel="reserve"]{display:none !important;}
body.reserved [data-panel="reserve"] + .fsep{display:none !important;}   /* drop the now-orphaned separator */
@media(max-width:640px){ .navlink{font-size:.62rem; letter-spacing:.1em;} nav.bar .actions{gap:1.1rem;} nav.bar .logo-word{height:24px;} nav.bar .logo-star{height:13px; margin-bottom:9px;} }

/* ---------- hero ---------- */
header.hero{position:relative; height:94vh; min-height:580px; overflow:hidden; display:flex; align-items:flex-end;}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center 40%; will-change:transform, filter; filter:grayscale(1);}
body.reserved .hero-img{filter:grayscale(0);}   /* the room blooms into color once you've reserved */
.hero-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.62) 100%);}
.hero-grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.16; mix-blend-mode:overlay; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");}
.hero .wrap{position:relative; z-index:3; width:100%; padding-bottom:clamp(2rem,4.5vh,3rem);}
.hero h1{color:#fff; font-size:clamp(3.6rem,10.5vw,7.6rem); font-weight:var(--w-head); letter-spacing:0; line-height:1.05;
  text-shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 26px rgba(0,0,0,.42);}
/* The Clearing's name is a drawing (assets/the-clearing.svg), not the script font, so it looks the same on every device.
   Sized in em, so the h1's font-size still sets it: its lowercase matches Snell Roundhand's at that size. */
.hero h1 .mark{display:block; width:4.643em; height:1.147em; fill:currentColor; overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.30)) drop-shadow(0 6px 26px rgba(0,0,0,.42));}
.hero h1 .venue{display:block; font-family:var(--serif); font-size:clamp(1.1rem,2.7vw,2rem); font-weight:var(--w-head); letter-spacing:0; color:rgba(255,255,255,.82); margin-top:.55rem; text-shadow:0 2px 20px rgba(0,0,0,.25);}
.hero .tagline{color:rgba(255,255,255,.9); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:clamp(1.05rem,2vw,1.4rem); margin-top:1rem;}
@media(max-width:640px){ .hero h1{font-size:13vw;} }

/* ---------- sections ---------- */
main{padding:clamp(2.2rem,5vh,3.4rem) 0 .25rem;}
section{padding:clamp(1.3rem,3vh,2.2rem) 0;}
.body{max-width:var(--measure); color:var(--ink-2);}
.body p{margin:0 0 1.15rem;}
.body p:last-child{margin-bottom:0;}
h2.eyebrow{font-family:var(--serif); font-size:1.12rem; font-weight:var(--w-read); color:var(--ink-2); margin-bottom:.7rem;}
ul.list{list-style:none; padding:0; margin:0 0 0 1.7rem; max-width:var(--measure);}
ul.list li{position:relative; padding:.3rem 0 .3rem .95rem; font-size:1.1rem; line-height:1.6;}
ul.list li::before{content:"✱"; position:absolute; left:0; top:.3rem; height:1.76rem; display:flex; align-items:center; font-size:.5rem; color:var(--ink);}
.mv{max-width:var(--measure);}
.mv .mvlabel{font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft); font-size:.95rem; margin:0 0 .25rem;}
.mv .mission{font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.4; color:var(--ink); margin:0;}
.mv .mission + .mvlabel{margin-top:1.5rem;}
.mv .vision{color:var(--ink-2); margin:0;}

/* ---------- footer ---------- */
footer{margin-top:clamp(.2rem,.6vh,.45rem); padding:clamp(.45rem,1.1vh,.7rem) 0 3.5rem;}
footer .flinks{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0 0 1rem;}
.flink{font-family:var(--serif); font-weight:var(--w-read); font-size:1.02rem; color:var(--soft); background:none; border:none; padding:.1rem 0; cursor:pointer; line-height:1.4;}
.fsep{color:var(--soft); user-select:none; position:relative; top:.12em; font-size:.95em; line-height:1;}
footer .coda{color:var(--soft); font-size:.98rem; margin:0;}

/* three slowly-spinning asterisks — a quiet divider between the page and the footer */
.ftop{width:fit-content; max-width:100%;}
.fdiv{display:flex; justify-content:center; gap:.95rem; align-items:center; color:var(--soft); font-size:.66rem; margin:0 0 1.9rem;}
.fdiv span{display:inline-block;}
@media (prefers-reduced-motion: no-preference){
  .fdiv span{animation:fspin 17s linear infinite;}   /* motion: the asterisks keep three unrelated speeds */
  .fdiv span:nth-child(2){animation-duration:23s; animation-direction:reverse;}   /* motion: asterisk */
  .fdiv span:nth-child(3){animation-duration:19s;}   /* motion: asterisk */
  @keyframes fspin{to{transform:rotate(360deg)}}
}

/* push-down panels (calendar / reserve / contact) — left-aligned with the body */
.panel{max-height:0; overflow:hidden; opacity:0; visibility:hidden; padding:0;
  transition:max-height var(--t-exhale) var(--ease-exhale), opacity var(--t-exhale) var(--ease-exhale), visibility 0s var(--t-exhale);}
.panel.open{opacity:1; visibility:visible; transition:max-height var(--t-exhale) var(--ease-breath), opacity var(--t-exhale) var(--ease-breath), visibility 0s 0s;}
@media (prefers-reduced-motion: reduce){ .panel, .panel.open{transition:none;} }
.panel-inner{max-width:var(--measure); padding-top:2.2rem; margin-top:1.6rem; border-top:1px solid var(--line-2);}
.panel .r-inner{max-width:440px;}
.panel-kicker{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--ink); font-size:1.2rem; margin:0 0 1.3rem;}
.panel-lede{color:var(--soft); margin:0 0 2rem; max-width:48ch;}

/* ---------- first-load choreography (arrival is a threshold; the middle of the page never animates) ---------- */
.rise{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  /* hero pieces wait for the loader, then drift up in sequence */
  body.js .rise{opacity:0; transform:translateY(22px); filter:blur(3px);
    transition:opacity var(--t-exhale) var(--ease-breath), transform var(--t-exhale) var(--ease-breath), filter var(--t-exhale) var(--ease-breath);}
  body.go .rise{opacity:1; transform:none; filter:none;}
  body.go .rise.d2{transition-delay:.25s;}   /* motion: the hero's arrival, a beat after the page */
  /* the name drawing itself in (fugue.js): it waits unseen until the pen is ready, and the venue waits until it's drawn */
  body.js .hero h1.drawing:not(.ready) .mark{visibility:hidden;}
  body.go .hero h1.drawing .venue.rise{opacity:0; transform:translateY(22px); filter:blur(3px);}
  .hero-img{transform:scale(1.08); transition:transform calc(var(--t-exhale)*5) var(--ease-breath), filter calc(var(--t-exhale)*1.5) var(--ease-breath);}   /* motion: the hero's slow settle, five exhales (the landing, behind its veil) */
  body.go .hero-img{transform:scale(1);}
}

/* ---------- page-transition veil (cream curtain) ---------- */
#veil{position:fixed; inset:0; z-index:150; background:var(--paper); opacity:1; pointer-events:none;
  transition:opacity var(--answer);}
#veil.gone{opacity:0;}

/* ---------- loading screen (abstract music notes) ---------- */
#loader{position:fixed; inset:0; z-index:200; background:#0e0b07; overflow:hidden;}
#loader svg{position:absolute; inset:0; width:100%; height:100%;}
#loader .note{fill:none; stroke:#f4f2ec; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
#loader .fillwhite{position:absolute; inset:0; background:#f4f2ec; opacity:0; transition:opacity .7s ease;}   /* motion: the loader, tuned against fugue.js */
#loader.fill .fillwhite{opacity:1;}
#loader.done{opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s .6s;}   /* motion: the loader */

/* ---------- reserve: full panel that slides down ---------- */
#reserve{position:fixed; inset:0; z-index:120; background:var(--paper);
  transform:translateY(-100%); transition:transform var(--t-exhale) var(--ease-breath);
  overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; padding:clamp(3.5rem,12vh,8rem) 1.3rem 3rem;}
#reserve.open{transform:translateY(0);}
.r-inner{width:100%; max-width:440px;}
.r-close{position:fixed; top:1.4rem; right:1.6rem; width:34px; height:34px; border:none; background:none; color:var(--soft); font-size:1.5rem; line-height:1; cursor:pointer; z-index:2; transition:color var(--answer-hover);}
.r-close:hover{color:var(--ink);}
.r-kicker{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft); font-size:1rem; margin-bottom:.4rem;}
#reserve h2{font-size:2rem; margin-bottom:.4rem;}
.r-sub{color:var(--soft); margin-bottom:2rem;}
.r-field{margin-bottom:1.6rem;}
.r-field > label{display:block; font-family:var(--label); font-weight:400; font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--soft); margin-bottom:.6rem;}
.r-inner select, .r-inner input, .r-inner textarea{width:100%; font-family:var(--serif); font-weight:var(--w-read); font-size:1.05rem; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:.5rem 0; transition:border-color var(--answer);}
.r-inner option{font-weight:var(--w-read);}   /* the browser's own is 400 */
.r-inner select:focus, .r-inner input:focus, .r-inner textarea:focus{outline:none; border-bottom-color:var(--ink);}
.r-inner textarea{resize:none; min-height:2.4rem; line-height:1.5;}

/* party dots */
.dots{display:flex; gap:1.1rem; align-items:center;}
.dot{width:20px; height:20px; border-radius:50%; border:1px solid var(--ink); background:transparent; cursor:pointer; padding:0;
  transition:background var(--answer);}   /* a choice: it fills; it never grows on hover */
.dot.on{background:var(--ink);}
.r-note{font-size:.82rem; color:var(--soft); margin-top:2.2rem; line-height:1.5;}

/* slide to reserve — a dial: drag the dot counter-clockwise from 12, a full turn back to 12 */
.rcirc{position:relative; width:148px; height:148px; margin:1.8rem auto .2rem; touch-action:none; user-select:none; cursor:pointer;}
.rcirc svg{display:block; width:148px; height:148px; overflow:visible;}
.rc-track{fill:none; stroke:var(--line); stroke-width:1.4;}
.rc-prog{fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; transition:none;}
.rc-thumb{fill:var(--ink); cursor:grab;}
.rcirc:active .rc-thumb{cursor:grabbing;}
.rc-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:.98rem; color:var(--soft); pointer-events:none; padding:0 1.7rem; line-height:1.3;
  transition:opacity var(--answer);}
.rcirc.done{cursor:default;}
.rcirc.done .rc-thumb{cursor:default;}

/* ---------- confirmation (black screen + typewriter) ---------- */
#confirm{position:fixed; inset:0; z-index:300; background:#0a0908; color:#f4f2ec;
  display:none; align-items:center; justify-content:center; padding:2rem; opacity:0; transition:opacity var(--t-exhale) var(--ease-breath);}
#confirm.show{display:flex; opacity:1;}
@media (prefers-reduced-motion: reduce){ #confirm{transition:none;} }
.confirm-inner{max-width:520px; width:100%; font-family:var(--label); font-weight:400; font-size:.84rem; line-height:2.1; letter-spacing:.04em;}
.confirm-inner .cl{margin:0; min-height:1.2em; white-space:pre-wrap;}
.confirm-inner .cl.big{font-family:var(--serif); font-size:1.25rem; letter-spacing:0; line-height:1.5; margin-bottom:1.4rem;}
.confirm-inner .cap{display:inline-block; width:.5ch; background:#f4f2ec; animation:capblink 1s steps(1) infinite;}   /* motion: a cursor's blink */
@keyframes capblink{50%{opacity:0}}
.elevator{display:block; margin:1.8rem 0; width:120px; height:150px;}
.elevator path,.elevator line,.elevator rect{fill:none; stroke:#f4f2ec; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- calendar page ---------- */
.cal-page{padding-top:clamp(5rem,12vh,7rem);}
.cal-page .kicker{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft); font-size:1rem; margin-bottom:.4rem;}
.cal-page h1{font-size:clamp(2rem,5vw,3rem); margin-bottom:.6rem;}
.cal-page .lede{color:var(--soft); max-width:46ch; margin-bottom:2.6rem;}
.cal-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start;}
@media(max-width:720px){ .cal-grid{grid-template-columns:1fr; gap:2.2rem;} }
.events{display:grid; gap:0;}
.event-card{padding:1rem 0; border-top:1px solid var(--line-2);}
.event-card:first-child{border-top:none;}
.event-card .date{font-family:var(--label); font-weight:400; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--soft);}
.event-card .etitle{font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:1.12rem; margin:.25rem 0 .35rem;}
.event-card .roles{font-size:.95rem; color:var(--soft); display:grid; gap:.12rem;}
.event-card .roles b{color:var(--ink); font-weight:calc(var(--w-read) + 200);}
.event-card .ev-recap{display:inline-block; margin-top:.7rem; font-family:var(--label); font-weight:400; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink);}
.event-card.is-active .date{color:var(--ink);}
.month-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.month-head .mname{font-size:1.25rem;}
.month-nav{display:flex; gap:.4rem;}
.month-nav button{font-family:inherit; font-weight:var(--w-read); width:30px; height:30px; border-radius:0; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; font-size:1rem; line-height:1; transition:color var(--answer-hover), border-color var(--answer-hover);}
.month-nav button:hover{color:var(--ink); border-color:var(--ink);}   /* hover only deepens color */
table.cal{width:100%; border-collapse:collapse; text-align:center;}
table.cal th{font-family:var(--label); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:500; padding-bottom:.6rem;}
table.cal td{padding:2px; height:42px;}
.day{width:38px; height:38px; line-height:38px; margin:0 auto; border-radius:0; font-size:.92rem; color:var(--ink-2);}
.day.empty{color:transparent;}
.day.event{cursor:pointer;}
.day.session{background:var(--ink); color:var(--paper); font-weight:calc(var(--w-read) + 200);}
.day.gallery{box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink);}
.day.is-active{outline:2px solid var(--ink); outline-offset:2px;}
.cal-legend{display:flex; gap:1.4rem; margin-top:1.1rem; font-family:var(--label); font-weight:400; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); flex-wrap:wrap;}
.cal-legend span{display:inline-flex; align-items:center; gap:.45rem;}
.swatch{width:13px; height:13px; border-radius:0; display:inline-block;}
.swatch.s{background:var(--ink);} .swatch.g{box-shadow:inset 0 0 0 1.5px var(--ink);}
.cal-foot{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line-2); font-size:.95rem; color:var(--soft);}