/* WhoBrew — shared styles */

:root{
  --bg:        #fdfaf5;
  --bg-warm:   #f7efe3;
  --surface:   #ffffff;
  --ink:       #2c2620;
  --ink-soft:  #5f564c;
  --muted:     #8b8175;
  --rule:      #ebe2d5;
  --accent:    #c0763b;
  --accent-dk: #9c5b28;
  --accent-sl: #fbeee0;
  --foam:      #fff8ec;
  --beer:      #e8a92e;
  --coffee:    #7b4a2d;
  --code:      #5b7f6b;
  --shadow:    0 1px 2px rgba(70,50,30,.05), 0 8px 24px -12px rgba(70,50,30,.14);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #1b1815;
    --bg-warm:   #241f1a;
    --surface:   #232019;
    --ink:       #f2ece2;
    --ink-soft:  #cbc0b1;
    --muted:     #9a9083;
    --rule:      #38312a;
    --accent:    #e0a061;
    --accent-dk: #f0b87e;
    --accent-sl: #33291f;
    --foam:      #2b241c;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.7 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:52rem; margin:0 auto; padding:0 1.5rem}

/* ── nav ───────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.5rem 0 0; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
.brand svg{display:block; width:38px; height:38px; flex:none}
.brand span{
  font:600 1.02rem/1 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing:.01em;
}
.nav ul{display:flex; gap:.35rem; list-style:none; margin:0; padding:0}
.nav a.link{
  display:block; padding:.42rem .85rem; border-radius:999px; text-decoration:none;
  color:var(--ink-soft); font-size:.92rem; transition:background .18s, color .18s;
}
.nav a.link:hover{background:var(--bg-warm); color:var(--ink)}
.nav a.link[aria-current="page"]{background:var(--accent-sl); color:var(--accent-dk); font-weight:600}

/* ── type ──────────────────────────────────────────── */
h1,h2,h3{
  font-family:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:600; letter-spacing:-.015em; line-height:1.15; margin:0;
}
h1{font-size:clamp(2.3rem,7vw,3.6rem)}
h2{font-size:clamp(1.5rem,4vw,2rem)}
h3{font-size:1.12rem; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(1.05rem,2.4vw,1.22rem); color:var(--ink-soft); line-height:1.6}
.eyebrow{
  font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}

/* ── hero ──────────────────────────────────────────── */
.hero{padding:clamp(3rem,9vw,5.5rem) 0 1rem; text-align:center}
.hero h1{margin:.9rem 0 0}
.hero .lede{margin:1.15rem auto 0; max-width:34rem}
.hero .accent{color:var(--accent); font-style:italic}

/* ── the three brews ───────────────────────────────── */
.brews{
  display:grid; gap:1.1rem; margin:clamp(2.5rem,7vw,4rem) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.brew{
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:1.6rem 1.25rem 1.4rem; text-align:center; box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.brew:hover{transform:translateY(-4px); box-shadow:0 3px 6px rgba(70,50,30,.07), 0 18px 34px -16px rgba(70,50,30,.26)}
.brew svg{display:block; width:104px; height:104px; margin:0 auto .85rem}
.brew h3{margin:0 0 .3rem}
.brew p{font-size:.9rem; color:var(--muted); line-height:1.55}

/* steam animation */
.steam{animation:rise 3.6s ease-in-out infinite; transform-origin:bottom center}
.steam-2{animation-delay:.5s}
.steam-3{animation-delay:1s}
@keyframes rise{
  0%   {opacity:0;   transform:translateY(3px)  scaleY(.85)}
  28%  {opacity:.85}
  65%  {opacity:.5;  transform:translateY(-4px) scaleY(1.08)}
  100% {opacity:0;   transform:translateY(-9px) scaleY(1.16)}
}
@media (prefers-reduced-motion:reduce){
  .steam{animation:none; opacity:.6}
  .brew:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ── sections ──────────────────────────────────────── */
section{padding:clamp(3rem,8vw,4.5rem) 0}
.section-head{margin-bottom:2rem}
.section-head h2{margin:.55rem 0 0}
.section-head p{margin:.7rem 0 0; color:var(--ink-soft); max-width:36rem}

/* ── connect ───────────────────────────────────────── */
.connect{
  background:var(--bg-warm); border:1px solid var(--rule); border-radius:22px;
  padding:clamp(1.9rem,5vw,2.9rem); text-align:center;
}
.connect h2{margin:0 0 .6rem}
.connect p{color:var(--ink-soft); max-width:30rem; margin:0 auto 1.6rem}
.mailrow{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font:600 .95rem/1 inherit; text-decoration:none; cursor:pointer;
  transition:transform .16s, background .16s, border-color .16s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-dk)}

/* ── project cards ─────────────────────────────────── */
.projects{display:grid; gap:1.1rem}
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:1.5rem 1.6rem; box-shadow:var(--shadow);
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:#dcc9ae; transform:translateY(-2px)}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.card h3{margin:0}
.card h3 a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--accent-sl)}
.card h3 a:hover{color:var(--accent-dk); border-bottom-color:var(--accent)}
.card p{margin:.55rem 0 0; color:var(--ink-soft); font-size:.95rem}
.pill{
  flex:none; font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk);
  background:var(--accent-sl); padding:.4rem .6rem; border-radius:999px; white-space:nowrap;
}
.tags{
  margin:.85rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem;
  font:.72rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--muted);
}
.tags span{background:var(--bg-warm); padding:.34rem .55rem; border-radius:6px}

/* ── about ─────────────────────────────────────────── */
.about-grid{display:grid; gap:2rem; align-items:start; grid-template-columns:1fr}
@media (min-width:640px){ .about-grid{grid-template-columns:210px 1fr; gap:2.6rem} }
.portrait{
  background:var(--bg-warm); border:1px solid var(--rule); border-radius:20px;
  padding:1rem; box-shadow:var(--shadow);
}
.portrait svg{display:block; width:100%; height:auto}
.about-body p + p{margin-top:1.05rem}
.about-body .lede{color:var(--ink)}
.facts{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.55rem}
.facts li{
  display:flex; gap:.7rem; align-items:baseline; color:var(--ink-soft); font-size:.95rem;
}
.facts b{color:var(--accent); font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:.8rem}

/* ── footer ────────────────────────────────────────── */
footer{
  border-top:1px solid var(--rule); margin-top:clamp(3rem,8vw,5rem);
  padding:1.8rem 0 2.6rem; color:var(--muted); font-size:.86rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent-dk)}

.toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%,140%);
  background:var(--ink); color:var(--bg); padding:.7rem 1.2rem; border-radius:999px;
  font-size:.88rem; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  z-index:50;
}
.toast.show{transform:translate(-50%,0)}