/* ---------- tokens (dark / amber-phosphor) ---------- */
:root{
  --bg:#0e1014;
  --ink:#f2f0eb;
  --body:#a8a69f;
  --muted:#85837d;
  --accent:#ffa94d;
  --accent-strong:#ffc078;
  --accent-soft:rgba(255,169,77,.1);
  --border:#262a31;
  --grid-line:rgba(255,255,255,.035);
  --panel:#14171c;
  --term-bg:#13161b;
  --term-chrome:#1d2127;
  --sans:'Archivo',sans-serif;
  --display:'Archivo Black',sans-serif;
  --mono:'Fragment Mono',monospace;
  --section-gap:clamp(6rem,14vw,11rem);
  --content-max:1120px;
}

/* ---------- fonts ---------- */
@font-face{font-family:'Archivo Black';src:url('../assets/fonts/archivo-black.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('../assets/fonts/fragment-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  /* background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); */
  background-size:72px 72px;
}
::selection{background:var(--accent);color:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--bg);padding:.6rem 1rem;z-index:10}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section,.nav,footer{padding-left:clamp(1.25rem,5vw,3.5rem);padding-right:clamp(1.25rem,5vw,3.5rem)}
main>section{max-width:var(--content-max);margin:0 auto var(--section-gap);scroll-margin-top:2.5rem}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-num{font-size:.85rem;color:var(--accent)}
.sec-head h2{font:600 .95rem/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;color:var(--ink);margin:0}
.sec-head::after{content:'';flex:1;height:1px;background:var(--border)}

/* ---------- nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:var(--content-max);margin:0 auto;padding-top:1.4rem;padding-bottom:1.4rem}
.wordmark{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--ink);text-decoration:none}
.dot{color:var(--accent)}
.nav nav{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.nav nav a{font-family:var(--mono);text-transform:lowercase;color:var(--body);text-decoration:none;font-size:.8rem;padding:.5rem 0;transition:color .2s}
.nav nav a.ext{color:var(--accent)}
.nav nav a:hover{color:var(--ink)}
.nav nav a.ext:hover{color:var(--accent-strong)}

/* ---------- hero: the poster ---------- */
.hero{position:relative;padding-top:clamp(3rem,9vh,6rem);min-height: 60dvh;}
.hero::before{
  content:'';position:absolute;top:-12%;right:-6%;width:56vw;height:56vw;
  max-width:720px;max-height:720px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,169,77,.08),transparent 72%)
}
.kicker{font-family:var(--mono);font-size:.95rem;color:var(--accent);margin:0 0 1.6rem}
.name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,11vw,8.5rem);
  line-height:.95;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--ink);margin:0 0 clamp(2rem,4vw,3.5rem)
}
.name .line{display:block}
.name .outline{color:transparent;-webkit-text-stroke:3px var(--ink)}
@supports not ((-webkit-text-stroke:1px black)){.name .outline{color:var(--ink)}}
.caret{display:inline-block;width:.16em;height:.72em;background:var(--accent);margin-left:.07em;-webkit-text-stroke:0;animation:blink 1.1s steps(2,start) infinite}
/* caret follows the line currently being rewritten; only one line shows it */
.name .line .caret{display:none}
.name .line.is-active .caret{display:inline-block}
.name .line.is-writing .caret{animation:none;visibility:visible}
/* forced blink-off used to mask the caret relocating between lines */
.name .roles.caret-hidden .caret{animation:none;visibility:hidden}
.sub{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink);line-height:1.5;margin:0 0 clamp(1.4rem,2vw,3.5rem)}
.ctas{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.85rem;
  color:var(--accent);background:transparent;border:1px solid var(--accent);
  text-decoration:none;padding:.75rem 1.3rem;border-radius:0;
  transition:background .2s,color .2s,border-color .2s
}
.btn:hover{background:var(--accent);color:var(--bg)}
.btn.ghost{color:var(--body);border-color:var(--border)}
.btn.ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.readout{
  font-family:var(--mono);font-size:.8rem;line-height:2;
  color:var(--muted);margin:2.4rem 0 0;padding:.4rem 0 .4rem 1.4rem;
  border-left:2px solid var(--accent);white-space:break-spaces
}
.readout .k{color:var(--accent)}

