/* src/styles/fonts.css */
@font-face{font-family:'Ibrand';src:url('/uploads/zZ2UIb2OwTTDpBq115iHU-Ibrand.ttf') format('truetype');font-weight:400 800;font-display:swap;}

/* src/styles/hero-2026.css */
/* hero-2026.css — redesigned hero for the resume landing, homepage only.
   Shipped verbatim as an Instatic style code asset: the managed stylesheet's
   CSS parser drops clip-path: shape() and @supports blocks (import pitfalls
   #21/#29). Source of truth: hero-redesign.html in this folder.
   Renames vs the source, because the site stylesheet already owns these
   class names elsewhere on the page:
     .cta -> .hero-cta   .cta-badge -> .hero-cta-badge
     .chips -> .hero-chips   .chip -> .hero-chip
   Site tokens reused as-is (same values as the source's :root): --bg --surface
   --fg --muted --border --n700 --n200 --on-ink --on-ink-border --radius-lg
   --radius-pill --ease --maxw and the three font stacks. */

.hero h1,.hero p{margin:0}

.hero{
  padding:clamp(18px,3vw,44px) clamp(14px,3.4vw,40px) clamp(32px,4.2vw,60px);

  /* tokens the site sheet does not define */
  --frost:rgba(247,247,247,.82);
  --radius-panel:20px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --dur:280ms; /* site --dur is 300ms; the hero was tuned at 280 */
  --lift-2:0 1px 2px rgba(28,28,29,.05),0 14px 30px -20px rgba(28,28,29,.4);
  --gutter:clamp(10px,1.2vw,18px);
  --pad:clamp(22px,2.5vw,36px);

  /* ── one geometry system for every notch in the layout ─────────────────
     These are LENGTHS, not fractions: the outlines below are cut with
     clip-path: shape(), which mixes px with %, so a corner stays a true
     circle and a notch stays the size of the badge that lives in it — at
     320px and at 1920px alike. Each badge reads the SAME variable its notch
     is cut from, so the clearance between them cannot drift. */
  --cut:clamp(22px,2.4vw,34px);      /* fillet on every corner, in and out */
  --cut-lg:clamp(34px,4vw,58px);     /* the ink panel's free corners */
  --cut-xl:clamp(44px,5.6vw,80px);   /* the ink panel's oversized top-left */
  --nudge:clamp(10px,1.1vw,14px);    /* badge → stepped edge, all round */

  --tab-w:clamp(40px,4.2vw,60px);    /* brief, top-left: vertical label */
  --tab-h:clamp(112px,9vw,130px);
  --more-w:clamp(140px,12.4vw,178px);/* brief, bottom-right: See more */
  --more-h:clamp(46px,3.8vw,55px);
  --mark-w:clamp(62px,5.3vw,76px);   /* base, bottom-right: flat mark */
  --mark-h:clamp(46px,3.9vw,56px);
  --tag-w:clamp(80px,7.2vw,104px);   /* stage, bottom-left: caption */
  --tag-h:clamp(64px,5.8vw,84px);
}
.zones{max-width:var(--maxw);margin:0 auto;display:grid;gap:var(--gutter)}

/* ── brief: stepped card — a notch bitten out of the top-left and out of the
   bottom-right, each one exactly its badge plus --nudge on both inner sides. */
.brief{
  position:relative;isolation:isolate;
  --tl-w:calc(var(--tab-w) + var(--nudge));
  --tl-h:calc(var(--tab-h) + var(--nudge));
  --br-w:calc(var(--more-w) + var(--nudge));
  --br-h:calc(var(--more-h) + var(--nudge));
  padding:var(--pad) var(--pad) var(--pad) calc(var(--pad) + var(--tl-w));
  display:flex;flex-direction:column;
}
/* the clip strips border + box-shadow off whatever carries it, so the face
   rebuilds both: ::before is the 1px hairline, ::after the white fill 1px
   inside it, and the drop-shadow sits on the PARENT — filter is applied before
   clip-path, so a shadow on the clipped layer itself would be clipped away. */
