/* Note Haven — Moss Paper (refined) */

:root {

  --ink: #1E2A24;

  --bark: #0C1210;

  --paper: #E8EDE4;

  --paper-deep: #DDE5D8;

  --accent: #5A7A60;

  --accent-light: #6B8F71;

  --fog: #56615C;

  --stone: #3D4843;

  --muted: #6B7570;

  --shadow: rgba(12, 18, 16, 0.08);

  --shadow-lg: rgba(12, 18, 16, 0.14);

  --sp-1: 48px;

  --sp-2: 80px;

  --sp-3: 112px;

  --sp-4: 140px;

  --measure: 42rem;

  --radius: 4px;

  --font-serif: 'Newsreader', Georgia, serif;

  --font-ui: 'DM Sans', system-ui, sans-serif;

  --font-mono: 'DM Mono', monospace;

}



*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html.js .reveal-photo { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }

html.js .reveal-photo.is-visible { opacity: 1; transform: translateY(0); }



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  .reveal-photo { opacity: 1 !important; transform: none !important; transition: none !important; }

}



body {

  margin: 0;

  font-family: var(--font-serif);

  font-size: 1.125rem;

  line-height: 1.78;

  color: var(--ink);

  background: var(--paper);

  background-image:

    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(107, 143, 113, 0.12), transparent),

    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);

  min-height: 100vh;

  -webkit-font-smoothing: antialiased;

}



a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }

a:hover { color: var(--bark); }

a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }



.skip-link:focus {

  position: fixed;

  left: 16px;

  top: 16px;

  z-index: 10000;

  padding: 10px 18px;

  background: var(--bark);

  color: var(--paper);

  text-decoration: none;

  border-radius: var(--radius);

}



.page-shell {

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 clamp(28px, 6vw, 64px);

}



.page-shell--wide { max-width: 1140px; }



.page-shell--narrow {

  max-width: 720px;

  margin-left: auto;

  margin-right: auto;

}



.site-header {

  border-bottom: 1px solid rgba(90, 101, 96, .22);

  padding: 22px 0;

  background: rgba(232, 237, 228, .94);

  backdrop-filter: blur(8px);

  position: sticky;

  top: 0;

  z-index: 100;

}



.header-inner {

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 clamp(28px, 6vw, 64px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  flex-wrap: wrap;

}



.site-logo {

  font-family: var(--font-serif);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--bark);

  text-decoration: none;

  letter-spacing: -.01em;

}



.site-logo span {

  display: block;

  font-family: var(--font-ui);

  font-size: .78rem;

  font-weight: 400;

  color: var(--muted);

  margin-top: 4px;

  letter-spacing: 0;

}



.site-nav ul {

  display: flex;

  gap: clamp(16px, 3vw, 32px);

  list-style: none;

  margin: 0;

  padding: 0;

  font-family: var(--font-ui);

  font-size: .92rem;

}



.site-nav a {

  color: var(--stone);

  text-decoration: none;

  padding: 6px 0;

  border-bottom: 2px solid transparent;

  transition: color .2s, border-color .2s;

}



.site-nav a:hover,

.site-nav a[aria-current="page"] {

  color: var(--bark);

  border-bottom-color: var(--accent-light);

}



main { padding: var(--sp-2) 0 var(--sp-3); }



.eyebrow {

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

  font-weight: 500;

}



.moss-rule {

  display: block;

  width: 3px;

  height: 52px;

  background: linear-gradient(180deg, var(--accent-light), var(--accent));

  flex-shrink: 0;

  border-radius: 2px;

}



.section-mark {

  display: flex;

  gap: 24px;

  align-items: flex-start;

  margin-bottom: var(--sp-1);

}



.page-title {

  font-family: var(--font-serif);

  font-weight: 600;

  line-height: 1.18;

  color: var(--bark);

  font-size: clamp(2rem, 4.5vw, 2.85rem);

  margin: 0 0 .45em;

  letter-spacing: -.02em;

}



