/* ---------------------------------------------------------------------------
   Portfolio — the public page.

   One design language across the whole composition: paper and ink, a mono
   label above every section, one display face at four sizes, and rooms of
   colour that belong to the projects rather than to the chrome. There are no
   decorative gradients here; the artwork is the colour.

   Two rules the layout is built around:
     · a piece of work is never cropped. Every <img> that shows work is
       width:100%;height:auto, so the box takes the picture's own ratio.
     · nothing is written over the artwork. Captions sit under it, always.
   --------------------------------------------------------------------------- */

:root{
  --paper:#f2f1ec;--ink:#131719;--muted:#6d7579;--line:#d2d0c8;
  --night:#0b1015;--green:#16291f;--steel:#e5e9e9;--pitch:#0f1417;
  --accent:#ef5a43;
  --font:"Manrope",Arial,sans-serif;--mono:"DM Mono",ui-monospace,monospace;
  --bar:74px;
  color:var(--ink);background:var(--paper);font-family:var(--font);font-synthesis:none;
  -webkit-font-smoothing:antialiased
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--paper)}
button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;text-wrap:balance}
p{margin:0}
::selection{background:#c9dbe4;color:#0b1015}
:focus-visible{outline:2px solid #3b9ddd;outline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:13px 17px;background:#fff;color:#111}
.skip-link:focus{top:12px}
.progress{position:fixed;top:0;left:0;z-index:60;width:0;height:2px;background:var(--accent);pointer-events:none}
.wrap{max-width:1640px;margin:0 auto;padding-inline:clamp(20px,5vw,96px)}

/* --- the mono line that opens every section ------------------------------ */
.rule{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-top:1px solid currentColor;padding-top:17px;
  font:500 11px/1.4 var(--mono);letter-spacing:.13em}
.rule-end{color:inherit;opacity:.62;text-align:right}

/* --- the statement pairing: display line + a short paragraph -------------- */
.statement{display:grid;grid-template-columns:1.32fr .68fr;align-items:end;gap:clamp(28px,4vw,70px);
  margin:clamp(52px,6.5vw,110px) 0 clamp(54px,6vw,96px)}
.statement h2{font-size:clamp(46px,6.6vw,112px);line-height:.94}
.statement h2 span{color:var(--muted)}
.statement p{max-width:44ch;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:#4f585c}
.statement-meta{display:block;margin-top:22px;font:500 11px var(--mono);letter-spacing:.11em;color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:20px;margin-top:26px;
  border-bottom:1px solid currentColor;padding-bottom:6px;font-size:14px;font-weight:700;
  transition:gap .3s ease,color .3s ease}
.link:hover{gap:30px;color:var(--accent)}
.link span{font-size:18px;font-weight:400}

/* --- reveal: one motion, used everywhere --------------------------------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
.js .reveal.in-view{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------------- */
.masthead{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:26px;height:var(--bar);padding:0 clamp(20px,5vw,96px);
  color:#f3f4f1;transition:background .35s ease,box-shadow .35s ease,color .35s ease}
.masthead.scrolled{background:#0b1015f2;backdrop-filter:blur(16px);box-shadow:0 1px 0 #ffffff1f}
.wordmark{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.wordmark-mark{display:grid;place-items:center;width:32px;height:32px;border:1.5px solid currentColor;
  font-size:17px;line-height:1;letter-spacing:-.08em}
.wordmark-mark i{font-style:normal;color:var(--accent)}
.wordmark small{display:block;margin-top:3px;font:400 9px var(--mono);letter-spacing:.12em;color:#9aa6ac}
.masthead nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);font-size:13px;font-weight:600}
.masthead nav a{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:8px 0;color:#c9d2d6;transition:color .25s}
.masthead nav a i{font:500 10px var(--mono);letter-spacing:.08em;color:#78868d;font-style:normal;transition:color .25s}
.masthead nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .3s ease}
.masthead nav a:hover,.masthead nav a.current{color:#fff}
.masthead nav a:hover i,.masthead nav a.current i{color:var(--accent)}
.masthead nav a:hover::after,.masthead nav a.current::after{right:0}
.share{border:0;border-bottom:1px solid #b3c0c6;background:none;color:#fff;padding:8px 0;font-size:12px;font-weight:700;white-space:nowrap}
.share span{display:inline-block;margin-left:16px;font-size:15px;transition:transform .25s ease}
.share:hover span{transform:translate(3px,-3px)}

/* ---------------------------------------------------------------------------
   The opening. Night, one statement, the astronaut whole, and the index of
   everything the page is about to show — in the order it shows it.
   --------------------------------------------------------------------------- */
.stage{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#f4f5f2;
  min-height:100svh;display:flex;align-items:center;padding:calc(var(--bar) + clamp(40px,7vh,90px)) 0 clamp(34px,5vh,60px)}
/* Grain and a single soft vignette: enough depth for a cut-out figure to sit
   in, and not one pixel of decoration that competes with the work below. */
.stage-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 72% 34%,#16222c 0%,#0b1015 62%)}
.stage-field::after{content:"";position:absolute;inset:0;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
/* Sized from the shorter viewport edge and capped under its own 1122px source,
   so the figure is whole and sharp on every screen. The drift is a few dozen
   pixels of parallax, set from main.js, and nothing more. */
.stage-figure{position:absolute;z-index:1;right:clamp(8px,3.5vw,90px);top:50%;
  width:min(33vw,52svh,540px);height:auto;max-width:none;
  transform:translate3d(0,calc(-50% + var(--drift,0px)),0) rotate(-3deg);
  filter:drop-shadow(0 40px 70px #00000099);pointer-events:none;will-change:transform}
.stage-wrap{position:relative;z-index:2;width:100%}
.stage-label{font:500 11px var(--mono);letter-spacing:.2em;color:#93c6e4}
.stage h1{margin:clamp(22px,3.4vh,44px) 0 0;font-size:clamp(64px,10.4vw,178px);line-height:.88;letter-spacing:-.04em}
.stage h1 span{color:transparent;-webkit-text-stroke:1.3px #dde8ee}
.stage-text{max-width:41ch;margin:clamp(22px,3.2vh,38px) 0 0;font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:#c4ced3}
.stage-cta{display:inline-flex;align-items:center;gap:34px;margin-top:clamp(24px,3vh,36px);
  border-bottom:1px solid #b6cad6;padding:10px 0 12px;font-size:14px;font-weight:700;transition:gap .3s ease,color .3s ease}
.stage-cta:hover{gap:46px;color:#a8dcfa}
.stage-cta span{font-size:18px;font-weight:400}
.stage-index{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(14px,2vw,32px);
  list-style:none;margin:clamp(46px,7vh,96px) 0 0;padding:0}
.stage-index li{border-top:1px solid #ffffff33}
.stage-index a{display:block;padding:15px 0 0;transition:color .25s ease}
.stage-index i{display:block;font:500 10px var(--mono);letter-spacing:.14em;font-style:normal;color:#7e8f98}
.stage-index b{display:block;margin-top:9px;font-size:clamp(14px,1.15vw,17px);font-weight:700;letter-spacing:-.02em}
.stage-index small{display:block;margin-top:4px;font:400 10px var(--mono);letter-spacing:.09em;color:#8c9aa1;text-transform:uppercase}
.stage-index a:hover{color:#a8dcfa}
.stage-index a:hover i{color:var(--accent)}

/* ---------------------------------------------------------------------------
   Rooms
   --------------------------------------------------------------------------- */
.opening{padding:clamp(80px,9vw,150px) 0 0}
.opening .statement{margin-bottom:0}
.feature{padding:clamp(88px,10vw,180px) 0}
.band{padding:clamp(56px,7vw,120px) 0}
.band-opening{padding-top:clamp(48px,6vw,96px)}
.feature-quranvoc{background:var(--green);color:#eef4ee}
.feature-virtus{background:var(--steel)}
.feature-plutoni{background:var(--pitch);color:#f0f2f0}
.feature-gallery{padding-bottom:clamp(96px,10vw,170px)}
.feature-more{padding-top:clamp(70px,8vw,130px)}
.finale{padding:clamp(80px,9vw,150px) 0 0}
.finale .statement{margin-bottom:0}
.band-finale{padding-bottom:clamp(80px,9vw,150px)}

/* --- a feature's own head: display line on the left, a note on the right -- */
.feature-head{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:clamp(28px,4vw,70px);
  margin:clamp(50px,6vw,100px) 0 clamp(52px,6vw,96px)}
.feature-head h2{font-size:clamp(56px,9vw,168px);line-height:.9;letter-spacing:-.04em}
.feature-note p{font-size:clamp(16px,1.3vw,20px);line-height:1.6;max-width:42ch}
.feature-note>span{display:block;margin-top:24px;font:500 11px var(--mono);letter-spacing:.12em;opacity:.7}

/* ---------------------------------------------------------------------------
   The curated selections: three pieces, three widths, staggered. Shown whole.
   --------------------------------------------------------------------------- */
.picks{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;
  gap:clamp(18px,2.6vw,46px);margin-top:clamp(36px,4.5vw,76px)}
/* Widths and stagger arrive as classes, not as a style attribute: the page's
   CSP has no 'unsafe-inline', and a dropped attribute would quietly flatten
   every selection into three identical boxes. */
.pick{grid-column:span var(--span,4);margin:calc(var(--drop,0) * clamp(26px,5.5vw,104px)) 0 0}
.pick.s3{--span:3}.pick.s4{--span:4}.pick.s5{--span:5}.pick.s6{--span:6}.pick.s7{--span:7}
.pick.d0{--drop:0}.pick.d1{--drop:1}.pick.d2{--drop:.38}.pick.d3{--drop:.72}
.pick-art{display:block;width:100%;padding:0;border:0;background:#e3e3dd;cursor:zoom-in;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
.pick-art img{width:100%;height:auto}
.pick-art:hover{transform:translateY(-6px);box-shadow:0 26px 50px #1a252b2e}
.pick figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--line);margin-top:15px;padding-top:12px}
.pick figcaption b{font-size:clamp(13px,1.05vw,16px);font-weight:700;letter-spacing:-.02em}
.pick figcaption small{font:400 10px var(--mono);letter-spacing:.07em;color:var(--muted);text-align:right}

/* ---------------------------------------------------------------------------
   01 — QuranVoc
   --------------------------------------------------------------------------- */
.feature-quranvoc .rule{border-color:#89b399}
.feature-quranvoc .feature-head h2 span{color:#a9cbac}
.feature-quranvoc .feature-note p{color:#d5e3d4}
/* The mark is the app's own icon, on its own dark square: rounded and outlined
   so it reads as an icon rather than as a patch of the wrong green. */
.qv-mark{width:clamp(76px,7vw,118px);height:auto;margin-bottom:clamp(26px,3vw,46px);
  border-radius:24%;border:1px solid #ffffff2e}
/* The app screens are 145 × 296 pixels at source. They are shown at exactly
   that size — a phone screenshot painted twice its own width is a blurred
   screenshot, and the shelf of small, real screens reads better anyway. */
.qv-screens{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,42px);align-items:flex-start}
.qv-screen{flex:0 0 145px}
.qv-screen button{display:block;width:145px;padding:0;border:1px solid #9dbfa5aa;border-radius:18px;
  background:#0d1a14;overflow:hidden;cursor:zoom-in;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.qv-screen img{width:145px;height:296px}
.qv-screen button:hover{transform:translateY(-8px);box-shadow:0 22px 40px #03120db8}
.qv-screen>span{display:flex;align-items:baseline;gap:9px;padding-top:13px;font-size:12px;font-weight:700}
.qv-screen>span b{font:500 10px var(--mono);letter-spacing:.08em;color:#9ecbab}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);
  list-style:none;margin:clamp(52px,6vw,96px) 0 0;padding:0}
.feature-list li{border-top:1px solid #7ea98c;padding-top:16px;font-size:clamp(15px,1.2vw,18px);font-weight:600}
.feature-list li span{display:block;margin-bottom:12px;font:500 10px var(--mono);letter-spacing:.14em;color:#a3c4aa;font-weight:500}

/* ---------------------------------------------------------------------------
   02 — Virtus Pharma, and the Pharma Tree feature that shares its layout
   --------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:.8fr 1.2fr;align-items:start;gap:clamp(30px,5vw,90px);
  margin-top:clamp(50px,6vw,100px)}
.split-tight{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px)}
.split-copy{position:sticky;top:calc(var(--bar) + 34px)}
.split-copy h2{font-size:clamp(38px,4.4vw,72px);line-height:1}
.split-copy p{margin-top:20px;max-width:40ch;font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:#4d565a}
.split-meta{display:block;margin-top:30px;font:500 11px var(--mono);letter-spacing:.11em;color:var(--muted)}
/* height:auto everywhere below — the whole page, at the ratio it was captured. */
.frame{width:min(100%,600px);margin:0;background:#ccd3d4;box-shadow:0 30px 70px #0b171d24}
.frame-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;background:#dfe3e3;border-bottom:1px solid #bcc4c5}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:#aab3b4}
.frame-bar span{flex:1;margin-left:10px;padding:3px 10px;background:#f3f5f5;color:#69757a;
  font:400 10px var(--mono);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.frame img{width:100%;height:auto}
.frame button:focus-visible{outline-offset:-3px}

/* ---------------------------------------------------------------------------
   03 — Plutoni
   --------------------------------------------------------------------------- */
.feature-plutoni .rule{border-color:#4a575d}
.feature-plutoni .feature-head h2 span{color:var(--accent)}
.feature-plutoni .feature-note p{color:#c3cdd0}
.shot{margin:0}
.shot button{position:relative;display:block;width:100%;padding:0;border:1px solid #2b3439;background:#fff;
  cursor:zoom-in;box-shadow:0 40px 80px #04090c7a;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shot button:hover{transform:translateY(-6px)}
.shot img{width:100%;height:auto}
.shot-zoom{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:44px;height:44px;
  background:#101619;color:#fff;font-size:21px}
.shot figcaption{margin-top:14px;font:500 11px var(--mono);letter-spacing:.11em;color:#95a1a6}
.shot-small{width:min(100%,640px)}
.shot-small button{border-color:#d3d1c9;box-shadow:0 26px 54px #1a252b1f}
.shot-small figcaption{color:var(--muted)}
.platform{margin-top:clamp(64px,7vw,120px);border-top:1px solid #39454a;padding-top:clamp(32px,4vw,60px)}
.platform-head{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:30px}
.platform-head>span{grid-column:1/-1;font:500 11px var(--mono);letter-spacing:.13em;color:#8d9ba1;margin-bottom:26px}
.platform-head h3{font-size:clamp(34px,4.2vw,70px);line-height:1.02}
.platform-head h3 span{color:#8a979c}
.platform-body{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(24px,3.5vw,64px);margin-top:clamp(36px,4vw,64px)}
.platform-tabs{display:flex;flex-direction:column}
.platform-tabs button{display:flex;align-items:center;gap:16px;min-height:62px;padding:12px 8px 12px 0;
  border:0;border-bottom:1px solid #39454a;background:none;color:#aeb9bc;text-align:left;
  font-size:16px;font-weight:600;transition:color .3s ease,padding .3s ease}
.platform-tabs button span{font:500 10px var(--mono);letter-spacing:.1em;color:#7c898f;min-width:22px;transition:color .3s ease}
.platform-tabs button:hover{color:#fff;padding-left:8px}
.platform-tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--accent)}
.platform-tabs button[aria-selected="true"] span{color:var(--accent)}
.platform-panel{background:#192025;padding:clamp(26px,3.4vw,56px)}
.platform-panel>span{font:500 11px var(--mono);letter-spacing:.12em;color:#f08a76}
.platform-panel h4{margin:28px 0 14px;font-size:clamp(26px,2.6vw,42px);line-height:1.08}
.platform-panel p{max-width:46ch;font-size:16px;line-height:1.65;color:#c2cccf}
.platform-panel ul{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid #3d494e;max-width:520px}
.platform-panel li{border-bottom:1px solid #3d494e;padding:11px 0;font-size:14px;line-height:1.45;color:#dfe5e4}
.platform-panel.changing{animation:panelIn .45s ease both}
@keyframes panelIn{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   04 — the collection. A dense contact sheet: every post at its own height,
   nothing cropped, the gaps tight enough that a series reads as a series.
   --------------------------------------------------------------------------- */
.tools{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-top:1px solid var(--line);padding-top:18px;margin-bottom:clamp(26px,3vw,44px)}
.filters{display:flex;gap:clamp(16px,2.2vw,36px);overflow-x:auto;scrollbar-width:thin}
.filter{display:inline-flex;align-items:baseline;gap:7px;flex:0 0 auto;border:0;border-bottom:2px solid transparent;
  background:none;color:#828c90;padding:0 0 12px;font-size:clamp(15px,1.4vw,19px);font-weight:700;white-space:nowrap;
  transition:color .25s ease,border-color .25s ease}
.filter:hover,.filter.active{color:var(--ink)}
.filter.active{border-color:var(--ink)}
.filter span{font:500 10px var(--mono);letter-spacing:.08em}
.tools-status{font:500 11px var(--mono);letter-spacing:.1em;color:var(--muted);white-space:nowrap;padding-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;
  gap:clamp(22px,1.9vw,34px) clamp(10px,1vw,16px)}
@media(min-width:1600px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* A piece that is itself a wide sheet (a whole identity, not one post) takes
   two columns, so its panels can still be told apart. */
.tile.is-wide{grid-column:span 2}
.tile{display:block;min-width:0;padding:0;text-align:left;border:0;background:transparent;cursor:zoom-in}
.tile[hidden]{display:none!important}
/* `height:auto` is load-bearing, not decoration. The markup carries width and
   height attributes so the browser can reserve the right space before the bytes
   land, but those map to a CSS height, which outranks aspect-ratio — leave it
   out and the box becomes 1350px tall inside a 300px column, which crops the
   artwork. With height:auto the box takes the picture's own ratio. */
.tile img{width:100%;height:auto;object-fit:contain;background:#e3e3dd;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.tile:hover img{transform:translateY(-5px);box-shadow:0 16px 30px #24323a26}
/* The card is visible to begin with; the keyframe only plays once it is in
   view. If the observer never runs the work is still on the screen, which is
   the one thing this gallery cannot get wrong. */
@keyframes cardIn{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .tile.card-in{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.tile-caption{display:block;border-top:1px solid #c5c3bb;margin-top:11px;padding-top:9px}
.tile-caption b{display:block;font-size:12.5px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.tile-caption small{display:block;margin-top:3px;font:400 10px var(--mono);color:#77838a;line-height:1.35}
.more{display:flex;align-items:center;gap:40px;margin:clamp(48px,6vw,80px) auto 0;border:0;
  border-bottom:1px solid var(--ink);background:none;color:var(--ink);padding:10px 0;font-size:16px;font-weight:700;
  transition:gap .3s ease}
.more:hover{gap:54px}.more[hidden]{display:none}
.more span{font-size:20px;font-weight:400}
.footnote{margin-top:clamp(36px,4vw,60px);font-size:13px;line-height:1.5;color:#7b868b}

/* ---------------------------------------------------------------------------
   Closing
   --------------------------------------------------------------------------- */
.closing{background:var(--night);color:#f2f4f0;padding:clamp(90px,10vw,170px) 0 clamp(80px,9vw,140px);overflow:hidden}
.closing-label{font:500 11px var(--mono);letter-spacing:.16em;color:#94a3ab}
.closing h2{margin:clamp(40px,5vw,72px) 0;font-size:clamp(66px,12.5vw,210px);line-height:.88;letter-spacing:-.04em}
.closing h2 span{color:transparent;-webkit-text-stroke:1.3px #b9ccd6}
.closing-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  border-top:1px solid #4a575e;padding-top:28px}
.closing-foot p{font-size:clamp(16px,1.8vw,23px);max-width:34ch}
.closing-foot button{border:0;border-bottom:1px solid #d5e1e4;background:none;color:#fff;padding:10px 0;
  font-size:14px;font-weight:700;white-space:nowrap;transition:color .25s ease}
.closing-foot button:hover{color:#a8dcfa}
.closing-foot button span{margin-left:32px;font-size:19px}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px clamp(20px,5vw,96px);background:#080c10;color:#96a3a8;border-top:1px solid #222c33;font-size:12px}
.colophon .wordmark{color:#eef0ec}
.colophon .link{margin-top:0;font-size:12px;font-weight:600}
.colophon small{font:400 10px var(--mono);letter-spacing:.08em}

/* ---------------------------------------------------------------------------
   Lightbox and toast
   --------------------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;
  border:0;background:#070c11f7;color:#fff}
.lightbox::backdrop{background:#060a0eee}
.lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;
  padding:12px clamp(16px,3vw,48px);border-bottom:1px solid #ffffff3d}
.lightbox-top p{font-size:14px;font-weight:700}
.lightbox-close{border:0;background:none;color:#fff;font-size:32px;line-height:1}
.lightbox-stage{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,30px);
  height:calc(100dvh - 64px);padding:18px clamp(10px,2vw,35px)}
.lightbox-stage img{width:auto;height:auto;max-width:min(86vw,1400px);max-height:calc(100dvh - 108px);
  object-fit:contain;box-shadow:0 16px 70px #0009}
/* The app screens are 145px wide at source; painting them much larger only
   makes them soft, so the dialog holds them near their own size. */
.lightbox[data-group="quranvoc"] .lightbox-stage img{width:clamp(145px,20vw,260px)}
/* A whole desktop page is far taller than the screen: give it a readable width
   and let the dialog scroll, rather than shrinking it to an unreadable sliver. */
.lightbox[data-group="fullpage"] .lightbox-stage{align-items:flex-start;overflow:auto;overscroll-behavior:contain}
.lightbox[data-group="fullpage"] .lightbox-stage img{width:min(92vw,1080px);max-width:none;max-height:none;height:auto}
.lightbox[data-group="fullpage"] .lightbox-nav{display:none}
.lightbox-nav{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #ffffff6b;
  border-radius:50%;background:#ffffff12;color:#fff;font-size:20px;transition:background .25s ease}
.lightbox-nav:hover{background:#ffffff33}
.toast{position:fixed;z-index:80;right:24px;bottom:24px;background:#101a20;color:#fff;padding:13px 18px;
  font-size:13px;box-shadow:0 15px 40px #00000066;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.toast.visible{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Narrower screens. The picks go full width rather than getting smaller: a
   post at 92vw on a phone is a post you can actually read.
   --------------------------------------------------------------------------- */
@media(max-width:1200px){
  .stage-figure{width:min(36vw,46svh,440px)}
  .stage h1{font-size:clamp(60px,9.6vw,120px)}
}
@media(max-width:1000px){
  .split,.split-tight{grid-template-columns:1fr;gap:34px}
  .split-copy{position:static}
  .frame,.shot-small{width:100%}
  .platform-body{grid-template-columns:1fr}
  .platform-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
  .platform-tabs button{min-height:54px;padding:10px;border:1px solid #39454a;font-size:14px;gap:8px}
  .platform-tabs button[aria-selected="true"]{border-color:var(--accent)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  :root{--bar:64px}
  .masthead nav{gap:14px}
  .masthead nav a{font-size:0;gap:0}
  .masthead nav a i{font-size:11px}
  .share{font-size:0}.share span{margin-left:0;font-size:19px}
  .wordmark small{display:none}
  .stage{min-height:0;padding-top:calc(var(--bar) + 26px);display:block}
  /* Portrait: the figure takes the top-right corner whole and the words sit
     below it. Nothing overlaps, so nothing has to be pushed off screen. */
  .stage-figure{position:relative;right:auto;top:auto;transform:translate3d(0,var(--drift,0px),0) rotate(-3deg);
    width:min(54vw,272px);margin:0 0 18px auto}
  .stage h1{font-size:clamp(58px,13.5vw,104px)}
  .stage-text{max-width:38ch}
  .stage-index{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .stage-index li:nth-child(n+3){margin-top:14px}
  .statement,.feature-head{grid-template-columns:1fr;align-items:start;gap:26px}
  .feature-head h2{font-size:clamp(52px,12vw,96px)}
  .platform-head{grid-template-columns:1fr}
  .platform-head>span{margin-bottom:18px}
  /* One post per row, as large as the column allows. */
  .picks{grid-template-columns:1fr;gap:clamp(30px,6vw,52px)}
  .pick{grid-column:1/-1;margin-top:0}
  .pick figcaption b{font-size:15px}
  .feature-list{grid-template-columns:1fr;gap:0}
  .feature-list li{padding:16px 0}
  .feature-list li+li{border-top:1px solid #7ea98c66}
  .qv-screens{gap:16px}
  .qv-screen{flex:1 1 145px;max-width:170px}
}
@media(max-width:600px){
  /* Two short mono lines rather than one line broken in half. */
  .rule{display:grid;grid-template-columns:1fr;gap:7px;font-size:10px;letter-spacing:.1em}
  .rule-end{max-width:none;text-align:left}
  .statement h2{font-size:clamp(42px,11vw,64px)}
  .statement p{font-size:16px}
  .stage-index b{font-size:14px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 9px}
  .tile-caption b{font-size:11.5px}
  .tile-caption small{font-size:9px}
  .tools{flex-direction:column;align-items:flex-start;gap:10px}
  .tools-status{padding-bottom:0}
  .closing-foot{display:block}
  .closing-foot p{margin-bottom:22px}
  .colophon{flex-wrap:wrap;gap:16px}
  .colophon>span{order:3;width:100%}
  .colophon small{order:4}
  .lightbox-nav{flex-basis:32px;width:32px;height:32px;font-size:16px}
  .lightbox-top p{font-size:12px}
}

/* ---------------------------------------------------------------------------
   Reduced motion: nothing moves, everything is present.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .stage-figure{transform:rotate(-3deg) translateY(-50%)}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){
  .stage-figure{transform:none}
}