/* =================================================================
   ISTMO ENERGY LLC
   Warm near-black editorial. A periodic-table wall of bordered
   molecule specimens (after the original site), the colour blue→green
   droplet logo and a bold wordmark set into the grid — all carried by
   the modern machinery: smooth scroll, split-text + scroll reveals,
   and an emerging nav.
   Display is a grotesque (Space Grotesk); body/UI is Inter. The only
   colour on the site is the logo droplet.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  --base:#000000;          /* pure black — the ground */
  --tile:#000000;          /* pure-black molecule-tile interior, darker than the ground */
  --base-raise:#0c0c0c;    /* barely-there raise */
  --surface:#141414;       /* a card's ground: lifted enough off pure black to
                              read as its own surface with no border at all */
  --ink:#f3f1ec;           /* warm off-white — primary type */
  --muted:rgba(243,241,236,.60);
  --faint:rgba(243,241,236,.36);

  --line:rgba(243,241,236,.12);
  --line-2:rgba(243,241,236,.22);
  --wall-line:rgba(243,241,236,.22);   /* the molecule grid — bordered specimen tiles, like the original */

  /* Brand — the droplet is two-tone: a slate-blue body, a forest-green arc.
     The ONLY colour on the site. Sampled from the logo (#4b5a83 / #476b45);
     lifted a touch to read on black. */
  --brand-blue:#6c7eb0;
  --brand-green:#5f9159;
  --paper:#f3f1ea;         /* soft warm off-white — the closing band + footer (not harsh pure white) */

  --display:'Space Grotesk','Arial',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* The page has exactly TWO vertical distances. Keep it that way:
     --section-gap separates one section from the next; --label-gap ties a
     section label to the content under it. A label must always sit closer to
     its own content than to the block above it, or the hierarchy collapses
     and two sections read as one. */
  --section-gap:clamp(5.5rem,13vh,10rem);
  --label-gap:clamp(2.4rem,5vh,3.6rem);
  /* how far the About card's type sits in from the card's edge. The press
     citation borrows it ONLY in its two-column layout, where the credit is a
     sidebar and lining its mark up with "NGL fractionation" ties the two
     sections together. Once the citation stacks it drops the inset and goes
     flush to the card's outer border — see .press__link. */
  --card-inset:clamp(1.6rem,3.2vw,3.1rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(1.25rem,5vw,6rem);
  --maxw:1320px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.js{scroll-behavior:auto}              /* Lenis owns scrolling */
body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
figure,figcaption{margin:0}
/* Text selection — Blackstone's highlighter yellow, #FDF247.
   DO NOT "mute" this by eye and do not re-sample it off a macOS screenshot:
   a screengrab is tagged with the Mac's wide-gamut display profile, so the raw
   pixels read #FBF268 — the SAME colour, encoded in a wider space. Pasting
   those numbers into CSS (which is sRGB) yields a genuinely duller yellow, and
   that is exactly the mistake that produced the #FBF268 this replaces.
   Converted through the screenshot's ICC profile, blackstone.com's yellow is
   #FDF247 — within one channel step of the #FDF147 this file shipped with, so
   the original was already right. Text is forced black, which keeps it legible
   where the ground is dark and the type was white. */
::selection{background:#FDF247;color:#000}
::-moz-selection{background:#FDF247;color:#000}

/* shared brand mark — the REAL droplet, traced from logo2.png (the same
   vectors the nav animation draws), not a hand-drawn approximation: the
   outline is a filled ring, so the stroke weight, the lower shoulder and the
   taper of the tip are the logo's own (0.6471 wide-to-tall, widest 67.7% down;
   the old inline droplet was 0.6965 with a literal circle for a bowl, which
   read as too rounded). viewBox is tight to the artwork — SIZE IT BY HEIGHT. */
.mark{flex:0 0 auto;aspect-ratio:462.48/714.66;width:auto}
.mark__body{fill:var(--brand-blue)}   /* the body */
.mark__arc{fill:var(--brand-green)}   /* the current */

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* =================================================================
   NAV — brand only. It emerges from the hero on scroll, a hairline
   draws across the bar, a blurred panel fades in past the hero, and the
   droplet fills with liquid as you move through the page (see script.js).
   ================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:flex-start;
  padding:1rem var(--gut);
  transition:padding .5s var(--ease);
  --rule:1;   /* hairline draw 0→1, driven by scroll (1 = full for no-JS) */
}
/* solid black panel — fades in once you leave the hero */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:#000000;
  opacity:0;transition:opacity .6s var(--ease);
}
.nav.is-scrolled::before{opacity:1}
.nav.is-scrolled{padding-top:.7rem;padding-bottom:.7rem}
/* the hairline that draws across the bar as the hero hands off */
.nav::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--line-2),var(--line) 62%,transparent);
  transform:scaleX(var(--rule));transform-origin:left;
}
.nav__brand{display:inline-flex;align-items:center;gap:0;flex:0 0 auto;will-change:transform,opacity}

