/* Work page only. Uses AutoFlow tokens; previews echo each concept's own aesthetic. */
.whero{padding-block:clamp(3rem,2rem + 5vw,7rem) var(--section-y)}
.whero h1{max-width:17ch}
.whero .lead{margin-top:var(--s5);max-width:42rem}
.proj{display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.proj{grid-template-columns:5fr 7fr;gap:var(--s9)}.proj--flip{grid-template-columns:7fr 5fr}.proj--flip .proj__meta{order:2}}
.proj__num{font:400 var(--fs-h3)/1 var(--font-display);color:var(--spruce);display:block;margin-bottom:var(--s4)}
.proj__meta h2{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.flag{display:inline-block;font:600 var(--fs-xs)/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;padding:.4rem .7rem;border:1px solid var(--ink);margin-bottom:var(--s5)}
.chips{list-style:none;margin:var(--s5) 0 var(--s6);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips li{font-size:var(--fs-xs);padding:.3rem .7rem;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-2)}
.pj+.pj{margin-top:var(--section-y);padding-top:var(--section-y);border-top:1px solid var(--line)}

/* Preview frames (decorative) */
.pv{container-type:inline-size;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 24px 48px -30px rgba(18,48,41,.4)}
.pv__lab{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#fff;font:600 max(.6rem,1.9cqw)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;padding:1.6cqw 2.4cqw}

/* Evergreen */
.ev{background:#FBF9F3;border-radius:6px;color:#1F2924}
.ev__nav{display:flex;justify-content:space-between;align-items:center;padding:3cqw 4.5cqw;border-bottom:1px solid #DDD5C3}
.ev__nav b{font:500 3.6cqw/1 Georgia,"Times New Roman",serif}.ev__nav b i{color:#2C5539}
.ev__nav span{width:20cqw;height:.7cqw;background:#DDD5C3}
.ev__body{display:grid;grid-template-columns:1.1fr .9fr;gap:4cqw;padding:5cqw 4.5cqw 0}
.ev__eb{font:600 1.6cqw/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:#2C5539;margin-bottom:2.4cqw;display:block}
.ev h3{font:500 8cqw/.95 Georgia,"Times New Roman",serif;letter-spacing:-.02em;margin:0 0 3cqw;color:#1F2924}
.ev h3 em{display:block;color:#2C5539}
.ev__p{height:1cqw;background:#DDD5C3;margin-bottom:1.2cqw;width:80%}.ev__p+.ev__p{width:60%}
.ev__btn{margin-top:3cqw;width:22cqw;height:5.6cqw;background:#2C5539}
.ev__arch{align-self:end;height:46cqw;border-radius:999px 999px 0 0;background:#F1EBDD;position:relative;overflow:hidden}
.ev__arch::before{content:"";position:absolute;left:24%;top:16%;width:52%;height:46%;background:#DDE6D6;border:1cqw solid #FBF9F3}
.ev__arch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:#DFCDAE}
.ev__pl{position:absolute;left:12%;bottom:12%;width:9cqw;height:16cqw;z-index:1;background:radial-gradient(ellipse 45% 70% at 50% 35%,#6B8563 98%,transparent) ,none}
.ev__pl::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:34%;background:#B4805A}

/* Northline */
.nl{background:#0F1417;color:#fff;font-family:var(--font-body)}
.nl__nav{display:flex;align-items:center;gap:1.6cqw;padding:3cqw 4.5cqw;border-bottom:1px solid #2C363C}
.nl__nav i{width:4.4cqw;height:4.4cqw;background:#F5B700}
.nl__nav b{font:800 3.2cqw/1 var(--font-body);letter-spacing:-.02em}
.nl__nav u{margin-left:auto;width:14cqw;height:4.6cqw;background:#F5B700}
.nl__body{display:grid;grid-template-columns:1.25fr .75fr;gap:4cqw;padding:5cqw 4.5cqw;align-items:center}
.nl__eb{font:500 1.6cqw/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8D989E;display:block;margin-bottom:2.4cqw}
.nl h3{font:800 7.4cqw/.96 var(--font-body);letter-spacing:-.04em;margin:0 0 3cqw;color:#fff}
.nl h3 em{font-style:normal;color:#F5B700}
.nl__acts{display:flex;gap:1.6cqw}.nl__acts span{height:5.2cqw;width:19cqw;background:#F5B700}.nl__acts span+span{background:none;border:.4cqw solid #59666D;width:16cqw}
.nl__tk{background:#F6F7F5;border:.5cqw solid #0F1417;box-shadow:1.8cqw 1.8cqw 0 #F5B700;color:#0F1417}
.nl__tk div{background:#0F1417;color:#F5B700;font:500 1.5cqw/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;padding:2cqw}
.nl__tk p{margin:0;padding:1.8cqw 2cqw;border-bottom:1px solid #C9CFCB;font:700 2cqw/1.2 var(--font-body);color:#0F1417}
.nl__tk p small{display:block;font:500 1.3cqw ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#5B656B;margin-bottom:.7cqw}
.nl__tk span{display:block;margin:2cqw;height:4.6cqw;background:#F5B700}
.nl__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2C363C}
.nl__grid span{height:6cqw;border-right:1px solid #2C363C}.nl__grid span:last-child{border-right:0}

.demo{display:grid;gap:0;margin-top:var(--s7)}
.demo li{list-style:none;padding-block:var(--s5)}
@media(max-width:899px){.proj .pv{order:-1}}