/* ============================================================
   aminfarhang.com — design system
   One stylesheet. Every page links this file and nothing else.

   1. tokens          the only place colour, type and motion live
   2. base            reset, links, rules, mono label
   3. layout          .col .wide section hr, the dark band
   4. chrome          ticker, masthead, rail, tweaks panel, heat
   5. components      globe, stage, places, now, work, index,
                      board, scrubber, pull, footer, easter eggs
   6. archive         the /rooms page: rooms drawn to scale
   7. modes           ink, setting, motion, heat
   ============================================================ */

:root{
  --paper:#EDEAD4;
  --ink:#14261B;
  --soft:#5C6A5B;
  --faint:#CFCBA9;
  --green:#1E5B37;
  --chili:#BC4227;
  --serif:"Instrument Serif","Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.72;-webkit-font-smoothing:antialiased}
.col{max-width:660px;margin:0 auto;padding-left:28px;padding-right:28px;position:relative;z-index:2}

/* oversized background forms, concept B folded in where the globe is faded or covered */
.hasForm{overflow:hidden}
.formLayer{position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;overflow:visible;will-change:transform}
.formLayer svg{position:absolute;stroke:var(--green);fill:none;opacity:.15}
.darkBand .formLayer svg{stroke:#8FD8A6;opacity:.2}
.ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;will-change:transform;
  font-family:var(--serif);font-size:clamp(200px,34vw,560px);line-height:.76;letter-spacing:-.045em;
  color:var(--green);opacity:.07}
.darkBand .ghost{color:#8FD8A6;opacity:.1}
.wide{max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--faint);transition:border-color .2s}
a:hover{border-color:var(--chili)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
hr{border:none;border-top:1px solid var(--faint);margin:0}

/* ticker: a slow exchange board pinned to the top */
.ticker{position:fixed;top:0;left:0;right:0;z-index:60;height:32px;display:flex;align-items:stretch;
  overflow:hidden;background:var(--ink);color:#E6E3CB;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.ticker .live{flex:none;display:flex;align-items:center;padding:0 15px;background:var(--green);
  color:#EAF6EC;letter-spacing:.18em}
.ticker .live::before{content:"";width:5px;height:5px;border-radius:50%;background:#9FE0B4;
  margin-right:9px;animation:tickblink 2.4s infinite}
@keyframes tickblink{0%,100%{opacity:1}50%{opacity:.2}}
.tickwrap{flex:1;overflow:hidden;display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent)}
.tickrun{display:flex;white-space:nowrap;animation:tickrun 78s linear infinite;will-change:transform}
.tickrun span{padding:0 24px;opacity:.72}
.tickrun b{color:#9FE0B4;font-weight:400;opacity:1}
.tickrun i{font-style:normal;color:#6E7F6C;padding:0}
@keyframes tickrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tickrun{animation:none}.ticker .live::before{animation:none}}
@media(max-width:640px){.ticker{height:28px;font-size:9.5px}.ticker .live span{display:none}}

/* masthead */
.mast{padding-top:58px;max-width:1000px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.mast .name{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em;border:none}
.mast .name i{font-style:italic;color:var(--green)}

/* the globe is a fixed layer behind the entire page */
#globeLayer{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:opacity}
#globe{position:absolute;top:50%;right:-15%;transform:translateY(-50%);
  width:min(126vh,1220px);height:min(126vh,1220px);touch-action:none;cursor:grab;pointer-events:auto}
.stage,.places,section,footer,hr{position:relative;z-index:1}
/* let clicks in the page margins fall through to the globe behind */
.stage,.places,section,footer{pointer-events:none}
.col,.wide,.mastAbs,.stageHint{pointer-events:auto}

/* stage: full-viewport opening */
.stage{min-height:100vh;display:flex;align-items:center;padding-top:124px;padding-bottom:76px}
.stage::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(237,234,212,.95) 0%,rgba(237,234,212,.7) 45%,rgba(237,234,212,0) 100%)}
.mastAbs{position:absolute;top:0;left:0;right:0;z-index:3}
.stageText{position:relative;z-index:2;max-width:1180px;width:100%;pointer-events:none}
.stageText p{pointer-events:auto}
.mastAbs{pointer-events:none}
.mastAbs a,.mastAbs .mono{pointer-events:auto}
.lead{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.1vw,78px);line-height:.98;
  letter-spacing:-.03em;max-width:13ch;margin-bottom:28px}