.brief-face{
  position:absolute;inset:0;z-index:-1;
  filter:drop-shadow(0 1px 1px rgba(28,28,29,.04))
         drop-shadow(0 12px 22px rgba(28,28,29,.10));
}
.brief{
  --brief-shape:shape(
    from calc(var(--tl-w) + var(--cut)) 0,
    hline to calc(100% - var(--cut)),
    arc to 100% var(--cut) of var(--cut) small cw,
    vline to calc(100% - var(--br-h) - var(--cut)),
    arc to calc(100% - var(--cut)) calc(100% - var(--br-h)) of var(--cut) small cw,
    hline to calc(100% - var(--br-w) + var(--cut)),
    arc to calc(100% - var(--br-w)) calc(100% - var(--br-h) + var(--cut)) of var(--cut) small ccw,
    vline to calc(100% - var(--cut)),
    arc to calc(100% - var(--br-w) - var(--cut)) 100% of var(--cut) small cw,
    hline to var(--cut),
    arc to 0 calc(100% - var(--cut)) of var(--cut) small cw,
    vline to calc(var(--tl-h) + var(--cut)),
    arc to var(--cut) var(--tl-h) of var(--cut) small cw,
    hline to calc(var(--tl-w) - var(--cut)),
    arc to var(--tl-w) calc(var(--tl-h) - var(--cut)) of var(--cut) small ccw,
    vline to var(--cut),
    arc to calc(var(--tl-w) + var(--cut)) 0 of var(--cut) small cw,
    close
  );
}
.brief-face::before,.brief-face::after{
  content:"";position:absolute;
  border-radius:var(--radius-panel); /* seen only if shape() is unsupported */
  clip-path:var(--brief-shape);
}
.brief-face::before{inset:0;background:var(--border)}
.brief-face::after{inset:1px;background:var(--bg)}
.brief-tab{
  position:absolute;left:0;top:0;z-index:1;
  width:var(--tab-w);height:var(--tab-h);
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--fg);color:var(--on-ink);box-shadow:var(--lift-2);
  font-family:var(--font-mono);font-size:clamp(9.5px,.75vw,10.5px);
  letter-spacing:.16em;text-transform:uppercase;
}
.brief-tab > span{writing-mode:vertical-rl;transform:rotate(180deg)}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.headline{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.75rem,1.1rem + 2vw,2.5rem);
  line-height:1.1;letter-spacing:-.02em;text-wrap:pretty;
  margin-top:clamp(18px,2vw,28px);max-width:26ch;
}
.brief-foot{margin-top:auto;padding-top:clamp(26px,3.4vw,48px)}
.brief-note{
  font-size:13.5px;line-height:1.5;letter-spacing:.01em;
  color:var(--muted);max-width:30ch;text-wrap:pretty;
}
@media (max-width:639px){
  .brief-foot{padding-bottom:calc(var(--br-h) + 8px)}
}
@media (min-width:640px) and (max-width:1023px){
  .brief-foot{padding-left:calc(var(--br-w) + 16px - var(--pad))}
}
@media (min-width:1024px){
  .brief-note{max-width:min(30ch,calc(100% - var(--br-w) + var(--pad) - 16px))}
}

/* ── stacked: the copy card mirrors — scaleX(-1) on the face sends the
   top-left bite to the top right in one declaration */
