/* v2 — The Independent Almanac. Cream paper, editorial, ink + sage. */
:root{
  --ink:#26221a;
  --ink-soft:#4f483b;
  --paper:#f4ecdc;
  --paper-2:#efe5d1;
  --card:#fbf6ea;
  --sage:#5d6e4e;
  --sage-d:#3f4d34;
  --rust:#a8501f;
  --line:rgba(38,34,26,.18);
  --wrap:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Spectral","Georgia",serif;color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sans{font-family:"Archivo",-apple-system,system-ui,sans-serif}

/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;
  background-image:radial-gradient(circle at 20% 30%,#000 .5px,transparent .6px),radial-gradient(circle at 70% 60%,#000 .5px,transparent .6px);background-size:7px 7px,9px 9px;mix-blend-mode:multiply}

/* reveal */
.x9anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.x9anim .reveal.in{opacity:1;transform:none}
.x9anim .reveal.d1{transition-delay:.1s}.x9anim .reveal.d2{transition-delay:.2s}.x9anim .reveal.d3{transition-delay:.3s}

/* masthead */
.mast{border-bottom:2px solid var(--ink);background:var(--paper)}
.mast-top{max-width:var(--wrap);margin:0 auto;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.mast-mid{max-width:var(--wrap);margin:0 auto;padding:14px 24px 18px;text-align:center;border-top:1px solid var(--line)}
.mast-title{font-family:"Spectral",serif;font-weight:700;font-size:clamp(30px,6vw,58px);letter-spacing:.02em;margin:0;line-height:1}
.mast-sub{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);margin-top:8px}
.mast-nav{display:flex;justify-content:center;gap:28px;border-top:1px solid var(--line);padding:10px 0;font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mast-nav a{text-decoration:none;color:var(--ink)}
.mast-nav a:hover{color:var(--rust)}
@media(max-width:640px){.mast-nav{gap:16px;font-size:10.5px;flex-wrap:wrap}}

/* hero — editorial photo plate */
.lead{padding:46px 0 30px}
.lead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:820px){.lead-grid{grid-template-columns:1fr;gap:26px}}
.lead .eyebrow{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.lead h1{font-family:"Spectral",serif;font-weight:700;font-size:clamp(32px,5.4vw,58px);line-height:1.05;margin:14px 0 16px;letter-spacing:-.01em}
.lead h1 em{font-style:italic;color:var(--sage-d)}
.lead p{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:50ch}
.lead .plate{position:relative;border:1px solid var(--ink);border-radius:4px;overflow:hidden;aspect-ratio:4/5;box-shadow:14px 14px 0 var(--paper-2)}
.lead .plate img{width:100%;height:100%;object-fit:cover}
.lead .plate .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.06em;color:#f3ecda;background:linear-gradient(180deg,transparent,rgba(20,24,14,.82));text-transform:uppercase}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:5px 12px;color:var(--ink)}

/* rule headers */
.rule-h{display:flex;align-items:center;gap:16px;margin:0 0 28px}
.rule-h .n{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.rule-h h2{font-family:"Spectral",serif;font-weight:700;font-size:clamp(24px,3.6vw,38px);margin:0;white-space:nowrap}
.rule-h .ln{flex:1;height:1px;background:var(--ink)}

/* almanac body */
.almanac{padding:50px 0;border-top:1px solid var(--line)}
.cols{column-count:2;column-gap:40px}
@media(max-width:720px){.cols{column-count:1}}
.cols p{margin:0 0 16px;color:var(--ink-soft);font-size:16.5px}
.cols p:first-child::first-letter{font-family:"Spectral",serif;font-weight:700;float:left;font-size:64px;line-height:.74;padding:6px 12px 0 0;color:var(--rust)}
.pull{font-family:"Spectral",serif;font-style:italic;font-size:clamp(20px,2.8vw,28px);color:var(--sage-d);text-align:center;max-width:24ch;margin:36px auto;line-height:1.4}

/* counters as a ledger */
.ledger{padding:54px 0;border-top:1px solid var(--line)}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink)}
@media(max-width:680px){.ledger-grid{grid-template-columns:1fr}}
.ledger-item{padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.ledger-grid .ledger-item:nth-child(2n){border-right:0}
.ledger-item .no{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust)}
.ledger-item h3{font-family:"Spectral",serif;font-weight:700;font-size:24px;margin:8px 0 6px}
.ledger-item p{margin:0;color:var(--ink-soft);font-size:15px}
.ledger-item .thumb{margin-top:16px;aspect-ratio:16/9;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.ledger-item .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);transition:transform .6s ease}
.ledger-item:hover .thumb img{transform:scale(1.06)}

/* seasonal wheel — animated centerpiece (CSS/SVG accent) */
.season{padding:60px 0;border-top:1px solid var(--line);text-align:center}
.wheel-wrap{display:flex;justify-content:center;margin-top:8px}
.wheel{position:relative;width:min(340px,80vw);aspect-ratio:1/1}
.wheel svg{width:100%;height:100%;overflow:visible}
.wheel-seg{transform-origin:160px 160px;opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.wheel-seg.on{opacity:1;transform:scale(1)}
.wheel .ring-labels{transition:transform 60s linear}
.wheel.spin .ring-labels{transform:rotate(360deg);transform-origin:160px 160px}
.wheel .hub{font-family:"Spectral",serif;font-style:italic}
.season .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:26px;font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.season .legend span{display:inline-flex;align-items:center;gap:7px}
.season .legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* gallery */
.gallery{padding:54px 0;border-top:1px solid var(--line)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.g-grid{grid-template-columns:repeat(2,1fr)}}
.g-grid figure{margin:0;border:1px solid var(--ink);border-radius:3px;overflow:hidden;position:relative;aspect-ratio:3/4}
.g-grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.97);transition:transform .6s ease}
.g-grid figure:hover img{transform:scale(1.06)}
.g-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-family:"Archivo",sans-serif;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#f3ecda;background:linear-gradient(180deg,transparent,rgba(20,24,14,.8))}
.swap{position:absolute;top:8px;right:8px;font-family:"Archivo",sans-serif;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#26221a;background:rgba(244,236,220,.9);padding:3px 7px;border-radius:5px}

/* colophon / visit */
.colophon{background:var(--sage-d);color:var(--paper);padding:60px 0}
.col-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:680px){.col-grid{grid-template-columns:1fr;gap:24px}}
.colophon h2{font-family:"Spectral",serif;font-weight:700;font-size:clamp(24px,3.6vw,36px);margin:6px 0 16px;color:#fff}
.crow{display:flex;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}
.crow .k{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c2cdb4;min-width:88px;padding-top:3px}
.crow .v{font-size:16px}
.crow .v small{display:block;color:#b6c3a6;font-size:13px;margin-top:2px}
.col-map{border:1px solid rgba(255,255,255,.25);border-radius:4px;overflow:hidden;min-height:280px}
.col-map iframe{width:100%;height:100%;min-height:280px;border:0;display:block;filter:grayscale(.35) sepia(.15)}

.foot{background:#2b2820;color:#c9c2b2;padding:30px 0;font-family:"Archivo",sans-serif;font-size:12.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot a{color:#cdd6bc}