/* hero entrance */
.hero>*{animation:rise .45s ease-out backwards}
.hero>*:nth-child(1){animation-delay:.05s}
.hero>*:nth-child(2){animation-delay:.18s}
.hero>*:nth-child(3){animation-delay:.42s}
.hero>*:nth-child(4){animation-delay:.54s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{to{visibility:hidden}}

/* ---------- about: swiss split ---------- */
/* .about-grid{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start} */
.about-grid{display:flex;gap:clamp(2.5rem,6vw,3rem);align-items:start}
.about-side{overflow:hidden}
/* .ascii-caio{
  font-family:var(--mono);
  /* art is ~250 cols wide; shrink hard so it fits the narrow aside
  font-size:1.1px;line-height:1;letter-spacing:0;
  margin:0;color:var(--accent);white-space:pre;
  max-width:100%;overflow:hidden
} */
.about-side {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ascii-caio {
    font-family: var(--mono);
    font-size: 3px;
    line-height: 1;
    letter-spacing: 0;
    margin: 0;
    color: var(--accent);
    opacity: .6;
    white-space: pre;
    max-width: 100%;
    height: 384px;
    transition: .1s linear;
	width: 500px !important;
}
/* Per-line rows for the type-in/erase loop. Fixed 1em height so blank (not yet
   typed / just erased) lines keep their place — the art never shifts vertically. */
.ascii-line {
    display: block;
    height: 1em;
    line-height: 1;
    white-space: pre;
    overflow: hidden;
}
/* .ascii-caio {
    font-family: var(--mono);
    font-size: 3px;
    line-height: 1;
    letter-spacing: 0;
    margin: 0;
    color: var(--accent);
    opacity: .6;
    white-space: pre;
    max-width: 100%;
    height: 384px;
    position: absolute;
    right: 40px;
    transition: .1s linear;
} 
.caio-photo {
    height: 384px;
    width: auto;
    object-fit: cover;
    object-position: center left;
    opacity: 0;
    transition: .1s linear;
}
aside.about-side:hover .caio-photo {
    opacity: 1;
}
aside.about-side:hover .ascii-caio {
    opacity: 0;
}*/
.stack-label{font-size:.8rem;color:var(--accent);margin:0 0 .9rem}

/* ---------- stack: list <-> icons ---------- */
/* Mobile-first: one column; each item is an icon+label cell. */
.stack-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.stack-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.3rem .8rem}
.stack-item{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.8rem;color:var(--body);padding:.4rem 0;cursor:default;transition:color .2s,opacity .2s}
.stack-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.stack-item-icon{width:1.1rem;height:1.1rem;flex:0 0 auto;display:block;fill:currentColor}
.stack-icons{display:none}
.stack-icon{width:28px;height:28px;color:var(--muted);fill:currentColor;transition:color .2s,opacity .2s}

/* Active spotlight: the matched pair goes amber; everything else dims. */
.stack-grid.is-active-mode .stack-item,
.stack-grid.is-active-mode .stack-icon{opacity:.35}
.stack-grid .stack-item.is-active,
.stack-grid .stack-icon.is-active{opacity:1;color:var(--accent)}

/* Desktop: names multi-column block (left) + icon grid (right). The names use
   CSS multi-column so they flow top->bottom down each column, auto-fitting as
   many columns as the left track allows. */
@media (min-width:768px){
  .stack-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,4rem)}
  .stack-list{display:block;columns:7rem;column-gap:2rem}
  .stack-item{break-inside:avoid}
  .stack-item-icon{display:none}
  .stack-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:clamp(.8rem,2vw,1.4rem);list-style:none;margin:0;padding:0}
}
/* Reduced motion is handled globally (see the prefers-reduced-motion block
   below that disables all transitions), so no stack-specific rule is needed. */
.lede{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.6;color:var(--body);margin:0;max-width:34em}
.lede strong{color:var(--ink);font-weight:600}
.lede .code{font-family:var(--mono);font-size:.82em;color:var(--accent)}

/* ---------- work: feature with overlap ---------- */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.feature>img{grid-column:1;border:1px solid var(--border);filter:brightness(.85) saturate(.9);transition:filter .3s}
.feature:hover>img{filter:none}
.feature-panel{
  grid-column:2;margin-left:clamp(-6rem,-8vw,-3rem);position:relative;z-index:1;
  background:var(--panel);border:1px solid var(--border);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:0 30px 70px rgba(0,0,0,.55)
}
.feature-flag{font-size:.7rem;color:var(--accent);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .8rem}
.feature-panel h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;color:var(--ink);margin:0 0 .8rem}
.feature-panel p{font-size:.95rem;margin:0 0 1rem}
.feature-panel .tags{margin-bottom:1.2rem}