@media (max-width:1023px){
  .brief-face{transform:scaleX(-1)}
  .brief{padding-left:var(--pad);padding-right:calc(var(--pad) + var(--tl-w))}
  .brief-tab{left:auto;right:0}
  .hero-cta{right:auto;left:0}
  .brief-tab > span{transform:none}
}
.hero-cta{
  position:absolute;right:0;bottom:0;z-index:1;
  width:var(--more-w);height:var(--more-h);
  display:inline-flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 clamp(16px,1.6vw,22px);border-radius:var(--radius-pill);
  background:var(--fg);color:var(--on-ink);text-decoration:none;
  font-size:clamp(13px,1.05vw,14.5px);font-weight:550;letter-spacing:.01em;
  box-shadow:var(--lift-2);
  transition:background-color var(--dur) var(--ease),transform 220ms var(--ease-out-expo);
}
.hero-cta-badge{
  display:grid;place-items:center;flex:none;
  width:clamp(30px,2.4vw,34px);aspect-ratio:1;border-radius:50%;
  background:var(--on-ink);color:var(--fg);
  transition:transform var(--dur) var(--ease-out-expo);
}
.hero-cta-badge svg{width:15px;height:15px}
.hero-cta:hover{background:var(--n700);transform:translateY(-1px)}
.hero-cta:hover .hero-cta-badge{transform:translateX(3px)}
.hero-cta:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* ── stage: the ink field; clips its own content ───────────────────────── */
.stage{
  position:relative;min-height:clamp(340px,66vw,440px);
  --bl-w:calc(var(--tag-w) + var(--nudge));
  --bl-h:calc(var(--tag-h) + var(--nudge));
}
/* The cradle in the top-right is tangent-solved against the brandmark pill —
   a fixed 120x56 — so every number in it is a fixed length measured back from
   the right edge: convex fillet r20 off the top edge, concave cap r38 hugging
   the pill's own 28px cap at a 10px offset, flat shelf 10px under the pill,
   convex fillet r20 back to the right edge. Centres sit 58px apart = 20 + 38,
   the external-tangency condition that keeps the join smooth. */
.stage-ink{
  position:absolute;inset:0;z-index:0;background:var(--fg);
  overflow:hidden; /* hard guarantee: nothing inside can ever leave the panel */
  border-radius:var(--radius-panel); /* seen only if shape() is unsupported */
  clip-path:shape(
    from var(--cut-xl) 0,
    hline to calc(100% - 149.5px),
    arc to calc(100% - 129.6px) 22.8px of 20px small cw,
    arc to calc(100% - 92px) 66px of 38px small ccw,
    hline to calc(100% - 20px),
    arc to 100% 86px of 20px small cw,
    vline to calc(100% - var(--cut-lg)),
    arc to calc(100% - var(--cut-lg)) 100% of var(--cut-lg) small cw,
    hline to calc(var(--bl-w) + var(--cut)),
    arc to var(--bl-w) calc(100% - var(--cut)) of var(--cut) small cw,
    vline to calc(100% - var(--bl-h) + var(--cut)),
    arc to calc(var(--bl-w) - var(--cut)) calc(100% - var(--bl-h)) of var(--cut) small ccw,
    hline to var(--cut),
    arc to 0 calc(100% - var(--bl-h) - var(--cut)) of var(--cut) small cw,
    vline to var(--cut-xl),
    arc to var(--cut-xl) 0 of var(--cut-xl) small cw,
    close
  );
}
/* grain as one decoded tile, not a live filter chain — no re-rasterising while
   the entrance animation runs */
.stage-ink::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.15;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.stage-head{
  position:absolute;z-index:3;
  top:calc(var(--pad) + 4px);left:calc(var(--pad) + 4px);
  display:flex;align-items:center;gap:16px;
}
.hero-chips{display:flex;align-items:center}
.hero-chip{
  display:grid;place-items:center;
  width:clamp(36px,3.6vw,44px);aspect-ratio:1;border-radius:50%;
  background:var(--n700);border:1px solid var(--on-ink-border);
  color:var(--on-ink);
}
.hero-chip + .hero-chip{margin-left:-10px}
.hero-chip:last-child{background:var(--fg)}
.hero-chip svg{width:18px;height:18px}
/* Mark + wordmark in one pill, 120x56 with a 28px cap against the cradle's
   38px cap and a bottom edge 10px higher = a 10px gap the whole way round.
   Both dimensions are FIXED, not content-driven — the cradle is solved
   against them. */