/* ---- the animated logo lockup ----------------------------------------
   One 3.1s clock: entrance 0-0.78s, hold to 1.94s, exit 1.94-2.82s. Every
   animation is paused in CSS and scrubbed by seeking currentTime from
   script.js, so the bar never loops on its own. The artwork is the
   deliverable untouched — the outer <svg> only crops to its bounding box,
   and the inner <svg> keeps the source coordinate system so the mask
   regions and transform origins resolve exactly as authored. */
.nav__logo{display:inline-flex;flex:0 0 auto}
/* the lockup exactly as authored — droplet over "Istmo", original proportions.
   Sized by height; the width is that height x the viewBox aspect (0.63430),
   so CHANGE BOTH NUMBERS TOGETHER or the crop letterboxes. */
.nav__logo .nav__logo-svg{
  --istmo-slate:var(--brand-blue);
  --istmo-green:var(--brand-green);
  --istmo-ink:var(--ink);
  overflow:hidden;flex:0 0 auto;
  height:52px;width:32.98px;
  transition:transform .45s var(--ease);
}
.nav__brand:hover .nav__logo-svg{transform:translateY(-2px)}
@media (max-width:680px){
  .nav__logo .nav__logo-svg{height:44px;width:27.91px}
}
/* JS owns the clock - nothing plays by itself */
.nav__logo *{animation-play-state:paused!important}
/* no JS to scrub it: park every animation on the hold frame, i.e. the
   finished logo, so the bar still carries the brand */
html.no-js .nav__logo *{animation-delay:-1.38s!important}
/* reduced motion: the SVG collapses to the finished logo, so the bar
   simply fades it in and out on the same scroll threshold */
.nav.is-static-brand .nav__brand{opacity:0;transition:opacity .35s var(--ease)}
.nav.is-static-brand.is-brand .nav__brand{opacity:1}

/* text carried for assistive tech / crawlers where the logotype reads "Istmo" */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- logo animation mechanics (generated from logo animation/source) ---- */
.istmo-logo .isw{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:1000 1000;stroke-dashoffset:1000}
.istmo-logo .swR,.istmo-logo .swL{animation:istmo-draw 3.1s linear infinite,istmo-brush 3.1s linear infinite}
.istmo-logo .swS{animation:istmo-drawS 3.1s linear infinite,istmo-brushS 3.1s linear infinite}
@keyframes istmo-draw{0%{stroke-dashoffset:1000;animation-timing-function:cubic-bezier(.42,0,.12,1);}18.7097%{stroke-dashoffset:0;}72.2581%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.18,1);}89.0323%,100%{stroke-dashoffset:1000;}}
@keyframes istmo-drawS{0%,7.7419%{stroke-dashoffset:1000;animation-timing-function:cubic-bezier(.42,0,.12,1);}20.6452%{stroke-dashoffset:0;}69.0323%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.6,0,.9,.35);}78.0645%,100%{stroke-dashoffset:1000;}}
@keyframes istmo-brush{0%{stroke-width:0;animation-timing-function:linear;}2.2581%{stroke-width:61.8px;}85.4839%{stroke-width:61.8px;animation-timing-function:linear;}89.0323%,100%{stroke-width:0;}}
@keyframes istmo-brushS{0%,7.7419%{stroke-width:0;animation-timing-function:linear;}9.6774%{stroke-width:69.72999999999999px;}75.8065%{stroke-width:69.72999999999999px;animation-timing-function:linear;}78.0645%,100%{stroke-width:0;}}
.istmo-logo .drop{fill:var(--istmo-slate)}
.istmo-logo .swoosh{fill:var(--istmo-green)}
.istmo-logo .ltr{fill:var(--istmo-ink)}
.istmo-logo .dropwrap{transform-box:view-box;transform-origin:499.66px 85.17px;animation:istmo-firm 3.1s linear infinite}
@keyframes istmo-firm{0%{transform:scale(.985);animation-timing-function:cubic-bezier(.42,0,.12,1);}18.7097%{transform:none;}72.2581%{transform:none;animation-timing-function:cubic-bezier(.6,0,.9,.35);}89.0323%,100%{transform:scale(.985);}}
.istmo-logo .wwipe{transform-box:view-box;transform-origin:215.33px 0;animation:istmo-wwipe 3.1s linear infinite}
@keyframes istmo-wwipe{0%,10.3226%{transform:scaleX(0);animation-timing-function:cubic-bezier(.17,.84,.31,1);}23.871%{transform:none;}65.1613%{transform:none;animation-timing-function:cubic-bezier(.6,0,.9,.35);}74.1935%,100%{transform:translateX(572.34px) scaleX(0);}}
.istmo-logo .wordrise{transform-box:view-box;animation:istmo-wordrise 3.1s linear infinite}
@keyframes istmo-wordrise{0%,10.3226%{transform:translateY(12px);animation-timing-function:cubic-bezier(.17,.84,.31,1);}23.871%,100%{transform:none;}}

