:root{
  --paper:#faf9f7; --surface:#ffffff; --surface-2:#f3f1ed;
  --ink:#14161a; --ink-2:#3d4148; --muted:#6f747c;
  --line:#e6e2da; --line-2:#d6d1c7;
  --accent:#c2410c; --accent-ink:#9a3412; --accent-soft:#fdf1e9;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 12px 32px -18px rgba(20,22,26,.25);
  --shadow-lg:0 2px 6px rgba(20,22,26,.06), 0 40px 80px -40px rgba(20,22,26,.4);
  --r:14px; --r-sm:9px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101215; --surface:#181b20; --surface-2:#1f232a;
    --ink:#f2efe9; --ink-2:#cfd3d9; --muted:#9aa0a8;
    --line:#282d34; --line-2:#343a43;
    --accent:#f97316; --accent-ink:#fb923c; --accent-soft:#26190f;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 80px -40px rgba(0,0,0,.9);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:99; border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:70px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{display:flex; color:var(--ink)}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text b{font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.022em}
.brand-text i{font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.topnav{display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:500}
.topnav a{text-decoration:none; color:var(--ink-2); padding:4px 0; border-bottom:1.5px solid transparent}
.topnav a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.topnav-out{color:var(--muted) !important}

/* ---------- intro ---------- */
.intro{padding:78px 24px 8px; max-width:960px}
.kicker{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 18px}
.intro h1{font-family:var(--display); font-weight:700; font-size:clamp(32px,4.8vw,53px); line-height:1.07; letter-spacing:-.028em; margin:0 0 22px; max-width:19ch}
.lede{font-size:clamp(16px,1.55vw,18.5px); color:var(--ink-2); margin:0; max-width:62ch}

/* ---------- carousel ---------- */
.featured{padding:34px 0 0}
.carousel{position:relative; border-radius:var(--r); background:var(--panel,#14161a); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line)}
.slides{position:relative; aspect-ratio:2.06/1; max-height:580px}
.slide{position:absolute; inset:0; display:grid; grid-template-columns:41% 59%; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s}
.slide.is-on{opacity:1; visibility:visible}
.slide-shot{position:relative; overflow:hidden; background:#0c0d0f}
.slide-shot img{width:100%; height:100%; object-fit:cover}
.slide-shot::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(12,13,15,.55) 0%, rgba(12,13,15,0) 24%)}
.slide-body{display:flex; flex-direction:column; justify-content:center; gap:15px; padding:clamp(30px,3.6vw,54px); background:#14161a; color:#f2eee7}
.slide-kicker{display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#a9a49b; margin:0}
.badge{background:var(--accent); color:#fff; padding:3px 9px; border-radius:99px; font-size:9.5px; letter-spacing:.11em; font-weight:600}
.slide h2{font-family:var(--display); font-weight:700; font-size:clamp(27px,3.5vw,45px); line-height:1.04; letter-spacing:-.028em; margin:0; color:#fbf8f3}
.slide-tag{margin:-3px 0 0; font-family:var(--display); font-style:italic; font-weight:500; font-size:17px; letter-spacing:-.008em; color:var(--accent-ink); line-height:1.3}
.slide-blurb{margin:0; font-size:14.6px; line-height:1.65; color:#bdb9b1; max-width:46ch}
.slide-cta{display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:0; cursor:pointer; font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:99px; background:var(--accent); color:#fff; transition:transform .15s ease, filter .15s ease}
.btn:hover{filter:brightness(1.09); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:#ddd8d0; border:1px solid rgba(255,255,255,.24); padding:10px 18px}
.btn-ghost:hover{background:rgba(255,255,255,.09); filter:none}
.cbtn{position:absolute; z-index:4; bottom:18px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.26); background:rgba(12,13,15,.55); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); transition:background .15s}
.cbtn:hover{background:rgba(12,13,15,.85)}
.cbtn.prev{right:70px} .cbtn.next{right:18px}
.cnav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 2px 0}
.dots{display:flex; gap:8px; flex-wrap:wrap}
.dot{width:34px; height:4px; border-radius:99px; border:0; background:var(--line-2); cursor:pointer; padding:0; transition:background .2s}
.dot[aria-selected="true"]{background:var(--accent)}
.playpause{background:none; border:0; color:var(--muted); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; padding:4px 2px}
.playpause:hover{color:var(--ink)}

/* ---------- catalogue ---------- */
.catalogue{padding:72px 24px 24px}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line)}
.sechead h2{font-family:var(--display); font-weight:700; font-size:clamp(25px,3vw,35px); margin:0; letter-spacing:-.025em}
.sechead p{margin:0; color:var(--muted); font-size:14.5px; max-width:44ch}
.filters{display:flex; gap:8px; flex-wrap:wrap; padding:22px 0 30px}
.chip{border:1px solid var(--line-2); background:transparent; color:var(--ink-2); padding:7px 15px; border-radius:99px; font-size:13.5px; font-weight:500; cursor:pointer; transition:.15s}
.chip:hover{border-color:var(--ink-2); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.card[hidden]{display:none !important}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.card-shot{position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden}
.card-shot img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.card:hover .card-shot img{transform:scale(1.03)}
.card-badge{position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:99px}
.card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:11px; flex:1}
.card-title{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.card-title h3{margin:0; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.024em}
.card-kind{font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.card p{margin:0; font-size:14.3px; color:var(--ink-2); line-height:1.58}
.card-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px}
.tag{font-size:11.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:3px 9px; border-radius:99px}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:14px 22px; background:var(--surface)}
.card-link{font-size:13px; color:var(--muted); text-decoration:none; word-break:break-all}
.card-link:hover{color:var(--ink)}
.btn-sm{padding:8px 16px; font-size:13.5px}
.empty{color:var(--muted); padding:40px 0; text-align:center}

/* ---------- about ---------- */
.about{margin-top:96px; border-top:1px solid var(--line); background:var(--surface-2)}
.about-in{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(28px,6vw,80px); padding:80px 24px}
.about h2{font-family:var(--display); font-weight:700; font-size:clamp(24px,2.9vw,34px); line-height:1.14; margin:0; letter-spacing:-.025em}
.about-copy p{margin:0 0 18px; color:var(--ink-2); font-size:16px}
.about-copy p:last-child{margin-bottom:0}
.about-out a{color:var(--accent-ink); text-decoration:none; font-weight:600; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom:1px}
.about-out a:hover{border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--paper)}
.foot-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 24px; font-size:13.5px; color:var(--muted); flex-wrap:wrap}
.foot-links{display:flex; gap:22px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .about-in{grid-template-columns:1fr; padding:60px 24px}
  .slide{grid-template-columns:47% 53%}
  .slides{aspect-ratio:1.85/1}
  .slide-blurb{font-size:13.8px}
}
@media (max-width:700px){
  .topnav{gap:16px; font-size:13.5px}
  .topnav a[href="#featured"]{display:none}
  .brand-text i{display:none}
  .intro{padding:52px 20px 8px}
  .grid{grid-template-columns:1fr}
  .slides{aspect-ratio:auto; height:auto; min-height:0; max-height:none}
  .slide{grid-template-columns:1fr; grid-template-rows:auto 1fr; position:relative; display:none}
  .slide.is-on{display:grid}
  .slide-shot{aspect-ratio:16/9; order:1}
  .slide-body{order:2}
  .slide-shot::before{background:linear-gradient(0deg, rgba(20,22,26,.9) 0%, rgba(20,22,26,0) 40%)}
  .slide-body{padding:24px 22px 28px; gap:12px}
  .slide-blurb{display:none}
  .cbtn{width:38px; height:38px; bottom:auto; top:calc(56.25vw - 54px)}
  .cbtn.prev{right:auto; left:12px} .cbtn.next{right:12px}
  .catalogue{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}