/* ================================================================
   PALETTE
   ================================================================ */
:root{
  /* BASE */
  --ink:#12151A;
  --ink-deep:#0D0F13;
  --panel:#191D24;
  --rule:#272D36;
  /* ACCENT */
  --accent:#D8A657;
  --accent-2:#E8C07D;
  /* TEXT */
  --bone:#E8E6E1;
  --muted:#868F9B;
  --dim:#565E6A;

  /* ---- ALTERNATE A — "Slate & Sage" ----
  --ink:#111614; --ink-deep:#0C100E; --panel:#182019; --rule:#26302A;
  --accent:#8FBF9F; --accent-2:#B5D8C1;
  --bone:#E7EAE6; --muted:#849089; --dim:#57625B;
  */

  /* ---- ALTERNATE B — "Carbon & Ice" ----
  --ink:#0F1216; --ink-deep:#0A0C0F; --panel:#161A20; --rule:#242A32;
  --accent:#7FB3D5; --accent-2:#A9CFE6;
  --bone:#E6E9ED; --muted:#828B96; --dim:#555D67;
  */

  --display:'Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gutter:clamp(1.25rem,5vw,5rem);
  --maxw:1480px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.eyebrow span{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,20%),
    rgba(216,166,87,.08),transparent 65%);
}
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* ========== masthead ========== */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ink) 80%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.masthead.stuck{border-bottom-color:var(--rule)}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:1.35rem;transition:padding-block .4s var(--ease);
}
.masthead.stuck .wrap{padding-block:.9rem}
.wordmark{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:.15rem;
}
.wordmark b{font-weight:500}
.wordmark i{color:var(--accent);font-style:normal;animation:blink 2.6s steps(1) infinite}
@keyframes blink{0%,62%{opacity:1}63%,100%{opacity:.2}}
.masthead nav{display:flex;gap:1.6rem}
.masthead nav a{
  position:relative;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;padding-bottom:3px;transition:color .25s var(--ease);
}
.masthead nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .38s var(--ease);
}
.masthead nav a:hover{color:var(--bone)}
.masthead nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ========== load ========== */
.lift{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.ready .lift{opacity:1;transform:none}
.ready .d1{transition-delay:.05s}
.ready .d2{transition-delay:.9s}
.ready .d3{transition-delay:1s}
.ready .d4{transition-delay:1.12s}

/* ========== hero ========== */
.hero{position:relative;z-index:1;
  padding-block:clamp(3.5rem,10vw,7rem) clamp(2rem,5vw,4rem)}
.hero-head{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3.2rem,13vw,12rem);
  line-height:.85;letter-spacing:-.055em;margin:1.5rem 0 0;
  text-transform:uppercase;
}
.hero-head .ln{display:block;overflow:hidden}
.hero-head .ln > span{display:block;transform:translateY(106%);
  transition:transform 1.05s var(--ease-out)}
.ready .hero-head .ln > span{transform:none}
.ready .hero-head .ln:nth-child(1) > span{transition-delay:.16s}
.ready .hero-head .ln:nth-child(2) > span{transition-delay:.28s}
.hero-head em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero-rule{
  height:1px;background:var(--rule);margin-top:clamp(2rem,4vw,3rem);
  position:relative;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.2s var(--ease-out) .5s;
}
.ready .hero-rule{transform:scaleX(1)}
.hero-rule::after{
  content:"";position:absolute;left:0;top:-1px;height:3px;
  width:clamp(90px,15vw,220px);
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-out) 1.2s;
}
.ready .hero-rule::after{transform:scaleX(1)}

.hero-foot{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);
  align-items:flex-start;padding-top:1.75rem;
}
.hero-foot p{margin:0;max-width:36rem;color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.125rem)}
.hero-foot p strong{color:var(--bone);font-weight:500}
.chip{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rule);border-radius:100px;
  padding:.65rem 1.15rem;white-space:nowrap;
  transition:border-color .3s var(--ease),color .3s var(--ease),
    background-color .3s var(--ease);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;position:relative}
.chip .dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--accent);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.6);opacity:0}}
.chip:hover,.chip:active{border-color:var(--accent);color:var(--accent);
  background:rgba(216,166,87,.07)}

/* ========== marquee ========== */
.marquee{
  border-block:1px solid var(--rule);background:var(--ink-deep);
  overflow:hidden;padding-block:1.15rem;position:relative;z-index:1;
}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-group{display:flex;align-items:center;gap:2.5rem;
  padding-right:2.5rem;flex:none}
.marquee-group span{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.marquee-group i{color:var(--accent);font-style:normal;font-size:.6rem}

/* ========== stats ========== */
.stats{position:relative;z-index:1;background:var(--ink-deep)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-left:1px solid var(--rule)}
.stat{border-right:1px solid var(--rule);
  padding:clamp(1.75rem,4vw,3rem) clamp(1rem,2vw,2rem)}
.stat b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4.5vw,3.75rem);letter-spacing:-.04em;
  line-height:1;color:var(--bone);
}
.stat p{margin:.7rem 0 0;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ========== sections ========== */
section{position:relative;z-index:1;padding-block:clamp(4rem,9vw,8rem)}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec-head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,6vw,4.5rem);letter-spacing:-.045em;
  line-height:.95;margin:.6rem 0 0;text-transform:uppercase;
}
.sec-head h2 em{font-style:normal;color:var(--accent)}

/* ========== work cards ========== */
.cards{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,6rem)}
.card{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
}
.card:nth-child(even) .card-visual{order:2}

