/* Design tokens — from the approved portfolio mockup. Keep in sync with
   portfolio/mockup/*.dc.html until the real build replaces both. */
:root{
  --ink:#1b2333; --paper:#f7f9fc; --paper-deep:#eef1f6;
  --indigo:#33538f; --vermilion:#B4402F; --ochre:#C8912E;
  --rule:rgba(27,35,51,.22);
  --sketch:255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-alt:18px 225px 18px 255px / 255px 18px 225px 18px;
  --shadow:6px 6px 0 rgba(27,35,51,.10);
  --font-head:"Shantell Sans","Comic Sans MS",cursive;
  --font-body:"Spectral",Georgia,serif;
  --font-hand:"Dancing Script",cursive;
  --font-cap:"Kalam",cursive;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper);
  background-image:radial-gradient(rgba(27,35,51,.05) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--indigo)}

header.site{padding:28px 0 8px}
.brandrow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--font-head);font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.brand em{font-family:var(--font-hand);font-style:normal;color:var(--indigo)}
nav.site{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav-link{
  font-family:var(--font-head);font-size:.92rem;background:none;
  border:1.5px solid transparent;border-radius:12px 4px 12px 4px/4px 12px 4px 12px;
  padding:6px 12px;color:var(--ink);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;
}
.nav-link:hover{border-color:var(--rule)}
.nav-link[aria-current="page"]{border-color:var(--ink);background:#fff}
hr.dash{border:0;border-top:2px dashed var(--rule);margin:18px 0 0}

h1.big{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);
  margin:0 0 .2em;letter-spacing:-.02em}
.sub{font-size:1.05rem;max-width:58ch;margin:0;color:rgba(27,35,51,.82)}
.hero{padding:44px 0 8px;position:relative}
.hero .wheel-bg{position:absolute;right:-90px;top:-40px;pointer-events:none;opacity:.10;z-index:-1}
@media (max-width:820px){.hero .wheel-bg{display:none}}

.group{margin:44px 0 0}
.group>h2{font-family:var(--font-head);font-size:1.15rem;margin:0 0 4px;
  display:flex;align-items:center;gap:12px}
.group>h2::after{content:"";flex:1;border-top:2px dashed var(--rule)}
.group .lede{font-family:var(--font-cap);font-size:.95rem;color:rgba(27,35,51,.7);margin:0 0 18px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.card{position:relative;display:block;text-decoration:none;color:inherit;background:#fff;
  border:2px solid var(--ink);border-radius:var(--sketch);box-shadow:var(--shadow);
  padding:22px 22px 18px;min-height:150px;transition:transform .14s ease,box-shadow .14s ease}
.card:nth-child(3n+1){transform:rotate(-.7deg)}
.card:nth-child(3n+2){transform:rotate(.5deg);border-radius:var(--sketch-alt)}
.card:nth-child(3n+3){transform:rotate(-.25deg)}
.card:hover,.card:focus-visible{transform:translate(-2px,-3px) rotate(0deg);
  box-shadow:9px 10px 0 rgba(27,35,51,.14)}
.card:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.card .wheel-sm{position:absolute;right:14px;bottom:12px;opacity:.42;pointer-events:none}
.card h3{font-family:var(--font-head);font-size:1.08rem;margin:0 0 2px;padding-right:36px}
.card .role{font-family:var(--font-cap);font-size:.9rem;color:rgba(27,35,51,.66);margin:0 0 12px}
.card .desc{font-size:.94rem;margin:0 0 14px;max-width:30ch}
.card .addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  color:rgba(27,35,51,.55);word-break:break-all}
.card.planned{background:repeating-linear-gradient(-45deg,#fff,#fff 9px,
  var(--paper-deep) 9px,var(--paper-deep) 18px);border-style:dashed;box-shadow:none;cursor:default}
.card.planned:hover{transform:none;box-shadow:none}
.card.planned h3{color:rgba(27,35,51,.6)}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;
  font-family:var(--font-head);font-weight:600;font-size:1rem;text-decoration:none;
  background:var(--indigo);color:#fff;border:2px solid var(--ink);
  border-radius:14px 5px 14px 5px/5px 14px 5px 14px;box-shadow:3px 3px 0 rgba(27,35,51,.35)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(27,35,51,.35)}
.btn.ghost{background:#fff;color:var(--ink)}

/* Component display rules (e.g. .who below) would otherwise beat the UA's
   [hidden]{display:none} and show elements the script meant to hide. */
[hidden]{display:none !important}
.who{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 0;
  border:2px solid var(--ink);border-radius:var(--sketch-alt);background:var(--paper-deep);
  padding:16px 20px;transform:rotate(.3deg)}
.who .name{font-family:var(--font-head);font-size:1rem}
.who .mail{font-family:ui-monospace,monospace;font-size:.82rem;color:rgba(27,35,51,.6)}
.who .out{margin-left:auto}

footer.site{margin:70px 0 40px;border-top:2px dashed var(--rule);padding-top:18px;
  font-family:var(--font-cap);font-size:.9rem;color:rgba(27,35,51,.62)}

@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .card,.who{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .card{transition:none} .card:hover{transform:none}
}