/* ===========================================================================
   aariv.me

   Direction: "ultramarine studio". A designer's site, not a magazine feature.
   Sticky bar, conventional sections, real footer. Colour is structural, used
   in full-bleed blocks rather than sprinkled as accents, because the person
   this belongs to makes bright, high-chroma work and an austere neutral page
   reads like somebody else's site with his name on it.

   Two colours carry meaning, not decoration:
     ultramarine  the site's own voice, structure, the club case study
     vermilion    Aariv's hand. It appears only where he speaks later than the
                  text beside him, so the warm colour is always him.
   =========================================================================== */

:root{
  --paper:#FAFAFC;          /* cool near-white. deliberately not cream */
  --paper-2:#F1F2F7;
  --ink:#0B0E1A;
  --muted:#565E77;
  --line:#E1E4ED;
  --line-2:#C9CEDD;

  --brand:#1B2ED8;
  --brand-deep:#141F9E;
  --on-brand:#EEF0FF;
  --on-brand-muted:#A9B4F2;
  --on-brand-line:rgba(238,240,255,.22);

  --hand:#A8330B;           /* on paper */
  --hand-bright:#FFB48A;    /* on ultramarine */

  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --prose:"Newsreader",Georgia,"Times New Roman",serif;

  --bar-h:66px;
  --pad:clamp(1.15rem,5vw,4.5rem);
  --maxw:80rem;
  --measure:60ch;
  --r:10px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--prose);font-size:clamp(1.02rem,.4vw + .94rem,1.18rem);
  line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand);color:var(--on-brand)}

h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.02;
  letter-spacing:-.028em;font-weight:700;text-wrap:balance}
p{margin:0 0 1.1em;max-width:var(--measure);text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lede{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.15rem,1vw + .95rem,1.5rem);line-height:1.34;color:var(--muted);
  max-width:46ch}

/* ---- labels. Used for real metadata only, never as decoration ------------- */
.label{font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ===========================  TOP BAR  ==================================== */
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:100;
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:background 260ms var(--ease),border-color 260ms var(--ease),color 260ms var(--ease)}
.bar.is-stuck{border-bottom-color:var(--line)}
.bar.on-brand{background:color-mix(in srgb,var(--brand) 90%,transparent);
  border-bottom-color:var(--on-brand-line);color:var(--on-brand)}
.bar .wrap{display:flex;align-items:center;gap:1.25rem;width:100%}

.mark{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
  text-decoration:none;color:inherit;margin-right:auto;display:inline-flex;
  align-items:center;gap:.55rem;white-space:nowrap}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;
  transition:background 260ms var(--ease)}
.bar.on-brand .mark .dot{background:var(--hand-bright)}

.nav{display:flex;gap:clamp(.6rem,2vw,1.6rem);align-items:center}
.nav a{font-family:var(--disp);font-weight:500;font-size:.94rem;letter-spacing:-.005em;
  text-decoration:none;color:inherit;opacity:.66;padding:.4rem 0;position:relative;
  transition:opacity 180ms var(--ease)}
.nav a:hover,.nav a:focus-visible{opacity:1}
.nav a[aria-current="true"]{opacity:1}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--brand);border-radius:2px}
.bar.on-brand .nav a[aria-current="true"]::after{background:var(--hand-bright)}
@media (max-width:560px){
  .nav a{font-size:.86rem}
  .mark{font-size:.94rem}
}

/* ===========================  HERO  ====================================== */






.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.8rem,4vw,2.6rem)}

.btn{font-family:var(--disp);font-weight:600;font-size:.96rem;letter-spacing:-.005em;
  text-decoration:none;padding:.72rem 1.15rem;border-radius:var(--r);
  border:1px solid transparent;display:inline-flex;align-items:center;gap:.5rem;
  transition:transform 130ms var(--ease),background 160ms var(--ease),
             border-color 160ms var(--ease),color 160ms var(--ease)}