@media (prefers-reduced-motion:reduce){
  /* the animation collapses to the finished static logo */
  .istmo-logo *{animation:none!important}
  .istmo-logo .isw{stroke-dashoffset:0}
  .istmo-logo .dropwrap,.istmo-logo .wordrise,.istmo-logo .wwipe{transform:none}
}

/* =================================================================
   BUTTONS — a hairline that fills with a brand blue→green wash on hover,
   text inverts to white, the arrow nudges. (After HFA's ghost button.)
   ================================================================= */
.btn{display:inline-flex;align-items:center;gap:.7em;position:relative;overflow:hidden;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:1.1em 2em;border-radius:1px;
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn>span{position:relative;z-index:1}
.btn__arrow{position:relative;z-index:1;width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(.3em)}
/* the wipe (monochrome — set per variant) */
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
/* solid white → inverts to black on hover, arrow nudges */
.btn--solid{background:var(--ink);color:var(--base);border:1px solid transparent}
.btn--solid::before{background:var(--base)}
.btn--solid:hover{color:var(--ink);border-color:var(--line-2)}
/* ghost (kept for reuse): hairline outline → fills white */
.btn--ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--base);border-color:transparent}

/* =================================================================
   SECTION SCAFFOLD
   ================================================================= */
.section{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--section-gap) var(--gut)}
.section__label{
  display:flex;align-items:center;gap:.9em;margin-bottom:var(--label-gap);
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.section__label span{font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.05em;font-weight:400}
.section__label::after{content:"";flex:0 0 auto;width:clamp(2rem,8vw,4.5rem);height:1px;background:var(--line-2)}

/* Split-text primitives (built by JS) */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.word__in{display:inline-block;will-change:transform}
.split-ready .word__in{transform:translateY(110%)}

/* =================================================================
   HERO — the molecule wall, with the wordmark set into it.
   The grid of hydrocarbons is purely stylistic: a static backdrop,
   not an interactive feature.
   ================================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(1.4rem,3.5vh,2.4rem);
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(7rem,14vh,9.5rem) var(--gut) clamp(4.4rem,9vh,6rem);
}
/* the molecule wall — bordered specimen tiles with breathing room between them:
   the periodic-table grid of the original site, not a continuous hairline mesh */
.hero__wall{
  position:relative;flex:0 0 auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(8rem,12.5vw,10.5rem);
  grid-auto-flow:row dense;
  gap:clamp(.55rem,1.1vw,1.05rem);
}
.hero__brand,.mol{
  border:1px solid var(--wall-line);
  background:var(--tile);
}

/* brand cell — the colour droplet, the bold wordmark, the motto, set into the wall */
.hero__brand{
  /* --name is the ONE size for the nameplate: the wordmark sets it, the mark
     and the gap are multiples of it, so the lockup scales as a single object.
     Previously the mark had its own clamp with different breakpoints, so their
     ratio swung 1.42 -> 1.18 -> 1.43 across widths and the mark kept shrinking
     between 1273 and 1600px while the letters sat capped at their maximum. */
  --name:clamp(2rem,4.4vw,3.5rem);
  /* --brand-shift nudges the WHOLE lockup (mark + wordmark + motto) right off
     the tile's left edge, so the nameplate sits inboard of the wall rather than
     flush against it. It is extra left padding only — the lockup itself is
     untouched, so mark, name and motto move together. */
  --pad:clamp(1.1rem,2.2vw,2rem);
  --brand-shift:clamp(.8rem,2vw,2rem);
  grid-column:1 / 4;grid-row:2;
  display:flex;align-items:center;gap:calc(var(--name) * .5);
  padding:var(--pad);
  padding-left:calc(var(--pad) + var(--brand-shift));
}
/* hero droplet — larger and bolder than the small UI marks: let the stroke scale
   with the art (drop the non-scaling rule) so it carries the weight of the logo */
.hero__mark{height:calc(var(--name) * 1.4)}
.hero__id{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.hero__name{font-family:var(--display);font-weight:700;font-size:var(--name);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.hero__tagline{font-family:var(--mono);font-size:clamp(.64rem,.95vw,.8rem);color:var(--muted);font-weight:400;letter-spacing:.08em;line-height:1.5}

/* molecule tiles — white line-art, bright and present, one specimen per cell */
.mol{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,1.8vw,1.7rem);overflow:hidden}
.mol img{max-width:80%;max-height:clamp(60px,8.4vw,104px);width:auto;height:auto;object-fit:contain;opacity:.9}
/* optical tuning for tall / wide line-art */
.mol img[src*="Butan_Lewis"]{max-width:62%}
.mol img[src*="Toluene"],.mol img[src*="Benzene"]{max-width:46%;max-height:clamp(48px,6.6vw,84px)}
.mol img[src*="cyclohexane"]{max-width:62%}
.mol img[src*="003-methane"]{max-width:64%}
.mol img[src*="Nonane"],.mol img[src*="Heptane"]{max-width:88%}

/* the bespoke phone hero lives only at the mobile breakpoint (see RESPONSIVE) */
.hero__mobile{display:none}

/* =================================================================
   ABOUT — a single card, split down the middle. The photograph fills
   its half edge to edge: no padding, no frame, no caption beneath it,
   so it reads as the card itself extended to hold the type. The card
   clips it (overflow:hidden), and the image is absolutely positioned
   so it contributes no intrinsic height — the card sets the height and
   the photo simply fills whatever that is, at any window size.
   ================================================================= */
.about__card{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);
  min-height:clamp(19rem,29vw,27rem);
  /* Same ground as the page, framed by the same hairline as the hero's
     molecule tiles (--wall-line) — the site's existing card vocabulary. */
  background:var(--tile);color:var(--ink);
  border:1px solid var(--wall-line);
  overflow:hidden;                            /* clips the photo to the card */
}

/* the type half — the only side with padding */
.about__lead{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--card-inset);min-width:0;
}
.about__head{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.1vw,2.9rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.about__body{margin-top:1.4rem;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.72;max-width:46ch}
.about__place{margin-top:1.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* the photograph half — flush to three edges of the card */
.about__media{position:relative;margin:0;min-height:0}
.about__media img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;
}

/* -----------------------------------------------------------------
   Stacked — below 860 the two halves can't share a line. The card
   becomes photo over type, and the photo still runs flush to the top
   and both sides. This is the whole responsive story now: one split,
   one stack. No capped widths, no per-range special cases.
   ----------------------------------------------------------------- */
@media (max-width:860px){
  .about__card{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
  .about__media{order:-1}
  .about__media img{position:static;width:100%;height:auto;aspect-ratio:16/9}
  .about__lead{--card-inset:clamp(1.5rem,5vw,2.2rem);padding:var(--card-inset)}
}

/* =================================================================
   NEWS — press citations, not reconstructions.
   Each entry credits its source and gets out of the way: the
   publication's mark, what the item is, the date, the headline in our
   own display face, its standfirst, and a way through to the original.
   The earlier build re-created the publication's page inside a fake
   browser window — chrome dots, a URL bar, their nav and breadcrumb,
   a highlighted pull-quote. That borrowed their authority instead of
   citing it, and the skeuomorphic window was the one element on the
   site not written in this design language. Don't bring it back.
   ================================================================= */
/* The join with About is ONE --section-gap, not two. Every .section carries
   that padding top AND bottom, so back-to-back sections stack two of them and
   the join comes out at double the page's own break — 234px here, which read
   as a hole. News drops its top padding and lets About's bottom padding be the
   whole break, so the sequence is section-gap / label-gap / section-gap all
   the way down the page: hero -> ABOUT (117), ABOUT -> card (45), card -> NEWS
   (117), NEWS -> citation (45), citation -> paper band (117). Don't equalise
   the two sides of the NEWS label — the break above it MUST be larger than the
   tie below it, or About and News fuse into one block.
   Measure with the page SCROLLED: `.about__card` carries data-reveal and sits
   26px low until it is revealed. */
.news{padding-top:0}

.press{border-top:1px solid var(--line)}
.press__item{border-bottom:1px solid var(--line);transition:border-color .45s var(--ease)}
.press__item:hover{border-bottom-color:var(--line-2)}

/* TWO ALIGNMENTS, ONE PER LAYOUT. This is deliberate and it has been moved
   back and forth — don't collapse it to a single value in either direction.
   WIDE (two columns, below): indented by --card-inset, so the source's mark
   starts on the same vertical line as "NGL fractionation". Here the credit is
   a sidebar column of its own, so hanging it off the About TEXT reads as a
   relationship between the two sections; the hairlines stay full width and
   echo the card's outer edges around it.
   STACKED (<=900, see the media query): flush to the section's gutter edge —
   the About card's OUTER border. The padding sits on the grid container, so
   keeping it there would indent the WHOLE citation, headline and standfirst
   and CTA included, off the left margin every other block on the page sits
   on — a full-width rule with all its content starting 47px inside it. */
.press__link{
  display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.4rem,3.6vw,4rem);
  /* +1px = the About card's own border. .about__lead's padding starts INSIDE
     that border, so --card-inset alone lands the mark 1px left of "NGL
     fractionation". Not a fudge — if the card's border-width changes, this
     changes with it. */
  padding:clamp(2rem,3.8vw,3.2rem) 0 clamp(2rem,3.8vw,3.2rem) calc(var(--card-inset) + 1px);
  align-items:start;
}
.press__link:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* the credit column — the source's own mark, then a line qualifying it */
.press__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.95rem}
.press__dateline{display:flex;flex-direction:column;gap:.32rem}
.press__logo{
  width:auto;height:34px;aspect-ratio:414/221;flex:0 0 auto;
  color:var(--muted);transition:color .45s var(--ease);
}
.press__item:hover .press__logo{color:var(--ink)}
/* what the item IS — coverage is journalism, an announcement is our own
   release on the wire. Labelling them the same would imply we were covered
   when we were not, so the two never carry the same word. */
