:root{
  --plum:#2E1428; --blush:#E3A9BC; --rose:#A63D62; --white:#FFFFFF;
  --pale:#E9DDE3; --muted:#6E5F68; --rule:#ECE3E7; --rule-d:#55384A;
  --disp:"Newsreader",Georgia,serif; --sans:"Libre Franklin",system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,100px); --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--plum);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em 0}
h1,h2,h3{margin:0;font-weight:400}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.plum{background:var(--plum);color:var(--white)}
.lab{font-family:var(--sans);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--rose);margin:0 0 28px}
/* rose is 2.8:1 on plum - unreadable at 11px. Every plum ground uses blush. */
.plum .lab,.hero .lab,.phead .lab,.strip .lab{color:var(--blush)}
.sec.soft{background:#F8F0F3}

/* nav */
.nav{background:var(--plum);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
/* ── wordmark lockup ───────────────────────────────────────────────
   Full lockup: name, short rule, descriptor. Used in the header and the
   footer. The descriptor is dropped below 860px and anywhere the lockup
   would sit under ~170px wide - the name alone is the reduced form. */
.mark{font-family:var(--disp);font-size:20px;color:#fff;letter-spacing:.01em;white-space:nowrap;
  display:inline-block;line-height:1.08}
.desc{display:block;position:relative;font-family:var(--sans);font-weight:400;font-size:8.5px;
  letter-spacing:.165em;text-transform:uppercase;color:var(--blush);
  margin-top:8px;padding-top:7px;white-space:nowrap}
.desc:before{content:"";position:absolute;top:0;left:0;width:24px;height:1px;background:var(--blush)}
.foot .desc{font-size:10px;letter-spacing:.17em;margin-top:11px;padding-top:9px}
.foot .desc:before{width:30px}
.menu{display:flex;align-items:center;gap:clamp(12px,2vw,30px);flex-wrap:wrap}
.menu a{font-size:13.5px;color:var(--pale);padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover{color:#fff;border-bottom-color:var(--blush)}
.menu a.on{color:var(--blush)}
.btn{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush);
  border:1px solid var(--blush);padding:11px 20px;white-space:nowrap;display:inline-block;transition:.15s}
.btn:hover{background:var(--blush);color:var(--plum)}
.btn-l{color:var(--rose);border-color:var(--rose)}
.btn-l:hover{background:var(--rose);color:#fff}
/* the nav button must out-specify .menu a, or it loses its padding and its bottom border */
.menu a.btn{font-size:11px;padding:10px 18px;border:1px solid var(--blush);margin-left:4px}
.menu a.btn:hover{background:var(--blush);color:var(--plum);border-color:var(--blush)}

/* hero + page headers */
.hero{background:var(--plum);overflow:hidden}
.hero .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(24px,4vw,64px);align-items:stretch}
.hero .copy{padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,88px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero .shot{overflow:hidden;background:#3D1D35}
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;min-height:460px}
h1{font-family:var(--disp);font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em;color:#fff}
h1 .it{display:block;font-style:italic;font-weight:300;color:var(--blush)}
.bridge{font-family:var(--disp);font-size:clamp(19px,2vw,25px);line-height:1.42;color:var(--blush);margin:22px 0 0;max-width:30em}
.stand{font-size:15.5px;line-height:1.7;color:var(--pale);margin:24px 0 0;max-width:34em}
.phead{background:var(--plum);padding:clamp(44px,6vw,80px) 0 clamp(40px,5vw,64px)}

/* sections */
.sec{padding:clamp(48px,6.5vw,96px) 0}
.prose{font-family:var(--disp);font-size:clamp(17px,1.6vw,21px);line-height:1.58;color:#201823;max-width:62ch}
.plum .prose{color:var(--white)}
/* closing statement inside a prose block - the short rule is the lockup device reused */
.prose .key{position:relative;font-size:clamp(19px,2.1vw,26px);line-height:1.38;color:var(--rose);
  margin-top:34px;padding-top:26px;margin-bottom:0}
.prose .key:before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--blush)}
/* no rules, and the section carries all the vertical space so it does not stack */
.qsec{padding:clamp(28px,3.6vw,54px) 0}
.quote{text-align:center;font-family:var(--disp);font-size:clamp(26px,3.6vw,44px);line-height:1.16;letter-spacing:-.015em;
  color:var(--rose);padding:0}
.quote i{font-style:italic;display:block}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.stat{border-top:1px solid var(--rose);padding-top:20px}
.plum .stat{border-top-color:var(--rule-d)}
.stat .n{font-family:var(--disp);font-size:clamp(30px,3.4vw,48px);line-height:1.05;color:var(--rose);margin-bottom:14px}
.plum .stat .n{color:var(--blush)}
.stat .n.sm{font-size:clamp(22px,2.2vw,29px);font-style:italic}
.stat p{font-size:13.5px;line-height:1.62;color:var(--muted);margin:0}
.plum .stat p{color:var(--pale)}

/* cards */
.cards{display:grid;gap:clamp(24px,3vw,56px)}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border-top:1px solid var(--plum);padding-top:22px}
.plum .card{border-top-color:var(--rule-d)}
.card .num{font-family:var(--sans);font-size:11px;letter-spacing:.17em;color:var(--muted);margin-bottom:16px}
.card h3{font-family:var(--disp);font-size:clamp(20px,2vw,25px);line-height:1.22;margin-bottom:12px}
.plum .card h3{color:#fff}
.card p{font-size:14.5px;line-height:1.66;color:var(--muted)}
.plum .card p{color:var(--pale)}
.card .go{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);
  border-bottom:1px solid var(--rose);padding-bottom:3px;display:inline-block}
.card .go .ar{border-bottom:0;display:inline-block;transition:transform .15s}
.card .go:hover .ar{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.card .go .ar{transition:none}}

/* framed image */
.framed{position:relative;display:inline-block;max-width:100%}
.framed:before{content:"";position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;background:var(--blush)}
.framed img{position:relative}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split.top{align-items:start}
.split .txt{font-family:var(--disp);font-size:clamp(18px,1.9vw,24px);line-height:1.42}

/* full-bleed band */
.band{position:relative;background:var(--plum)}
.band img{width:100%;height:clamp(300px,42vw,520px);object-fit:cover}
.band .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(30px,5vw,60px) 0;
  background:linear-gradient(to bottom,rgba(46,20,40,0) 0%,rgba(46,20,40,.6) 45%,rgba(46,20,40,.93) 100%)}
.band .cap .t{font-family:var(--disp);font-size:clamp(17px,2vw,25px);line-height:1.34;color:#fff;max-width:58ch}

/* record list */
.rec{border-top:1px solid var(--rule)}
.plum .rec{border-top-color:var(--rule-d)}
.row{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.5fr);gap:clamp(16px,2.4vw,40px);
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.plum .row{border-bottom-color:var(--rule-d)}
.row .yr{font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.plum .row .yr{color:var(--blush)}
.row .ti{font-family:var(--disp);font-size:clamp(17px,1.7vw,21px);line-height:1.3}
.plum .row .ti{color:#fff}
.row .de{font-size:13.5px;line-height:1.62;color:var(--muted)}
.plum .row .de{color:var(--pale)}

/* projects */
.proj{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:34px 0;border-top:1px solid var(--rule)}
.proj .meta .lab{margin-bottom:8px}
.proj .meta .cl{font-size:13.5px;line-height:1.6;color:var(--muted)}
.proj h3{font-family:var(--disp);font-size:clamp(23px,2.4vw,30px);line-height:1.2;margin-bottom:16px}
.proj dl{margin:0}
.proj .q{font-size:14.5px;line-height:1.68;color:var(--muted);margin:0 0 11px}
.proj .q b{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-right:8px}

/* writing list */
.piece{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.25fr);gap:clamp(16px,2.6vw,44px);
  padding:28px 0;border-top:1px solid var(--rule)}
.piece h3{font-family:var(--disp);font-size:clamp(19px,2vw,25px);line-height:1.22;margin-bottom:6px}
.piece .sub{font-family:var(--disp);font-style:italic;font-size:15.5px;line-height:1.4;color:var(--muted)}
.piece .bod{font-size:13.5px;line-height:1.72;color:var(--muted)}

/* strips */
.strip{background:var(--plum);padding:clamp(40px,5vw,72px) 0}
.strip .inner{display:flex;gap:clamp(24px,4vw,64px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.strip .t{font-family:var(--disp);font-size:clamp(20px,2.4vw,30px);line-height:1.34;color:#fff;max-width:36em}

/* image row */
.imgrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.imgrow img{width:100%;aspect-ratio:19/13;object-fit:cover}

/* footer */
.foot{background:var(--plum);color:#fff;padding:clamp(44px,5vw,76px) 0 clamp(28px,3vw,44px)}
.foot .top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid var(--rule-d)}
.foot .nm{font-family:var(--disp);font-size:clamp(24px,2.6vw,32px);line-height:1.08;margin-bottom:24px}
.foot a.em{font-size:15px;color:var(--blush);border-bottom:1px solid #7A5566;padding-bottom:2px}
.foot .r{text-align:right;font-size:13.5px;line-height:1.72;color:var(--pale)}
.foot .r a{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush)}
.foot .sm{padding-top:24px;font-size:12px;line-height:1.75;color:#9C8592}

@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero .inner{grid-template-columns:1fr}
  .hero .copy{padding:40px var(--pad) 36px}
  .hero .shot{order:-1}
  .hero .shot img{min-height:0;aspect-ratio:4/3;object-position:50% 14%}
  .split{grid-template-columns:1fr}
  .framed:before{left:12px;top:12px;right:-12px;bottom:-12px}
  .row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .proj{grid-template-columns:1fr;gap:14px}
  .piece{grid-template-columns:1fr;gap:10px}
  .c3,.imgrow{grid-template-columns:1fr}
  .foot .top{flex-direction:column}
  .foot .r{text-align:left}
  .menu{gap:14px;row-gap:8px}
  .menu a{font-size:13px}
  .nav .desc{display:none}            /* reduced form: name only */
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .c4{grid-template-columns:1fr}
  .nav .wrap{min-height:0}
}