.lead i{font-style:italic;color:var(--green)}
.leadSub{font-size:17px;line-height:1.66;color:#3E4E3F;max-width:46ch}
.stageHint{position:absolute;left:0;right:0;bottom:30px;z-index:2;display:flex;
  align-items:center;justify-content:center;gap:16px}
.zoomBtn{font-family:var(--mono);font-size:13px;line-height:1;width:28px;height:28px;cursor:pointer;
  border:1px solid var(--faint);background:transparent;color:var(--soft);border-radius:3px;
  transition:all .18s;display:flex;align-items:center;justify-content:center}
.zoomBtn:hover{color:var(--ink);border-color:#B9B593}

/* full-bleed dark band */
.darkBand{background:var(--ink);color:var(--paper);padding-top:110px;padding-bottom:110px}
.darkBand h2{color:var(--paper)}
.darkBand h2 i{color:#8FD8A6}
.darkBand .lab{color:#E2765C}
.darkBand p{color:rgba(237,234,212,.82)}
.darkBand .soft{color:rgba(237,234,212,.58)}
.darkBand .pull{color:#9FE0B4;border-left-color:#E2765C}
.darkBand .idxItem{border-bottom-color:rgba(237,234,212,.18)}
.darkBand .idxItem .y{color:rgba(237,234,212,.5)}

/* places: name and skyline standing on one shared horizon */
.places{padding-top:60px;padding-bottom:26px;max-width:1080px}
.placesLead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:2px}
.city{cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) min(56%,620px);gap:0 44px;align-items:end;
  padding-top:30px;border-bottom:1px solid var(--faint);transition:border-color .3s}
.city:hover,.city.on{border-bottom-color:var(--chili)}
.cyMeta{display:flex;align-items:baseline;gap:16px;margin-bottom:9px}
.cyIdx{opacity:.5}
.cyYr{color:var(--soft)}
.cyDesc{color:var(--soft);font-size:14.6px;line-height:1.5;max-width:38ch;margin-bottom:14px}
.cyName{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,62px);
  line-height:.8;letter-spacing:-.028em;transition:color .26s,transform .3s;
  transform-origin:0 100%;display:block}
.city:hover .cyName,.city.on .cyName{color:var(--chili)}
.cySky{color:#17512F;width:100%;justify-self:end}
.cySky svg{width:100%;height:auto;display:block;margin-bottom:-1px}
/* skylines rendered as dots, same language as the globe and the portrait */
.cySky svg path,.cySky svg line,.cySky svg rect,.cySky svg circle{stroke-dasharray:.1 9;stroke-linecap:round}
.cySky g.skyMain{stroke-width:3.6}
.cySky g.skyDet{stroke-width:2.9}
/* living details: palms sway, the Eye turns, jets fly over on hover or focus */
.cySky .fr{transform-box:fill-box;transform-origin:50% 100%}
.cySky .eye{transform-box:fill-box;transform-origin:50% 50%}
.cySky .jets{opacity:0;transition:opacity .3s}
.city:hover .fr,.city.on .fr{animation:sway var(--sw,3.6s) ease-in-out var(--sd,0s) infinite alternate}
.city:hover .eye,.city.on .eye{animation:eyespin 30s linear infinite}
.city:hover .jets,.city.on .jets{opacity:.8;animation:flyover 8s linear infinite}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(6.5deg)}}
@keyframes eyespin{to{transform:rotate(360deg)}}
@keyframes flyover{from{transform:translateX(-180px)}to{transform:translateX(1470px)}}
@media(prefers-reduced-motion:reduce){.cySky .fr,.cySky .eye,.cySky .jets{animation:none!important}.city:hover .jets,.city.on .jets{opacity:.8}}
.cySky .skyMain{opacity:.42;transition:opacity .34s ease}
.cySky .skyDet{opacity:.3;transition:opacity .34s ease}
.cySky .gnd{stroke:var(--faint);transition:stroke .28s ease}
.city:hover .cySky .skyMain,.city.on .cySky .skyMain{opacity:1}
.city:hover .cySky .skyDet,.city.on .cySky .skyDet{opacity:.7}
.city:hover .cySky .gnd,.city.on .cySky .gnd{stroke:var(--chili)}
.earlyLabel{padding:40px 0 0;color:var(--soft);opacity:.8}
/* earlier: a quiet two-line list, deliberately without artwork */
.city.early{display:block;padding-top:0;border-bottom:1px solid var(--faint)}
.city.early .ecRow{display:grid;grid-template-columns:30px minmax(0,190px) minmax(0,1fr) auto;
  gap:18px;align-items:baseline;padding:17px 0;transition:padding-left .22s}
.city.early:hover .ecRow,.city.early.on .ecRow{padding-left:10px}
.city.early:hover,.city.early.on{border-bottom-color:var(--faint)}
.ecName{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.1;
  letter-spacing:-.015em;color:var(--soft);transition:color .24s}
.city.early:hover .ecName,.city.early.on .ecName{color:var(--chili)}
.ecDesc{color:var(--soft);opacity:.78;font-size:13.8px;line-height:1.5}
@media(max-width:860px){
  .city{grid-template-columns:minmax(0,1fr);gap:0}
  .cySky{width:100%;justify-self:stretch;margin-top:14px}
  .cySky .skyMain{opacity:.5}
  .city.early .ecRow{grid-template-columns:26px 1fr;gap:4px 14px}
  .ecDesc{grid-column:2}
  .city.early .cyYr{grid-column:2}
  .cyDesc{max-width:none;margin-bottom:10px}
  .cyName{line-height:.92}
}


/* sections */
section{padding-top:76px;padding-bottom:76px}
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chili);margin-bottom:34px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.2vw,74px);line-height:1.0;
  letter-spacing:-.02em;margin-bottom:30px}