.press__kind{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);
}
.press__date{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}

/* the story */
.press__body{min-width:0}
.press__title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2.15rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance;
}
.press__standfirst{
  margin-top:1rem;max-width:56ch;
  color:var(--muted);font-size:clamp(.95rem,1.12vw,1.06rem);line-height:1.7;font-weight:300;
}
.press__cta{
  display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(1.4rem,2.2vw,1.9rem);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink);padding-bottom:.55em;border-bottom:1px solid var(--line-2);
  transition:border-color .4s var(--ease);
}
.press__item:hover .press__cta{border-bottom-color:var(--ink)}
/* a small drift, and only when the pointer is actually on the link text —
   hovering anywhere in the row inks the underline, but it does not move the
   arrow. Keep it under 2px; this is a hint, not a jump. */
.press__arrow{transition:transform .4s var(--ease)}
.press__cta:hover .press__arrow{transform:translate(1.5px,-1.5px)}

@media (max-width:900px){
  /* one column: the credit becomes a masthead line above the headline — the
     source's mark on its own row, then the dateline running inline under it.
     NB the mark must never be given flex-basis:100%: an <svg> stretched to
     the full row centres its own artwork inside that box. */
  .press__link{grid-template-columns:1fr;gap:1.15rem;padding-left:0}
  .press__meta{gap:.7rem}
  .press__dateline{flex-direction:row;align-items:baseline;gap:.8rem}
  .press__logo{height:28px}
}

