/* ══════════════════════════════════════════════════════════════════
   LAYMON GAMES — styles.css
   Structure only. Motion lives in motion.css.

   Density rules applied throughout:
     · one accent per viewport, never two competing glows
     · hairlines instead of card borders wherever possible
     · sections are separated by rhythm, not by boxes
     · decorative elements stay subordinate to the reading path
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── OG palette, unchanged ── */
  --ink:      #090806;
  --ink-2:    #100e0a;
  --ink-3:    #17130c;
  --panel:    #1b160e;
  --panel-2:  #241c11;

  --gold:     #d8a43c;
  --gold-hi:  #f3c764;
  --gold-dk:  #8a5f16;

  --green:    #0f2b21;
  --green-hi: #78b89a;

  --cream:    #f6ecd7;
  --sand:     #b8ac93;
  --sand-dim: #8b8168;

  --text:      var(--cream);
  --muted:     var(--sand);
  --muted-2:   var(--sand-dim);
  --accent:    var(--gold-hi);

  --line:    rgba(216,164,60,.24);
  --line-2:  rgba(246,236,215,.10);
  --line-3:  rgba(216,164,60,.13);

  --surface:  linear-gradient(162deg, rgba(36,28,17,.62), rgba(10,9,7,.82));
  --shadow:   0 30px 70px -42px rgba(0,0,0,.95);

  --f-display:'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body:   'Inter', 'Cairo', system-ui, -apple-system, sans-serif;
  --f-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── rhythm ── */
  --wrap: 1240px;
  --pad:  clamp(1.15rem, 4.4vw, 3.4rem);
  --sec:  clamp(5rem, 11vh, 9rem);
  --nav-h: 70px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --focus: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-hi);
  --vh: 100vh;

  /* ── quiet labels ──
     One size for every eyebrow, tag, spec key and caption. The floor is
     11.5px so a label never drops below comfortable reading on a phone. */
  --fs-label: clamp(0.72rem, 0.62vw + 0.42rem, 0.78rem);
}
@supports (height:100svh){ :root{ --vh:100svh } }

/* ══════════════════════════ BASE ══════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--ink);
  color:var(--text);
  font:400 1rem/1.7 var(--f-body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,canvas{ display:block; max-inline-size:100% }
img{ height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit }

:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:3px }

::selection{ background:rgba(216,164,60,.28); color:var(--cream) }

.wrap{
  inline-size:min(100% - var(--pad)*2, var(--wrap));
  margin-inline:auto;
}

.skip-link{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  z-index:120; transform:translateY(-120%);
  padding:.7rem 1.1rem;
  background:var(--gold); color:#1a1206;
  font:500 .85rem/1 var(--f-body); text-decoration:none;
}
.skip-link:focus-visible{ transform:none }

/* ══════════════════════════ FX ══════════════════════════ */
.fx{ position:fixed; inset:0; z-index:60; pointer-events:none }
.fx__grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.045;
}
.fx__vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(0,0,0,.55) 100%);
}

.progress{
  position:fixed; inset-block-start:0; inset-inline:0;
  block-size:2px; z-index:70; background:rgba(246,236,215,.05);
}
.progress i{
  display:block; position:relative;   /* carries the current's glowing head */
  block-size:100%; inline-size:0;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold-hi));
}

/* ══════════════════════════ NAV ══════════════════════════ */
.nav{
  position:sticky; inset-block-start:0; z-index:80;
  background:rgba(9,8,6,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-block-end:1px solid transparent;
  transition:border-color .35s ease, background .35s ease;
}
.nav.is-stuck{ border-block-end-color:var(--line-2) }

.nav__in{
  block-size:var(--nav-h);
  display:flex; align-items:center; gap:clamp(.75rem,2vw,1.8rem);
  inline-size:min(100% - var(--pad)*2, var(--wrap));
  margin-inline:auto;
}

.nav__brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; flex:0 0 auto;
}
.nav__mark{
  inline-size:30px; block-size:30px; display:grid; place-items:center;
  border:1px solid var(--line-3); border-radius:50%;
}
.nav__mark img{ inline-size:20px; block-size:20px; image-rendering:pixelated }
.nav__word b{
  font-family:var(--f-display); font-weight:700;
  font-size:.86rem; letter-spacing:.16em; color:var(--cream);
}