.card-visual{
  position:relative;aspect-ratio:16/11;--par:0;
  background:var(--panel);border:1px solid var(--rule);
  border-radius:4px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .7s var(--ease-out);
}
.card:hover .card-visual{border-color:#3A424D;transform:translateY(-5px)}
.card:active .card-visual{border-color:var(--accent)}
.card-visual img{width:100%;height:100%;object-fit:cover}

.plate{
  position:absolute;inset:0;padding:clamp(1rem,2.4vw,1.9rem);
  display:flex;flex-direction:column;justify-content:space-between;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:44px 44px;
  background-position:center calc(50% + var(--par) * 1px);
  transition:background-position .12s linear;
}
.plate::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 15% 0%,
    rgba(216,166,87,.13),transparent 60%);
}
.plate-top,.plate-bot{position:relative;display:flex;
  justify-content:space-between;gap:1rem;align-items:flex-end}
.plate-top{align-items:flex-start}
.plate-mono{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.plate-note{
  position:relative;font-family:var(--mono);font-size:.75rem;
  color:var(--accent);letter-spacing:.04em;margin:0;max-width:62%;
  line-height:1.5;
}
.plate-idx{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,9vw,6rem);line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px var(--dim);
  position:relative;margin:0;
  transform:translateY(calc(var(--par) * -.3px));
  transition:-webkit-text-stroke-color .5s var(--ease);
}
.card:hover .plate-idx,.card:active .plate-idx{-webkit-text-stroke-color:var(--accent)}

.card-body h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.035em;
  line-height:1.05;margin:.9rem 0 .85rem;
}
.card-kicker{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0;
}
.card-kicker::before{content:"";width:22px;height:1px;
  background:var(--accent);flex:none}
.card-body > p{margin:0;color:var(--muted);max-width:38rem}
.stack{display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin:1.15rem 0 0;list-style:none;padding:0}
.stack li{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--rule);
  padding:.26rem .6rem;border-radius:3px;
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.card:hover .stack li{border-color:#3A424D;color:#A3ACB7}
.links{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.4rem;
  align-items:center}
.links a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-decoration:none;color:var(--bone);
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .28s var(--ease),border-color .28s var(--ease);
}
.links a .arw{display:inline-block;transition:transform .35s var(--ease)}
.links a:hover,.links a:active{color:var(--accent);border-color:var(--accent)}
.links a:hover .arw{transform:translate(3px,-3px)}
.links .note{font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;color:var(--dim)}

/* ========== stack grid ========== */
#stack{background:var(--ink-deep);border-block:1px solid var(--rule)}
.grid-stack{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.cell{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.35rem 1.15rem;position:relative;overflow:hidden;
}
.cell::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(216,166,87,.1),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
}
.cell:hover::before,.cell:active::before{opacity:1}
.cell b{position:relative;display:block;font-family:var(--display);
  font-weight:600;font-size:1rem;letter-spacing:-.01em}
.cell span{position:relative;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ========== about ========== */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.about-grid .body p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.5;margin:0 0 1.2rem;
}
.about-grid .body p:last-child{margin-bottom:0}
.about-grid em{font-style:italic;color:var(--accent)}
.locale{border:1px solid var(--rule);border-radius:4px;padding:1.6rem;
  background:var(--panel)}
.locale dl{margin:0;display:grid;gap:1.1rem}
.locale dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.3rem}
.locale dd{margin:0;font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:-.01em}
.locale dd small{display:block;font-family:var(--mono);font-weight:400;
  font-size:.75rem;color:var(--muted);letter-spacing:.04em;margin-top:.2rem}

/* ========== contact ========== */
#contact{padding-bottom:clamp(3rem,6vw,5rem)}
.mail{
  display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,5.2vw,4rem);letter-spacing:-.045em;
  line-height:1.05;margin:0 0 clamp(2rem,4vw,3rem);word-break:break-word;
  background-image:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-repeat:no-repeat;background-size:0% 3px;
  background-position:0 100%;
  transition:background-size .7s var(--ease-out),color .35s var(--ease);
}
.mail:hover{color:var(--accent);background-size:100% 3px}
.elsewhere{display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  border-top:1px solid var(--rule);padding-top:1.5rem}
.elsewhere a{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;
  text-decoration:none;color:var(--muted);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .28s var(--ease);
}
.elsewhere a .arw{display:inline-block;transition:transform .35s var(--ease)}
.elsewhere a:hover{color:var(--bone)}
.elsewhere a:hover .arw{transform:translate(3px,-3px)}

footer{position:relative;z-index:1;border-top:1px solid var(--rule);
  padding-block:1.5rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:space-between}
footer p{margin:0;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ========== reveal ========== */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-wipe{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s var(--ease-out)}
.rv-wipe.in{clip-path:inset(0 0 0 0)}

/* ========== responsive ========== */
@media (max-width:1000px){
  .card{grid-template-columns:minmax(0,1fr)}
  .card:nth-child(even) .card-visual{order:0}
  .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--rule)}
  .stat{border-bottom:1px solid var(--rule)}
  .masthead nav{gap:1.1rem}
}
@media (max-width:520px){
  .masthead nav a[data-hide]{display:none}
  .glow{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  .lift,.rv{opacity:1;transform:none}
  .rv-wipe{clip-path:none}
  .hero-head .ln > span{transform:none}
  .hero-rule,.hero-rule::after{transform:scaleX(1)}
  .progress,.glow{display:none}
}