h2 i{font-style:italic;color:var(--green)}
p+p{margin-top:19px}
.soft{color:var(--soft)}

/* now list */
.now{display:flex;flex-direction:column;gap:0}
.nowRow{display:grid;grid-template-columns:168px 1fr;gap:22px;padding:22px 0;
  border-bottom:1px solid var(--faint);align-items:center;transition:padding-left .22s}
.nowRow:first-child{border-top:1px solid var(--faint)}
.nowRow:hover{padding-left:12px}
.nowRow .k{font-family:var(--serif);font-size:25px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.nowRow .v{font-size:15.5px;color:var(--soft)}
.nowRow .v a{color:var(--ink)}

/* work list */
.wk{display:grid;grid-template-columns:1fr 132px;gap:24px;padding:24px 0;border-bottom:1px solid var(--faint);align-items:baseline}
.wk:first-of-type{border-top:1px solid var(--faint)}
.wk h3{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.06;letter-spacing:-.018em;margin-bottom:8px}
.wk .r{font-size:14.5px;color:var(--soft)}
.wk .y{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-align:right}

/* index */
.idx{columns:2;column-gap:44px}
.idxItem{break-inside:avoid;padding:11px 0;border-bottom:1px solid var(--faint);display:flex;
  justify-content:space-between;gap:16px;align-items:baseline}
.idxItem .t{font-size:14.4px;line-height:1.4}
.idxItem .s{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  margin-top:5px;opacity:.62}
.idxItem .y{font-family:var(--mono);font-size:10px;color:var(--soft);flex:none}

/* pull */
.pull{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.05;
  letter-spacing:-.022em;color:var(--green);padding-left:28px;border-left:2px solid var(--chili);margin:52px 0}

footer{padding-top:20px;padding-bottom:44px;margin-top:30px}
.contact{background:var(--ink);color:var(--paper);border-radius:8px;padding:62px 58px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.contact h2{color:var(--paper);margin-bottom:16px;font-size:clamp(34px,4.2vw,58px)}
.contact h2 i{color:#9FE0B4}
.contact p{color:rgba(237,234,212,.74);font-size:16.5px;max-width:42ch}
.contact p.colophon{margin-top:28px;font-family:var(--mono);font-size:10.5px;line-height:1.9;
  letter-spacing:.06em;color:rgba(237,234,212,.4);max-width:46ch;text-transform:none}
.cList{display:flex;flex-direction:column}
.cRow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;
  border-bottom:1px solid rgba(237,234,212,.16);border-top:none;text-decoration:none;
  font-size:15.5px;transition:padding-left .2s,border-color .2s}
.cRow:hover{padding-left:8px;border-bottom-color:#9FE0B4}
.cRow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,234,212,.5);flex:none}
.cRow .v{color:var(--paper);text-align:right}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:36px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft)}
@media(max-width:900px){
  .contact{grid-template-columns:1fr;padding:44px 30px;gap:34px}
  .cRow .v{font-size:14.5px}
}


