/* The Northeast Story: shared styles.
   Layout: magazine front page with a mist-ridge cover; article pages use a single 66ch reading column.
   Woven loin-loom bands divide chapters. Each beat (music, food...) has its own colour. */
:root{
  --cloud:#E9EEEC; --paper:#F6F8F7; --ink:#16231F; --muted:#4F625C; --rule:#C6D2CD;
  --muga:#A26F14; --loom:#A12B24;
  --ridge1:#BACAC4; --ridge2:#93AAA2; --ridge3:#6C8A80; --ridge4:#45665C; --ridge5:#24443B; --sky:#DCE5E2;
  --music:#4B3F9E; --food:#B1361E; --culture:#97690F; --travel:#2C6B4F; --lifestyle:#1F6A78; --fashion:#9B2D68;
  --display:"Gloock", "Georgia", serif;
  --body:"Literata", "Iowan Old Style", "Georgia", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --step-1:.8125rem; --step0:1.0625rem; --step1:1.3rem; --step2:1.75rem; --step3:2.5rem; --step4:clamp(2.6rem, 7vw, 5.6rem);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cloud:#0F1A17; --paper:#15221E; --ink:#E3EBE7; --muted:#9DB0A9; --rule:#2B3D37;
    --muga:#D9A646; --loom:#E06A5F;
    --ridge1:#22352F; --ridge2:#1B2C27; --ridge3:#15241F; --ridge4:#101C18; --ridge5:#0A1411; --sky:#132520;
    --music:#A79BF0; --food:#F08A6E; --culture:#E0B456; --travel:#6FC79E; --lifestyle:#6CC3D2; --fashion:#EE88BF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --cloud:#0F1A17; --paper:#15221E; --ink:#E3EBE7; --muted:#9DB0A9; --rule:#2B3D37;
  --muga:#D9A646; --loom:#E06A5F;
  --ridge1:#22352F; --ridge2:#1B2C27; --ridge3:#15241F; --ridge4:#101C18; --ridge5:#0A1411; --sky:#132520;
  --music:#A79BF0; --food:#F08A6E; --culture:#E0B456; --travel:#6FC79E; --lifestyle:#6CC3D2; --fashion:#EE88BF;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cloud);color:var(--ink);font-family:var(--body);font-size:var(--step0);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--muga);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--mono);font-size:var(--step-1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.beat{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--muted));text-decoration:none}
[data-beat="music"]{--c:var(--music)} [data-beat="food"]{--c:var(--food)} [data-beat="culture"]{--c:var(--culture)}
[data-beat="travel"]{--c:var(--travel)} [data-beat="lifestyle"]{--c:var(--lifestyle)} [data-beat="fashion"]{--c:var(--fashion)}

/* masthead */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--cloud) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:1.3rem;text-decoration:none;white-space:nowrap}
.brand span{color:var(--loom)}
.mast nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.mast nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding-block:4px;border-bottom:2px solid transparent}
.mast nav a:hover{color:var(--ink);border-bottom-color:var(--loom)}

/* cover */
.hero{position:relative;background:var(--sky);overflow:hidden;border-bottom:1px solid var(--rule)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;padding-block:clamp(44px,7vw,88px) clamp(150px,20vw,240px);display:grid;gap:18px}
.hero h1{font-size:var(--step4);letter-spacing:-.01em;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--loom)}
.hero .dek{font-size:var(--step1);max-width:40ch}
.beats{display:flex;gap:8px;flex-wrap:wrap}
.beats a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:6px 10px;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--sky) 70%,transparent);border-radius:999px}
.beats a:hover{background:var(--c);color:var(--sky)}

.loom-band{height:22px;background:
  repeating-linear-gradient(90deg,var(--loom) 0 14px,transparent 14px 18px,var(--muga) 18px 22px,transparent 22px 26px,var(--ink) 26px 30px,transparent 30px 34px),var(--paper);
  -webkit-mask:linear-gradient(180deg,#000 0 3px,transparent 3px 6px,#000 6px 16px,transparent 16px 19px,#000 19px);
  mask:linear-gradient(180deg,#000 0 3px,transparent 3px 6px,#000 6px 16px,transparent 16px 19px,#000 19px)}

section{padding-block:clamp(52px,7vw,88px)}
.sec-head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,40px)}
.sec-head h2{font-size:var(--step3)}
.sec-head p{max-width:60ch;color:var(--muted)}

/* cover story + trending */
.top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,48px)}
.cover{display:grid;gap:14px;align-content:start;min-width:0;text-decoration:none}
.cover h2{font-size:var(--step3)}
.cover:hover h2,.card:hover h3,.latest a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cover p{max-width:58ch}
.plate{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;border-radius:2px;background:var(--c);display:grid;place-items:end start;padding:14px}
.plate::before{content:"";position:absolute;inset:0;opacity:.22;background:
  repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 12px),
  repeating-linear-gradient(0deg,var(--paper) 0 2px,transparent 2px 22px)}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,var(--paper) 0 10px,transparent 10px 14px,var(--ink) 14px 18px,transparent 18px 22px);opacity:.55}
