/* WGL Magazine — shared styles for mag.whatsgoodlocal.com
   Layout: a magazine front page (cover story + "in this issue" rail + feature grid)
   and single-column feature pages with photos breaking wider than the text and
   oversized display pull quotes. Every section gets its own accent (--acc). */
:root{
  --bg:#f4f2ee;          /* bleached-dock paper */
  --fg:#0e1a26;          /* harbor-night ink */
  --muted:#586573;
  --line:#d8d3ca;
  --panel:#e9e5dd;
  --navy:#0a2039;        /* WGL navy */
  --on-navy:#f4f2ee;
  --teal:#0a7e86;        /* The Opener / WGL teal */
  --sea:#1d7f5a;         /* On the Water */
  --deep:#2459a8;        /* The Maker */
  --amber:#b85c14;       /* The Music */
  --gold:#8a6410;        /* Guides */
  --acc:var(--teal);
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f151c; --fg:#ebe6de; --muted:#9fa9b3; --line:#27313b; --panel:#17202a;
  --navy:#081827; --on-navy:#ebe6de;
  --teal:#35c3c9; --sea:#4cc594; --deep:#7ea8f0; --amber:#f0a25c; --gold:#e3b75a; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0f151c; --fg:#ebe6de; --muted:#9fa9b3; --line:#27313b; --panel:#17202a;
  --navy:#081827; --on-navy:#ebe6de;
  --teal:#35c3c9; --sea:#4cc594; --deep:#7ea8f0; --amber:#f0a25c; --gold:#e3b75a; color-scheme:dark }

.s-opener{--acc:var(--teal)} .s-water{--acc:var(--sea)} .s-maker{--acc:var(--deep)}
.s-music{--acc:var(--amber)} .s-guide{--acc:var(--gold)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--serif); font-size:19px; line-height:1.62;
  padding-inline:20px; padding-block:0 56px}
img{max-width:100%; display:block; height:auto}
a{color:var(--acc); text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto}
.col{max-width:680px; margin:0 auto}