/* portrait, drawn as dots like everything else */
.portrait{width:132px;height:auto;display:block;opacity:.92}
.portraitWrap{position:relative;width:132px;margin-bottom:24px}

/* contact icons */
.flinks a{display:flex;align-items:center;gap:11px;border-bottom:none;padding:3px 0}
.flinks a span{border-bottom:1px solid rgba(237,234,212,.28);transition:border-color .2s}
.flinks a:hover span{border-color:#E2765C}
.flinks svg{width:17px;height:17px;flex:none;opacity:.8}

/* easter egg one: the asterisk next to the name */
.name .rh{display:inline-block;width:0;overflow:visible;vertical-align:-2px;margin-left:0;
  opacity:0;transform:rotate(-90deg) scale(.4);transition:opacity .34s,transform .5s cubic-bezier(.2,.8,.3,1),margin-left .34s}
.name:hover .rh{opacity:1;transform:rotate(0) scale(1);margin-left:11px;width:auto}
.name .rh svg{width:19px;height:19px;display:block;fill:var(--chili)}

/* easter egg two: the tattoo pair, flips to a plate */
.tattoo{position:relative;width:210px;height:112px;margin-top:26px;cursor:default}
.tattooArt{position:absolute;inset:0;display:flex;align-items:center;gap:20px;
  transition:opacity .38s ease,transform .38s ease}
.tattooArt svg{stroke:rgba(237,234,212,.72);fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.tattooArt .ca{width:58px;height:auto}
.tattooArt .chili{width:46px;height:auto}
.tattoo:hover .tattooArt{opacity:0;transform:translateY(-8px)}
.plate{position:absolute;left:0;top:2px;width:198px;background:#F3F1E6;border:2px solid #1B3A87;
  border-radius:9px;padding:7px 10px 9px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;transform:translateY(10px) rotate(-3deg);transition:opacity .38s ease,transform .44s cubic-bezier(.2,.8,.3,1)}
.tattoo:hover .plate{opacity:1;transform:translateY(0) rotate(-3deg)}
.plate .cal{font-family:"Yellowtail",cursive;font-size:19px;line-height:1;color:#C2182B;margin-bottom:2px}
.plate .num{font-family:var(--sans);font-weight:700;font-size:27px;line-height:1.05;color:#1B3A87;
  letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:5px}
.plate .num .hz{color:#C2182B;font-size:21px}
.plate .yr{font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:#1B3A87;opacity:.75;margin-top:1px}


.subscribe{display:inline-flex;align-items:center;gap:10px;margin-top:30px;border:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:15px 24px;border-radius:3px;transition:background .2s}
.subscribe:hover{background:var(--green);color:var(--paper);border:none}
.fineprint{font-size:13.2px;margin-top:20px;max-width:52ch;opacity:.85}
strong{font-weight:600}

footer{position:relative;overflow:hidden}
footer .col{position:relative;z-index:2}
.city:focus-visible{outline:2px solid var(--chili);outline-offset:4px}

@media(max-width:760px){
  .portrait,.portraitWrap{width:150px}
  .tattoo{margin-top:20px}
}

@media(max-width:760px){
  .cyDesc{font-size:13.6px;line-height:1.55}
  .idx{columns:1}
  .wk{grid-template-columns:1fr;gap:6px}
  .wk .y{text-align:left}
  .nowRow{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .nowRow .k{font-size:22px}
  .col,.wide{padding-left:22px;padding-right:22px}
  .opening{padding-top:52px;padding-bottom:60px}
  .opening p{font-size:clamp(23px,6.4vw,29px)}
  section{padding-top:60px;padding-bottom:60px}
  .places{padding-top:52px;padding-bottom:52px}
}
/* ============ v2 additions ============ */
/* scroll progress hairline inside the ticker */
.tickProg{position:absolute;left:0;bottom:0;height:2px;background:var(--chili);width:0;z-index:2;transition:width .12s linear}
.ticker{position:fixed}
/* section rail */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:14px;align-items:flex-end;pointer-events:auto}
.rail button{appearance:none;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);opacity:.45;transition:opacity .25s,color .25s}
.rail button .dot{width:5px;height:5px;border-radius:50%;background:currentColor;transition:transform .3s,background .25s}
.rail button .txt{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap}
.rail:hover button .txt{opacity:1;transform:none}
.rail button:hover{opacity:1;color:var(--chili)}
.rail button[aria-current="true"]{opacity:1;color:var(--chili)}
.rail button[aria-current="true"] .dot{transform:scale(2.1)}
@media(max-width:860px){.rail{display:none}}
/* live coordinate readout over the globe */
.coord{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--faint);padding:5px 10px;border-radius:2px;background:rgba(237,234,212,.7);
  opacity:0;transition:opacity .2s;min-width:186px;text-align:center}
.coord.on{opacity:1}
.coord b{font-weight:400;color:var(--chili)}
/* heat switch */
.heat{appearance:none;background:none;border:1px solid var(--faint);border-radius:2px;cursor:pointer;padding:4px 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
  display:inline-flex;align-items:center;gap:7px;transition:color .25s,border-color .25s}
.heat:hover{color:var(--chili);border-color:var(--chili)}
.heat .pod{width:16px;height:6px;background:var(--faint);position:relative;transition:background .3s}
.heat .pod::after{content:"";position:absolute;top:-2px;left:0;width:6px;height:10px;background:var(--soft);transition:transform .32s cubic-bezier(.2,.8,.3,1),background .3s}
body.hot .heat{color:var(--chili);border-color:var(--chili)}
body.hot .heat .pod{background:rgba(188,66,39,.3)}
body.hot .heat .pod::after{transform:translateX(10px);background:var(--chili)}
body.hot .lead i,body.hot h2 i,body.hot .mast .name i,body.hot .pull{color:var(--chili)}
body.hot .pull{border-left-color:var(--green)}
body.hot .darkBand h2 i{color:#E2765C}
/* split-flap stat board */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(237,234,212,.16);
  border:1px solid rgba(237,234,212,.16);margin:44px 0 8px}
.board .cell{background:var(--ink);padding:22px 18px 18px}
.flip{display:flex;align-items:baseline;gap:2px;font-family:var(--serif);font-size:clamp(30px,3.6vw,50px);line-height:1;letter-spacing:-.02em;color:#9FE0B4}
.flip .d{display:inline-block;height:1em;overflow:hidden;position:relative}
.flip .d .strip{display:block;transition:transform 1.1s cubic-bezier(.16,.84,.28,1)}
.flip .suf{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#E2765C;margin-left:5px;align-self:center}
.board .cLab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,234,212,.45);margin-top:14px}
@media(max-width:860px){.board{grid-template-columns:repeat(2,1fr)}}
/* year scrubber */
.scrub{margin:6px 0 34px;user-select:none}
.scrubHead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.scrubYear{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--chili)}
.scrubTrack{position:relative;height:38px;cursor:ew-resize;touch-action:none}
.scrubTrack::before{content:"";position:absolute;left:0;right:0;top:18px;border-top:1px solid var(--faint)}
.scrubTick{position:absolute;top:12px;width:1px;height:8px;background:var(--faint);transition:background .2s,height .2s}
.scrubTick.act{background:var(--chili);height:14px;top:8px}
.scrubTick span{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--soft);opacity:.55}
.scrubHandle{position:absolute;top:9px;width:14px;height:14px;border-radius:50%;background:var(--chili);
  margin-left:-7px;box-shadow:0 0 0 5px rgba(188,66,39,.14);transition:box-shadow .2s}
.scrubTrack:hover .scrubHandle{box-shadow:0 0 0 9px rgba(188,66,39,.16)}
.wk,.idxItem{transition:opacity .35s,filter .35s}
.wk.dim,.idxItem.dim{opacity:.24}
.wk.hit{position:relative}
.wk.hit::before{content:"";position:absolute;left:-16px;top:26px;width:5px;height:5px;border-radius:50%;background:var(--chili)}
/* scramble labels */
.lab,.mono{--scr:0}

/* ============ tweaks: ink / setting / motion ============ */
body.th-newsprint{--paper:#F2F1EA;--ink:#111310;--soft:#5D5F59;--faint:#D6D4C9;--green:#37413A;--chili:#B23A20}
body.th-newsprint .darkBand,body.th-newsprint .contact{background:#1A1C19}
body.th-newsprint .darkBand h2 i{color:#C9C6B4}
body.th-night{--paper:#0F1D15;--ink:#E9E6CE;--soft:#93A493;--faint:rgba(233,230,206,.20);--green:#8FD8A6;--chili:#E2765C}
body.th-night .darkBand{background:#16291D}
body.th-night .contact{background:#16291D;border:1px solid rgba(233,230,206,.14)}
body.th-night .stage::before{background:linear-gradient(180deg,rgba(15,29,21,.95) 0%,rgba(15,29,21,.7) 45%,rgba(15,29,21,0) 100%)}
body.th-night .ticker{background:#081109}
body.th-night .coord{background:rgba(15,29,21,.72)}
body.th-night .board .cell{background:#0B1710}
body.set-broadsheet .col{max-width:720px}
body.set-broadsheet .lead{font-size:clamp(42px,6.2vw,96px);max-width:15ch;letter-spacing:-.035em}
body.set-broadsheet h2{font-size:clamp(40px,5.9vw,84px)}
body.set-broadsheet section{padding-top:54px;padding-bottom:54px}
body.set-broadsheet .places{padding-top:40px}
body.set-broadsheet .city{padding-top:20px}
body.set-broadsheet .nowRow,body.set-broadsheet .wk{padding-top:15px;padding-bottom:15px}
body.set-broadsheet .idxItem{padding:7px 0}
body.set-broadsheet p{line-height:1.58}
body.set-gallery .col{max-width:600px}
body.set-gallery .lead{font-size:clamp(40px,5.6vw,86px);max-width:11ch}
body.set-gallery section{padding-top:132px;padding-bottom:132px}
body.set-gallery .places{padding-top:104px}
body.set-gallery .city{padding-top:52px}
body.set-gallery .nowRow,body.set-gallery .wk{padding-top:34px;padding-bottom:34px}
body.set-gallery .lab{margin-bottom:52px}
body.set-gallery .idx{columns:1}
body.mo-still *,body.mo-still *::before,body.mo-still *::after{animation-play-state:paused!important}
body.mo-restrained .tickrun{animation-duration:150s}
body.mo-restrained .cySky .jets{animation-duration:16s}
#tw{position:fixed;right:16px;bottom:16px;z-index:9999;width:250px;background:var(--paper);border:1px solid var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:none}
#tw.on{display:block}
#tw header{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:1px solid var(--ink);cursor:move;background:var(--ink);color:var(--paper)}
#tw header b{font-weight:400;letter-spacing:.2em}
#tw header button{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0 2px}
#tw .grp{padding:12px 11px;border-bottom:1px solid var(--faint)}
#tw .gl{color:var(--soft);margin-bottom:8px;display:block}
#tw .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--faint)}
#tw .seg button{appearance:none;background:none;border:0;border-right:1px solid var(--faint);cursor:pointer;font:inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding:7px 3px;transition:background .18s,color .18s}
#tw .seg button:last-child{border-right:0}
#tw .seg button:hover{color:var(--chili)}
#tw .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#tw .note{padding:9px 11px;color:var(--soft);text-transform:none;letter-spacing:.04em;font-size:9.5px;line-height:1.6;opacity:.8;border-top:1px solid var(--faint)}

/* ============================================================
   6. archive — the /rooms page
   Rooms drawn to scale. Two marks and one rule: a green dot is
   ten people in a room, a chili dot is one person who built it.
   Every number on that page is the same mark at a different
   zoom, so the blocks are directly comparable by eye.
   ============================================================ */

.archLead{padding-top:118px;padding-bottom:10px}
.archLead .lead,.archLead .leadSub{max-width:20ch}
.archLead .leadSub{max-width:52ch}
.archLead .legend,.archLead .board{max-width:840px}
#after .wide>*{max-width:60ch}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:38px}
.crumb a{border-bottom:none;color:var(--soft);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.crumb a:hover{color:var(--chili)}
.crumb .sep{color:var(--faint)}
.crumb .here{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chili)}

/* the legend states the unit once, then never again */
.legend{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;padding:18px 0;
  border-top:1px solid var(--faint);border-bottom:1px solid var(--faint)}
.legendKey{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.legendKey .swatch{display:flex;gap:3px}
.legendKey .swatch i{width:5px;height:5px;border-radius:50%;background:var(--green);display:block}
.legendKey.crew .swatch i{background:var(--chili)}

/* two columns: the archive scrolls, the whole stays put */
.archGrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 64px;
  align-items:start;max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px}
.archAside{position:sticky;top:72px;padding-top:10px}
.archAside .asideLab{margin-bottom:16px}
.whole{width:100%;height:auto;display:block}
.wholeRead{margin-top:16px;padding-top:14px;border-top:1px solid var(--faint);min-height:66px}
.wholeRead .wName{font-family:var(--serif);font-size:23px;line-height:1.15;letter-spacing:-.015em;
  color:var(--chili);transition:opacity .3s}
.wholeRead .wNum{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin-top:6px;display:block}

/* one entry, one room */
.entry{padding:40px 0;border-bottom:1px solid var(--faint);position:relative;
  transition:opacity .35s,filter .35s}
.entry:first-of-type{border-top:1px solid var(--faint)}
.entryHead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline}
.entry h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,38px);
  line-height:1.04;letter-spacing:-.02em}
.entry h3 i{font-style:italic;color:var(--green)}
.entryYear{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);white-space:nowrap;text-align:right}
.entryRole{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);margin-top:11px;opacity:.85}
.entry p{margin-top:16px;max-width:54ch}
.entry .tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chili);border:1px solid rgba(188,66,39,.38);
  border-radius:2px;padding:3px 7px;line-height:1;margin-left:10px;vertical-align:2px}

/* the room itself, drawn to scale */
.room{margin-top:24px;display:flex;flex-direction:column;gap:9px;max-width:520px}
.room canvas{display:block;width:100%;height:auto}
.roomCap{display:flex;flex-wrap:wrap;gap:0 20px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.roomCap b{font-weight:400;color:var(--ink)}
.roomCap .cr{color:var(--chili)}
.roomNone{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);opacity:.7;border-left:1px solid var(--faint);padding-left:12px;margin-top:24px}

.entry .evLinks{margin-top:22px;display:flex;flex-wrap:wrap;gap:22px}
.evLink{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);border-bottom:1px solid var(--faint)}
.evLink:hover{border-bottom-color:var(--chili)}

/* photographs, printed quietly so they sit under the type */
.shot{margin-top:26px;max-width:520px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--faint);
  filter:saturate(.6) contrast(1.03);opacity:.94;transition:filter .5s ease,opacity .5s ease}