/* =================================================================
   CONTACT — the one light band: a full-bleed white section with a
   statement, then plain details
   ================================================================= */
.closing{position:relative;color:#101010}
/* full-bleed band behind the centred, max-width content — soft off-white */
.closing::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50vw);z-index:-1;background:var(--paper)}
.closing .section__label{color:rgba(0,0,0,.5)}
.closing .section__label::after{background:rgba(0,0,0,.18)}

.closing__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2.4rem,4.5vw,4.5rem);align-items:stretch}
.closing__lead{display:flex;flex-direction:column}
.closing__head{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.02em;color:#0d0d0d}
.closing__intro{margin-top:1.8rem;margin-bottom:clamp(1.9rem,2.6vw,2.4rem);color:rgba(0,0,0,.66);font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.75;max-width:40ch}

/* the LinkedIn link, settled at the foot of the left column so it closes the
   composition level with the bottom of the details — the slot the fading
   hairline used to hold. It is .press__cta's idiom re-cut for the paper band:
   the dark-band version inherits --ink and --line-2, which are white there, so
   the colours are restated in black rather than shared. margin-top:auto does
   the settling; the intro's margin-bottom keeps a floor under it for when the
   column is stacked and there is no free space to absorb. */
.closing__cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:#0d0d0d;padding-bottom:.55em;border-bottom:1px solid rgba(0,0,0,.22);
  transition:border-color .4s var(--ease);
}
.closing__cta:hover{border-bottom-color:rgba(0,0,0,.7)}
.closing__cta:focus-visible{outline:1px solid rgba(0,0,0,.6);outline-offset:4px}
/* the same sub-2px drift as the press arrow — a hint, not a jump */
.closing__arrow{transition:transform .4s var(--ease)}
.closing__cta:hover .closing__arrow{transform:translate(1.5px,-1.5px)}
/* contact details as a plain description list — no borders, no table */
.closing__info{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.4rem);margin:0;padding-top:.5rem}
.closing__item dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(0,0,0,.5);margin-bottom:.7rem}
.closing__item dd{margin:0;font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.55;color:#0d0d0d;font-weight:300}
.closing__item dd a{transition:opacity .3s}
.closing__item dd a:hover{opacity:.6}

/* -----------------------------------------------------------------
   THE CARD — the contact details as an actual printed business card
   lying flat on the band: white stock, cut square, no tilt and no
   motion. What makes it read as an object is its proportion and the
   stack of shadows under it — the cut edge, the contact shadow, and the
   one it throws on the page.

   EVERY dimension in here is in `cqw`, with no clamp, no min and no rem
   anywhere: the card is one object photographed at different distances,
   so it holds its 3.5x2 shape and its exact internal layout at every
   width, phone included. A single `rem` or `clamp()` in this block
   breaks that self-similarity and the card stops being a card.

   `paper.png` (regenerate with `_paper.py`) lays the faintest tooth over
   it — a RELIEF map, not a stain: every pixel is pure black or pure
   white carrying only an alpha, so it darkens some pixels and lights
   others and can never tint the sheet. The base sits a hair off pure
   white so the lit half of the relief has somewhere to go.
   ----------------------------------------------------------------- */

/* The stage is the container the card measures itself against — an element
   can't resolve its OWN container units, so the query box has to live out
   here. It also takes GSAP's reveal transform. */
.cardstage{container-type:inline-size;width:min(100%,44rem);margin-top:.25rem}

.bizcard{
  position:relative;width:100%;
  aspect-ratio:1.75/1;                  /* 3.5in x 2in — the real thing */
  padding:5.2cqw 5.8cqw;
  display:flex;flex-direction:column;
  border-radius:3px;
  color:#101010;
  background:#fdfdfc;                   /* a hair off white, for the relief */
  box-shadow:
    0 0 0 .5px rgba(30,30,28,.11),              /* the cut edge */
    0 1px 2px rgba(28,28,26,.14),               /* contact shadow */
    0 12px 24px -12px rgba(28,28,26,.26),
    0 38px 64px -30px rgba(28,28,26,.30),       /* what it throws on the band */
    inset 0 1px 0 rgba(255,255,255,1),          /* the lit top edge */
    inset 0 -1px 0 rgba(30,30,28,.07);          /* the thickness beneath */
}
/* the tooth, under the type — the ink is printed on the sheet */
.bizcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:url("paper.png") 0 0/320px 320px repeat;
  opacity:.07;
}
.bizcard>*{position:relative;z-index:1}