.btn--solid{background:var(--brand);color:var(--on-brand)}
.btn--solid:hover{background:var(--brand-deep)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.on-brand-block .btn--solid{background:var(--on-brand);color:var(--brand)}
.on-brand-block .btn--ghost{border-color:var(--on-brand-line);color:var(--on-brand)}
.on-brand-block .btn--ghost:hover{border-color:var(--on-brand)}
.on-brand-block .btn:focus-visible{outline-color:var(--hand-bright)}



/* the facts strip. Three real numbers, stated once, not a dashboard */
.facts{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line)}
.facts div{min-width:0}
.facts b{display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.facts span{display:block;font-family:var(--disp);font-weight:500;font-size:.84rem;
  color:var(--muted);margin-top:.4rem;letter-spacing:-.005em}

/* ===========================  SECTIONS  ================================== */
.sec{padding-block:clamp(3.6rem,9vh,7rem);position:relative}
.sec--tint{background:var(--paper-2)}
.sec__head{display:grid;gap:.9rem;margin-bottom:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .sec__head{grid-template-columns:minmax(0,26rem) minmax(0,1fr);
    gap:clamp(2rem,5vw,4rem);align-items:start}
}
.sec__head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.034em}
/* only the head's own lede loses its margin. A bare `p` here also flattened the
   stacked paragraphs nested inside a section head, which is the classic
   selector collision. */
.sec__head > p{margin:0}

/* the club: full bleed ultramarine. The one hard ground change on the page */
.on-brand-block{background:var(--brand);color:var(--on-brand)}
.on-brand-block h2,.on-brand-block h3{color:var(--on-brand)}
.on-brand-block p{color:var(--on-brand)}
.on-brand-block .lede,.on-brand-block .label,.on-brand-block figcaption{color:var(--on-brand-muted)}
.on-brand-block .facts{border-top-color:var(--on-brand-line)}
.on-brand-block .facts span{color:var(--on-brand-muted)}
.on-brand-block a{color:var(--on-brand)}
.on-brand-block .rule{background:var(--on-brand-line)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- figures ------------------------------------------------------------- */
figure{margin:0}
figcaption{font-family:var(--disp);font-weight:400;font-size:.85rem;line-height:1.45;
  color:var(--muted);margin-top:.7rem;max-width:48ch}
.shot{border-radius:var(--r);overflow:hidden;background:none}
.shot img{width:100%}

.grid{display:grid;gap:clamp(1rem,2.4vw,1.7rem)}
@media (min-width:700px){.grid--2{grid-template-columns:1fr 1fr}}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(3,1fr)}}

/* the mark taken apart */
.parts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(1.4rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,2.2rem) 0;border-block:1px solid var(--line)}
.parts img{height:clamp(42px,6vw,78px);width:auto;flex:none}
.parts img:first-child{height:clamp(76px,11vw,132px)}

/* twenty real lesson slides, set as a contact sheet */
.sheet20{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.3rem,.8vw,.55rem)}
.sheet20 img{width:100%;border:1px solid var(--line);border-radius:3px}
@media (max-width:900px){.sheet20{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.sheet20{grid-template-columns:repeat(2,1fr)}}

/* ---- THE LATER HAND -------------------------------------------------------
   The one thing this site has that others do not. A note written after the
   text it sits beside, dated, in the warm colour that only ever means Aariv.
   Desktop: the outer margin, tied to its line. Narrow: inline under the text. */
.withnotes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:1040px){
  .withnotes{grid-template-columns:minmax(0,1fr) clamp(13rem,19vw,17rem)}
}
.notecol{position:relative}
.anchor{text-decoration:underline dotted var(--hand);text-decoration-thickness:1px;
  text-underline-offset:.26em}
.on-brand-block .anchor{text-decoration-color:var(--hand-bright)}

