/* Moghul Veyron — site styles */
:root{
  --paper:#f6f4ef;
  --ink:#2b2926;
  --film:#26221f;
  --edge-orange:#d99a3d;
  --gold:#b9862f;
  --mono:'SF Mono',Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:radial-gradient(ellipse 90% 70% at 50% 44%, #fffdf8 0%, #f6f3ec 55%, #ece7dd 100%);
  background-color:#f6f4ef;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
::selection{background:rgba(217,154,61,.25)}

/* ---------- home ---------- */
.home main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem;
}
h1{
  font-size:15px;
  font-weight:400;
  letter-spacing:.45em;
  text-indent:.45em;
}
.thesis{
  margin-top:2.3rem;
  font-size:12.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#6f6a62;
}
.meta{
  margin-top:.6rem;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#a49e94;
}
.menu{
  margin-top:2.8rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2.1rem;
}

/* film edge-print links */
.edgelink{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.9em;
  transition:color .35s, transform .35s;
}
.edgelink .num{font-size:8.5px;letter-spacing:.3em;opacity:.65}
.edgelink .tri{font-size:9px;transform:translateY(-.5px)}
.edgelink:hover{color:var(--edge-orange);transform:scale(1.07)}

/* ---------- sub-page header ---------- */
.top{
  text-align:center;
  padding:2.6rem 1.5rem 0;
}
.top .wordmark{
  font-size:12px;
  font-weight:400;
  letter-spacing:.45em;
  text-indent:.45em;
  text-decoration:none;
  color:var(--ink);
  transition:color .35s;
}
.top .wordmark:hover{color:#6f6a62}
.top .pagemark{
  margin-top:1.4rem;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
}
.top .pagemark .num{font-size:8.5px;opacity:.65;letter-spacing:.3em}
.top .pageline{
  margin-top:.9rem;
  font-size:16px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#a49e94;
}

/* ---------- photographs ---------- */
.galleries{
  width:min(1080px,92vw);
  margin:0 auto;
  padding:3.6rem 0 2rem;
}
.sec{margin-bottom:4.6rem}

/* category switcher — the sets share one frame, so the page stays short */
.catbar{
  position:relative;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 3.6rem;
  padding:1.25rem 1.5rem 0;
}
.catbar button{
  position:relative;
  z-index:1;
  background:none;
  border:none;
  cursor:pointer;
  padding:.6rem .1rem;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:#a8a196;
  transition:color .4s ease;
}
.catbar button:hover{color:#7c7468}
.catbar button.on{color:var(--gold)}
/* the same liquid glass the floating header uses, gliding to the open set */
.cat-pill{
  position:absolute;      /* placed on the open name in script, so it follows wrapping */
  border-radius:999px;
  background:linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.16) 100%);
  border:1px solid rgba(217,154,61,.3);
  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.6),
    inset 0 -4px 8px rgba(217,154,61,.08),
    0 3px 8px -3px rgba(60,50,35,.18);
  opacity:0;
  transition:left .5s cubic-bezier(.3,.7,.25,1), width .5s cubic-bezier(.3,.7,.25,1), top .5s cubic-bezier(.3,.7,.25,1), opacity .35s ease;
  pointer-events:none;
}
.cat-pill.on{opacity:1}
@media (max-width:560px){
  .catbar{gap:0 1.2rem}
  .catbar button{font-size:9px;letter-spacing:.16em}
}
/* the outgoing set dissolves; the incoming one rises frame by frame */
.galleries{transition:opacity .26s ease}
.galleries.fading{opacity:0}
.sec-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.6rem;
}
.sec-label .count{opacity:.55;font-size:8.5px;letter-spacing:.3em}
.grid{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.gcol{flex:1 1 0;min-width:0}
.sec-empty{min-height:34vh}   /* a set awaiting its work keeps the page steady */

/* label row: set name on the left, view toggle on the right */
.galleries .sec-label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.view{display:flex;gap:1.4rem;font-size:9.5px;letter-spacing:.3em}
.view button{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:uppercase;
  color:#b5aea3;transition:color .3s ease;
}
.view button:hover{color:#7c7468}
.view button.on{color:var(--gold)}
@media (max-width:899px){.view{display:none}}   /* phones keep the grid */

/* ---------- filmstrip view: one row that scrolls sideways, in the flow of the page ---------- */
:root{--gutter:max(4vw, calc((100vw - 1080px) / 2))}
.strip-wrap{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);     /* full bleed out of the centred column */
}
.strip{
  display:flex;
  align-items:center;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px calc(var(--gutter) + 63px) 40px var(--gutter);  /* room for the print shadow; extra on the right so the U-turn sits clear of the last frame */
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-behavior:auto}
.strip.dragging img{pointer-events:none}
.strip .fnum{flex:none}
/* arrows for mouse users; they fade at either end of the row */
.s-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-70%);
  z-index:3;
  width:48px;height:48px;
  border-radius:999px;
  border:1px solid rgba(217,154,61,.3);
  background:linear-gradient(120deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);
  box-shadow:inset 0 1px 5px rgba(255,255,255,.6), 0 3px 8px -3px rgba(60,50,35,.18);
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:300;
  font-size:30px;
  line-height:46px;
  color:var(--gold);
  cursor:pointer;
  opacity:.85;
  transition:opacity .3s ease, transform .3s ease;
}
.s-arrow:hover{opacity:1;transform:translateY(-70%) scale(1.06)}
.s-arrow.off{opacity:0;pointer-events:none}
/* each arrow sits centred in the margin between the page edge and the frames */
.s-arrow.prev{left:max(6px, calc(var(--gutter) / 2 - 24px))}
.s-arrow.next{right:max(6px, calc((var(--gutter) + 63px) / 2 - 24px))}
@media (hover:none){.s-arrow{display:none}}     /* touch swipes instead */
/* at the end of the row the › folds into a U-turn back to the first frame —
   both glyphs share the button and hand over with a small turn of the wrist */