/* the lockup at the left, the blank name struck opposite it, the bar centred
   on the logo's middle */
.bizcard__head{display:flex;align-items:center;justify-content:space-between;gap:4cqw}
.bizcard__logo{width:10cqw;height:auto;flex:none}
/* struck at the size a name is actually set on a card — the bar's height is
   the cap height of roughly 16pt type at this scale, not a redacted caption.
   The blue is the droplet's, sampled off logo-card.png AS RENDERED beside it,
   NOT --brand-blue (#6c7eb0). The two are genuinely different: --brand-blue
   colours the traced SVG marks, while the card carries the original raster
   lockup, whose ink is a deeper slate. Against that droplet the token reads
   visibly lighter, so the bar would look like a second, wrong blue. */
.bizcard__nameplate{width:63cqw;height:7cqw;background:#4f5c7f;flex:none}

.bizcard__rule{
  margin:auto 0 4.2cqw;height:1px;
  background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,.08) 60%,rgba(0,0,0,.03));
  box-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* the details, set the way a card sets them: two columns, small, tight */
.bizcard__info{
  display:grid;grid-template-columns:1fr 1.12fr;
  gap:3.6cqw 5cqw;align-items:start;padding-top:0;
}
.bizcard .closing__item dt{
  font-size:1.55cqw;line-height:1;letter-spacing:.2em;
  color:rgba(0,0,0,.42);margin-bottom:1.5cqw;
}
.bizcard .closing__item dd{
  font-size:2.55cqw;line-height:1.42;
  color:#141414;font-weight:400;
}
.bizcard .closing__item dd a{border-bottom:1px solid rgba(0,0,0,.16);transition:border-color .3s}
.bizcard .closing__item dd a:hover{opacity:1;border-color:rgba(0,0,0,.55)}
.bizcard .closing__item dd a:focus-visible{outline:1px solid rgba(0,0,0,.6);outline-offset:2px}

