/* =========================================================
   Interview Test Project — shared styles
   Palette + type ported from tgibaportfolio
   ========================================================= */
:root{
  --bg:        #F1F4F2;
  --surface:   #FBFCFB;
  --ink:       #14201E;
  --petrol:    #0E3B3A;
  --petrol-2:  #0A2C2B;
  --amber:     #D77A8C;
  --amber-ink: #A84C62;
  --stone:     #7F8B85;
  --line:      #D7DEDA;

  /* derived, on-brand */
  --flow-soft: #E6EEEB;
  --flow-line: #A6C0BA;
  --amber-soft:#F7E9EC;
  --amber-line:#E6BFC8;
  --note-ink:  #5F3A44;

  --code-bg:   #0B2523;
  --code-ink:  #CBDAD5;
  --code-key:  #8CC3B7;
  --code-str:  #D89AA6;
  --code-c:    #5C716B;
  --code-p:    #708781;

  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --radius:14px;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.mono{font-family:var(--mono);}
a{color:var(--petrol);}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:3px;}

/* ---------- top nav ---------- */
.topnav{border-bottom:1px solid var(--line);background:var(--bg);}
.topnav .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px;}
.topnav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--petrol);text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.topnav a:hover{color:var(--petrol-2);}
.topnav .home{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;color:var(--stone);}
.topnav .spacer{flex:1;}

/* ---------- eyebrow / labels ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);font-weight:500;}
.sect-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);font-weight:500;display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.sect-label::before{content:"";width:26px;height:1px;background:var(--line);}

/* ---------- page header ---------- */
header.page{
  padding:60px 0 44px;border-bottom:1px solid var(--line);
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(14,59,58,.05) 39px 40px);
}
header.page .eyebrow{margin-bottom:22px;}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.03;letter-spacing:-.02em;margin:0 0 18px;
}
h1 .top{display:block;color:var(--stone);font-weight:500;font-size:.5em;letter-spacing:0;margin-bottom:6px;}
.goal{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--stone);max-width:60ch;margin:0 0 30px;}
.goal b{color:var(--ink);font-weight:600;}
.byline{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;font-family:var(--mono);font-size:13px;color:var(--stone);}
.byline .name{color:var(--ink);font-weight:600;}
.byline .sep{color:var(--flow-line);}

/* ---------- sections ---------- */
section{padding:58px 0;border-bottom:1px solid var(--line);}
.sect-head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.015em;margin:0 0 12px;}
.sect-head p{color:var(--stone);max-width:64ch;margin:0 0 34px;}

/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.tool{background:var(--surface);padding:22px 22px 24px;}
.tool .n{font-family:var(--mono);font-size:12px;color:var(--petrol);font-weight:500;}
.tool h3{font-family:var(--display);font-size:1.05rem;font-weight:600;margin:6px 0 8px;letter-spacing:-.01em;}
.tool p{margin:0;font-size:.93rem;color:var(--stone);line-height:1.5;}

/* ---------- schematic ---------- */
.schematic{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px 28px 28px;}
.flow-row{display:flex;align-items:stretch;}
.node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
.node .idx{font-family:var(--mono);font-size:11px;color:var(--stone);letter-spacing:.1em;}
.node .box{margin-top:10px;flex:1;border:1px solid var(--flow-line);border-radius:10px;background:var(--flow-soft);padding:16px;display:flex;flex-direction:column;gap:6px;}
.node .box .name{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--petrol);letter-spacing:-.01em;}
.node .box .desc{font-size:.85rem;color:var(--stone);line-height:1.45;}
.node .box .tag{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);opacity:.85;padding-top:6px;}
.conn{flex:0 0 44px;display:flex;align-items:center;justify-content:center;align-self:center;color:var(--flow-line);}
.conn svg{display:block;}
.monitor{margin-top:14px;border:1px dashed var(--amber-line);border-radius:10px;background:var(--amber-soft);padding:15px 18px;display:flex;gap:14px;align-items:flex-start;}
.monitor .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);font-weight:600;border:1px solid var(--amber-line);border-radius:5px;padding:3px 8px;white-space:nowrap;margin-top:2px;}
.monitor p{margin:0;font-size:.9rem;color:var(--note-ink);}
.monitor p b{color:var(--amber-ink);font-weight:600;}
.monitor .mono{color:var(--amber-ink);font-size:.86rem;}