.plate .glyph{position:relative;font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--paper);padding-bottom:16px}
.latest{display:grid;align-content:start;min-width:0}
.latest a{display:grid;gap:5px;padding-block:16px;border-top:1px solid var(--rule);text-decoration:none}
.latest a:last-child{border-bottom:1px solid var(--rule)}
.latest h3{font-size:1.2rem;line-height:1.2}
.latest p{font-size:.95rem;color:var(--muted)}

/* story grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.card{display:grid;gap:10px;align-content:start;min-width:0;text-decoration:none}
.card .plate{aspect-ratio:4/3}
.card h3{font-size:1.3rem;line-height:1.18}
.card p{font-size:.95rem;color:var(--muted)}
.card .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.place{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.soon{margin-top:clamp(28px,4vw,40px);padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:10px}
.soon ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.soon li{font-size:.95rem}
.soon li .beat{margin-right:6px}

/* shelves */
.shelves{background:var(--paper);border-block:1px solid var(--rule)}
.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px)}
.shelf{display:grid;gap:14px;align-content:start;min-width:0;border-top:3px solid var(--c);padding-top:16px}
.shelf h3{font-size:var(--step2)}
.shelf ol,.shelf ul{margin:0;padding:0;list-style:none;display:grid}
.shelf li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:4px 10px;padding-block:11px;border-bottom:1px solid var(--rule)}
.shelf li b{font-weight:600}
.shelf li span{grid-column:2;font-size:.92rem;color:var(--muted)}
.shelf li i{font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--c);padding-top:.25em}
.heat{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.heat s{width:7px;height:7px;border-radius:50%;background:var(--rule);text-decoration:none}
.heat s.on{background:var(--food)}

/* states */
.eight-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.tabs{display:grid;gap:2px;align-content:start}
.tabs button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;border-left:3px solid transparent;font-family:var(--display);font-size:1.15rem;color:var(--muted)}
.tabs button small{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-left-color:var(--loom);background:var(--paper)}
.tabs button:focus-visible{outline:2px solid var(--muga);outline-offset:-2px}
.panel{display:grid;gap:20px;min-width:0}
.panel h3{font-size:var(--step3)}
.panel .epithet{font-style:italic;color:var(--muted);font-size:var(--step1)}
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--rule)}
.ledger div{padding:12px 12px 12px 0;display:grid;gap:2px;min-width:0}
.ledger div+div{padding-left:12px;border-left:1px solid var(--rule)}
.ledger b{font-family:var(--mono);font-weight:500;font-size:.95rem}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:12px}
.pick{display:grid;gap:4px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--c)}
.pick b{font-weight:600;font-size:.98rem}

/* festivals */
.calendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.fest{background:var(--paper);padding:18px;display:grid;gap:6px;align-content:start}
.fest .month{font-family:var(--mono);font-size:var(--step-1);letter-spacing:.12em;text-transform:uppercase;color:var(--loom)}
.fest h3{font-size:1.3rem}
.fest p{font-size:.93rem;color:var(--muted)}
.fest .where{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.about blockquote{margin:0;font-family:var(--display);font-size:var(--step2);line-height:1.25;text-wrap:balance}
.about blockquote span{color:var(--muga)}
.about .body{display:grid;gap:14px;max-width:58ch}
.email{font-family:var(--mono);font-size:.95rem;user-select:all;color:var(--loom)}

/* article pages */
.article-head{background:var(--paper);border-bottom:1px solid var(--rule)}
.article-head .wrap{display:grid;gap:18px;padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,40px);max-width:52rem}
.article-head h1{font-size:clamp(2.2rem,5.4vw,3.8rem)}
.article-head .dek{font-size:var(--step1);color:var(--muted);max-width:48ch}
.article-head .meta{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
.article-plate{max-width:52rem;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);margin-top:clamp(24px,4vw,40px)}
.article-plate .plate{aspect-ratio:21/9}
.prose{max-width:52rem;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);padding-block:clamp(32px,5vw,56px)}
.prose > *{max-width:66ch}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:var(--step2);margin-top:1.8em}
.prose p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:4.1em;line-height:.8;padding:.06em .1em 0 0;color:var(--c)}
.prose blockquote{margin-inline:0;margin-block:1.8em;padding-left:20px;border-left:3px solid var(--c);font-family:var(--display);font-size:var(--step2);line-height:1.25}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.facts-box{background:var(--paper);border-top:3px solid var(--c);padding:18px 20px;display:grid;gap:10px}
.facts-box dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px}
.facts-box dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.2em}
.facts-box dd{margin:0}
.more{background:var(--paper);border-top:1px solid var(--rule)}
.more .grid{grid-template-columns:repeat(3,minmax(0,1fr))}