/* Stacked, the card gets the whole column — which is the only way it grows,
   since its layout never changes shape. */
@media (max-width:900px){
  .closing__grid{grid-template-columns:1fr;gap:clamp(2.2rem,5vw,3rem);align-items:start}
  /* the full column would take the card past any desktop size — hold it near
     what it measures just the other side of the breakpoint */
  .cardstage{width:min(100%,32rem)}
}

/* =================================================================
   FOOTER — a single quiet legal line
   ================================================================= */
/* soft off-white footer — black letters */
.footer{position:relative;color:#000000;
  background:var(--paper);padding:clamp(1.8rem,4vh,2.6rem) var(--gut)}
/* baseline, not centre: three lines of type, sat on one line together */
.footer__inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.8rem 2rem;max-width:var(--maxw);margin:0 auto}
/* the lockup used to hold this slot and was the page's THIRD Istmo mark — the
   bar carried one, the business card 200px above carries the real one. The
   card is the brand's close, so what stays here is the only thing the mark was
   actually doing: an anchor back to the top. Site control idiom — small caps, a
   hairline that inks on hover, a sub-2px drift on the arrow. */
.footer__totop{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.62);padding-bottom:.5em;
  border-bottom:1px solid rgba(0,0,0,.22);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.footer__totop:hover{color:#000000;border-bottom-color:rgba(0,0,0,.6)}
.footer__totop:focus-visible{outline:1px solid #000000;outline-offset:4px}
.footer__arrow{transition:transform .4s var(--ease)}
.footer__totop:hover .footer__arrow{transform:translateY(-2px)}
/* the official lockup — now only the privacy page's masthead wears it.
   Body + arc inherit the shared .mark__* fills; the wordmark takes the colour
   of whatever ground it sits on. */
.lockup{width:auto;aspect-ratio:561.33/883.88;flex:0 0 auto}
.lockup__word{fill:currentColor}
.footer__link{border-bottom:1px solid rgba(0,0,0,.22);transition:border-color .3s}
.footer__link:hover{border-bottom-color:rgba(0,0,0,.6)}
.footer__loc{color:rgba(0,0,0,.62);font-size:.8rem;letter-spacing:.04em}
.footer__copy{color:rgba(0,0,0,.48);font-size:.74rem;letter-spacing:.05em}

/* =================================================================
   LEGAL — the privacy page. A document, not a scroll experience: no
   GSAP, no Lenis, no script.js. It borrows the site's tokens, its
   section label and its footer, and adds nothing but reading type.
   ================================================================= */
.legal{background:var(--base);color:var(--ink)}
.legal__bar{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--maxw);margin:0 auto;padding:1rem var(--gut);
}
.legal__home{display:inline-flex}
.legal__lockup{height:52px;transition:opacity .3s var(--ease)}
.legal__home:hover .legal__lockup{opacity:.75}
.legal__back{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.4em;border-bottom:1px solid var(--line);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.legal__back:hover{color:var(--ink);border-bottom-color:var(--line-2)}
/* the 45-degree mirror of the citation's outbound arrow — up-and-out there,
   up-and-back here, and the same restrained drift on hover */
.legal__arrow{transition:transform .4s var(--ease)}
.legal__back:hover .legal__arrow{transform:translate(-1.5px,-1.5px)}

.legal__page{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--section-gap) var(--gut);
}
.legal__title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink);
}
.legal__meta{
  margin-top:1.1rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}