.s-arrow.next{display:flex;align-items:center;justify-content:center}
.s-arrow .chev, .s-arrow .uturn{
  position:absolute;
  transition:opacity .4s ease, transform .5s cubic-bezier(.3,.7,.25,1);
}
.s-arrow .chev{opacity:1;transform:rotate(0) scale(1)}
.s-arrow .uturn{opacity:0;transform:rotate(-40deg) scale(.55)}
.s-arrow.turn .chev{opacity:0;transform:rotate(120deg) scale(.4)}
.s-arrow.turn .uturn{opacity:1;transform:rotate(90deg) scale(1)}
/* how far along the row you are */
.s-progress{
  position:absolute;
  left:var(--gutter);right:var(--gutter);bottom:14px;
  height:1px;
  background:rgba(185,134,47,.18);
}
.s-progress i{
  display:block;height:100%;
  background:var(--gold);
  opacity:.6;
  transition:width .15s linear;
}

/* TEMPORARY curation aid — frame numbers on the grid. Delete with NUMBER_FRAMES. */
.fnum{position:relative;display:block}
.fnum::after{
  content:attr(data-n);
  position:absolute;
  top:13px;
  left:13px;
  min-width:26px;
  height:26px;
  padding:0 7px;
  box-sizing:border-box;
  border-radius:999px;
  background:rgba(18,15,12,.74);
  color:#f6f4ef;
  font-family:var(--mono);
  font-size:12px;
  line-height:26px;
  text-align:center;
  pointer-events:none;
}
.grid img, .strip img{
  width:100%;
  height:auto;
  border:5px solid #fbfaf6;
  display:block;
  margin-bottom:14px;
  cursor:pointer;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .612s ease, transform .765s cubic-bezier(.22,1,.36,1);
}
.grid img.risen, .strip img.risen{
  opacity:1;
  transform:none;
  box-shadow:0 13px 30px -8px rgba(60,50,35,.29);
}
.grid img.risen, .strip img.risen{position:relative}
.grid img.risen:hover, .strip img.risen:hover{
  opacity:1;
  transform:scale(1.025);
  z-index:2;
  box-shadow:0 18px 40px -10px rgba(60,50,35,.34);
  transition:transform .3s cubic-bezier(.2,.6,.3,1), opacity .3s ease, box-shadow .3s ease;
}
@media (prefers-reduced-motion:reduce){
  .grid img, .strip img{opacity:1;transform:none}
}
/* in the row every frame shares one height; width follows its shape */
.galleries.is-strip{padding-top:2rem}
.strip img{
  width:auto;
  height:clamp(320px, 64vh, 760px);
  margin:0;
  flex:none;
}

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(23,20,18,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .45s ease;
}
.lightbox img{
  max-width:92vw;
  max-height:88vh;
  display:block;
  border:5px solid #fbfaf6;
  border-radius:7px;
}
.lightbox img.lb-anim{
  animation:lbin .55s cubic-bezier(.2,.6,.3,1);
}
.lightbox img.lb-zoom{
  animation:lbzoom .55s cubic-bezier(.2,.65,.25,1);
}
@keyframes lbzoom{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:none}
}
@keyframes lbin{
  from{opacity:0;transform:scale(.965) translateY(10px)}
  to{opacity:1;transform:none}
}
.lightbox .lb-count{
  position:absolute;
  bottom:20px;
  left:0;right:0;
  text-align:center;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.4em;
  color:var(--edge-orange);
  opacity:.85;
}

