/* Swell Otter UK surf news (/news/ and /news/<slug>). Builds on article.css and the colour tokens from spot.css. */
.n-kicker{margin:0 0 6px;font:800 12px var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--teal)}
.n-post .a-lead{margin-bottom:18px}
.n-sec h2,.n-spots h2,.n-more h2{margin:26px 0 10px;font:400 24px/1.15 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--mustard)}
.n-sec p{margin:0 0 12px}
.n-points{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:6px}
.n-points li{position:relative;padding-left:22px;font-weight:600;color:var(--navy)}
.n-points li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--orange)}

.n-take{margin:26px 0;background:var(--navy);color:var(--cream);border-radius:14px;padding:16px 18px 6px;box-shadow:5px 5px 0 var(--mustard),10px 10px 0 var(--orange)}
.n-take h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:400 24px/1.1 var(--display);color:var(--cream);text-shadow:2px 2px 0 var(--rust)}
.n-take h2 img{width:34px;height:34px;border-radius:50%;border:2px solid var(--cream);object-fit:cover;background:var(--cream)}
.n-take p{margin:0 0 12px;color:var(--sand)}

.n-source{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;margin:22px 0;padding:14px 16px;border:2px solid var(--navy);border-radius:12px;background:var(--cream);text-decoration:none;color:var(--navy)}
.n-source small{grid-column:1;font:800 11.5px var(--narrow);text-transform:uppercase;letter-spacing:.09em;color:var(--teal)}
.n-source b{grid-column:1;font:800 16.5px/1.35 var(--body)}
.n-source span{grid-column:2;grid-row:1/3;font:900 22px var(--body)}
.n-source:hover{background:var(--paper);box-shadow:3px 3px 0 var(--teal)}

.n-spots ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.n-spots li{display:flex;flex-direction:column;gap:6px;background:var(--cream);border:2px solid var(--line);border-radius:12px;padding:12px 14px}
.n-spots li>a:first-child{text-decoration:none;color:var(--navy)}
.n-spots small{display:block;font:700 11px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.n-spots b{font:800 16px var(--body)}
.n-guide{font:800 12.5px var(--narrow);text-transform:uppercase;letter-spacing:.07em;color:var(--teal);text-decoration:none}
.n-guide:hover{text-decoration:underline}

.n-note{margin:22px 0;font-size:14px;line-height:1.55;color:var(--muted)}

.n-cards{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.n-cards li a{display:block;background:var(--cream);border:2px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.n-cards li a:hover{border-color:var(--navy);box-shadow:3px 3px 0 var(--teal)}
.n-cards small{display:block;font:700 11.5px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.n-cards b{display:block;margin-top:2px;font:800 17px/1.3 var(--body);color:var(--navy)}
.n-cards span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5}
.n-month h2{margin:24px 0 10px;font:900 13px var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.n-feed{margin:-4px 0 0;font:700 13px var(--narrow)}
.n-feed a{color:var(--teal)}
@media (min-width:860px){.n-index .n-cards{grid-template-columns:1fr 1fr}}
/* Long headlines in the breadcrumb trail shrink with an ellipsis instead of widening the page; keep "News" visible on phones. */
.n-post .crumbs li:last-child{flex-shrink:1}
@media (max-width:640px){.n-post .crumbs li:nth-child(2){display:flex}}

/* Photo hero at the top of every news page (our own artwork, see heroOf in tools/build-news.mjs). */
.n-hero{position:relative;overflow:hidden;background:var(--navy);color:var(--cream);min-height:clamp(300px,46vh,460px);display:flex;align-items:flex-end;margin-top:-9px}
.n-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.n-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,46,.2) 0%,rgba(20,32,46,.55) 35%,rgba(20,32,46,.88) 65%,rgba(20,32,46,.97) 100%)}
.n-hero-in{position:relative;z-index:1;width:100%;max-width:760px;margin:0 auto;padding:60px 18px 22px}
.n-hero-index .n-hero-in{max-width:1040px;padding-left:16px;padding-right:16px}
.n-hero h1{margin:0 0 12px;font:400 clamp(30px,7vw,46px)/1.1 var(--display);color:#fff;text-shadow:3px 3px 0 var(--rust),0 4px 22px rgba(0,0,0,.7);text-wrap:balance}
.n-hero .n-kicker{color:var(--mustard)}
.n-dek{margin:0;max-width:60ch;font:600 17.5px/1.5 var(--body);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.6)}
.n-hero .n-kicker,.n-hero .crumbs{text-shadow:0 1px 3px rgba(0,0,0,.85)}
.n-hero .crumbs{margin-bottom:10px}
.n-hero .crumbs ol,.n-hero .crumbs [aria-current]{color:var(--sand)}
.n-hero .crumbs a{color:var(--mustard)}
.n-hero .n-feed{margin:10px 0 0}
.n-hero .n-feed a{color:var(--mustard)}
.n-hero .crumbs li:last-child{flex-shrink:1}
@media (max-width:640px){.n-hero .crumbs li:nth-child(2){display:flex}.n-hero{margin-top:0}}
.n-hero .crumbs li:nth-child(2){flex-shrink:0}
.n-post .a-lead{margin:4px 0 14px}

/* Card thumbnails on the news index and in "More UK surf news". */
.n-cards li a{padding:0;overflow:hidden}
.n-cards li a img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.n-cards li a small{margin:12px 14px 0}
.n-cards li a b,.n-cards li a span{margin-left:14px;margin-right:14px}
.n-cards li a span{margin-bottom:14px}
/* On desktop the article column is 1180px wide (article.css), so the hero text lines up with it. */
@media (min-width:1060px){.n-hero-in,.n-hero-index .n-hero-in{max-width:1180px;padding:80px 28px 30px}.n-hero h1{font-size:50px;max-width:22ch}}

/* Byline in the hero: author photo, name, date and source. */
.n-by{display:flex;align-items:center;gap:12px;margin-top:16px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.n-by img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--mustard);background:var(--mustard)}
.n-by span{display:block;font:800 15px var(--body);color:#fff}
.n-by span a{color:#fff;text-decoration:none}
.n-by span a:hover{text-decoration:underline}
.n-by small{display:block;font:600 13.5px var(--narrow);color:var(--sand)}
.n-by small a{color:var(--mustard);text-decoration:none}
@media (min-width:1060px){.n-hero::after{background:linear-gradient(90deg,rgba(20,32,46,.9) 0%,rgba(20,32,46,.75) 45%,rgba(20,32,46,.25) 80%),linear-gradient(180deg,transparent 50%,rgba(20,32,46,.6) 100%)}}

/* Brighter hero: lighter shading so the photo shows; a heavier text shadow keeps the words readable. */
.n-hero>img{filter:brightness(1.08) saturate(1.1)}
.n-hero::after{background:linear-gradient(180deg,rgba(20,32,46,0) 0%,rgba(20,32,46,.12) 30%,rgba(20,32,46,.5) 62%,rgba(20,32,46,.78) 100%)}
.n-hero h1{text-shadow:3px 3px 0 var(--rust),0 2px 6px rgba(0,0,0,.6),0 4px 26px rgba(0,0,0,.65)}
.n-dek,.n-by{text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.75)}
.n-hero .n-kicker,.n-hero .crumbs{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6)}
@media (min-width:1060px){.n-hero::after{background:linear-gradient(90deg,rgba(20,32,46,.62) 0%,rgba(20,32,46,.4) 38%,rgba(20,32,46,0) 68%),linear-gradient(180deg,transparent 55%,rgba(20,32,46,.4) 100%)}}