.nav__links{
  display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.5rem);
  margin-inline-end:auto;
}
.nav__links a{
  position:relative;
  padding:.4rem .2rem;
  text-decoration:none;
  font:500 .82rem/1 var(--f-body);
  letter-spacing:.05em;
  color:var(--muted);
  transition:color .25s ease;
}
.nav__links a::after{
  content:''; position:absolute; inset-block-end:-2px; inset-inline:0;
  block-size:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:inline-start center;
  transition:transform .3s ease;
}
.nav__links a:hover{ color:var(--cream) }
.nav__links a.is-current{ color:var(--gold-hi) }
.nav__links a.is-current::after{ transform:scaleX(1) }

/* Contact lives in the collapsed menu on small screens and as a button on
   wide ones, so the bar never has to carry both at once. */
.nav__links-cta{ display:none }

.nav__tools{ display:flex; align-items:center; gap:.55rem; flex:0 0 auto }
.nav__cta{ display:inline-flex; padding:.5rem 1rem; font-size:.8rem }

.lang{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .7rem;
  border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted);
  transition:border-color .25s ease, color .25s ease;
}
.lang:hover{ border-color:var(--line); color:var(--cream) }
.lang__icon{ inline-size:15px; block-size:15px }
.lang__label{ font:500 var(--fs-label)/1 var(--f-body); letter-spacing:.06em }

.burger{
  display:none;
  inline-size:38px; block-size:38px;
  border:1px solid var(--line-2); border-radius:999px;
  place-items:center; gap:4px;
  flex-direction:column;
}
.burger i{
  inline-size:15px; block-size:1.5px; background:var(--cream);
  transition:transform .3s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

/* ══════════════════════════ BUTTONS ══════════════════════════ */
/* position + overflow are structural, not decorative: the hover sheen in
   motion.css is a pseudo-element parked outside the pill and swept across. */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.4rem;
  border:1px solid transparent; border-radius:999px;
  font:500 .875rem/1 var(--f-body); letter-spacing:.03em;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease, color .25s ease;
}
.btn--gold{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  color:#1a1206;
  box-shadow:0 14px 28px -18px rgba(216,164,60,.75);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -18px rgba(216,164,60,.9) }
.btn--quiet{ border-color:var(--line-2); color:var(--muted) }
.btn--quiet:hover{ border-color:var(--line); color:var(--cream) }

/* ══════════════════════════ HERO ══════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-block-size:var(--vh);
  display:grid; place-items:center;
  padding-block:calc(var(--nav-h) + clamp(1.8rem,6vh,4.4rem)) clamp(3.5rem,9vh,6.5rem);
  overflow:clip;
}
/* the field paints only over the upper half of the hero: below the wordmark
   it would stack a second accent under the only one in the viewport */
.hero__field{
  position:absolute; inset:0 0 42% 0; z-index:-1;
  inline-size:100%; block-size:58%;
  opacity:.42;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 62%, transparent 100%);
}
.hero__grid{
  position:absolute; inset:0 0 34% 0; z-index:-2;
  background-image:
    linear-gradient(rgba(216,164,60,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,164,60,.055) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 10%, transparent 78%);
}
/* inset-inline-start:50% + translate:-50% only centres in LTR, because the
   translate is physical. Zeroing both inline edges and letting auto margins
   do the centring is direction-agnostic. */
.hero__halo{
  position:absolute; z-index:-1;
  inset-block-start:-4%;
  inset-inline:0; margin-inline:auto;
  inline-size:min(820px,96vw); aspect-ratio:1.7;
  background:radial-gradient(ellipse at center, rgba(216,164,60,.15), rgba(216,164,60,.045) 44%, transparent 70%);
  pointer-events:none;
}

.hero__in{
  position:relative; z-index:1;
  display:grid; justify-items:center; text-align:center;
}

/* The mascot has to feel like the subject of the hero without crowding out
   the wordmark, so it is sized against the shorter of the two axes. On a
   wide, short laptop the height term wins and the lemon gives ground; on a
   phone the width term wins and it takes over. */
.mascot{
  position:relative;
  inline-size:clamp(140px, min(21vw, 27vh), 224px);
  aspect-ratio:1;
  margin-inline:auto;
  margin-block-end:clamp(2.1rem,4.6vh,3.8rem);
  display:grid; place-items:center;
}
.mascot__ring{
  position:absolute; inset:6%;
  border:1px solid var(--line-3); border-radius:50%;
}
.mascot__canvas{ inline-size:100%; block-size:100% }
.mascot__fallback{
  position:absolute; inline-size:58%; block-size:auto;
  image-rendering:pixelated; display:none;
}
html.no-mascot3d .mascot__fallback{ display:block }