/* ---------- career ---------- */
.prose{
  width:min(640px,90vw);
  margin:0 auto;
  padding:3.6rem 0 2rem;
}
.prose .lede{
  font-size:16px;
  line-height:2;
  color:#4a463f;
  margin-bottom:3.4rem;
}
.block{margin-bottom:3.2rem}
.block .sec-label{margin-bottom:1.2rem}
.block p{
  font-size:16px;
  line-height:2;
  color:#5c5850;
  margin-bottom:1rem;
}
.credits{list-style:none}
.credits li{
  font-size:14.5px;
  line-height:1.7;
  color:#4a463f;
  padding:.55rem 0;
  border-bottom:1px solid rgba(185,134,47,.16);
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.credits li:last-child{border-bottom:none}
.credits .role{
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a49e94;
  white-space:nowrap;
  align-self:center;
}
.block p.namelist{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  line-height:2.4;
  color:#8a8378;
}

/* ---------- contact ---------- */
.contact-wrap{
  width:min(460px,90vw);
  margin:0 auto;
  padding:3.6rem 0 2rem;
  flex:1;
}
.contact-wrap .intro{
  font-size:16px;
  line-height:2;
  color:#5c5850;
  text-align:center;
  margin-bottom:3rem;
}
form label{
  display:block;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#8a8378;
  margin-bottom:.55rem;
}
form input, form textarea{
  width:100%;
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:300;
  font-size:13px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(185,134,47,.35);
  padding:.5rem 0 .7rem;
  margin-bottom:2.1rem;
  outline:none;
  transition:border-color .35s;
  resize:vertical;
}
form input:focus, form textarea:focus{border-color:var(--gold)}
form button{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--gold);
  background:none;
  border:1px solid rgba(185,134,47,.4);
  padding:.95rem 2.2rem .95rem;
  cursor:pointer;
  transition:color .35s, border-color .35s;
  display:block;
  margin:.6rem auto 0;
}
form button:hover{color:var(--edge-orange);border-color:var(--edge-orange)}
.socials{
  margin-top:3.2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  align-items:center;
}

/* ---------- shared footer nav ---------- */
.foot{
  display:flex;
  justify-content:center;
  gap:3.4rem;
  flex-wrap:wrap;
  padding:2.4rem 1.5rem 3rem;
}

/* ---------- closing line ---------- */
.colophon{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#a49e94;
  text-align:center;
  padding:0 1.5rem 2.6rem;
}