.lede {

  font-size: 1.18rem;

  color: var(--stone);

  font-style: italic;

  margin: .35em 0 0;

  line-height: 1.55;

}



.dateline {

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 32px;

}



.prose { max-width: var(--measure); }

.prose p { margin: 0 0 1.35em; }



.content-column {

  max-width: var(--measure);

  margin-left: auto;

  margin-right: auto;

}



.article-header { margin-bottom: var(--sp-1); }



/* Hero — full bleed article opener */

.hero-photo {

  margin: calc(var(--sp-1) * -0.25) 0 var(--sp-1);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 8px 32px var(--shadow-lg);

  border: 1px solid rgba(90, 101, 96, .2);

}



.hero-photo img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 480px;

  object-fit: cover;

}



.hero-photo .photo-caption {

  padding: 12px 20px;

  background: rgba(232, 237, 228, .95);

  border-top: 1px solid rgba(90, 101, 96, .15);

}



.inset-photo {

  margin: var(--sp-1) 0;

  padding: 10px;

  border: 1px solid rgba(90, 101, 96, .28);

  background: rgba(255, 255, 255, .35);

  border-radius: var(--radius);

  box-shadow: 0 4px 20px var(--shadow);

}



.inset-photo img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: calc(var(--radius) - 2px);

}



.photo-caption {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--muted);

  margin-top: 10px;

  padding-left: 4px;

  line-height: 1.5;

}



.inset-photo--gutter {

  float: right;

  width: min(44%, 340px);

  margin: 0 0 28px 36px;

}



@media (max-width: 720px) {

  .inset-photo--gutter { float: none; width: 100%; margin: 28px 0; }

}



.page-photo-strip {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin: var(--sp-1) 0;

}



@media (max-width: 640px) {

  .page-photo-strip { grid-template-columns: 1fr; }

}



.article-end {

  margin-top: var(--sp-2);

  padding-top: 24px;

  border-top: 1px solid rgba(90, 101, 96, .22);

  font-family: var(--font-ui);

  font-size: .92rem;

  text-align: center;

}



.gatefold-top-rule {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  border-bottom: 1px solid rgba(90, 101, 96, .25);

  padding-bottom: 18px;

  margin-bottom: var(--sp-2);

}



.gatefold-hero {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;

  margin-bottom: var(--sp-2);

  padding-bottom: var(--sp-2);

  border-bottom: 1px solid rgba(90, 101, 96, .2);

}



.gatefold-hero__text { padding-right: 16px; }



.gatefold-hero__photo .inset-photo {

  margin: 0;

}



.gatefold-hero__photo img {

  max-height: 520px;

  object-fit: cover;

}



@media (max-width: 860px) {

  .gatefold-hero {

    grid-template-columns: 1fr;

    gap: 32px;

  }

  .gatefold-hero__text { padding-right: 0; }

}



.gatefold-welcome { margin-bottom: var(--sp-2); }



.gatefold-link {

  display: inline-block;

  margin-top: 1.25em;

  font-family: var(--font-ui);

  font-weight: 500;

  padding: 10px 0;

}



.fold-list { margin: var(--sp-2) 0; }



.fold-row {

  display: grid;

  grid-template-columns: 52px 1fr 80px;

  gap: 24px;

  align-items: center;

  padding: 26px 20px;

  margin: 0 -20px;

  border-bottom: 1px solid rgba(90, 101, 96, .18);

  text-decoration: none;

  color: inherit;

  border-radius: var(--radius);

  transition: background .2s ease, box-shadow .2s ease;

}



.fold-row:hover {

  background: rgba(107, 143, 113, .08);

  box-shadow: 0 2px 12px var(--shadow);

}



.fold-row__num {

  font-family: var(--font-mono);

  font-size: 13px;

  font-weight: 500;

  color: var(--accent);

}