.hero__kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  font:500 var(--fs-label)/1 var(--f-body);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-dk);
}
.hero__kicker::before,.hero__kicker::after{
  content:''; inline-size:clamp(14px,4vw,34px); block-size:1px;
  background:var(--line);
}

/* Two background layers, because background-clip:text clips whatever is
   painted here to the glyphs. Layer 1 is a narrow near-white band parked
   off the inline-start edge; motion.css sweeps it across once on load and
   leaves it parked, so the resting look is still the plain gold gradient.
   Layer 2 is the actual fill. */
.hero__title{
  margin-block:.85rem .2rem;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.35rem,8.6vw,6.9rem);
  line-height:.94; letter-spacing:.03em;
  background-image:
    linear-gradient(90deg, transparent 0 46.5%, #fffae8 50%, transparent 53.5% 100%),
    linear-gradient(178deg, #fdf3dd 8%, var(--gold-hi) 46%, var(--gold) 92%);
  background-size:240% 100%, 100% 100%;
  /* 171.4% puts the band entirely before the glyphs; -70% entirely after */
  background-position:-70% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero__lede{
  max-inline-size:34ch;
  color:var(--muted); font-size:clamp(.95rem,1.6vw,1.08rem);
  text-wrap:balance;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-block-start:clamp(1.6rem,3.4vh,2.4rem) }

.hero__cue{
  position:absolute; inset-block-end:1.4rem;
  inset-inline:0; margin-inline:auto;
  inline-size:20px; block-size:30px;
  display:grid; place-items:start center;
  padding-block-start:6px;
}
.hero__cue i{ inline-size:1px; block-size:20px; background:var(--line) }

/* ══════════════════════════ SECTIONS ══════════════════════════ */
.sec{ padding-block:var(--sec); position:relative }

.shead{ margin-block-end:clamp(2.2rem,4.5vw,3.6rem) }
.shead__eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font:500 var(--fs-label)/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
  margin-block-end:.9rem;
}
.shead__num{ color:var(--gold-dk) }
.shead__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem,4.4vw,3.15rem);
  line-height:1.14; letter-spacing:.01em;
  max-inline-size:20ch;
}
.shead__title--split em{ font-style:normal; color:var(--gold) }
.shead__lede{
  margin-block-start:.85rem;
  max-inline-size:54ch; color:var(--muted);
}
.lede{ color:var(--cream) }

/* ══════════════════════════ ABOUT ══════════════════════════ */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center;
}
.about__role{ color:var(--accent); margin-block:.6rem 1.2rem }
.about__prose p + p{ margin-block-start:1rem }
.about__sig{
  margin-block-start:1.5rem;
  font:500 var(--fs-label)/1 var(--f-mono);
  letter-spacing:.16em; color:var(--gold-dk);
}

.about__figure{ position:relative }
/* offset frame behind the portrait; symmetric horizontally, so it needs no
   direction override */
.about__frame{
  position:absolute; inset:-10px -10px 26px -10px;
  border:1px solid var(--line-3);
  z-index:-1;
}
.about__figure img{
  inline-size:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-sm);
  background:var(--ink-3);
}
.about__figure figcaption{
  margin-block-start:.7rem;
  display:flex; flex-wrap:wrap; gap:.35rem .7rem;
  font:400 var(--fs-label)/1.5 var(--f-mono);
  color:var(--muted-2); letter-spacing:.06em;
}
.about__figure figcaption b{ color:var(--sand); font-weight:400 }
.about__figure figcaption {
	justify-content: center;
	text-align: center;
}
/* ══════════════════════════ SKILLS ══════════════════════════ */
.skills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,1.8rem);
}
.skill{
  display:flex; flex-direction:column;
  padding:clamp(1.2rem,2.4vw,1.75rem);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r);
}
.skill--lead{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;
}
.skill__t{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.08rem,2vw,1.32rem);
  letter-spacing:.02em;
}
.skill--lead .skill__t{ font-size:clamp(1.25rem,2.6vw,1.7rem) }
.skill__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.skill__d{ margin-block-start:.6rem; color:var(--muted); font-size:.95rem }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-block-start:1rem }
.tags span{
  padding:.24rem .6rem;
  border:1px solid var(--line-2); border-radius:999px;
  font:400 var(--fs-label)/1.5 var(--f-mono);
  color:var(--sand-dim); letter-spacing:.04em;
}

