/* =====================================================================
   ASTER & LUNE — "The Lake Issue" · shared head CSS (Siteflow site-wide head code)
   Every class is prefixed al- and every rule is scoped, so it cannot clash with
   Siteflow's own CSS. Fonts are self-hosted (fonts/), OFL.
   ===================================================================== */
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
:root{
  --al-black:#0b0b0b;      /* cover black */
  --al-ink:#161514;        /* text */
  --al-ivory:#f3efe7;      /* paper */
  --al-white:#ffffff;      /* page white */
  --al-grey:#7a746c;       /* captions, meta */
  --al-mist:#b8b2a8;       /* captions on black */
  --al-accent:#8c1c1c;     /* the one accent: oxblood. Issue numbers, active states, selection. Sparingly. */
  --al-line:rgba(11,11,11,.16);
  --al-line-d:rgba(255,255,255,.2);
  --al-didone:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --al-sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --al-ease:cubic-bezier(.22,.61,.24,1);
  --al-ease-io:cubic-bezier(.77,0,.18,1);     /* curtains, wipes */
  --al-pad:clamp(1.25rem,4.2vw,4.5rem);
  --al-max:1520px;
  --al-gap:clamp(1rem,1.8vw,1.75rem);
  --al-sec:clamp(5rem,11vw,11rem);
  --al-nav:72px;
}
/* ---------- base inside code blocks ---------- */
.al{font-family:var(--al-didone);font-optical-sizing:auto;font-size:1.0625rem;line-height:1.65;color:var(--al-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative}
.al *,.al *::before,.al *::after{box-sizing:border-box}
.al :where(img){display:block;max-width:100%;height:auto}
.al :where(a){color:inherit;text-decoration:none}
.al :where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){margin:0}
.al :where(h1,h2,h3){font-family:var(--al-didone);font-weight:400;letter-spacing:-.025em;line-height:.95;font-variation-settings:"opsz" 96}
.al em,.al i{font-style:italic}
.al ::selection{background:var(--al-accent);color:#fff}
.al-dark{background:var(--al-black);color:var(--al-ivory)}
.al-ivory{background:var(--al-ivory)}
.al-white{background:var(--al-white)}
.al-wrap{width:100%;max-width:var(--al-max);margin:0 auto;padding-left:var(--al-pad);padding-right:var(--al-pad)}
.al-sec{padding-top:var(--al-sec);padding-bottom:var(--al-sec)}
.al-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--al-gap)}
@media (min-width:900px){.al-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
/* ---------- type ---------- */
.al-display{font-size:clamp(4rem,16vw,17rem);line-height:.82;letter-spacing:-.045em}
.al-h1{font-size:clamp(3.1rem,9.2vw,9.5rem);line-height:.88;letter-spacing:-.04em}
.al-h2{font-size:clamp(2.5rem,5.8vw,5.8rem);line-height:.92;letter-spacing:-.035em}
.al-h3{font-size:clamp(1.55rem,2.5vw,2.3rem);line-height:1.04}
.al-lede{font-style:italic;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.35;font-variation-settings:"opsz" 36}
.al-kicker,.al-label{font-family:var(--al-sans);font-weight:500;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;line-height:1.5}
.al-kicker{display:flex;align-items:center;gap:1rem}
.al-kicker::after{content:"";flex:0 0 3.5rem;height:1px;background:currentColor;opacity:.35}
.al-no{font-family:var(--al-didone);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:1.05em}
.al-kicker .al-no,.al-label .al-no{font-size:1.25rem;margin-right:.35em;vertical-align:-.12em;color:var(--al-accent)}
.al-dark .al-kicker .al-no,.al-dark .al-label .al-no{color:inherit}
.al-cap{display:flex;gap:.9rem;align-items:baseline;margin-top:.9rem;font-family:var(--al-sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--al-grey)}
.al-cap b{font-weight:500;color:var(--al-ink)}
.al-dark .al-cap{color:var(--al-mist)}.al-dark .al-cap b{color:var(--al-ivory)}
.al-quote{font-style:italic;font-size:clamp(1.9rem,4.2vw,4rem);line-height:1.08;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
.al-quote::before{content:"\201C";display:block;font-size:2.6em;line-height:.8;height:.45em;font-weight:500;font-variation-settings:"opsz" 11;font-style:normal;color:var(--al-accent)}
.al-dropcap::first-letter{float:left;font-size:5.6em;line-height:.78;padding:.06em .1em 0 0;font-variation-settings:"opsz" 96}
/* ---------- links & buttons ---------- */
.al-link{position:relative;display:inline-flex;align-items:center;gap:.9rem;font-family:var(--al-sans);font-weight:500;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;padding:.4rem 0}
.al-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .8s var(--al-ease-io)}
.al-link:hover::before{transform:scaleX(0)}
.al-link i{display:block;width:2.2rem;height:1px;background:currentColor;position:relative;transition:width .7s var(--al-ease)}
.al-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.al-link:hover i{width:3.4rem}
.al-btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;padding:1.15rem 2rem;border:1px solid currentColor;font-family:var(--al-sans);font-weight:500;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:color .6s var(--al-ease)}
.al-btn::before{content:"";position:absolute;inset:0;background:var(--al-ink);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--al-ease-io);z-index:-1}
.al-btn:hover{color:var(--al-ivory)}.al-btn:hover::before{transform:scaleY(1)}
.al-dark .al-btn::before{background:var(--al-ivory)}.al-dark .al-btn:hover{color:var(--al-black)}
.al a:focus-visible,.al button:focus-visible,.al input:focus-visible,.al select:focus-visible,.al [tabindex]:focus-visible{outline:1px solid var(--al-accent);outline-offset:4px}
/* ---------- media ---------- */
.al-media{position:relative;overflow:hidden;background:#d9d3c9}
.al-dark .al-media{background:#1d1c1a}
.al-media>img,.al-media picture>img{width:100%;height:100%;object-fit:cover}
.al-r45{aspect-ratio:4/5}.al-r23{aspect-ratio:2/3}.al-r32{aspect-ratio:3/2}.al-r34{aspect-ratio:3/4}.al-r11{aspect-ratio:1}.al-r169{aspect-ratio:16/9}
/* parallax: the image is taller than its frame and is moved by shared.js */
.al-par{overflow:hidden}
.al-par>img,.al-par>picture>img{height:120%;margin-top:-10%;will-change:transform}
/* ---------- motion: only when JS is on and motion is allowed ---------- */
.al-js .al [data-al-rv]{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.4s var(--al-ease),transform 1.4s var(--al-ease);transition-delay:var(--d,0s)}
.al-js .al [data-al-rv].is-in{opacity:1;transform:none}
.al-js .al [data-al-rv="fade"]{transform:none}
/* line reveal: <span class="al-lines"><span><span>Line</span></span></span> */
.al-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.al-ln>span{display:block}
.al-js .al [data-al-rv="lines"]{opacity:1;transform:none}
.al-js .al [data-al-rv="lines"] .al-ln>span{transform:translate3d(0,108%,0) rotate(2deg);transform-origin:0 100%;transition:transform 1.5s var(--al-ease);transition-delay:calc(var(--d,0s) + var(--i,0) * .12s)}
.al-js .al [data-al-rv="lines"].is-in .al-ln>span{transform:none}
/* image clip reveal */
.al-js .al [data-al-rv="clip"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.7s var(--al-ease-io);transition-delay:var(--d,0s)}
.al-js .al [data-al-rv="clip"] img{transform:scale(1.28);transition:transform 2.6s var(--al-ease);transition-delay:var(--d,0s)}
.al-js .al [data-al-rv="clip"].is-in{clip-path:inset(0 0 0 0)}
.al-js .al [data-al-rv="clip"].is-in img{transform:none}
.al-js .al [data-al-rv="clip-x"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--al-ease-io);transition-delay:var(--d,0s)}
.al-js .al [data-al-rv="clip-x"].is-in{clip-path:inset(0 0 0 0)}
/* hairline that draws */
.al-rule{display:block;height:1px;background:currentColor;opacity:.3}
.al-js .al [data-al-rv="rule"]{opacity:.3;transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--al-ease-io);transition-delay:var(--d,0s)}
.al-js .al [data-al-rv="rule"].is-in{transform:none}
/* ---------- cursor label (fine pointers only, created by shared.js) ---------- */
.al-cursor{position:fixed;left:0;top:0;z-index:9990;pointer-events:none;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--al-ivory);color:var(--al-black);display:flex;align-items:center;justify-content:center;font-family:var(--al-sans);font-weight:500;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;transform:translate3d(-200px,-200px,0);transition:scale .6s var(--al-ease),opacity .4s;scale:0;opacity:0}
.al-cursor.is-on{scale:1;opacity:1}
.al-cursor.is-dark{background:var(--al-black);color:var(--al-ivory)}
/* ---------- lightbox (created by shared.js) ---------- */
.al-lb{position:fixed;inset:0;z-index:9995;background:rgba(8,8,8,.97);color:var(--al-ivory);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .7s var(--al-ease),visibility 0s .7s;font-family:var(--al-didone)}
.al-lb.is-open{opacity:1;visibility:visible;transition:opacity .7s var(--al-ease)}
.al-lb-top,.al-lb-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem var(--al-pad);font-family:var(--al-sans);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase}
.al-lb button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:.6rem}
.al-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 var(--al-pad);min-height:0}
.al-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--al-ease-io)}
.al-lb-stage img.is-swap{clip-path:inset(0 0 100% 0)}
.al-lb-cap{font-family:var(--al-didone);font-style:italic;font-size:1.05rem;letter-spacing:0;text-transform:none;text-align:center}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
 .al-js .al [data-al-rv],.al-js .al [data-al-rv] img,.al-js .al [data-al-rv] .al-ln>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .al-par>img,.al-par>picture>img{height:100%;margin-top:0}
 .al-cursor{display:none}
}

/* ---------- editorial placement: <x class="al-pl" style="--c:2/7;--mt:8rem"> inside .al-grid ---------- */
.al-pl{grid-column:1/-1}
@media (min-width:700px){.al-pl--half{grid-column:span 2}}
@media (min-width:900px){.al-pl,.al-pl--half{grid-column:var(--c,1/-1);margin-top:var(--mt,0);align-self:var(--as,start)}}
.al-fig{margin:0}
.al-fig[data-al-lb]{cursor:zoom-in}
.al-fig .al-media img{transition:transform 1.6s var(--al-ease),filter 1.2s var(--al-ease)}
.al-fig[data-al-lb]:hover .al-media img{transform:scale(1.035)}