.fold-row__title {

  font-family: var(--font-serif);

  font-weight: 600;

  font-size: 1.15rem;

  color: var(--bark);

  margin: 0 0 6px;

  line-height: 1.3;

}



.fold-row__standfirst {

  font-family: var(--font-ui);

  font-size: .92rem;

  color: var(--stone);

  margin: 0;

  line-height: 1.5;

}



.fold-row__thumb {

  width: 72px;

  height: 72px;

  object-fit: cover;

  border: 1px solid rgba(90, 101, 96, .25);

  border-radius: var(--radius);

  box-shadow: 0 2px 8px var(--shadow);

}



.archive-group { margin-bottom: var(--sp-2); }



.archive-group h2 {

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

  border-bottom: 1px solid rgba(90, 101, 96, .22);

  padding-bottom: 14px;

  margin-bottom: 8px;

}



.card-row {

  display: grid;

  grid-template-columns: 108px 1fr;

  gap: 24px;

  padding: 22px 16px;

  margin: 0 -16px;

  border-bottom: 1px solid rgba(90, 101, 96, .15);

  text-decoration: none;

  color: inherit;

  border-radius: var(--radius);

  transition: background .2s ease;

}



.card-row:hover { background: rgba(107, 143, 113, .06); }



.card-row img {

  width: 108px;

  height: 80px;

  object-fit: cover;

  border: 1px solid rgba(90, 101, 96, .25);

  border-radius: var(--radius);

  box-shadow: 0 2px 8px var(--shadow);

}



.card-row h3 {

  font-family: var(--font-serif);

  font-size: 1.12rem;

  margin: 0 0 6px;

  color: var(--bark);

  line-height: 1.3;

}



.card-row p:last-child {

  font-family: var(--font-ui);

  font-size: .92rem;

  color: var(--stone);

  margin: 0;

  line-height: 1.5;

}



.byline-layout::after { content: ''; display: table; clear: both; }



.byline-portrait {

  float: left;

  width: 240px;

  margin: 0 48px 28px 0;

}



.byline-portrait img {

  aspect-ratio: 4 / 5;

  object-fit: cover;

}



@media (max-width: 720px) {

  .byline-portrait { float: none; margin: 0 0 28px; width: 100%; max-width: 300px; }

}



.contact-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 56px;

  align-items: start;

}



@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }



.contact-details {

  font-family: var(--font-ui);

  line-height: 1.85;

  padding: 24px 28px;

  background: rgba(255, 255, 255, .4);

  border: 1px solid rgba(90, 101, 96, .22);

  border-radius: var(--radius);

  margin: var(--sp-1) 0;

}



.contact-details a { color: var(--ink); font-weight: 500; }



.disclaimer-block {

  margin-top: var(--sp-2);

  padding: 28px 32px;

  border: 1px solid rgba(90, 101, 96, .25);

  border-left: 3px solid var(--accent-light);

  font-size: .95rem;

  color: var(--stone);

  background: rgba(255, 255, 255, .35);

  border-radius: var(--radius);

  line-height: 1.65;

}



.legal-aside-photo {

  max-width: 280px;

  margin: 0 auto var(--sp-1);

}



.legal-aside-photo img {

  aspect-ratio: 4 / 3;

  object-fit: cover;

}



.map-title-visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.map-wrap-outer { padding-bottom: var(--sp-2); }



.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; }



.map-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: rgba(30, 42, 36, .07);

  color: var(--stone);

  font-family: var(--font-ui);

  font-size: .92rem;

  gap: 14px;

  min-height: 150px;

}



.map-placeholder button {

  font-family: var(--font-ui);

  font-size: .88rem;

  padding: 11px 22px;

  background: var(--accent);

  color: var(--paper);

  border: none;

  cursor: pointer;

  border-radius: var(--radius);

  transition: background .2s;

}



.map-placeholder button:hover { background: var(--bark); }



.map-a .map-wrap iframe,