.skill__go{
  margin-block-start:auto; padding-block-start:1rem;
  display:inline-flex; align-items:center; gap:.45rem;
  align-self:flex-start;
  text-decoration:none;
  font:500 var(--fs-label)/1 var(--f-body);
  letter-spacing:.06em;
  color:var(--gold);
  transition:color .25s ease, gap .25s ease;
}
.skill__go svg{ inline-size:15px; block-size:15px }
.skill__go:hover{ color:var(--gold-hi); gap:.7rem }
.skill--lead .skill__go{ grid-column:1; margin-block-start:1.2rem }
/* the terminal occupies the second column of the lead card */
.skill--lead .term{ grid-column:2; grid-row:1/3; align-self:stretch; margin:0 }

.term{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(9,8,6,.92), rgba(16,14,10,.88));
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.term__bar{
  display:flex; align-items:center; gap:6px;
  padding:.55rem .75rem;
  border-block-end:1px solid var(--line-2);
  background:rgba(27,22,14,.45);
}
.term__dot{ inline-size:7px; block-size:7px; border-radius:50%; background:var(--gold-dk) }
.term__bar b{
  margin-inline-start:auto;
  font:400 var(--fs-label)/1 var(--f-mono); letter-spacing:.04em; color:var(--muted-2);
}
.term__out{
  flex:1;
  margin:0; padding:.95rem 1rem 1.1rem;
  font:400 12.4px/1.78 var(--f-mono);
  color:var(--sand);
  white-space:pre; overflow-x:auto;
  /* 12 lines × 1.78 line-height + the block's own padding, so the listing
     never resizes the card while it types */
  min-block-size:24em;
  tab-size:4;
}
.term__out .k{ color:var(--gold-hi) }
.term__out .f{ color:var(--cream) }
.term__out .n{ color:var(--green-hi) }
.term__out .s{ color:#e2a15c }
.term__out .c{ color:var(--muted-2); font-style:italic }

/* ══════════════════════════ PROJECTS ══════════════════════════ */
.feature{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,3rem);
  align-items:center;
  padding-block-end:clamp(1.8rem,4vw,2.8rem);
  border-block-end:1px solid var(--line-2);
}
.feature__art{
  position:relative;
  border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.feature__art img{ inline-size:100%; aspect-ratio:16/9; object-fit:cover }
.feature__badge{
  position:absolute; inset-block-start:.85rem; inset-inline-start:.85rem;
  padding:.3rem .7rem;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(9,8,6,.78);
  font:500 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-hi);
}
.feature__label{
  font:400 var(--fs-label)/1.5 var(--f-mono);
  letter-spacing:.1em; color:var(--muted-2);
}
.feature__name{
  margin-block:.5rem .8rem;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.1;
  letter-spacing:.01em;
}
.feature__desc{ color:var(--muted); max-inline-size:44ch }

.spec{
  display:flex; flex-wrap:wrap; gap:.4rem 1.9rem;
  margin-block:1.3rem;
}
.spec div{ display:flex; flex-direction:column; gap:.15rem }
.spec dt{
  font:400 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.spec dd{ font-size:.9rem; color:var(--sand) }

.layers{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.8rem,4vw,2.8rem);
  border-block-end:1px solid var(--line-2);
}
.layer__label{
  font:400 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dk);
}
.layer__t{
  margin-block:.4rem .45rem;
  font-family:var(--f-display); font-weight:600;
  font-size:1.02rem; letter-spacing:.02em;
}
.layer__d{ color:var(--muted); font-size:.9rem }

.archive{ list-style:none; margin-block-start:clamp(1.2rem,2.6vw,2rem) }
.row{
  inline-size:100%;
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 20px;
  gap:clamp(.9rem,2.4vw,1.6rem);
  align-items:center;
  padding-block:1rem;
  border-block-end:1px solid var(--line-2);
  text-decoration:none; text-align:start;
  transition:background-color .25s ease;
}
.archive li:first-child .row{ border-block-start:1px solid var(--line-2) }
.row:hover{ background:rgba(216,164,60,.035) }
.row__art{
  overflow:hidden; border-radius:var(--r-xs); border:1px solid var(--line-2);
  aspect-ratio:16/10;
}
.row__art img{ inline-size:100%; block-size:100%; object-fit:cover }
.row__body{ display:grid; gap:.2rem; min-inline-size:0 }
.row__name{
  font-family:var(--f-display); font-weight:700;
  font-size:1.02rem; letter-spacing:.01em;
}
.row__label{
  font:400 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dk);
}
.row__desc{
  color:var(--muted); font-size:.88rem; line-height:1.6;
  max-inline-size:62ch;
}
.row__go{ inline-size:18px; block-size:18px; color:var(--gold-dk); flex:0 0 auto }
.row:hover .row__go{ color:var(--gold-hi) }