.brandmark{
  position:absolute;z-index:3;top:0;right:0;
  width:120px;height:56px;border-radius:var(--radius-pill);
  display:flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;
  background:var(--bg);border:1px solid var(--border);box-shadow:var(--lift-2);
}
.brandmark-badge{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--fg);
}
.brandmark svg{width:24px;height:24px;display:block;color:var(--on-ink)}
.brandmark-word{
  font-family:var(--font-display);font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--fg);
}
.stage-tag{
  position:absolute;left:0;bottom:0;z-index:3;
  width:var(--tag-w);height:var(--tag-h);
  display:grid;place-items:center;text-align:center;
  border-radius:var(--radius-pill);
  background:var(--fg);color:var(--on-ink);box-shadow:var(--lift-2);
  font-family:var(--font-mono);font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.55;
}
/* The mark is a box, not a free-floating image: the largest rectangle that
   fits INSIDE the outline — left of the bottom-left step, below the cradle's
   lowest point (86px) and below the chip row. The image is sized BY that box,
   so it can never reach an edge. */
.mark{
  position:absolute;z-index:1;pointer-events:none;
  left:var(--bl-w);right:var(--pad);
  top:calc(86px + var(--nudge));bottom:var(--pad);
  display:grid;place-items:center;
}
/* The poster is the UNTRIMMED render (natural 500x571): the 3D bundle's
   FRAME_MARGIN is calibrated against it, so the canvas cross-fade is
   seamless. Its content only fills ~47% of the box, hence the fallback
   fit rule below. */
.hero-3d-model{
  display:block;height:100%;width:auto;
  max-height:100%;max-width:100%;aspect-ratio:500 / 571;
  object-fit:contain;filter:grayscale(1) contrast(1.06);
}
/* Fallback fit: pre-upgrade / no-WebGL / reduced-motion, scale the poster's
   content up to the designed exact fit (1 / 0.469). Uses `scale` so the
   markIn transform animation cannot clobber it, and the child selector stops
   matching once hero-mark-3d.js wraps the img in .hero-3d-live. The scaled
   transparent padding is clipped by .stage-ink's overflow:hidden. */
.mark > .hero-3d-model{scale:2.13}

/* ── base: quiet surface, one step notch, attribution pinned bottom-left ─ */
.base{
  position:relative;isolation:isolate;padding:var(--pad);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(190px,22vw,260px);
  --br-w:calc(var(--mark-w) + var(--nudge));
  --br-h:calc(var(--mark-h) + var(--nudge));
}
.base-face{
  position:absolute;inset:0;z-index:-1;background:var(--surface);
  border-radius:var(--radius-panel); /* seen only if shape() is unsupported */
  clip-path:shape(
    from var(--cut) 0,
    hline to calc(100% - var(--cut)),
    arc to 100% var(--cut) of var(--cut) small cw,
    vline to calc(100% - var(--br-h) - var(--cut)),
    arc to calc(100% - var(--cut)) calc(100% - var(--br-h)) of var(--cut) small cw,
    hline to calc(100% - var(--br-w) + var(--cut)),
    arc to calc(100% - var(--br-w)) calc(100% - var(--br-h) + var(--cut)) of var(--cut) small ccw,
    vline to calc(100% - var(--cut)),
    arc to calc(100% - var(--br-w) - var(--cut)) 100% of var(--cut) small cw,
    hline to var(--cut),
    arc to 0 calc(100% - var(--cut)) of var(--cut) small cw,
    vline to var(--cut),
    arc to var(--cut) 0 of var(--cut) small cw,
    close
  );
}
.base-badge{
  position:absolute;right:0;bottom:0;z-index:1;
  width:var(--mark-w);height:var(--mark-h);
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--fg);color:var(--on-ink);box-shadow:var(--lift-2);
}
.base-badge svg{width:26px;height:26px}
/* kept in the panel's open upper-right so it never lands on the attribution;
   the -trim asset, so the box equals the object */
.accent{
  position:absolute;top:12%;right:9%;
  width:clamp(52px,6.2vw,88px);aspect-ratio:203 / 268;
  object-fit:contain;filter:grayscale(1) contrast(1.04);opacity:.92;
  pointer-events:none;
}
.attrib{max-width:min(44ch,60%)}
.attrib p{font-size:12.5px;line-height:1.5;letter-spacing:.01em;color:var(--muted)}
.attrib strong{color:var(--fg);font-weight:550}