.shot:hover img{filter:none;opacity:1}
.shot figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);margin-top:9px;opacity:.8}
.shot.pair{max-width:none;display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.shot.pair figcaption{grid-column:1/-1;margin-top:2px}

/* the stat board also works on paper, not only in the dark band */
.board.onPaper{background:rgba(20,38,27,.14);border-color:rgba(20,38,27,.14)}
.board.onPaper .cell{background:var(--paper)}
.board.onPaper .flip{color:var(--green)}
.board.onPaper .flip .suf{color:var(--chili)}
.board.onPaper .cLab{color:var(--soft)}

/* the year scrubber, pinned while the archive scrolls past it */
.filterBar{position:sticky;top:32px;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--faint);padding:12px 0 4px}
.entry.dim{opacity:.18}
.entry.hit::before{content:"";position:absolute;left:-16px;top:50px;width:5px;height:5px;
  border-radius:50%;background:var(--chili)}

.archLink{display:inline-flex;align-items:center;gap:10px;margin-top:30px;border:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:#9FE0B4;color:var(--ink);padding:15px 24px;border-radius:3px;
  transition:background .2s,color .2s}
.archLink:hover{background:#E2765C;color:var(--paper);border:none}

@media(max-width:1000px){
  .archGrid{grid-template-columns:minmax(0,1fr);gap:0}
  .archAside{position:static;order:-1;padding-bottom:34px;margin-bottom:6px;
    border-bottom:1px solid var(--faint)}
  .whole{max-width:420px}
}
@media(max-width:760px){
  .archLead{padding-top:96px}
  .archGrid{padding-left:22px;padding-right:22px}
  .entryHead{grid-template-columns:1fr;gap:4px}
  .entryYear{text-align:left}
  .entry.hit::before{display:none}
  .shot.pair{grid-template-columns:1fr}
}
body.set-broadsheet .entry{padding:26px 0}
body.set-gallery .entry{padding:60px 0}
body.th-night .shot img{opacity:.86}
.lab.chap{margin:70px 0 26px}
.lab.chap:first-child{margin-top:0}



/* ============================================================
   6. portfolio — /portfolio
   A photograph-led grid. Cards that have a picture show it;
   cards that do not are set as a number instead, so the grid
   stays even and nothing looks like a missing image.
   ============================================================ */

.pfLead{padding-top:118px;padding-bottom:8px}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.crumb a{border-bottom:none;color:var(--soft);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.crumb a:hover{color:var(--chili)}
.crumb .sep{color:var(--faint)}
.crumb .here{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chili)}
.pfLead .lead{max-width:16ch}
.pfLead .leadSub{max-width:54ch}
.pfRoles{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin-top:26px;line-height:2.1}
.pfRoles b{font-weight:400;color:var(--chili)}

/* filter row */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding-top:22px;
  border-top:1px solid var(--faint)}
