/* Gyovanovich.com — shared styles
   Hand-edited. No build step. Keep it that way. */

:root{
  --paper:#E4E7E2;
  --paper-deep:#D9DDD7;
  --ink:#141A17;
  --ink-soft:#3D4741;
  --ink-faint:#6E776F;
  --rule:#BFC6BF;
  --brass:#8A6D2B;
  --measure:34rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Newsreader",Georgia,serif;font-weight:400;font-variation-settings:"opsz" 48}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}

/* ---------- masthead ---------- */
.mast{padding:1.5rem 0 .5rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mast a.name{text-decoration:none;font-size:.95rem;font-weight:500;letter-spacing:-.005em}
.mast nav{display:flex;gap:1.15rem;font-size:.88rem}
.mast nav a{text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------- structure ---------- */
.wrap{max-width:78rem;margin:0 auto;padding:0 1.35rem}
.block{position:relative;padding:3.4rem 0;border-top:1px solid var(--rule)}
.marker{font-size:.775rem;letter-spacing:.012em;color:var(--ink-faint);font-weight:500;margin-bottom:1.5rem;display:block}

/* ---------- hero ---------- */
.hero{padding:2.6rem 0 3.6rem}
.eyebrow{font-size:.8rem;color:var(--ink-faint);margin-bottom:2.4rem;line-height:1.5}
h1{
  font-size:clamp(2.3rem,9.2vw,4.6rem);
  line-height:1.03;letter-spacing:-.022em;
  font-variation-settings:"opsz" 72;
  max-width:16ch;font-weight:300;
}
h1.narrow{max-width:14ch}
.lede{margin-top:1.7rem;max-width:var(--measure);font-size:1.02rem;color:var(--ink-soft)}
.lede p + p{margin-top:.95rem}
.cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.7rem}
.btn{
  display:inline-block;padding:.72rem 1.25rem;border:1px solid var(--ink);
  text-decoration:none;font-size:.9rem;font-weight:500;
  background:var(--ink);color:var(--paper);
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}

/* ---------- type ---------- */
h2{font-size:clamp(1.55rem,5.4vw,2.1rem);line-height:1.16;letter-spacing:-.014em;max-width:20ch}
h2.wide{max-width:none}
.brands{font-size:.92rem;color:var(--ink-soft);max-width:var(--measure)}
.brands strong{font-weight:500;color:var(--ink)}
.prose p{max-width:var(--measure);color:var(--ink-soft);margin-top:1rem;font-size:.98rem}
.prose p.first{color:var(--ink);margin-top:0}
.pull{
  font-family:"Newsreader",Georgia,serif;font-size:clamp(1.18rem,4.6vw,1.5rem);
  line-height:1.42;max-width:34rem;font-weight:300;letter-spacing:-.006em;
}
.more{display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--brass);text-decoration:none;padding-bottom:1px}

/* ---------- problems ---------- */
.probs{margin-top:1.9rem;max-width:42rem}
.prob{
  padding:.95rem 0 .95rem 1.15rem;border-left:2px solid var(--rule);
  font-family:"Newsreader",Georgia,serif;font-size:1.1rem;line-height:1.45;color:var(--ink-soft);
  transition:border-color .18s ease,color .18s ease;
}
.prob + .prob{margin-top:.15rem}
.prob:hover{border-left-color:var(--brass);color:var(--ink)}

/* ---------- capabilities ---------- */
.caps{margin-top:2rem;display:grid;gap:2.1rem}
.cap h3{font-size:1.22rem;letter-spacing:-.008em;font-variation-settings:"opsz" 30}
.cap p{margin-top:.5rem;max-width:var(--measure);color:var(--ink-soft);font-size:.95rem}

/* ---------- framework ---------- */
.fw{background:var(--ink);color:var(--paper);border:0}
.fw .wrap{padding-top:3.6rem;padding-bottom:3.6rem;display:block}
.fw h2{color:var(--paper);max-width:22ch;margin-top:1.4rem}
.fw .marker{color:#8E9992}
.fw .intro{margin-top:1.2rem;max-width:var(--measure);color:#B8C0B9;font-size:.98rem}
.stages{margin-top:2.4rem}
.stage{display:grid;grid-template-columns:2.3rem 1fr;gap:.9rem;padding:1.15rem 0;border-top:1px solid #2E3833;align-items:start}
.stage:last-child{border-bottom:1px solid #2E3833}
.bar{position:relative;min-height:2.6rem}
.bar i{position:absolute;left:0;top:.42rem;display:block;height:.28rem;background:var(--brass)}
.stage:nth-child(1) .bar i{width:18%}
.stage:nth-child(2) .bar i{width:38%}
.stage:nth-child(3) .bar i{width:58%}
.stage:nth-child(4) .bar i{width:79%}
.stage:nth-child(5) .bar i{width:100%}
.stage h3{font-size:1.12rem;color:var(--paper);font-variation-settings:"opsz" 28}
.stage p{font-size:.92rem;color:#B8C0B9;margin-top:.2rem;max-width:36rem}
.stage .fail{display:block;margin-top:.45rem;font-size:.88rem;color:#8E9992}
.stage .fail b{color:var(--brass);font-weight:500}

/* ---------- work ---------- */
.work{margin-top:2rem;display:grid;gap:2.4rem}
.case .tag{font-size:.8rem;color:var(--ink-faint);font-weight:500}
.case h3{font-size:1.3rem;margin-top:.35rem;letter-spacing:-.01em;font-variation-settings:"opsz" 32}
.case p{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem;max-width:var(--measure)}

/* ---------- experience table (demoted, factual) ---------- */
.exp{margin-top:1.4rem;border-top:1px solid var(--rule);max-width:44rem}
.exp li{list-style:none;display:grid;grid-template-columns:1fr auto;gap:.5rem 1.5rem;padding:.72rem 0;border-bottom:1px solid var(--rule);font-size:.88rem;align-items:baseline}
.exp .role{color:var(--ink);font-weight:500}
.exp .org{color:var(--ink-soft);display:block;font-weight:400}
.exp .yrs{color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- contact + footer ---------- */
.links{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.93rem}
.links a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.links a:hover{border-bottom-color:var(--brass)}
footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;font-size:.82rem;color:var(--ink-faint);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* ---------- desktop ---------- */
@media (min-width:60rem){
  body{font-size:17px}
  .wrap{padding:0 3rem}
  .mast{padding:2rem 0 .5rem}
  .block{padding:5rem 0;display:grid;grid-template-columns:11rem 1fr;gap:3.5rem}
  .hero{display:block;padding:4.5rem 0 6rem}
  .fw .wrap{padding-top:5rem;padding-bottom:5rem}
  .marker{margin-bottom:0;padding-top:.45rem}
  .caps{grid-template-columns:1fr 1fr;gap:2.6rem 3rem}
  .work{grid-template-columns:1fr 1fr;gap:3rem}
  .work .case.lead{grid-column:1 / -1}
  .stage{grid-template-columns:9rem 1fr;gap:2rem;padding:1.4rem 0}
  .bar i{top:.6rem}
  h1{font-size:clamp(3.4rem,6.4vw,5.2rem)}
}

/* ---------- one orchestrated reveal, hero only ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards}
  .reveal:nth-of-type(1){animation-delay:.05s}
  .reveal:nth-of-type(2){animation-delay:.18s}
  .reveal:nth-of-type(3){animation-delay:.30s}
  .reveal:nth-of-type(4){animation-delay:.42s}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media print{.mast nav,.cta{display:none}body{background:#fff}}

/* ---------- portrait ---------- */
.portrait{margin:0 0 1.6rem;max-width:22rem}
.portrait img{width:100%;height:auto;background:var(--paper-deep)}
@media (min-width:60rem){
  .portrait{float:right;max-width:24rem;margin:.3rem 0 1.6rem 3rem;shape-outside:margin-box}
  .prose p{clear:none}
}
@media (max-width:59.99rem){
  .portrait{max-width:100%}
}

/* ---------- long-form article ---------- */
.article{max-width:42rem;padding:2.6rem 0 1rem}
.article-head h1{font-size:clamp(1.9rem,6.4vw,2.9rem);line-height:1.12;letter-spacing:-.018em;max-width:24ch;font-weight:400}
.article-meta{margin-top:1rem;font-size:.85rem;color:var(--ink-faint)}
.standfirst{
  font-family:"Newsreader",Georgia,serif;font-size:1.16rem;line-height:1.5;
  color:var(--ink-soft);margin-top:1.4rem;font-weight:300;
}
.article h2{font-size:1.42rem;line-height:1.22;letter-spacing:-.01em;margin:2.6rem 0 .8rem;max-width:26ch}
.article h3{font-size:1.1rem;margin:1.9rem 0 .5rem;font-variation-settings:"opsz" 28}
.article p{margin-top:.9rem;color:var(--ink-soft)}
.article p strong{color:var(--ink);font-weight:500}
.article ul{margin:1rem 0 0 1.1rem;color:var(--ink-soft)}
.article li{margin-top:.6rem;padding-left:.25rem}
.article-foot{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--rule);font-size:.94rem}
.article-foot p{color:var(--ink-soft);margin-top:.6rem}

/* ---------- post list ---------- */
.posts{list-style:none;margin:0;padding:0}
.posts li{padding:0 0 1.6rem;max-width:40rem}
.posts li + li{border-top:1px solid var(--rule);padding-top:1.6rem}
.post-date{font-size:.82rem;color:var(--ink-faint)}
.posts h2{font-size:1.32rem;line-height:1.22;margin-top:.35rem;max-width:28ch}
.posts h2 a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.posts h2 a:hover{border-bottom-color:var(--brass)}
.post-sum{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- case-study sub-structure ---------- */
.prose h3{font-size:1.05rem;margin:1.8rem 0 .1rem;font-variation-settings:"opsz" 26;color:var(--ink)}
.prose .standfirst{margin-top:1.1rem;margin-bottom:.4rem}
.fineprint{margin-top:1.4rem;font-size:.82rem;color:var(--ink-faint);max-width:44rem;line-height:1.55}