/* one measured column — long-form legal text wants a hard line length */
.legal__body{margin-top:var(--section-gap);max-width:68ch}
.legal__lead{
  font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.66;color:var(--ink);font-weight:300;
  padding-bottom:clamp(2rem,3.4vw,2.8rem);border-bottom:1px solid var(--line);
}
.legal__body h2{
  margin-top:clamp(2.6rem,4.4vw,3.6rem);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
.legal__body h3{
  margin-top:clamp(1.5rem,2.4vw,2rem);
  font-family:var(--mono);font-weight:400;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.legal__body p{margin-top:1.1rem;color:var(--muted);font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.78;font-weight:300}
.legal__body strong{color:var(--ink);font-weight:500}
.legal__list{margin-top:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.legal__list li{
  position:relative;padding-left:1.5em;
  color:var(--muted);font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.7;font-weight:300;
}
.legal__list li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.7em;height:1px;background:var(--line-2);
}
.legal__body a{border-bottom:1px solid var(--line-2);transition:border-color .35s var(--ease)}
.legal__body a:hover{border-bottom-color:var(--ink)}

/* =================================================================
   RESPONSIVE
   ================================================================= */
/* =================================================================
   RESPONSIVE HERO (tablet / phone / narrow windows)
   Below 1024px the desktop molecule wall is hidden and replaced with a
   quiet editorial nameplate: a thin masthead rule pinned to the top, the
   wordmark set in the optical centre, and one restrained figures line at
   the foot. No grids, no clutter — just the brand, given room.
   ================================================================= */
@media (max-width:1024px){
  .hero__wall{display:none}
  .hero__mobile{display:flex}

  /* the figures line reads oddly when the footer wraps on narrow windows */
  .footer__loc{display:none}

  .hero{
    min-height:100svh;justify-content:stretch;gap:0;
    padding:calc(env(safe-area-inset-top,0px) + 4.25rem) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 1.6rem);
  }
  .hero__mobile{flex:1 1 auto;flex-direction:column}

  /* nameplate — droplet to the LEFT of the wordmark + motto (as on desktop),
     the whole block centred vertically in the open space. min-height:0 lets it
     shrink instead of pushing the foot line below the fold on short screens */
  .hm__brand{
    --name:clamp(2.8rem,8vw,4.8rem);   /* drives the mark and the gap too */
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:row;align-items:center;
    gap:calc(var(--name) * .42);
  }
  .hm__id{display:flex;flex-direction:column;gap:.55rem;min-width:0}
  .hm__mark{height:calc(var(--name) * 1.4)}
  .hm__name{
    font-family:var(--display);font-weight:500;
    font-size:var(--name);line-height:.96;
    letter-spacing:-.03em;color:var(--ink);
  }
  .hm__tagline{
    font-family:var(--mono);font-weight:400;
    font-size:clamp(.72rem,1.3vw,.86rem);
    letter-spacing:.09em;line-height:1.5;color:var(--muted);
  }

  /* a single quiet line, pinned to the foot above a hairline */
  .hm__foot{flex:0 0 auto;padding-top:1.2rem;border-top:1px solid var(--line)}
  .hm__reach{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
    line-height:1.5;color:var(--muted);
  }

  /* About collapses from tablet down; Contact keeps its lead | info two
     columns (info stays on the right, as on desktop) until it gets too tight
     for phones — see the 680px breakpoint */
}
@media (max-width:680px){
  :root{--gut:1.25rem}

  .hero{
    padding:calc(env(safe-area-inset-top,0px) + 3.5rem) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 1.2rem);
  }
  /* keep the wordmark on one line beside the droplet (as on desktop) —
     only --name moves; the mark and the gap follow it automatically */
  .hm__brand{--name:clamp(2.05rem,9.5vw,3.4rem)}
  .hm__tagline{font-size:clamp(.62rem,2.6vw,.76rem);letter-spacing:.06em}

  /* on phones the two contact columns get too tight — stack them. The
     signature drops below the intro (the list follows it) with normal flow */
  .closing__grid{grid-template-columns:1fr;gap:2.4rem;align-items:start}

  .footer__inner{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width:460px){
  /* ease the foot line on the narrowest screens */
  .hm__reach{font-size:.68rem}
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
.reduced-motion .split-ready .word__in{transform:none !important}