@font-face { font-family: 'Timeless Serif'; src: local('Timeless Serif Regular'), url('/assets/cache/TimelessSerif-Regular.9ee46212c97c3702.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Timeless Sans Grotesk'; src: local('Timeless Sans Grotesk Regular'), url('/assets/cache/TimelessSans-GroteskRegular.d206c3f7a0bc3f18.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

:root { --paper:#e9e5dd; --ink:#292721; --muted:#716a60; --serif:'Timeless Serif',Georgia,serif; --sans:'Timeless Sans Grotesk','Helvetica Neue',Arial,sans-serif; --page-edge:clamp(24px,5vw,80px); }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); }
a { color:inherit; }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.project-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:clamp(18px,2vw,28px); padding:12px var(--page-edge); background:rgba(233,229,221,.96); border-bottom:1px solid rgba(41,39,33,.1); }
.project-back { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; min-height:44px; color:var(--muted); font:400 13px/1.5 var(--sans); letter-spacing:0; text-decoration:none; }
.project-back svg { width:14px; height:14px; transition:transform 180ms ease; }
.project-back:hover svg { transform:translateX(-3px); }
.project-back:hover { opacity:.7; }
.project-separator { align-self:stretch; width:1px; margin-block:4px; background:rgba(41,39,33,.22); }
.project-brand { text-decoration:none; }
.project-brand-name { display:block; font:400 clamp(20px,1.5vw,22px)/.88 var(--serif); letter-spacing:-.03em; }
.project-brand-sub { display:block; margin-top:6px; font:400 9px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.project-main { max-width:1840px; margin:0 auto; padding:32px var(--page-edge); }
.case-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(40px,6vw,96px); align-items:start; }
.case-info { position:sticky; top:112px; padding-top:3px; }
.project-title { margin:0; max-width:420px; font:400 clamp(32px,2.8vw,46px)/1.04 var(--serif); letter-spacing:-.035em; }
.project-description { max-width:360px; margin:28px 0 0; color:#5e584f; font:400 16px/1.65 var(--sans); }
.project-facts { max-width:360px; margin:38px 0 0; }
.project-facts div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:18px; padding:13px 0; border-top:1px solid rgba(41,39,33,.14); font:400 14px/1.45 var(--sans); }
.project-facts dt { color:var(--muted); }
.project-facts dd { margin:0; }
.case-gallery { min-width:0; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; }
.case-view { min-width:0; margin:0; }
.case-view img { display:block; width:100%; height:auto; border-radius:4px; background:#d5cfc4; }
.case-view figcaption { margin:10px 0 0; color:var(--muted); font:400 13px/1.4 var(--sans); }
.case-view--wide { grid-column:1 / -1; }
.case-view--portrait { grid-row:span 2; align-self:stretch; display:flex; flex-direction:column; align-items:center; min-height:0; }
.case-view--portrait img { width:100%; height:0; min-height:0; flex:1; object-fit:contain; background:transparent; }
.case-view--portrait figcaption { width:100%; text-align:center; }
.case-image-button { position:relative; display:block; width:100%; padding:0; border:0; border-radius:4px; background:transparent; color:#f7f3ed; cursor:zoom-in; }
.case-image-button:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.image-expand { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(23,23,20,.58); opacity:0; pointer-events:none; transition:opacity 180ms ease,background 180ms ease; }
.image-expand svg { width:20px; height:20px; }
.case-image-button:focus-visible .image-expand { opacity:1; background:rgba(23,23,20,.82); }
@media(hover:hover) and (pointer:fine) { .case-image-button:hover .image-expand { opacity:1; background:rgba(23,23,20,.82); } }
.case-view--portrait .case-image-button { flex:1; height:0; min-height:0; }
.case-view--portrait .case-image-button img { height:100%; }
.project-end { display:flex; justify-content:space-between; gap:24px; margin-top:70px; padding-top:24px; border-top:1px solid rgba(41,39,33,.18); color:var(--muted); font:400 13px/1.5 var(--sans); }
.project-end p { margin:0; }
.project-end a { text-underline-offset:4px; }
@media(max-width:1000px) {
  .case-layout { grid-template-columns:minmax(220px,1fr) minmax(0,1.8fr); gap:32px; }
  .project-title { font-size:34px; }
  .project-facts div { grid-template-columns:76px minmax(0,1fr); gap:12px; }
}
@media(max-width:760px) {
  :root { --page-edge:20px; }
  .project-header { gap:18px; padding:12px var(--page-edge); }
  .project-brand-name { font-size:20px; }
  .project-brand-sub { margin-top:5px; font-size:8px; }
  .project-back { font-size:13px; gap:6px; }
  .project-back svg { width:14px; height:14px; }
  .project-main { padding-top:32px; }
  .case-layout { grid-template-columns:minmax(0,1fr); gap:34px; }
  .case-info { position:static; }
  .project-title { max-width:100%; font-size:clamp(34px,8vw,44px); }
  .project-description { max-width:560px; margin-top:20px; }
  .project-facts { max-width:560px; margin-top:22px; }
  .project-facts div { grid-template-columns:90px minmax(0,1fr); padding-block:10px; }
  .case-grid { gap:22px 12px; }
  .case-view figcaption { font-size:12px; margin-top:8px; }
  .project-end { display:block; margin-top:46px; }
  .project-end p + p { margin-top:8px; }
  .image-expand { right:8px; bottom:8px; }
}
@media(max-width:360px) {
  .project-header { gap:12px; }
  .project-brand-name { font-size:18px; }
  .project-back { letter-spacing:0; }
}
@media(prefers-reduced-motion:reduce) { .project-back svg, .image-expand, .viewer-control, .viewer-thumb { transition:none; } }