footer{border-top:1px solid var(--rule);background:var(--paper)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px}
footer p{font-size:.9rem;color:var(--muted)}
footer nav{display:flex;gap:14px;flex-wrap:wrap}
footer nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted)}

@media (max-width:860px){
  .top,.about,.shelf-grid{grid-template-columns:1fr}
  .grid,.more .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eight-grid{grid-template-columns:1fr}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs button{font-size:1rem;border-left:0;border-bottom:3px solid transparent}
  .tabs button[aria-selected="true"]{border-bottom-color:var(--loom)}
}
@media (max-width:560px){
  .grid,.more .grid{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr}
  .ledger div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .facts-box dl{grid-template-columns:1fr;gap:2px}
  .facts-box dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* photos */
.plate.photo{padding:0;background:var(--rule)}
.plate.photo::before,.plate.photo::after{display:none}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.article-plate{margin-bottom:0}
.article-plate figcaption{margin-top:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted)}
.article-plate figcaption a,.credits a{color:inherit}
.credits{padding-block:28px;border-top:1px solid var(--rule)}
.credits .wrap{display:grid;gap:10px}
.credits ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:.75rem;line-height:1.5;color:var(--muted)}

/* landing photo */
:root{--shade-a:rgba(233,238,236,.94);--shade-b:rgba(233,238,236,.55);--shade-c:rgba(233,238,236,0)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--shade-a:rgba(10,20,17,.9);--shade-b:rgba(10,20,17,.5);--shade-c:rgba(10,20,17,.05)}}
:root[data-theme="dark"]{--shade-a:rgba(10,20,17,.9);--shade-b:rgba(10,20,17,.5);--shade-c:rgba(10,20,17,.05)}
.hero-photo{background:var(--ridge3)}
.hero-photo .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.hero-photo .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--shade-a) 0%,var(--shade-b) 45%,var(--shade-c) 75%)}
.hero-photo .wrap{padding-block:clamp(64px,10vw,140px) clamp(96px,14vw,180px)}
@media (max-width:640px){.hero-photo .hero-shade{background:linear-gradient(180deg,var(--shade-a) 0%,var(--shade-b) 70%,var(--shade-c) 100%)}}

/* article sources */
.prose .sources{margin-top:2.4em;padding-top:16px;border-top:1px solid var(--rule);display:grid;gap:8px}
.prose .sources ul{margin:0;padding-left:1.1em;font-size:.85rem;color:var(--muted)}
.prose .sources a{color:inherit}

/* cover fills the height of the Trending column on wide screens */
@media (min-width:861px){
  .top{align-items:stretch}
  .cover{display:flex;flex-direction:column;gap:14px}
  .cover .plate{flex:1 1 auto;aspect-ratio:auto;min-height:22rem}
}

/* events */
.whats-on{background:var(--paper);border-top:1px solid var(--rule)}
.row-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap}
.more-link{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--loom);text-decoration:none}
.more-link:hover{text-decoration:underline}
.ev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.event{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:16px;padding:18px;background:var(--cloud);border:1px solid var(--rule);border-radius:2px;min-width:0}
.whats-on .event{background:var(--cloud)}
.events-page .event{background:var(--paper)}
.ev-date{display:grid;align-content:start;justify-items:center;padding-top:4px;border-right:1px solid var(--rule);padding-right:14px}
.ev-day{font-family:var(--display);font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-mon{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--loom);margin-top:6px}
.ev-body{display:grid;gap:6px;min-width:0}
.ev-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ev-kind{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muga)}
.event h3{font-size:1.3rem;line-height:1.15}
.ev-when{font-size:.9rem;font-weight:600}
.ev-blurb{font-size:.93rem;color:var(--muted)}
.ev-tickets{font-size:.88rem}
.ev-links{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding-top:4px}
.ev-links a{color:var(--loom)}
.ev-filters{display:grid;gap:10px;margin-bottom:28px}
.ev-filters .filters{margin:0}
.ev-filters button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);color:var(--ink)}
.ev-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cloud)}
.ev-filters button:focus-visible{outline:2px solid var(--muga);outline-offset:2px}
.ev-month{display:grid;gap:16px;margin-bottom:36px}
.ev-month h2{font-size:var(--step2);border-bottom:1px solid var(--rule);padding-bottom:8px}
.ev-month h2 span{color:var(--muted);font-size:.6em}
.ev-empty{padding:24px 0;color:var(--muted)}
.ev-note{margin-top:8px;font-size:.88rem;color:var(--muted);max-width:70ch}
@media (max-width:760px){.ev-list{grid-template-columns:1fr}}
@media (max-width:420px){.event{grid-template-columns:3.6rem minmax(0,1fr);gap:12px;padding:14px}.ev-date{padding-right:10px}.ev-day{font-size:1.35rem}}
.events-page{padding-top:clamp(28px,4vw,44px)}