/* ── tiles: the row below the ink panel ─────────────────────────────────── */
.tiles{display:flex;flex-wrap:wrap;gap:var(--gutter);z-index:4;position:relative}
.tile{
  border-radius:var(--radius-lg);
  padding:clamp(14px,1.5vw,20px) clamp(15px,1.6vw,22px);
  background:var(--frost);border:1px solid var(--border);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--lift-2);
  flex:1 1 132px;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.tile-num{
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(1.6rem,1.1rem + 1.3vw,2.35rem);letter-spacing:-.025em;
}
.tile-label{
  margin-top:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.tile--go{
  background:var(--bg);border-color:var(--n200);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  text-decoration:none;color:var(--fg);
  flex:1.25 1 190px;position:relative;
  padding-top:calc(clamp(14px,1.5vw,20px) + 18px);
  transition:border-color var(--dur) var(--ease),transform 220ms var(--ease-out-expo);
}
.tile-badge{
  position:absolute;top:clamp(12px,1.3vw,16px);right:clamp(12px,1.3vw,16px);
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--fg);color:var(--on-ink);
  transition:transform 220ms var(--ease-out-expo);
}
.tile-badge svg{width:16px;height:16px}
.tile--go:hover{border-color:var(--fg);transform:translateY(-2px)}
.tile--go:hover .tile-badge{transform:translate(-2px,-2px)}
.tile--go:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* ── desktop: copy card left, taller ink panel right, tiles under it ───── */
@media (min-width:1024px){
  .zones{
    grid-template-columns:minmax(0,48.5%) minmax(0,1fr);
    grid-template-rows:auto auto auto;
  }
  .brief{grid-area:1 / 1}
  .base{grid-area:2 / 1 / 4 / 2}
  .stage{grid-area:1 / 2 / 3 / 3;min-height:clamp(400px,36vw,520px)}
  .tiles{grid-area:3 / 2 / 4 / 3}
}

/* ── fallback for engines without clip-path: shape() ─────────────────────
   The SVG clipPaths in the hero markup are kept for exactly this branch.
   They are objectBoundingBox outlines, so their notches only line up with
   the badges at the aspect they were solved for — re-scoped to the desktop
   breakpoint, badges reverting to the percentage sizing that matches them.
   Below 1024px this branch degrades to plain rounded panels with the badges
   sitting ON the corners rather than nested INTO them. */
@supports not (clip-path: shape(from 0 0, close)){
  .brief-face::before,.brief-face::after{clip-path:none}
  .stage-ink{clip-path:url("#stageClip")}
  .base-face{clip-path:url("#baseClip")}

  @media (min-width:1024px){
    .brief{padding-left:calc(var(--pad) + 12.5%)}
    .brief-face::before,.brief-face::after{clip-path:url("#briefClip")}
    .brief-tab{width:calc(12.5% - 14px);height:calc(34% - 14px)}
    .hero-cta{width:calc(33.5% - 14px);height:calc(16.5% - 14px)}
    .stage-ink{clip-path:url("#stageClipCradle")}
    .brandmark{top:-7px;right:-7px}
    .stage-tag{width:calc(20% - 14px);height:calc(20% - 14px)}
    .base-badge{width:calc(15.7% - 14px);height:calc(27% - 14px)}
  }
}

/* ── entrance: one orchestrated load; default state is visible ─────────── */
@media (prefers-reduced-motion:no-preference){
  .brief{animation:riseIn 720ms var(--ease-out-expo) both}
  .stage{animation:fadeIn 820ms var(--ease-out-expo) both;animation-delay:60ms}
  .base{animation:riseIn 720ms var(--ease-out-expo) both;animation-delay:140ms}
  .tiles>*{animation:riseIn 620ms var(--ease-out-expo) both}
  .tiles>*:nth-child(1){animation-delay:280ms}
  .tiles>*:nth-child(2){animation-delay:350ms}
  .tiles>*:nth-child(3){animation-delay:420ms}
  .hero-3d-model,.accent{animation:markIn 920ms var(--ease-out-expo) both;animation-delay:200ms}
}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes markIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}