/* The Armel Desk · site styles. Brand: #141414 ink, #f2efe8 paper, #c9a24b gold. */
:root{
  --ink:#141414; --paper:#f2efe8; --gold:#c9a24b;
  --raised:#1c1c1b; --rule:#2c2b28; --muted:#9b968c; --soft:#cfcac0;
  --wide:"venn-extended","venn","Venn Extended","Archivo",system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1280px; --pad:clamp(18px,4vw,56px);
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.6 var(--sans);text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.label{font:500 11px/1.3 var(--wide);font-stretch:125%;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.label.plain{color:var(--muted)}
.rule-label{display:flex;align-items:center;gap:14px}
.rule-label::before{content:"";width:40px;height:1px;background:var(--gold)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:50}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(20,20,20,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:rgba(20,20,20,.94)}
.head-in{display:flex;align-items:center;gap:28px;height:72px}
.brand img{height:22px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font:500 11.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--paper);border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;padding:13px 18px;border:1px solid var(--gold);color:var(--paper);background:transparent;cursor:pointer}
.btn:hover{background:rgba(201,162,75,.12)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:#d4b064}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);color:var(--paper);font:500 11px var(--wide);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;padding:10px 12px}
@media (max-width:980px){
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid var(--rule);padding:8px var(--pad) 18px}
  .nav.open{display:flex}.nav a{padding:14px 0;border-bottom:1px solid var(--rule)}
  .menu-btn{display:block}.head-sub{display:none}
}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);border-bottom:1px solid var(--rule);min-height:min(78vh,720px)}
.hero-copy{padding:clamp(36px,6vw,84px) var(--pad) 48px;padding-left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero h1{font:400 clamp(40px,4.8vw,74px)/1.02 var(--serif);letter-spacing:-.015em;margin:0;text-wrap:balance}
.hero p.dek{font:400 clamp(17px,1.4vw,20px)/1.55 var(--serif);color:var(--soft);margin:0;max-width:34ch}
.hero-art{position:relative;overflow:hidden;background:#0d0d0d}
.hero-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(20,20,20,0) 28%)}
.hero-cap{position:absolute;right:var(--pad);bottom:28px;z-index:2;max-width:200px;font:400 13px/1.45 var(--serif);color:var(--soft)}
.hero-cap .label{display:block;margin-bottom:6px;color:var(--paper);padding-top:10px;border-top:1px solid var(--gold);width:max-content}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-art{order:-1;aspect-ratio:4/3}.hero-art::after{background:linear-gradient(0deg,var(--ink) 0%,rgba(20,20,20,0) 40%)}.hero-copy{padding-top:8px}}

/* latest + brief */
.band{padding:52px 0;border-bottom:1px solid var(--rule)}
.latest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.9fr);gap:0}
.card{padding:0 32px 0 0;margin-right:32px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--raised)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.03)}
.card h3{font:400 clamp(24px,2.2vw,30px)/1.12 var(--serif);margin:4px 0 0}
.card p{margin:0;color:var(--soft);font-size:15px}
.meta{font:500 10.5px/1 var(--wide);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.brief h2{font:500 15px/1 var(--wide);font-stretch:125%;letter-spacing:.3em;text-transform:uppercase;margin:0 0 6px}
.brief-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.brief-date{font:italic 400 14px var(--serif);color:var(--muted)}
.brief ol{list-style:none;margin:0;padding:0}
.brief li{padding:14px 0;border-bottom:1px solid var(--rule);font:400 16px/1.45 var(--serif)}
.brief li:last-child{border:0}
@media (max-width:980px){.latest{grid-template-columns:1fr 1fr}.brief{grid-column:1/-1;margin-top:40px}.card:nth-child(2){border:0;margin:0;padding:0}}
@media (max-width:640px){.latest{grid-template-columns:1fr}.card{border:0;margin:0 0 36px;padding:0}}

/* sections */
.sec-head{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.sec-head h2{font:500 clamp(15px,1.6vw,19px)/1 var(--wide);font-stretch:125%;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0;white-space:nowrap}
.sec-head .line{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,162,75,.15))}
.sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.section{display:flex;flex-direction:column;gap:14px}
.section .art{aspect-ratio:4/5;overflow:hidden;background:var(--raised)}
.section .art img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.section:hover .art img{transform:scale(1.03)}
.section h3{font:400 26px/1.1 var(--serif);margin:0}
.section p{margin:0;color:var(--soft);font-size:15px}
.section .go{margin-top:auto;font:500 10.5px var(--wide);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media (max-width:980px){.sections{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sections{grid-template-columns:1fr}.section .art{aspect-ratio:16/10}}

/* standard + newsletter */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.standard h2{font:400 clamp(32px,3.6vw,48px)/1.08 var(--serif);margin:14px 0 18px;text-wrap:balance}
.standard p{font:400 18px/1.7 var(--serif);color:var(--soft);margin:0 0 16px;max-width:62ch}
.signup{border:1px solid var(--rule);background:var(--raised);padding:28px}
.signup h2{font:500 14px/1.4 var(--wide);font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;margin:0 0 8px}
.signup p{margin:0 0 18px;color:var(--soft);font:400 16px/1.5 var(--serif)}
.embed{background:var(--paper);border-radius:2px;overflow:hidden}
.embed iframe{display:block;width:100%;height:150px;border:0;background:var(--paper)}
.qr{display:flex;gap:18px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--rule)}
.qr img{width:104px;height:104px;background:var(--paper);padding:6px}
.qr p{margin:0;font:400 14px/1.5 var(--sans);color:var(--muted)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* footer */
.site-foot{padding:44px 0 56px}
.foot-in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
.foot-in img{height:16px;width:auto;opacity:.9}
.foot-in p{margin:10px 0 0;font:italic 400 15px var(--serif);color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{font:500 10.5px var(--wide);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot-links a:hover{color:var(--paper)}

/* about page */
.page-head{padding:clamp(48px,7vw,96px) 0 40px;border-bottom:1px solid var(--rule)}
.page-head h1{font:400 clamp(42px,6vw,84px)/1 var(--serif);margin:18px 0 0;max-width:16ch;text-wrap:balance}
.prose{max-width:68ch;padding:48px 0}
.prose h2{font:400 32px/1.15 var(--serif);margin:48px 0 14px}
.prose p,.prose li{font:400 19px/1.75 var(--serif);color:var(--soft)}
.prose strong{color:var(--paper);font-weight:500}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px}
.about-grid figure{margin:48px 0 0;position:sticky;top:110px}
.about-grid figcaption{margin-top:10px;font:italic 14px var(--serif);color:var(--muted)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.about-grid figure{position:static;margin:0 0 24px}}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:860px){.hero-cap{display:none}}
@media (max-width:520px){.section .art{aspect-ratio:4/3}.section .art img{object-position:center 18%}}