:root{--bg:#0E0C0A;--panel:#171410;--ink:#F3EEE3;--muted:#A39B8C;--line:#2E2922;--brass:#C9A45C;--brass-ink:#17130C;color-scheme:dark;box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px 40px}
header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(28px,6vw,44px);letter-spacing:.06em;line-height:1;text-decoration:none;display:block}
.tag{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(15px,3.4vw,19px);color:var(--brass);margin-top:4px}
nav a{font-size:14px;color:var(--muted);text-decoration:none;margin-left:14px}
nav a:hover,nav a:focus-visible{color:var(--ink)}
a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:22px 0 0}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(32px,7vw,54px);line-height:1.05;margin:4px 0 6px}
.sub{color:var(--muted);margin:0 0 20px;max-width:60ch}

.stage{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:12px}
.hero{position:relative;aspect-ratio:2/3;border:1px solid var(--brass);background:#1E1A15;overflow:hidden}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.card{background:var(--panel);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:500}
.name{font-weight:500;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.shop{display:block;text-align:center;text-decoration:none;font-weight:500;background:var(--brass);color:var(--brass-ink);padding:11px 10px;margin-top:auto}
.shop:hover{filter:brightness(1.08)}
.shop:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.dot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;text-decoration:none}
.dot span{width:20px;height:20px;border-radius:50%;background:rgba(14,12,10,.55);border:2px solid var(--brass);box-shadow:0 0 0 0 rgba(201,164,92,.6)}
.dot:hover span,.dot:focus-visible span{background:var(--brass)}
.dot em{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-6px;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--bg);border:1px solid var(--brass);padding:2px 8px;white-space:nowrap;opacity:0;pointer-events:none}
.dot:hover em,.dot:focus-visible em{opacity:1}
@media (prefers-reduced-motion:no-preference){.dot span{animation:pulse 2.4s infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,164,92,.55)}70%{box-shadow:0 0 0 12px rgba(201,164,92,0)}100%{box-shadow:0 0 0 0 rgba(201,164,92,0)}}

.note{color:var(--muted);font-size:14px;margin:16px 0 0;max-width:70ch}
.hint{color:var(--muted);font-size:14px;margin:0 0 10px}

.latest{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:22px}
.latest .pic{border:1px solid var(--brass);aspect-ratio:2/3;overflow:hidden;background:#1E1A15}
.latest .pic img{display:block;width:100%;height:100%;object-fit:cover}
.btn{display:inline-block;text-decoration:none;font-weight:500;background:var(--brass);color:var(--brass-ink);padding:13px 22px;margin-top:8px}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;margin:36px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tile{text-decoration:none;display:block;background:var(--panel);border:1px solid var(--line)}
.tile img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.tile div{padding:10px 12px}
.tile b{display:block;font-weight:500}
.tile small{color:var(--muted)}
.prose{max-width:66ch;margin-top:18px}
.prose h1{font-size:clamp(30px,6vw,44px)}
.prose p{color:#D8D2C4}
footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer a{margin-right:14px}

@media (max-width:720px){
  .stage{grid-template-columns:1fr 1fr;gap:10px}
  .col{display:contents}
  .hero{grid-column:1 / -1;order:-1}
  .stage.odd .col:last-child .card:last-child{grid-column:1 / -1}
  .latest{grid-template-columns:1fr}
  .wrap{padding-left:12px;padding-right:12px}
  .card{padding:12px}
  .name{font-size:16px}
}

.why{color:#D8D2C4;margin:0 0 14px;max-width:64ch;font-size:15px}
.why b{color:var(--brass);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin-right:8px}
.looknav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:14px}
.looknav a{color:var(--brass);text-decoration:none}
.looknav a:hover{text-decoration:underline}