/* logo rows for software and websites */
.row--logo .row__art{
  background:rgba(216,164,60,.04);
  padding:.35rem;
}
/* the archive gradient is for screenshots; logos must stay fully visible */
.row--logo .row__art::after{ content:none }
.row--logo .row__art img{
  display:block;
  object-fit:contain;
  transform:none;
}
/* no zoom-crop on hover for logos */
.row--logo:hover .row__art img,
.row--logo:focus-visible .row__art img{ transform:none }

/* ══════════════════════════ PROCESS ══════════════════════════ */
.flow{
  --flow-gap:clamp(1.3rem,2.8vw,2.4rem);
  --flow-col:calc((100% - 3*var(--flow-gap))/4);
  list-style:none; position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--flow-gap);
}
.flow::before{
  content:''; position:absolute;
  inset-block-start:3px; inset-inline-start:0;
  inline-size:calc(var(--flow-col)*3 + var(--flow-gap)*3);
  block-size:1px;
  background:linear-gradient(90deg, var(--gold-dk), var(--line) 70%, var(--line-3));
  transform:scaleX(var(--flow-x,0));
  transform-origin:left center;
}
html[dir="rtl"] .flow::before{ transform-origin:right center }

.flow__step{ position:relative; padding-inline-start:1.55rem }
.flow__dot{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:7px; block-size:7px;
  background:var(--gold);
}
.flow__num{
  display:block;
  font:700 var(--fs-label)/1 var(--f-mono);
  letter-spacing:.14em; color:var(--gold-dk);
}
.flow__t{
  margin-block:.55rem .45rem;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.02rem,1.9vw,1.28rem);
  letter-spacing:.02em;
}
.flow__d{ color:var(--muted); font-size:.9rem; max-inline-size:30ch }

.flow__note{
  margin-block-start:clamp(1.8rem,3.6vw,2.6rem);
  font:400 .8rem/1.7 var(--f-mono);
  letter-spacing:.05em; color:var(--muted-2);
}

/* ══════════════════════════ CONTACT ══════════════════════════ */
.reach{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,3.4vw,3rem);
  align-items:start;
}
.reach__mail{
  inline-size:100%;
  position:relative; overflow:hidden;   /* clips the copy-confirmation sweep */
  display:grid; gap:.4rem;
  padding:clamp(1.2rem,2.6vw,1.7rem);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface);
  text-align:start;
  transition:border-color .3s ease;
}
.reach__mail:hover{ border-color:var(--line) }
.reach__label{
  font:400 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.reach__addr{
  font-family:var(--f-mono); font-size:clamp(.94rem,2.2vw,1.2rem);
  color:var(--cream); word-break:break-all;
}
.reach__state{
  min-block-size:1.1em;
  font:500 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.08em; color:var(--gold-hi);
}
.reach__more{ display:grid; gap:.55rem; align-content:start }
.reach__more a{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  padding-block-end:.55rem;
  border-block-end:1px solid var(--line-2);
  text-decoration:none;
}
.reach__more a span{ font-size:.92rem; color:var(--sand) }
.reach__more a b{
  font:400 var(--fs-label)/1 var(--f-mono); color:var(--muted-2); letter-spacing:.04em;
}
.reach__more a:hover span{ color:var(--cream) }
.reach__more a:hover b{ color:var(--gold) }

/* ══════════════════════════ FOOTER ══════════════════════════ */
.foot{
  border-block-start:1px solid var(--line-2);
  padding-block:clamp(2.2rem,5vw,3.4rem);
  background:linear-gradient(180deg, transparent, rgba(16,14,10,.6));
}
.foot__in{
  display:grid; gap:1.1rem;
  justify-items:center; text-align:center;
}
.foot__mark{
  font-family:var(--f-display); font-weight:700;
  font-size:.92rem; letter-spacing:.26em; color:var(--sand-dim);
}
.foot__credit{ font-size:.82rem; color:var(--muted-2) }
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.1rem }
.foot__nav a{
  text-decoration:none; font:400 .8rem/1.8 var(--f-body);
  color:var(--muted); transition:color .25s ease;
}
.foot__nav a:hover{ color:var(--gold) }
.foot__copy{ font:400 var(--fs-label)/1.6 var(--f-mono); color:var(--muted-2); letter-spacing:.06em }