/* ---------- walkthrough ---------- */
.steps{display:flex;flex-direction:column;}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);}
.step:first-child{border-top:none;padding-top:0;}
.step .num{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--petrol);line-height:1;}
.step .body h3{font-family:var(--display);font-size:1.12rem;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.step .body p{margin:0;color:var(--stone);max-width:66ch;}
.step .body p + p{margin-top:8px;}

/* ---------- code ---------- */
.code{margin-top:22px;background:var(--code-bg);border-radius:12px;overflow:hidden;border:1px solid #16332F;}
.code .bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #16332F;}
.code .bar .dots{display:flex;gap:6px;}
.code .bar .dots i{width:9px;height:9px;border-radius:50%;background:#2A4B46;}
.code .bar .file{font-family:var(--mono);font-size:12px;color:#6E877F;}
.code pre{margin:0;padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--code-ink);}
.code .k{color:var(--code-key);}
.code .s{color:var(--code-str);}
.code .p{color:var(--code-p);}
.code .c{color:var(--code-c);font-style:italic;}

/* ---------- answers ---------- */
.answers{display:flex;flex-direction:column;gap:16px;}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;border-left:3px solid var(--petrol);}
.qa .q{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin:0 0 10px;display:flex;gap:12px;align-items:baseline;}
.qa .q .qn{font-family:var(--mono);font-size:12px;color:var(--petrol);font-weight:500;flex:0 0 auto;}
.qa .a{margin:0;color:var(--stone);max-width:74ch;}
.qa .a + .a{margin-top:10px;}
.qa .a b{color:var(--ink);font-weight:600;}
.qa ul{margin:10px 0 0;padding-left:18px;color:var(--stone);}
.qa li{margin:5px 0;}
.qa li::marker{color:var(--flow-line);}
.qa.placeholder{border-left-color:var(--amber);}
.qa.placeholder .qn{color:var(--amber-ink);}
.qa .hint{color:var(--stone);font-style:italic;}

/* ---------- presented beats / prose ---------- */
.prose p{margin:0 0 13px;color:var(--stone);max-width:74ch;}
.prose p:last-child{margin-bottom:0;}
.prose b{color:var(--ink);font-weight:600;}
.beats{display:flex;flex-direction:column;gap:30px;}
.beat .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);font-weight:500;margin-bottom:6px;}
.beat h3{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;margin:0 0 8px;}
.beat p{margin:0;color:var(--stone);max-width:74ch;}
.beat p + p{margin-top:8px;}
.beat b{color:var(--ink);font-weight:600;}
.beat ul{margin:10px 0 0;padding-left:18px;color:var(--stone);}
.beat li{margin:5px 0;}
.beat li::marker{color:var(--flow-line);}
.note.spaced{margin-top:26px;}

/* ---------- notes ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.note{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:12px;padding:20px 22px;}
.note .h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);font-weight:600;margin-bottom:8px;}
.note p{margin:0;color:var(--note-ink);}
.note p b{color:var(--amber-ink);font-weight:600;}
.note .mono{color:var(--amber-ink);}

/* ---------- cover ---------- */
.cover{min-height:calc(100vh - 0px);display:flex;flex-direction:column;}
.cover-hero{padding:76px 0 40px;background:
  linear-gradient(var(--bg),var(--bg)),
  repeating-linear-gradient(90deg,transparent 0 39px,rgba(14,59,58,.05) 39px 40px);}
.cover-hero .eyebrow{margin-bottom:26px;}
.cover-hero h1{font-size:clamp(2.6rem,7vw,4.4rem);margin-bottom:20px;}
.cover-hero .lede{font-size:clamp(1.05rem,2vw,1.24rem);color:var(--stone);max-width:58ch;margin:0 0 32px;}
.cover-hero .byline{margin-bottom:4px;}
.ex-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:44px 0 20px;}
.ex-card{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 30px 26px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ex-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(14,59,58,.4);border-color:var(--flow-line);}
.ex-card .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--petrol);text-transform:uppercase;}
.ex-card h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin:0;}
.ex-card p{margin:0;color:var(--stone);font-size:.96rem;flex:1;}
.ex-card .go{font-family:var(--mono);font-size:12.5px;color:var(--petrol);font-weight:500;display:inline-flex;align-items:center;gap:8px;margin-top:6px;}
.ex-card:hover .go{gap:12px;}
.ex-card .go svg{transition:transform .18s ease;}

/* ---------- footer ---------- */
footer{padding:38px 0 54px;color:var(--stone);font-family:var(--mono);font-size:12px;}
footer .r{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .flow-row{flex-direction:column;}
  .conn{flex:0 0 30px;transform:rotate(90deg);align-self:center;}
  .grid2,.ex-cards{grid-template-columns:1fr;}
  .step{grid-template-columns:44px 1fr;gap:16px;}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .ex-card{transition:none;}
}

/* build / last-deployed stamp on the cover footer */
.build{margin-top:8px;color:var(--stone);opacity:.75;font-family:var(--mono);font-size:11.5px;}