.note{font-family:var(--prose);font-style:italic;font-size:.98rem;line-height:1.46;
  color:var(--hand);opacity:0;transform:translateY(8px);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.on-brand-block .note{color:var(--hand-bright)}
.note.is-in{opacity:1;transform:none}
.note b{display:block;font-family:var(--disp);font-style:normal;font-weight:600;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem}
.on-brand-block .note b{color:var(--on-brand-muted)}
.note i{display:block;height:1px;background:currentColor;opacity:.45;margin-bottom:.8rem;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 700ms var(--ease) 80ms}
.note.is-in i{transform:scaleX(1)}
@media (min-width:1040px){
  .note{position:absolute;left:0;width:100%}
  .note--inline{display:none}
}
@media (max-width:1039.98px){
  .note{position:static;margin:1.3rem 0 1.7rem;padding-left:.95rem;
    border-left:2px solid currentColor;max-width:var(--measure)}
  .note i{display:none}
  .notecol .note{display:none}
}

/* ---- writing list -------------------------------------------------------- */
.posts{border-top:1px solid var(--line)}
.on-brand-block .posts{border-top-color:var(--on-brand-line)}
.posts a{display:grid;gap:.3rem;padding:clamp(1rem,2.2vw,1.35rem) 0;text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:padding-left 240ms var(--ease),color 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.posts a:hover{padding-left:.6rem;color:var(--brand)}}
.posts .t{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.022em;line-height:1.16}
.posts .d{font-family:var(--disp);font-weight:500;font-size:.8rem;color:var(--muted)}
.posts a:hover .d{color:inherit}

/* ---- reveal on entry. Opacity and transform only, never a clip on the
        observed element: a clip zeroes its intersection rect and it can never
        reveal itself. ------------------------------------------------------- */
[data-in]{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
[data-in].is-in{opacity:1;transform:none}

/* ===========================  FOOTER  ==================================== */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vh,5rem) 2rem}
.foot a{color:var(--paper);text-decoration-color:rgba(250,250,252,.34);
  text-underline-offset:.22em;transition:text-decoration-color 160ms var(--ease)}
.foot a:hover{text-decoration-color:var(--hand-bright)}
.foot__grid{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot h3{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.03em;color:var(--paper)}
.foot .lede{color:rgba(250,250,252,.68);margin-top:.8rem;max-width:34ch}
.foot .label{color:rgba(250,250,252,.5);margin-bottom:.9rem;display:block}
.foot ul{list-style:none;margin:0;padding:0;font-family:var(--disp);font-weight:500;
  font-size:.98rem}
.foot li{margin-bottom:.55rem}
.foot__end{margin-top:clamp(2.6rem,6vh,4rem);padding-top:1.4rem;
  border-top:1px solid rgba(250,250,252,.16);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  font-family:var(--disp);font-size:.82rem;color:rgba(250,250,252,.55)}

/* ===========================  POST PAGE  ================================= */
.post{padding-top:calc(var(--bar-h) + clamp(2.4rem,7vh,4.5rem));
  padding-bottom:clamp(3rem,8vh,5rem)}
.post h1{font-size:clamp(2.2rem,5.4vw,3.9rem);letter-spacing:-.036em;max-width:18ch}
.post .dateline{margin:clamp(1.1rem,2.6vw,1.6rem) 0 0}
.post .body{margin-top:clamp(2rem,4.5vw,3rem)}
.post .body > p:first-child{font-size:clamp(1.12rem,.9vw + .95rem,1.34rem);line-height:1.52}
.post h2{font-family:var(--disp);font-size:clamp(1.35rem,2.8vw,1.85rem);letter-spacing:-.028em;
  margin-top:clamp(2.4rem,5vw,3.4rem);margin-bottom:.6rem}
.post blockquote{margin:clamp(1.8rem,4vw,2.6rem) 0;padding-left:clamp(1rem,2.5vw,1.5rem);
  border-left:3px solid var(--brand);font-family:var(--disp);font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.28;letter-spacing:-.02em;
  color:var(--ink);max-width:28ch}
.post .end{margin-top:clamp(3rem,7vh,4.5rem);padding-top:1.3rem;
  border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  [data-in],.note{opacity:1 !important;transform:none !important;transition:none}
  .note i{transform:scaleX(1) !important;transition:none}
}

/* small utilities used by the page structure */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:12px;top:12px}
.sub{margin:clamp(2.6rem,6vw,4rem) 0 1rem}
.sub:first-of-type{margin-top:0}
.subp{margin-bottom:clamp(1.4rem,3vw,2rem)}
.capline{font-family:var(--disp);font-weight:400;font-size:.85rem;line-height:1.45;
  color:var(--muted);margin-top:.8rem;max-width:56ch}
