/* Same Atelier tokens as the homepage. One work per row: image left, text right. */
:root{
  --bg:#DCE0D9; --ink:#1D221C; --mute:#5A6258; --line:#B9BFB5; --accent:#2B45B8; --on-accent:#FFFFFF;
  --f-display:"Syne","Arial Black","Helvetica Neue",sans-serif;
  --f-text:"Newsreader",Georgia,"Times New Roman",serif;
  --gl:max(24px, env(safe-area-inset-left,0px)); --gr:max(24px, env(safe-area-inset-right,0px));
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);-webkit-font-smoothing:antialiased}
.wrap{padding-left:var(--gl);padding-right:var(--gr);max-width:1440px;margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block;max-width:100%}
.head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:24px;font:500 13px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.home{text-decoration:none;font-weight:800;letter-spacing:.02em}
.nav{display:flex;gap:24px;flex-wrap:wrap}
.nav a{text-decoration:none;position:relative}
.nav a[aria-current="page"]{color:var(--accent)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hero{padding-block:clamp(32px,6vw,80px) clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr);gap:24px;border-bottom:1.5px solid var(--ink)}
h1{font:800 min(170px, calc((100vw - 56px) / 12.2))/.85 var(--f-display);letter-spacing:-.045em;margin:0;text-transform:uppercase;min-width:0}
.hero p{font-size:18px;line-height:1.5;max-width:32ch;margin:0;justify-self:end}
.work{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end;padding-block:clamp(48px,7vw,96px)}
.frame{position:relative;overflow:hidden;box-shadow:0 30px 60px -28px rgba(20,26,18,.6);justify-self:start}
.frame img{max-height:78vh;width:auto}
.sash{position:absolute;top:26px;left:-50px;width:190px;transform:rotate(-45deg);background:var(--accent);color:var(--on-accent);font:700 10px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:8px 0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.no{font:500 13px var(--f-display);color:var(--mute);letter-spacing:.06em}
h2{font:700 clamp(30px,3.4vw,48px)/1.05 var(--f-display);letter-spacing:-.02em;margin:10px 0 8px}
.meta{font-size:16px;color:var(--mute);font-style:italic;margin:0 0 16px}
.desc{font-size:19px;line-height:1.55;margin:0;max-width:44ch}
.back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;height:48px;padding:0 20px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font:500 14px var(--f-display);transition:background .25s,color .25s}
.back:hover{background:var(--ink);color:var(--bg)}
.foot{padding-block:40px 32px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
@media (max-width:760px){.hero,.work{grid-template-columns:1fr}.frame img{max-height:none;width:100%}}