.map-a .map-placeholder { height: 490px; border: 1px solid var(--accent-light); filter: saturate(.88); }



@media (max-width: 768px) {

  .map-a .map-wrap iframe,

  .map-a .map-placeholder { height: 300px; }

}



.map-b { margin-top: var(--sp-2); }



.map-b .map-wrap iframe,

.map-b .map-placeholder {

  width: 100%;

  height: 200px;

  display: block;

  border: 0;

  filter: saturate(.85);

}



@media (max-width: 768px) {

  .map-b .map-wrap iframe,

  .map-b .map-placeholder { height: 150px; }

}



.map-b .map-eyebrow,

.map-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 10px;

}



.map-c { margin: var(--sp-2) 0 0; }



.map-c .map-wrap iframe,

.map-c .map-placeholder {

  width: 100%;

  height: 300px;

  border: 0;

  filter: saturate(.88);

}



@media (max-width: 768px) {

  .map-c .map-wrap iframe,

  .map-c .map-placeholder { height: 200px; }

}



.map-d .map-wrap iframe,

.map-d .map-placeholder {

  width: 100%;

  height: 170px;

  border: 1px solid rgba(90, 101, 96, .25);

  filter: saturate(.85);

}



.map-note {

  font-size: .88rem;

  color: var(--muted);

  margin-top: 10px;

  font-family: var(--font-ui);

}



.site-footer {

  border-top: 1px solid rgba(90, 101, 96, .25);

  padding: var(--sp-2) 0 var(--sp-1);

  font-family: var(--font-ui);

  font-size: .88rem;

  color: var(--stone);

  line-height: 1.75;

  background: rgba(221, 229, 216, .5);

}



.footer-inner {

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 clamp(28px, 6vw, 64px);

}



.site-footer a { color: var(--stone); }

.site-footer a:hover { color: var(--bark); }



.footer-links a { margin-right: 20px; }



#cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 9000;

  background: var(--bark);

  color: var(--paper);

  padding: 20px 28px;

  font-family: var(--font-ui);

  font-size: .92rem;

  box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);

}



#cookie-banner[hidden] { display: none; }



.cookie-inner {

  max-width: 1080px;

  margin: 0 auto;

}



.cookie-text { margin: 0 0 14px; line-height: 1.55; }



.cookie-text a { color: var(--accent-light); }



.cookie-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 8px;

}



#cookie-banner button {

  font-family: var(--font-ui);

  font-size: .88rem;

  padding: 10px 18px;

  border: 1px solid rgba(232, 237, 228, .35);

  background: transparent;

  color: var(--paper);

  cursor: pointer;

  border-radius: var(--radius);

  transition: background .2s;

}



#cookie-banner button:hover { background: rgba(232, 237, 228, .12); }



#cookie-accept { background: var(--accent-light); border-color: var(--accent-light); }



#cookie-panel {

  margin-top: 18px;

  padding-top: 18px;

  border-top: 1px solid rgba(232, 237, 228, .18);

}



#cookie-panel[hidden] { display: none; }



.cookie-toggle-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid rgba(232, 237, 228, .12);

  gap: 16px;

}



.cookie-toggle-row button {

  width: auto;

  min-width: 48px;

  flex-shrink: 0;

}



.manage-cookies-btn {

  display: inline-block;

  margin-top: 20px;

  font-family: var(--font-ui);

  font-size: .92rem;

  padding: 12px 24px;

  background: var(--accent);

  color: var(--paper);

  border: none;

  cursor: pointer;

  border-radius: var(--radius);

  transition: background .2s;

}



.manage-cookies-btn:hover { background: var(--bark); }



.error-hero {

  text-align: center;

  padding: var(--sp-1) 0;

}



.error-hero img {

  max-width: 360px;

  margin: 0 auto var(--sp-1);

  border-radius: var(--radius);

  box-shadow: 0 8px 24px var(--shadow-lg);

}