.filters button{appearance:none;background:none;cursor:pointer;font:inherit;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--faint);border-radius:2px;padding:8px 13px;
  transition:color .2s,border-color .2s,background .2s}
.filters button:hover{color:var(--chili);border-color:var(--chili)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pfCount{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin:16px 0 0;opacity:.75}

/* the grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 30px;margin-top:38px}
.card{display:flex;flex-direction:column;transition:opacity .3s}
.card[hidden]{display:none}
.cardMedia{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--faint);background:rgba(20,38,27,.04)}
.cardMedia img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.66) contrast(1.03);opacity:.95;
  transition:filter .55s ease,opacity .55s ease,transform 1.1s cubic-bezier(.2,.8,.3,1)}
.card:hover .cardMedia img{filter:none;opacity:1;transform:scale(1.028)}
/* no photograph: set the number instead */
.cardPlate{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:24px 22px;background:rgba(20,38,27,.045)}
.cardPlate .n{font-family:var(--serif);font-size:clamp(44px,5vw,64px);line-height:.92;
  letter-spacing:-.03em;color:var(--green);transition:color .3s}
.card:hover .cardPlate .n{color:var(--chili)}
.cardPlate .nl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin-top:10px}
.cardYear{position:absolute;top:0;right:0;background:var(--paper);color:var(--soft);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:6px 9px;
  border-left:1px solid var(--faint);border-bottom:1px solid var(--faint)}
