:root{--orange:#D37F32;--orange-light:#E79A52;--ink:#F4F0E9;--paper:#0B0C0D;--graphite:#191A1B;--surface:#28292B;--muted:#AAA59D;--line:#28292B;--focus:#2459b9;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;color-scheme:dark;overflow-x:clip}
::selection{background:var(--orange);color:#0B0C0D}
body.page-blog .topbar{background:#0B0C0D;color:var(--muted);box-shadow:inset 0 -1px 0 var(--line)}
body.page-blog .site-nav.nav-page{background:#0B0C0D;color:var(--ink)}
body.page-blog .site-nav.nav-page .nav-inner{border-bottom-color:var(--line)}
body.page-blog .site-nav.nav-page .menubtn{color:var(--ink)}
body.page-blog .site-nav.nav-page.is-scrolled{background:rgba(11,12,13,.78);box-shadow:inset 0 -1px 0 var(--line)}
body.page-blog .mobilemenu{background:#0B0C0D;color:var(--ink)}
body.page-blog .menu-contact{background:var(--graphite)}
body.page-blog .menu-contact h2,
body.page-blog .menu-contact a,
body.page-blog .acc button,
body.page-blog .menu-link,
body.page-blog .acc-panel a,
body.page-blog .menu-top button{color:var(--ink)}
body.page-blog .menu-contact p,
body.page-blog .menu-contact small{color:var(--muted)}
body.page-blog .menu-link span:first-child,
body.page-blog .acc button span:first-child{color:var(--orange-light)}
body.page-blog .acc,
body.page-blog .menu-link{border-top-color:var(--line)}
body.page-blog .mobilemenu a[aria-current="page"]{color:var(--orange)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1440px,calc(100% - 88px));margin:auto}
h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-.065em;line-height:.98;font-weight:400}
h1{font-size:clamp(64px,8vw,128px);margin:0;font-weight:400}
h2{font-size:clamp(40px,4.6vw,72px);margin:14px 0 20px;font-weight:400}
small,.kicker{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
p{line-height:1.7;color:var(--muted);font-size:17px}
.hero{padding:20px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:48px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.hero-grid p{margin:0 0 8px;max-width:34ch;font-size:18px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 28px;font-size:12px;font-weight:600;letter-spacing:.04em}
.crumb [aria-current="page"]{color:var(--muted);font-weight:500}
.index{padding:28px 0 20px}
.index-bar{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}
.index-bar h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-family:"DM Sans",sans-serif;color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:22px}
.filters button{
  min-height:44px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid transparent;
  background:none;
  color:var(--muted);
  font:700 11px "DM Sans",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.filters button:hover,.filters button:focus-visible{color:var(--orange-light)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.grid{display:grid;grid-template-columns:1.35fr .9fr;grid-auto-rows:280px;gap:14px}
.card{position:relative;display:block;min-height:100%;overflow:hidden;border-radius:20px;color:var(--ink);background:var(--surface)}
.card-feature{grid-row:span 2}
.grid:not(:has(.card-feature:not([hidden]))){grid-template-columns:1fr;grid-template-rows:none}
.grid:not(:has(.card-feature:not([hidden]))) .card{min-height:520px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,18,14,0) 30%,rgba(12,18,14,.72))}
.card-copy{position:absolute;z-index:1;left:28px;right:28px;bottom:26px;display:flex;flex-direction:column;gap:10px}
.card-copy small{color:var(--orange-light)}
.card-copy strong{font-family:Manrope,sans-serif;font-weight:400;font-size:clamp(28px,3vw,48px);letter-spacing:-.05em;line-height:1.02;color:var(--ink)}
.card-copy span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color .25s var(--ease)}
.card:hover .card-copy span,.card:focus-visible .card-copy span{color:var(--orange-light)}
.card[hidden],.row-card[hidden],.post[hidden],.empty[hidden]{display:none}
.rows{display:flex;flex-direction:column;margin-top:36px}
.row-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px 48px;align-items:center;padding:28px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.row-card:last-child{border-bottom:1px solid var(--line)}
.row-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.row-copy small{color:var(--orange)}
.row-copy strong{font-family:Manrope,sans-serif;font-weight:400;font-size:clamp(32px,3.2vw,48px);letter-spacing:-.05em;line-height:1.02}
.row-copy p{margin:0;max-width:42ch;color:var(--muted);font-size:17px}
.row-copy span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--orange);padding-bottom:8px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.row-photo{display:block;overflow:hidden;border-radius:20px}
.row-card img{width:100%;height:240px;object-fit:cover;border-radius:0;transition:transform .9s var(--ease)}
.row-card:hover img,.row-card:focus-visible img{transform:scale(1.03)}
.row-card:hover .row-copy span,.row-card:focus-visible .row-copy span{color:var(--orange-light);border-bottom-color:var(--orange-light)}
.empty{margin-top:18px;padding:36px 0;border-top:1px solid var(--line);color:var(--muted)}
.essays{background:var(--graphite);padding:10px 0 40px}
.post-page{padding:0 0 24px}
.post-page .crumb{margin-bottom:8px}
.post-copy h1{font-size:clamp(40px,4.6vw,72px);margin:14px 0 20px;font-weight:400}
.post-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center;padding:88px 0}
.post-flip figure{order:2}
.post figure{margin:0;overflow:hidden;border-radius:20px;background:var(--surface)}
.post .post-bleed{position:relative;width:100%;height:100vh;height:100svh;margin:0;padding:0;border-radius:0}
.post .post-bleed::after{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:140px;background:linear-gradient(180deg,rgba(11,12,13,.62),transparent);pointer-events:none}
.post .post-bleed::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:48%;background:linear-gradient(transparent,rgba(11,12,13,.78));pointer-events:none}
.post-hero-title{position:absolute;z-index:2;left:44px;bottom:40px;max-width:calc(100% - 88px);margin:0}
.post-hero-title small{color:#E79A52}
.post-hero-title h1{margin:10px 0 0;max-width:14em;color:#F4F0E9;font-size:clamp(40px,4.6vw,72px);font-weight:400}
body.page-blog.has-post-hero .site-nav.nav-page:not(.is-scrolled){background:transparent;box-shadow:none}
body.page-blog.has-post-hero .site-nav.nav-page:not(.is-scrolled) .nav-inner{border-bottom-color:rgba(244,240,233,.28)}
body.page-blog.has-post-hero .post .post-bleed{margin-top:-100px}
@media(max-width:650px){
  body.page-blog.has-post-hero .post .post-bleed{margin-top:-78px}
}
body.page-blog.has-post-hero .post .post-bleed::after{height:200px}
.post img{width:100%;height:clamp(320px,42vw,560px);object-fit:cover;transition:transform .9s var(--ease)}
.post .post-bleed img{width:100%;height:100%;max-width:none;object-fit:cover}
.post-page .post-bleed + .wrap{width:min(1200px,calc(100% - 88px));padding:88px 0 24px}
.post-page .post-bleed + .wrap .post-copy{width:100%;max-width:1200px;margin-inline:auto}
.post-read{display:grid;grid-template-columns:168px minmax(0,1fr) 168px;gap:28px;align-items:stretch}
.post-page .post-bleed + .wrap.post-read{width:min(1480px,calc(100% - 40px))}
.post-ad{position:relative;display:flex;align-items:flex-end;min-height:480px;overflow:hidden;border-radius:20px;color:var(--ink);background:var(--surface);isolation:isolate}
.post-ad::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(11,12,13,.84));pointer-events:none}
.post .post-ad img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.post-ad-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 16px 18px}
.post-ad-copy small{color:var(--orange-light)}
.post-ad-copy strong{font-family:Manrope,sans-serif;font-weight:400;font-size:26px;letter-spacing:-.045em;line-height:1.05}
.post-ad-copy span:last-child{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--orange);padding-bottom:8px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.post-ad:hover img,.post-ad:focus-visible img{transform:scale(1.06)}
.post-ad:hover .post-ad-copy span:last-child,.post-ad:focus-visible .post-ad-copy span:last-child{color:var(--orange-light);border-bottom-color:var(--orange-light)}
@media(min-width:1200px){
  .post-page .post-bleed + .wrap{width:min(1200px,100%)}
  .post-page .post-bleed + .wrap.post-read{width:min(1480px,calc(100% - 48px))}
}
@media(max-width:1100px){
  .post-page .post-bleed + .wrap.post-read{grid-template-columns:1fr 1fr;width:min(1200px,calc(100% - 40px))}
  .post-read .post-copy{order:-1;grid-column:1 / -1}
  .post-read .post-ad{min-height:300px}
}
.post figure:hover img,.post figure:focus-within img{transform:scale(1.04)}
.post .post-bleed:hover img,.post .post-bleed:focus-within img{transform:none}
.post-copy{max-width:560px}
.post-copy p{font-size:18px}
.post-copy ol{margin:8px 0 28px;padding:0;list-style:none;display:grid;gap:0}
.post-copy li{padding:16px 0;border-top:1px solid var(--line);color:var(--ink);line-height:1.5;font-size:16px}
.post-copy li:last-child{border-bottom:1px solid var(--line)}
.textlink{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--orange);padding-bottom:8px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.textlink:hover,.textlink:focus-visible{color:var(--orange-light);border-bottom-color:var(--orange-light)}
.crumb a{transition:color .35s var(--ease)}
.crumb a:hover,.crumb a:focus-visible{color:var(--orange-light);text-decoration:none}
.footer{background:var(--paper);color:var(--ink);padding:42px 0;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center}
.footer p{color:var(--muted);font-size:13px;margin:0}
.footer a{color:var(--ink);transition:color .35s var(--ease)}
.footer a:hover,.footer a:focus-visible{color:var(--orange-light)}
.footer a[aria-current="page"]{color:var(--orange)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:1024px){
  .hero-grid,.post-layout{grid-template-columns:1fr;gap:22px}
  .post-flip figure{order:0}
  .grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:320px}
  .card-feature{grid-row:auto;grid-column:1 / -1;min-height:420px}
}
@media(min-width:1528px){
  .post-hero-title{left:calc((100% - 1440px) / 2)}
}
@media(max-width:768px){
  .wrap,.post-page .post-bleed + .wrap,.post-page .post-bleed + .wrap.post-read{width:calc(100% - 36px)}
  .post-hero-title{left:18px;bottom:24px;max-width:calc(100% - 36px)}
  .hero{padding:16px 0 12px}
  .index-bar{align-items:start;flex-direction:column;gap:8px}
  .grid{grid-template-columns:1fr;grid-template-rows:none}
  .card,.card-feature{min-height:420px}
  .row-card{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .row-card img{height:220px;order:0}
  .row-photo{order:-1}
  .post-layout,.post-page .post-bleed + .wrap{padding:56px 0}
  .post-page .post-bleed + .wrap.post-read{grid-template-columns:1fr}
  .post-read .post-ad{min-height:240px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card img,.row-card img,.row-copy span,.post img,.crumb a,.footer a,.textlink,.filters button,.post-ad img,.post-ad-copy span:last-child{transition:none}
  .card:hover img,.card:focus-visible img,.row-card:hover img,.row-card:focus-visible img,.post figure:hover img,.post figure:focus-within img,.post-ad:hover img,.post-ad:focus-visible img{transform:none}
}
