@layer reset, tokens, base, layout, parts, pages, motion;

@font-face { font-family: "Playfair Display"; src: url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(/assets/fonts/playfair-display-latin-wght-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(/assets/fonts/mulish-latin-wght-normal.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Stardos Stencil"; src: url(/assets/fonts/stardos-stencil-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    --bg: #f8f9fa; --surface: #eceff1; --ink: #121416; --muted: #4a525a; --accent: #0b5563; --on-accent: #ffffff;
    --rule: #b4bcc2; --grey-wood: #8d949a; --pine: #b58a46;
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
    --stencil: "Stardos Stencil", "Playfair Display", serif;
    --step-0: 1.0625rem; --step-1: 1.416rem; --step-2: 1.888rem; --step-3: 2.517rem; --step-4: 3.355rem; --step-5: 4.472rem;
    --measure: 65ch; --gutter: clamp(1rem, 3vw, 2rem);
  }
}

@layer base {
  html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); font: 400 var(--step-0)/1.62 var(--sans); padding-bottom: 4.5rem; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
  h1 { font-size: clamp(var(--step-3), 5vw, var(--step-4)); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }
  p, li, dd { max-width: var(--measure); }
  a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 99; }
  .skip:focus { left: 0; }
  [v-cloak] { visibility: hidden; }
  .kicker { font: 800 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
  .btn { display: inline-block; background: var(--accent); color: var(--on-accent); padding: .7rem 1.3rem; border: 1.5px solid var(--accent); font-weight: 800; text-decoration: none; text-align: center; cursor: pointer; border-radius: 0; }
  .btn:hover { background: #0a4753; border-color: #0a4753; }
  .btn.ghost { background: transparent; color: var(--accent); }
  .btn.ghost:hover { background: var(--surface); }
  .textlink { font-weight: 800; }
}

@layer layout {
  .wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); }
  .masthead { max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); text-align: center; position: relative; }
  .strip { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--muted); border-bottom: 1px solid var(--rule); padding: .55rem 0; text-align: left; }
  .strip a { color: var(--muted); }
  .nameplate { display: block; font: 900 clamp(2.4rem, 8.5vw, 6.2rem)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); text-decoration: none; padding: 1.1rem 0 .1rem; }
  .motto { font: italic 400 1rem var(--serif); color: var(--muted); padding-bottom: .9rem; margin-inline: auto; }
  .sections { border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); }
  .sections > ul { list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
  .sec { position: relative; }
  .sec > a:not(.btn) { display: block; padding: .75rem 1.05rem; color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: .02em; }
  .sec.here > a, .sec > a:not(.btn):hover { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
  .sec.cta { margin-left: .5rem; display: flex; align-items: center; padding-block: .4rem; }
  .sub { display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 15rem; background: var(--bg); border: 1px solid var(--ink); border-top-width: 3px; text-align: left; padding: .6rem 0; }
  .sub.wide { display: none; grid-template-columns: repeat(4, 12rem); left: 50%; transform: translateX(-62%); min-width: 0; padding: .8rem 1rem; gap: 0 1rem; }
  .sub ul { list-style: none; }
  .sub a { display: block; padding: .3rem 1rem; color: var(--ink); text-decoration: none; font-size: .95rem; }
  .sub.wide a { padding-inline: 0; }
  .sub a:hover { color: var(--accent); text-decoration: underline; }
  .grp a { font-weight: 800; color: var(--accent); }
  .sec:hover > .sub, .sec:focus-within > .sub { display: block; }
  .sec:hover > .sub.wide, .sec:focus-within > .sub.wide { display: grid; }
  .menu-btn { display: none; }
  .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1rem 3rem; }
  .crumbs { padding: 1rem 0 0; font-size: .875rem; color: var(--muted); }
  .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule); }
  .crumbs a { color: var(--muted); }
  @media (min-width: 62rem) {
    .grid { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 0; }
    .side { border-left: 1px solid var(--rule); padding-left: 1.75rem; margin-left: 2rem; }
    .side > * { position: sticky; top: 1rem; }
    .side > .related { position: static; }
  }
  @media (max-width: 61.99rem) {
    .strip-counties { display: none; }
    .sections { text-align: left; }
    /* No JavaScript: the sections stay a short wrapped row of links, and the dead button is hidden. */
    html:not(.js) .sections > ul { justify-content: flex-start; gap: 0 .25rem; }
    html:not(.js) .sec > a:not(.btn) { padding: .35rem .5rem; font-size: .9rem; }
    html:not(.js) .sec.cta { margin: .2rem 0 .4rem; }
    html.js .menu-btn { display: inline-block; margin: 0 auto .7rem; background: var(--ink); color: #fff; border: 0; padding: .55rem 1.2rem; font-weight: 800; }
    html.js .sections { display: none; }
    html.js .sections.open { display: block; }
    html.js .sections > ul { display: block; }
    html.js .sec > a:not(.btn) { padding: .55rem .25rem; border-top: 1px solid var(--rule); }
    .sub, .sub.wide { display: none !important; }
    .sec.cta { margin: .6rem 0; }
    .side { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
  }
}

@layer parts {
  .art-head { padding: 1.25rem 0 1rem; border-bottom: 1px solid var(--ink); margin-bottom: 1.6rem; }
  .art-head h1 { margin-bottom: .9rem; }
  .stand { font: italic 400 var(--step-1)/1.42 var(--serif); color: #2a3036; max-width: 52ch; }
  .dl { font: 800 .85em/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
  .blk { padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
  .blk:last-child { border-bottom: 0; }
  .blk h2, .blk h3 { margin-bottom: .8rem; }
  .blk p + p, .blk p + ul, .blk ul + p, .blk p + ol { margin-top: .85em; }
  .blk ul, .blk ol { padding-left: 1.3rem; }
  .blk li + li { margin-top: .4em; }
  .blk.cols p { max-width: none; }
  @media (min-width: 62rem) { .blk.cols { column-count: 2; column-gap: 2.2rem; column-rule: 1px solid var(--rule); } .blk.cols h2 { column-span: all; } }
  .blk dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
  .blk dt { font-weight: 800; }
  .pull { font: italic 700 var(--step-2)/1.25 var(--serif); border-left: 4px solid var(--accent); padding: .4rem 0 .4rem 1.2rem; margin-block: 1.4rem; max-width: 34ch; }
  .fig, .art-fig { margin-block: 1.2rem; }
  .fig svg, .art-fig svg { width: 100%; max-width: 38rem; height: auto; margin-inline: auto; }
  figcaption { font-size: .875rem; color: var(--muted); margin-top: .5rem; max-width: 60ch; }
  .draw { font-family: var(--sans); }
  .draw .drop { opacity: .85; }
  .quote-box { border-top: 4px solid var(--accent); border-bottom: 1px solid var(--ink); padding: 1rem 0 1.2rem; }
  .quote-box h2 { font-size: var(--step-1); margin-bottom: .5rem; }
  .quote-box p { margin-bottom: .9rem; font-size: .95rem; }
  .related { margin-top: 1.6rem; }
  .related h2 { font: 800 .8125rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
  .related ul { list-style: none; }
  .related li { border-top: 1px solid var(--rule); padding: .45rem 0; }
  .related a { font-weight: 700; text-decoration: none; }
  .related a:hover { text-decoration: underline; }
  table { border-collapse: collapse; width: 100%; font-size: .95rem; }
  caption { text-align: left; font: italic 400 .9rem var(--serif); color: var(--muted); padding-bottom: .5rem; }
  th, td { text-align: left; padding: .55rem .7rem .55rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
  thead th { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
  tbody tr:last-child td, tbody tr:last-child th { border-bottom: 1px solid var(--ink); }
  td:first-child, th[scope=row] { font-weight: 800; white-space: nowrap; }
  table.stencil td:first-child { font-family: var(--stencil); font-size: 1.15rem; }
  @media (max-width: 47.99rem) {
    table.stack, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
    table.stack thead { position: absolute; left: -999px; }
    table.stack tr { border-top: 2px solid var(--ink); padding: .5rem 0; }
    table.stack td, table.stack th[scope=row] { border: 0; padding: .15rem 0; white-space: normal; }
    table.stack td::before { content: attr(data-label); display: block; font: 800 .72rem var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
    table.stack td:first-child::before { display: none; }
    table.stack tbody tr:last-child td { border-bottom: 0; }
  }
  details { border-top: 1px solid var(--rule); padding: .7rem 0; }
  details:last-of-type { border-bottom: 1px solid var(--rule); }
  summary { cursor: pointer; font-weight: 800; }
  details p { margin-top: .5rem; }
  .sources ul { list-style: none; padding: 0; font-size: .9rem; }
  .reviewed { font-size: .85rem; color: var(--muted); }
  .classified { background: var(--surface); padding: 1.4rem var(--gutter); border-top: 3px double var(--ink); margin-top: 1.5rem; }
  select, input[type=number], textarea { border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); padding: .55rem .65rem; width: 100%; }
  .quotebar { position: fixed; inset: auto 0 0 0; background: var(--bg); border-top: 2px solid var(--ink); padding: .6rem 1rem; z-index: 30; display: none; }
  .quotebar .btn { display: block; }
  @media (max-width: 61.99rem) { .quotebar { display: block; } body.page-quote .quotebar { display: none; } }
  .backpage { border-top: 3px double var(--ink); margin-top: 2rem; max-width: 82rem; margin-inline: auto; padding: 1.5rem var(--gutter) 2rem; }
  .back-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .backpage h2 { font: 800 .8125rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
  .backpage ul { list-style: none; }
  .backpage li { padding: .2rem 0; }
  .fine { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; }
}

@layer pages {
  /* Home: the front page */
  .front { padding-top: 1rem; }
  .front-page { display: grid; gap: 1.5rem 0; padding-block: 1.2rem 2rem; border-bottom: 3px double var(--ink); }
  .lead-story h1 { font-size: clamp(2.7rem, 7.2vw, 5.3rem); line-height: 1.02; margin-bottom: 1rem; letter-spacing: -.02em; }
  .lead-actions { margin-block: 1.2rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
  .tagline { font: italic 700 1rem var(--serif); color: var(--muted); border-top: 1px solid var(--rule); padding-top: .7rem; max-width: 46ch; }
  .stories { display: grid; gap: 1.2rem; align-content: start; }
  .story { border-top: 1px solid var(--ink); padding-top: .8rem; }
  .story h2 { font-size: var(--step-1); margin-bottom: .4rem; }
  .story h2 a { color: var(--ink); text-decoration: none; }
  .story h2 a:hover { color: var(--accent); text-decoration: underline; }
  .story p:last-child { font-size: .95rem; }
  .classified-box { background: var(--surface); padding: 1.1rem; border-top: 4px solid var(--accent); }
  .classified-box h2 { font-size: var(--step-1); margin-bottom: .5rem; }
  .classified-box ul { list-style: none; margin-block: .8rem 1rem; }
  .classified-box li { border-top: 1px dashed var(--muted); padding: .5rem 0; font-size: .95rem; }
  .classified-box li a { color: var(--ink); text-decoration: none; }
  .classified-box li a:hover strong { color: var(--accent); text-decoration: underline; }
  .classified-box .btn { display: block; }
  @media (min-width: 62rem) {
    .front-page { grid-template-columns: 5fr 4fr 3fr; }
    .front-page > * + * { border-left: 1px solid var(--rule); padding-left: 1.5rem; margin-left: 1.5rem; }
    .stories .story:first-child { border-top: 0; padding-top: 0; }
  }
  .section-head { font-size: var(--step-2); border-top: 3px double var(--ink); padding-top: .7rem; margin-bottom: .8rem; }
  section[aria-labelledby] { padding-block: 1.6rem; }
  .section-stand { font: italic 400 var(--step-1)/1.4 var(--serif); color: #2a3036; margin-bottom: 1.2rem; max-width: 58ch; }
  .desk-cols { display: grid; gap: 1.4rem; }
  .desk { padding-top: .6rem; }
  .desk h3 a { color: var(--ink); text-decoration: none; }
  .desk h3 a:hover { color: var(--accent); text-decoration: underline; }
  @media (min-width: 48rem) {
    .desk-cols { grid-template-columns: repeat(3, 1fr); }
    .desk + .desk { border-left: 1px solid var(--rule); padding-left: 1.4rem; }
  }
  .disp-grid { display: grid; gap: 1.6rem; }
  .map-fig svg { max-width: 26rem; margin-inline: auto; width: 100%; height: auto; }
  .disp-list { column-gap: 2rem; }
  .disp-list article { break-inside: avoid; padding: .7rem 0; border-top: 1px solid var(--rule); }
  .disp-list h3 { font-size: var(--step-1); }
  .disp-list h3 a { color: var(--ink); text-decoration: none; }
  .disp-list h3 a:hover { color: var(--accent); text-decoration: underline; }
  @media (min-width: 62rem) { .disp-grid { grid-template-columns: 24rem 1fr; } .disp-list { column-count: 2; } }
  .yard-weather { display: grid; gap: 1.5rem; background: var(--surface); padding: 1.6rem var(--gutter) !important; margin-inline: calc(var(--gutter) * -1); }
  .weather-fig svg { max-width: 28rem; width: 100%; height: auto; margin-inline: auto; }
  .yard-weather .section-head { border-top-color: var(--accent); }
  @media (min-width: 62rem) { .yard-weather { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; } }
  .mini-sheet { display: grid; gap: 1.5rem; }
  @media (min-width: 62rem) { .mini-sheet { grid-template-columns: 1fr 22rem; gap: 3rem; } }
  .mini, .sheet-result { border: 1px solid var(--ink); padding: 1.1rem; background: #fff; }
  .field { display: block; font-weight: 700; margin-bottom: .8rem; }
  .field .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
  .field select { margin-top: .25rem; }
  .check, .radio { display: block; margin-bottom: .55rem; cursor: pointer; }
  .check input, .radio input { margin-right: .5rem; accent-color: var(--accent); }
  fieldset { border: 0; border-top: 1px solid var(--rule); padding: .7rem 0 0; margin: 0 0 1rem; min-width: 0; }
  legend { font: 800 .8125rem var(--sans); letter-spacing: .08em; text-transform: uppercase; padding-right: .5rem; }
  .stencil-grade { font: 700 clamp(2.6rem, 7vw, 4rem)/1 var(--stencil); margin-block: .3rem .5rem; letter-spacing: .02em; }
  .g-A { color: #1f6b3a; } .g-B { color: var(--accent); } .g-C { color: #8a5a00; } .g-core { color: #8a1c1c; }
  .result-plain { font-weight: 700; margin-bottom: .6rem; }
  .result-meta { font-size: .9rem; color: var(--muted); }
  .result-note { margin-top: .6rem; padding: .5rem .7rem; border-left: 3px solid #8a5a00; background: #fbf3df; font-size: .92rem; }
  .intent { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
  .col-six { display: grid; gap: 1.2rem 2rem; }
  .col-six article { border-top: 1px solid var(--rule); padding-top: .6rem; }
  .col-six h3 a { color: var(--ink); text-decoration: none; }
  .col-six h3 a:hover { color: var(--accent); text-decoration: underline; }
  @media (min-width: 40rem) { .col-six { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .col-six { grid-template-columns: repeat(3, 1fr); } }
  .wide-classified { margin-block: 1rem; }
  /* Tool page */
  .sheet-grid { display: grid; gap: 1.4rem; }
  .sheet-svg { width: 100%; max-width: 34rem; height: auto; background: #fff; border: 1px solid var(--rule); }
  @media (min-width: 62rem) { .sheet-grid { grid-template-columns: 1fr 1fr; } .sheet-draw { grid-row: span 2; } }
  /* Quote page */
  .quote-page { padding-bottom: 2rem; }
  .art-head.compact { margin-bottom: 1rem; padding-bottom: .8rem; }
  .art-head.compact h1 { font-size: clamp(var(--step-2), 4vw, var(--step-3)); margin-bottom: .5rem; }
  .art-head.compact .stand { font-size: var(--step-0); }
  .quote-after { max-width: 52rem; padding-top: 1.5rem; }
  /* Shade-cloth ground for nursery pages */
  .motif-shade .art-head { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 4h8M4 0v8' stroke='%23c9d1d5' stroke-width='1'/%3E%3C/svg%3E"); padding-inline: 1rem; }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}