/* ---------- work: project index ---------- */
.tags{font-size:.75rem;color:var(--accent)}
.proj-link{font-size:.8rem;color:var(--accent);}
.index{border-bottom:1px solid var(--border);margin-bottom:2rem}
.proj{
  display:grid;grid-template-columns:3.5rem 1fr 230px;gap:clamp(1.5rem,3vw,2.8rem);
  align-items:center;padding:clamp(1.8rem,3.5vw,2.6rem) 0;border-top:1px solid var(--border)
}
.proj-num{font-size:.85rem;color:var(--accent);align-self:start;padding-top:.4rem}
.proj h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;color:var(--ink);margin:0 0 .5rem;transition:color .2s}
.proj h3 a{color:inherit;text-decoration:none}
.proj h3::after{content:'→';color:var(--accent);margin-left:.45em;opacity:0;display:inline-block;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.proj:hover h3{color:var(--accent)}
.proj:hover h3::after{opacity:1;transform:none}
.proj p{font-size:.92rem;margin:0 0 .6rem;max-width:58ch}
.proj .tags{margin:0}
.thumb{border:1px solid var(--border);filter:brightness(.85) saturate(.9);transition:transform .3s ease,filter .3s}
/* .proj:hover .thumb{transform:rotate(-1.5deg) scale(1.03);filter:none} */
.proj:hover .thumb{filter:none}
.also{font-size:.8rem;color:var(--muted)}
.also a{color:var(--accent)}

/* ---------- contact: terminal window ---------- */
.term{
  border-radius:10px;overflow:hidden;border:1px solid #2e333b;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 90px var(--accent-soft)
}
.term-bar{display:flex;gap:.5rem;padding:.85rem 1.2rem;background:var(--term-chrome)}
.term-bar span{width:12px;height:12px;border-radius:50%}
.term-bar span:nth-child(1){background:#ff5f56}
.term-bar span:nth-child(2){background:#ffbd2e}
.term-bar span:nth-child(3){background:#27c93f}
.term-body{background:var(--term-bg);padding:clamp(2.2rem,6vw,4.5rem)}
.prompt{font-size:.9rem;color:var(--accent);margin:0 0 1.8rem}
.prompt::after{content:'';display:inline-block;width:.5em;height:1em;background:var(--accent);margin-left:.4em;vertical-align:text-bottom;animation:blink 1.1s steps(2,start) infinite}
/* .contact-head{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4rem);line-height:.95;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 1.2rem
} */
.contact-head{
  font-family:"Manufacturing Consent";
  font-size:clamp(2.2rem,6vw,7rem);line-height:.8;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 3rem
}
.contact-sub{color:var(--body);font-size:1rem;margin:0 0 2rem;max-width:46ch}
.email{
  display:inline-block;font-family:var(--mono);font-size:clamp(1rem,2.6vw,1.55rem);color:var(--accent);
  text-decoration:none;border-bottom:2px solid var(--accent);
  padding-bottom:.35rem;margin-bottom:2.4rem;transition:color .2s,border-color .2s
}
.email:hover{color:var(--accent-strong);border-color:var(--accent-strong)}
.term-links{font-size:.85rem;color:var(--body);margin:0}
.term-links a{color:var(--accent);text-decoration:none;transition:border-color .2s}
.term-links a:hover{border-color:var(--accent)}

/* ---------- footer ---------- */
footer{max-width:var(--content-max);margin:0 auto}
footer p{margin:0;padding:2rem 0 2.4rem;font-size:.75rem;color:var(--muted)}
footer .exit{color:var(--accent)}

/* ---------- reveals + reduced motion ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .proj{grid-template-columns:2.8rem 1fr 180px}
}
@media (max-width:767px){
  .nav{flex-wrap:wrap}
  .nav nav{gap:1rem}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:2.2rem}
  .about-grid{grid-template-columns:1fr;gap:2.2rem;}
  .lede{font-size:1.15rem}
  .feature{grid-template-columns:1fr}
  .feature>img{grid-column:1}
  .feature-panel{grid-column:1;margin-left:1rem;margin-right:1rem;margin-top:-3rem}
  .proj{grid-template-columns:2.2rem 1fr}
  .thumb{grid-column:2;margin-top:.4rem}
}
.about-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.about-main .ctas {
	margin-top: 2.4rem;
}

.wordmark {
    font-family: "Manufacturing Consent";
	font-size: 2.5rem;
	font-weight: initial;
}

.sec-head h2 {
    font-family: "Manufacturing Consent";
    font-weight: 100;
    text-transform: none;
    font-size: 2rem;
    letter-spacing: initial;
}

footer {
	display: flex;
	justify-content: space-between;
}

#contact {
	margin-bottom: 7rem;
}