.on-brand-block .capline{color:var(--on-brand-muted)}

/* ===========================================================================
   THE HERO. A real three-dimensional scene, built from Aariv's own mark.

   The mark ships as five separate transparent pieces, so they are placed at
   different depths in a perspective container and converge into the finished
   logo as the page scrolls. The headline sits between two of those depths, so
   the front pieces genuinely pass in front of the words rather than faking it
   with a z-index.

   Nothing here is a library. It is transforms driven by one scroll value.
   =========================================================================== */

:root{
  --night:#05060B;
  --night-2:#0A0C16;
  --on-night:#F2F3FA;
  --on-night-soft:#98A0BE;
  --glow-a:#19CBEA;   /* the club's own cyan */
  --glow-b:#2C6FF5;
  --glow-c:#A63BF5;
  --glow-d:#FB4570;
}

.stage{position:relative;background:var(--night);color:var(--on-night);
  min-height:100svh;overflow:clip;isolation:isolate}
/* No overflow clip here. An overflow other than visible on an ancestor of the
   perspective container is the most common way iOS Safari silently drops a
   subtree out of 3D. The outer .stage already clips, and measurement confirms
   removing this changes horizontal overflow by zero pixels. */
.stage__sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.stage__scroll{height:280svh}          /* the act's scroll length */

/* atmosphere. Outside the 3D rig on purpose: a blur or opacity here would
   flatten every descendant out of 3D space. */
.atmos{position:absolute;inset:-20%;pointer-events:none;z-index:0}
.atmos i{position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5}
.atmos .a1{width:52vmax;height:52vmax;left:4%;top:2%;
  background:radial-gradient(circle,var(--glow-b),transparent 68%)}
.atmos .a2{width:44vmax;height:44vmax;right:2%;top:22%;
  background:radial-gradient(circle,var(--glow-c),transparent 66%);opacity:.42}
.atmos .a3{width:38vmax;height:38vmax;left:26%;bottom:-6%;
  background:radial-gradient(circle,var(--glow-a),transparent 64%);opacity:.34}
.atmos .a4{width:30vmax;height:30vmax;right:20%;bottom:4%;
  background:radial-gradient(circle,var(--glow-d),transparent 62%);opacity:.3}
/* optional generated plate. Sits behind everything, hidden until it exists. */
.atmos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;mix-blend-mode:screen}

/* the perspective camera */
.scene{position:relative;z-index:1;width:min(1200px,92vw);height:min(78svh,760px);
  perspective:1150px;perspective-origin:50% 46%}
.rig{position:absolute;inset:0;transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;backface-visibility:hidden;
  transform:translateZ(var(--dolly,-260px)) rotateX(var(--rx,9deg)) rotateY(var(--ry,-14deg))}

/* every piece is a leaf of the rig, so nothing flattens the subtree */
.pc{position:absolute;left:var(--ax,50%);top:var(--ay,50%);transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;will-change:transform;pointer-events:none}
.pc img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.55))}

/* the assembled position of each piece is its CSS custom property target;
   the JS blends from the scattered pose to this one across the act. */
.pc--core{width:clamp(190px,26vw,340px)}
.pc--cube-a{width:clamp(38px,5.2vw,68px)}
.pc--cube-b{width:clamp(32px,4.4vw,58px)}
.pc--sphere{width:clamp(42px,5.6vw,74px)}
.pc--squig{width:clamp(52px,7vw,92px)}