/* ---------- top bar ---------- */
.topbar{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:8px 18px; padding-block:14px; border-bottom:1px solid var(--line);
  font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.topbar a{color:inherit; text-decoration:none}
.topbar a:hover{color:var(--fg)}
.topbar .brand{font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:.02em; color:var(--fg)}
.topbar .brand span{color:var(--teal)}
.topbar nav{display:flex; flex-wrap:wrap; gap:6px 16px}

/* ---------- masthead (front page) ---------- */
.mast{max-width:1180px; margin:0 auto; padding-block:30px 18px; border-bottom:3px solid var(--fg);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px 24px}
.mast h1{margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.82;
  font-size:clamp(58px,11vw,150px); letter-spacing:-.005em}
.mast h1 em{font-style:normal; color:var(--teal)}
.mast .issue{font:500 13px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:right}
.mast .issue b{display:block; font-family:var(--display); font-weight:900; font-size:30px; letter-spacing:0; color:var(--fg)}
.secnav{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:6px 22px; padding-block:12px;
  border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:18px; letter-spacing:.03em}
.secnav a{color:var(--fg); text-decoration:none}
.secnav a:hover{color:var(--teal)}

/* ---------- cover story + rail ---------- */
.lead{max-width:1180px; margin:28px auto 0; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:32px}
.cover{position:relative; display:block; color:#fff; text-decoration:none; overflow:hidden; background:var(--navy)}
.cover img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease}
.cover:hover img{transform:scale(1.02)}
.cover .ov{position:absolute; inset:auto 0 0 0; padding:28px 26px 24px;
  background:linear-gradient(0deg,rgba(6,16,28,.88) 0%,rgba(6,16,28,.55) 60%,rgba(6,16,28,0) 100%)}
.cover .k{font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#8fe3e6; margin:0 0 8px}
.cover h2{margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(40px,6.2vw,84px); line-height:.86; text-wrap:balance}
.cover p{margin:10px 0 0; font-size:18px; font-style:italic; max-width:44ch; color:#e8eef2}
.cover .cr{position:absolute; top:10px; right:12px; font:400 11px/1 var(--mono); color:rgba(255,255,255,.8)}
.rail h3{margin:0 0 6px; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:26px; color:var(--teal)}
.rail ol{list-style:none; margin:0; padding:0; counter-reset:r}
.rail li{counter-increment:r; display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:13px 0; border-top:1px solid var(--line)}
.rail li::before{content:counter(r); font-family:var(--display); font-weight:900; font-size:28px; line-height:1; color:var(--acc)}
.rail a{color:var(--fg); text-decoration:none}
.rail a:hover .t{color:var(--acc)}
.rail .t{display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:21px; line-height:1.05}
.rail .d{display:block; font:400 12px/1.4 var(--mono); color:var(--muted); margin-top:3px; letter-spacing:.03em}
.rail .soon .t{color:var(--muted)}

/* ---------- section heads ---------- */
.band{max-width:1180px; margin:56px auto 0}
.bandhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-top:3px solid var(--fg); padding-top:10px; margin-bottom:22px}
.bandhead h2{margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(30px,4vw,44px); line-height:1}
.bandhead span{font:500 12px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex; flex-direction:column; gap:8px; color:var(--fg); text-decoration:none; min-width:0}
.card .im{overflow:hidden; background:var(--panel)}
.card img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s ease}
.card:hover img{transform:scale(1.03)}
.card .sec{font:500 12px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-top:6px}
.card h3{margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:30px; line-height:.95; text-wrap:balance}
.card:hover h3{color:var(--acc)}
.card p{margin:0; font-size:17px; line-height:1.5; color:var(--muted)}
.card .by{font:400 12px/1.4 var(--mono); color:var(--muted)}
.card.soon{border:2px dashed var(--line); padding:22px; justify-content:center; min-height:200px}
.card.soon .sec{margin:0}
.card.soon h3{color:var(--muted)}

/* ---------- WGL strip ---------- */
.strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.strip a{background:var(--bg); padding:22px 20px; color:var(--fg); text-decoration:none; display:flex; flex-direction:column; gap:6px}
.strip a:hover{background:var(--panel)}
.strip b{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:24px; line-height:1}
.strip span{font-size:16px; line-height:1.45; color:var(--muted)}
.strip em{font:500 12px/1 var(--mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-top:auto; padding-top:8px}

/* ---------- subscribe ---------- */
.sub{max-width:1180px; margin:64px auto 0; background:var(--navy); color:var(--on-navy);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:center; padding:34px 32px}
.sub h2{margin:0 0 8px; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(34px,4.6vw,52px); line-height:.92}
.sub p{margin:0; font-size:17px; opacity:.88; max-width:48ch}
.btn{display:inline-flex; align-items:center; justify-content:center; font:700 15px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:16px 22px; background:var(--teal); color:#fff; text-decoration:none; border:0}
.btn:hover{filter:brightness(1.08)}
.sub .btn{justify-self:start}

/* ---------- feature page ---------- */
.hero{max-width:1000px; margin:0 auto; padding-block:44px 26px}
.kicker{font:500 13px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin:0 0 14px}
.kicker a{color:inherit; text-decoration:none}
.hero h1{margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(58px,11.5vw,140px); line-height:.84; text-wrap:balance}
.hero .sub2{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,3vw,30px); letter-spacing:.02em; margin:12px 0 16px; color:var(--muted)}
.hero .dek{font-size:clamp(19px,2.2vw,23px); font-style:italic; max-width:44ch; margin:0}
.hero .byline{margin-top:18px; font:400 13px/1.6 var(--mono); color:var(--muted); letter-spacing:.03em}

figure{margin:0}
figcaption{font:400 13px/1.5 var(--mono); color:var(--muted); margin-top:8px}
.lead-img{max-width:1180px; margin:0 auto}
.lead-img img{width:100%; max-height:78vh; object-fit:cover}
.wide{max-width:960px; margin:40px auto}
.wide img{width:100%}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:40px auto; max-width:960px}
.pair img{width:100%; aspect-ratio:4/3; object-fit:cover}
.pair .bw img{filter:grayscale(1)}
.inset{float:right; width:min(44%,300px); margin:6px 0 16px 26px}
.inset img{width:100%}
.clear{clear:both}

article p{margin:0 0 1.05em}
article .intro{font-size:21px; margin-top:34px}
article .intro::first-letter{font-family:var(--display); font-weight:900; float:left; font-size:92px; line-height:.8; padding:6px 10px 0 0; color:var(--acc)}
article h2{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(34px,5vw,50px); line-height:.95; margin:56px 0 18px; text-wrap:balance}
article .q{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.04em; color:var(--acc); margin:40px 0 12px; line-height:1.2}
article .bridge{font-style:italic; color:var(--muted)}
blockquote.pull{margin:40px 0; padding:0; border:0; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(38px,6vw,64px); line-height:.96; text-wrap:balance}
blockquote.pull::before{content:"\201C"; color:var(--acc)}
blockquote.pull::after{content:"\201D"; color:var(--acc)}

.box{max-width:680px; margin:48px auto; background:var(--panel); padding:26px 24px}
.box h3{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:30px; margin:0 0 4px; line-height:1}
.box .note{font:400 13px/1.5 var(--mono); color:var(--muted); margin:0 0 14px}
.row{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:14px 0; border-top:1px dashed var(--line)}
.row .l{font:500 13px/1.25 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--acc)}
.row .l b{display:block; font-family:var(--display); font-weight:900; font-size:32px; letter-spacing:0; color:var(--fg); line-height:1}
.row .r{min-width:0; font-size:17px; line-height:1.5}
.row .r span{display:block; font:400 13px/1.5 var(--mono); color:var(--muted); margin-top:2px}