.cardBody{padding-top:16px}
.card h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;
  letter-spacing:-.018em;transition:color .25s}
.card:hover h3{color:var(--chili)}
.cardRole{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);margin-top:9px}
.card p{font-size:14.4px;line-height:1.62;color:var(--soft);margin-top:11px}
.cardStats{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cardStats span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--faint);border-radius:2px;padding:4px 8px;line-height:1}
.cardStats span.award{color:var(--chili);border-color:rgba(188,66,39,.38)}
.cardLink{display:inline-block;margin-top:15px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  border-bottom:1px solid var(--faint)}
.cardLink:hover{border-bottom-color:var(--chili)}

@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}}
@media(max-width:640px){
  .grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .pfLead{padding-top:96px}
  .card h3{font-size:23px}
}
body.set-broadsheet .grid{gap:34px 22px}
body.set-gallery .grid{gap:64px 40px}
body.th-night .cardMedia img{opacity:.88}
body.th-night .cardPlate,body.th-night .cardMedia{background:rgba(233,230,206,.05)}
body.th-night .cardYear{background:var(--paper)}

/* link out to the portfolio from the homepage */
.pfLink{display:inline-flex;align-items:center;gap:10px;margin-top:30px;border:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:#9FE0B4;color:var(--ink);padding:15px 24px;border-radius:3px;
  transition:background .2s,color .2s}
.pfLink:hover{background:#E2765C;color:var(--paper);border:none}