/* ══════════════════════════ MODALS ══════════════════════════ */
.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:var(--pad);
  background:rgba(4,3,2,.82);
  backdrop-filter:blur(6px);
}
.modal[hidden]{ display:none }
.modal__box{
  position:relative;
  inline-size:min(100%, 520px);
  padding:clamp(1.5rem,3.4vw,2.4rem);
  background:linear-gradient(162deg, var(--panel-2), var(--ink-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.modal__box--wide{ inline-size:min(100%, 880px) }
.modal__x{
  position:absolute; inset-block-start:.7rem; inset-inline-end:.9rem;
  font-size:1.5rem; line-height:1; color:var(--muted-2);
}
.modal__x:hover{ color:var(--cream) }
.modal__eyebrow{
  font:400 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk);
}
.modal__t{
  margin-block:.5rem .7rem;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.2rem,2.8vw,1.65rem); line-height:1.2;
}
.modal__b{ color:var(--muted); font-size:.95rem }

.gallery{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem; margin-block-start:1.2rem;
}
.gallery figure{ margin:0; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-sm) }
.gallery img{ inline-size:100%; aspect-ratio:16/10; object-fit:cover }

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width:1080px){
  .skill--lead{ grid-template-columns:minmax(0,1fr) }
  .skill--lead .skill__go{ grid-column:auto; grid-row:auto }
  .skill--lead .term{ grid-column:auto; grid-row:auto }
}

@media (max-width:900px){
  :root{ --nav-h:62px }

  .nav__links{
    position:absolute; inset-block-start:100%; inset-inline:0;
    display:grid; gap:0;
    padding:.4rem var(--pad) 1rem;
    background:rgba(9,8,6,.97);
    backdrop-filter:blur(14px);
    border-block-end:1px solid var(--line-2);
    visibility:hidden; opacity:0;
    transform:translateY(-6px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open .nav__links{ visibility:visible; opacity:1; transform:none }
  .nav__links a{ padding:.75rem .2rem; border-block-end:1px solid var(--line-2); font-size:.9rem }
  .nav__links a::after{ display:none }
  .nav__links a.is-current{ color:var(--gold-hi) }
  .nav__links .nav__links-cta{ display:block; border-block-end:0 }

  .nav__cta{ display:none }
  .burger{ display:flex }

  .about{ grid-template-columns:minmax(0,1fr); gap:2.2rem }
  .about__figure{ order:-1; max-inline-size:340px }
  html[dir="rtl"] .about__figure{ order:-1 }

  .feature{ grid-template-columns:minmax(0,1fr) }
  .layers{ grid-template-columns:minmax(0,1fr); gap:1.3rem }
  .reach{ grid-template-columns:minmax(0,1fr) }

  /* process → native vertical progression.
     The rail becomes one line per step rather than one line on the <ol>,
     so it can stop at the last dot instead of dangling below it. */
  .flow{
    grid-template-columns:minmax(0,1fr);
    gap:1.5rem;
    padding-inline-start:1.9rem;
  }
  .flow::before{ content:none }
  .flow__step{ padding-inline-start:1.1rem }
  .flow__step::after{
    content:''; position:absolute;
    inset-block-start:.3rem;
    inset-inline-start:-1.6rem;
    inline-size:1px;
    block-size:calc(100% + 1.5rem);
    background:linear-gradient(180deg, var(--gold-dk), var(--line) 72%, var(--line-3));
    transform:scaleY(var(--step-y,0));
    transform-origin:top center;
  }
  .flow__step:last-child::after{ content:none }
  .flow__dot{ inset-inline-start:-1.9rem; inset-block-start:.3rem }
  .flow__d{ max-inline-size:none }
}

@media (max-width:640px){
  .skills{ grid-template-columns:minmax(0,1fr) }
  .hero__btns .btn{ flex:1 1 auto }
  .row{
    grid-template-columns:96px minmax(0,1fr);
    gap:.9rem;
  }
  .row__go{ display:none }
  .gallery{ grid-template-columns:minmax(0,1fr) }
  .term__out{ font-size:11.4px }
  .reach__addr{ font-size:.92rem }
}

@media (max-width:380px){
  .nav__word{ display:none }
  .lang__label{ display:none }
  .lang{ padding:.42rem .55rem }
}