/* headline lives INSIDE the rig, between the back and front pieces */
/* type is anchored left and the mark assembles right, so the pieces cross the
   end of the headline rather than sitting on top of it. Depth must not cost
   comprehension. */
.title{position:absolute;left:0;top:50%;width:min(58%,640px);
  transform:translateY(-50%) translateZ(-150px);
  text-align:left;pointer-events:none}
.title h1{font-size:clamp(2.5rem,5.6vw,4.9rem);line-height:.95;letter-spacing:-.042em;
  color:var(--on-night);text-wrap:balance;
  text-shadow:0 2px 44px rgba(5,6,11,.92)}
.title h1 em{font-style:normal;color:var(--glow-a)}
.title p{font-family:var(--disp);font-weight:500;color:var(--on-night-soft);
  font-size:clamp(.95rem,1.2vw,1.14rem);line-height:1.5;letter-spacing:.01em;
  margin:1.5rem 0 0;max-width:40ch;pointer-events:auto;
  text-shadow:0 2px 26px rgba(5,6,11,.95)}

/* The seam. A long gradient between two very different grounds renders as a
   grey smear, so this is a hard cut with the club's own gradient laid on the
   boundary as a hairline. The change of ground is the moment; blurring it
   throws the moment away. */
.seam{position:relative;z-index:2;height:3px;background:var(--paper);
  box-shadow:0 -1px 0 rgba(242,243,250,.10)}
.seam::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--glow-a),var(--glow-b) 34%,var(--glow-c) 68%,var(--glow-d))}

/* motion off: a complete composition, depth still visible, no pinned space */
@media (prefers-reduced-motion:reduce){
  .stage__scroll{height:0}
  .stage__sticky{position:relative;height:auto;min-height:100svh;padding-block:12svh}
  .rig{transform:translateZ(-40px) rotateX(6deg) rotateY(-10deg)}
  .atmos i{filter:blur(60px)}
}
/* phones: fewer promoted layers, cheaper blur, shorter act */
/* phones get their own art direction: type at the top, the mark below it, and
   the whole assembly smaller. Not the desktop composition shrunk. */
@media (max-width:820px){
  .atmos i{filter:blur(46px)}
  .atmos .a4{display:none}
  .stage__scroll{height:200svh}
  .scene{height:min(80svh,680px);perspective:820px}
  .title{width:100%;top:1%;transform:translateY(0) translateZ(0)}
  .title h1{font-size:clamp(2.2rem,8.4vw,3.2rem)}
  .title p{font-size:.95rem;margin-top:1.1rem;max-width:34ch}
  /* the mark sits well below the type on a phone, and smaller, so no piece
     ever lands on a word */
  .pc--core{width:min(46vw,232px)}
  .pc--cube-a{width:38px}.pc--cube-b{width:32px}
  .pc--sphere{width:42px}.pc--squig{width:52px}
  /* every piece lives in the lower half so the type has clean air above it */
  /* every piece lives in the lower third so the type has clean air above it */
  .pc{--ay:var(--ay-m,82%)}
  .pc--squig{--ax:18%;--ay-m:82%}
  .pc--cube-b{--ax:86%;--ay-m:76%}
  .pc--core{--ax:52%;--ay-m:84%}
  .pc--cube-a{--ax:18%;--ay-m:74%}
  .pc--sphere{--ax:84%;--ay-m:95%}
}

/* the bar over the night ground */
.bar.on-night{background:color-mix(in srgb,var(--night) 72%,transparent);
  color:var(--on-night);border-bottom-color:rgba(242,243,250,.12)}
.bar.on-night .mark .dot{background:var(--glow-a)}
.bar.on-night .nav a[aria-current="true"]::after{background:var(--glow-a)}

/* the numbers land exactly where the ground turns, so the seam does a job */
.band{background:var(--paper);padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2.4rem,5vw,3.6rem)}
.band .facts{margin-top:0;padding-top:0;border-top:0;gap:clamp(1.6rem,5vw,4rem)}
.band .facts b{font-size:clamp(1.9rem,4vw,3rem)}