/* ---------- wash: the photographs' colours developing like chemistry on paper ---------- */
/* each pool is mixed from measured average colours of the photographs */
.wash{
  position:fixed;
  inset:-45vmax;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.wash i{
  position:absolute;
  border-radius:50%;
  filter:blur(52px);
  mix-blend-mode:multiply;
  opacity:0;
  will-change:transform,translate,scale,opacity;
  backface-visibility:hidden;
  animation:
    fadein 100s linear var(--wait) both,
    develop 100s linear calc(var(--wait) + .3s) both,
    swell 100s linear calc(var(--wait) + .3s) both,
    drift var(--dur) ease-in-out calc(var(--wait) + .3s + var(--dev)*.55) infinite alternate,
    breathe var(--dur) ease-in-out calc(var(--wait) + 2.3s) infinite alternate;
  animation-play-state:paused;
}
/* the burst waits for first paint, then begins from frame one */
html.go .wash i{animation-play-state:running}
/* colour wheel: muted spectral hues arranged as a hue circle around the page.
   multiply blending mixes neighbours subtractively, like dye layers */
.wash i{width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax}
/* yellow — 12 o'clock */
.wash i:nth-child(1){
  --op:.62; --dev:1.6s; --wait:0s; --gx:0vmax; --gy:27vmax; --dur:30s;
  left:50%;top:calc(50% - 34vmax);
  background:radial-gradient(circle, #cfb45e 0%, rgba(207,180,94,0) 68%);
}
/* green — 2 o'clock */
.wash i:nth-child(2){
  --op:.51; --dev:1.6s; --wait:0s; --gx:-23vmax; --gy:13.5vmax; --dur:38s;
  left:calc(50% + 29vmax);top:calc(50% - 17vmax);
  background:radial-gradient(circle, #8ba578 0%, rgba(139,165,120,0) 68%);
}
/* cyan — 4 o'clock */
.wash i:nth-child(3){
  --op:.51; --dev:1.6s; --wait:0s; --gx:-23vmax; --gy:-13.5vmax; --dur:34s;
  left:calc(50% + 29vmax);top:calc(50% + 17vmax);
  background:radial-gradient(circle, #6fa0a6 0%, rgba(111,160,166,0) 68%);
}
/* violet — 6 o'clock */
.wash i:nth-child(4){
  --op:.48; --dev:1.6s; --wait:0s; --gx:0vmax; --gy:-27vmax; --dur:42s;
  left:50%;top:calc(50% + 34vmax);
  background:radial-gradient(circle, #8a89b0 0%, rgba(138,137,176,0) 68%);
}
/* magenta — 8 o'clock */
.wash i:nth-child(5){
  --op:.47; --dev:1.6s; --wait:0s; --gx:23vmax; --gy:-13.5vmax; --dur:36s;
  left:calc(50% - 29vmax);top:calc(50% + 17vmax);
  background:radial-gradient(circle, #bd7f92 0%, rgba(189,127,146,0) 68%);
}
/* orange — 10 o'clock */
.wash i:nth-child(6){
  --op:.59; --dev:1.6s; --wait:0s; --gx:23vmax; --gy:13.5vmax; --dur:31s;
  left:calc(50% - 29vmax);top:calc(50% - 17vmax);
  background:radial-gradient(circle, #c98a49 0%, rgba(201,138,73,0) 68%);
}
@keyframes fadein{
  0%{opacity:0;animation-timing-function:cubic-bezier(.3,.4,.4,1)}
  .66%{opacity:calc(var(--op)*.7);animation-timing-function:cubic-bezier(.35,.3,.45,1)}
  1.3%{opacity:calc(var(--op)*1.14);animation-timing-function:cubic-bezier(.4,.2,.3,1)}
  2.2%{opacity:var(--op)}
  100%{opacity:var(--op)}
}
@keyframes develop{
  0%{translate:var(--gx) var(--gy);animation-timing-function:cubic-bezier(.4,.1,.2,1)}
  1.6%{translate:0 0}
  100%{translate:0 0}
}
/* pools are born small and grow as they travel out; the animation's own end
   sits 100s away on a long plateau, so no re-raster is ever visible */
@keyframes swell{
  0%{scale:.32;animation-timing-function:cubic-bezier(.4,.1,.2,1)}
  1.6%{scale:1}
  100%{scale:1}
}
@keyframes drift{
  from{transform:translate(0,0)}
  to{transform:translate(3.5%,-2.5%)}
}
/* density breathing: colour deepens toward the edges and releases —
   pure opacity, composited without re-rasterisation */
@keyframes breathe{
  from{opacity:var(--op)}
  to{opacity:calc(var(--op)*1.2)}
}
.wash i:nth-child(even){animation-direction:normal, alternate-reverse}
/* cream veil so the type stays quiet and legible */
.wash::after{
  content:'';
  position:absolute;
  inset:37vmax;
  background:radial-gradient(ellipse 60% 52% at 50% 46%,
    rgba(252,251,247,.92) 0%,
    rgba(250,248,243,.5) 50%,
    rgba(246,244,239,0) 92%);
}
@media (prefers-reduced-motion:reduce){
  .wash i{animation:none;opacity:var(--op);transform:none}
}
.home{overflow-x:hidden}

/* ---------- featured-by strip ---------- */
.featured{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:0 1.5rem 2.2rem;
}
.featured .fb-label{
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:#5c5850;
}
.featured .fb-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  flex-wrap:wrap;
}
.featured img{
  height:19px;
  width:auto;
  opacity:.92;
  transition:opacity .4s;
}
.featured img:hover{opacity:1}
.featured .fb-ppa{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.26em;
  font-weight:400;
  color:#27567b;
}

/* homepage essence line */
.essence{
  margin-top:5px;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8a8378;
}



/* ---------- one-page layout ---------- */
html{scroll-behavior:smooth}
.hero{
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem;
}
.anchor-sec{
  width:100%;
  padding-top:4.5rem;
  scroll-margin-top:0;
}
/* arriving at the photographs, land a touch further in so the frames sit higher */
#photographs{scroll-margin-top:-36px}

/* larger gallery section labels */
.galleries .sec-label{font-size:14px;margin-bottom:1.8rem}
.galleries .sec-label .count{font-size:11px}

/* softly curved image corners */
.grid img, .strip img{border-radius:7px}




.sec{scroll-margin-top:40px}


/* ---------- floating liquid-glass pill header ---------- */
.sitebar{
  position:fixed;
  top:16px;
  left:50%;
  z-index:5;
  width:min(880px, calc(100vw - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  padding:.68rem 1.9rem .64rem;
  border-radius:999px;
  background:rgba(255,254,250,.93);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 6px rgba(255,255,255,.5),
    0 14px 34px -14px rgba(60,50,35,.35),
    0 3px 10px -4px rgba(60,50,35,.14);
  opacity:0;
  transform:translateX(-50%) translateY(-26px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.sitebar.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.sb-id{
  display:flex;
  flex-direction:column;
  gap:.26rem;
  text-decoration:none;
  color:var(--ink);
}
.sb-name{
  font-size:11px;
  font-weight:400;
  letter-spacing:.38em;
}
.sb-role{
  font-size:8px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#7c766b;
}
.sb-links{
  flex:1;                    /* the headings sit centred in the room after the name */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.8rem;
}
.sb-links .edgelink{font-size:10.5px;letter-spacing:.32em}
.sb-links .edgelink:last-child{margin-right:-.32em}   /* trailing letter-space isn't ink */
/* phone bar: name on the left, where you are in the middle, a menu on the right */
.sb-now,.sb-menu,.sb-drop{display:none}
@media (max-width:760px){
  .sitebar{padding:.55rem .5rem .55rem .85rem;gap:.6rem;align-items:center;justify-content:space-between;min-height:52px}
  .sb-links,.sb-pill,.sb-role{display:none}   /* the role line already sits on the hero */
  .sb-id{flex:none}
  .sb-name{font-size:9px;letter-spacing:.14em}
  .sitebar > .sb-now{
    position:absolute;                        /* on the bar's true midpoint */
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;
    height:30px;
    padding:0 .6rem;
    border-radius:999px;
    font-family:var(--mono);
    font-size:8.5px;
    letter-spacing:.2em;
    text-indent:.2em;
    color:var(--gold);
    white-space:nowrap;
    background:linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.16) 100%);
    border:1px solid rgba(217,154,61,.3);
    box-shadow:inset 0 1px 5px rgba(255,255,255,.6), inset 0 -4px 8px rgba(217,154,61,.08), 0 3px 8px -3px rgba(60,50,35,.18);
  }
  .sb-now:empty{opacity:0}
  .sb-menu{
    flex:none;
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;
    padding:0 9px;
    border:none;border-radius:999px;
    background:none;
    cursor:pointer;
  }
  .sb-menu i{display:block;height:1px;background:var(--gold);border-radius:1px;transition:transform .3s ease, opacity .3s ease}
  .sb-menu.open i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .sb-menu.open i:nth-child(2){opacity:0}
  .sb-menu.open i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .sb-drop{
    position:fixed;
    top:calc(16px + 68px);
    right:16px;
    z-index:6;
    display:flex;flex-direction:column;gap:1.1rem;
    padding:1.2rem 1.5rem 1.2rem 1.3rem;
    border-radius:22px;
    background:rgba(255,254,250,.94);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 1px 6px rgba(255,255,255,.5), 0 14px 34px -14px rgba(60,50,35,.35), 0 3px 10px -4px rgba(60,50,35,.14);
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  .sb-drop.open{opacity:1;transform:none;pointer-events:auto}
  .sb-drop .edgelink{font-size:10.5px;letter-spacing:.32em}
}


/* the wheel's colours drifting inside the pill */
.sitebar > *{position:relative}
.sitebar::before{
  content:'';
  position:absolute;
  top:0;bottom:0;
  left:-30%;
  width:160%;
  background:
    radial-gradient(ellipse 22% 160% at 10% 50%, rgba(207,180,94,.5) 0%, rgba(207,180,94,0) 70%),
    radial-gradient(ellipse 20% 160% at 34% 50%, rgba(139,165,120,.42) 0%, rgba(139,165,120,0) 70%),
    radial-gradient(ellipse 20% 160% at 56% 50%, rgba(111,160,166,.42) 0%, rgba(111,160,166,0) 70%),
    radial-gradient(ellipse 20% 160% at 76% 50%, rgba(189,127,146,.4) 0%, rgba(189,127,146,0) 70%),
    radial-gradient(ellipse 22% 160% at 94% 50%, rgba(201,138,73,.46) 0%, rgba(201,138,73,0) 70%);
  mix-blend-mode:multiply;
  opacity:.6;
  animation:barflow 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes barflow{
  from{transform:translateX(-6%)}
  to{transform:translateX(6%)}
}
@media (prefers-reduced-motion:reduce){
  .sitebar::before{animation:none}
}

/* send button breathes between the golds */
form button{
  animation:sendpulse 2.8s ease-in-out infinite alternate;
}
@keyframes sendpulse{
  from{
    color:var(--gold);
    border-color:rgba(185,134,47,.4);
    box-shadow:0 0 0 0 rgba(217,154,61,0);
  }
  to{
    color:var(--edge-orange);
    border-color:rgba(217,154,61,.75);
    box-shadow:0 0 14px 1px rgba(217,154,61,.22);
  }
}
form button:hover{animation-play-state:paused}
form button:disabled{animation:none;opacity:.7;cursor:default}
@media (prefers-reduced-motion:reduce){
  form button{animation:none}
}




/* liquid indicator pill: shows the current section, glides between links */
.sb-pill{
  position:absolute;
  top:50%;
  height:30px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.16) 100%);
  border:1px solid rgba(217,154,61,.3);
  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.6),
    inset 0 -4px 8px rgba(217,154,61,.08),
    0 3px 8px -3px rgba(60,50,35,.18);
  opacity:0;
  transition:left .5s cubic-bezier(.3,.7,.25,1), width .5s cubic-bezier(.3,.7,.25,1), opacity .35s ease;
  pointer-events:none;
}
.sb-pill.on{opacity:1}


/* lightbox: freeze the page behind, faint close affordance */
body.lb-open{overflow:hidden}
.lightbox{touch-action:none}
.lb-close{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top, 0px));
  right:20px;
  background:none;
  border:none;
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:300;
  font-size:34px;
  line-height:1;
  color:rgba(246,244,239,.55);
  cursor:pointer;
  padding:8px;
  transition:color .3s;
}
.lb-close:hover{color:rgba(246,244,239,.95)}
.lb-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:300;
  font-size:46px;
  line-height:1;
  color:rgba(246,244,239,.45);
  cursor:pointer;
  padding:14px 18px;
  transition:color .3s;
  z-index:2;
}
#lb-prev{left:10px}
#lb-next{right:10px}
.lb-arrow:hover{color:rgba(246,244,239,.95)}
@media (hover:none){.lb-arrow{display:none}} /* touch screens swipe instead */