.memorial{max-width:760px; margin:72px auto 0; background:var(--navy); color:var(--on-navy); display:grid; grid-template-columns:260px minmax(0,1fr)}
.memorial img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.memorial .txt{padding:34px 30px; display:flex; flex-direction:column; justify-content:center; gap:8px}
.memorial .name{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:48px; line-height:.9; margin:0}
.memorial .meta{font:400 13px/1.6 var(--mono); opacity:.8; margin:0}
.memorial blockquote{margin:12px 0 2px; font-size:21px; font-style:italic; line-height:1.45}
.memorial cite{font:400 13px/1.4 var(--mono); font-style:normal; opacity:.8}
.memorial .missed{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:18px; margin:12px 0 0}

.gems{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px; max-width:960px; margin:30px auto}
.gem img{width:100%; aspect-ratio:3/2; object-fit:cover}
.gem h3{margin:10px 0 2px; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:28px; line-height:1}
.gem .where{font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin:0 0 6px}
.gem p{margin:0; font-size:17px; line-height:1.5}
.gem .noimg{aspect-ratio:3/2; background:var(--panel); display:flex; align-items:flex-end; padding:16px;
  font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:40px; line-height:.9; color:var(--acc)}

.keylist{list-style:none; margin:30px 0; padding:0}
.keylist li{padding:20px 0; border-top:1px solid var(--line)}
.keylist b{display:block; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:30px; line-height:1; margin-bottom:6px}

.tie{max-width:680px; margin:56px auto 0; border-top:3px solid var(--acc); padding-top:18px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 24px; align-items:center}
.tie small{display:block; font:500 12px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.tie b{display:block; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:30px; line-height:1; margin-top:4px}
.tie p{margin:6px 0 0; font-size:17px; color:var(--muted)}
.tie .btn{background:var(--acc)}

.more{max-width:1180px; margin:72px auto 0}
.credits{max-width:680px; margin:40px auto 0; font:400 13px/1.6 var(--mono); color:var(--muted); border-top:1px solid var(--line); padding-top:14px}

footer.foot{max-width:1180px; margin:64px auto 0; border-top:1px solid var(--line); padding-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  font:400 13px/1.6 var(--mono); color:var(--muted)}
footer.foot a{color:var(--muted)}

@media (max-width:900px){
  .lead{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:1fr}
  .sub{grid-template-columns:1fr; padding:28px 22px}
}
@media (max-width:620px){
  body{font-size:18px}
  .grid,.grid.two,.gems{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .inset{float:none; width:100%; margin:24px 0}
  .mast{grid-template-columns:1fr}
  .mast .issue{text-align:left}
  .memorial{grid-template-columns:1fr}
  .memorial img{aspect-ratio:1/1; height:auto}
  .tie{grid-template-columns:1fr}
  .row{grid-template-columns:76px minmax(0,1fr)}
  .cover img{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){ .cover img,.card img{transition:none} .cover:hover img,.card:hover img{transform:none} }

/* Tall archive photo: keep the boy's face in frame when cropped into cards and pairs */
img[src$="rodeo-1955-boy-catch.jpg"]{object-position:50% 12%}