/* ============================================================
   Leaf shapes — field guide, 2026-11
   A specimen table, not a card wall: one paper tone, ink line work,
   a single green accent. No gradients, no glow, no shadow on anything
   at rest. Loaded after interior.css so this page's paper wins.
   ============================================================ */

body.page-leaf-shapes {
    --ls-paper: #f5f3e8;
    --ls-card: #fdfbf2;
    --ls-ink: #1d2b22;
    --ls-ink-soft: #5d6a5c;
    --ls-line: #e0dac6;
    --ls-line-strong: #c8c1a6;
    --ls-green: #27674e;
    --interior-paper: var(--ls-paper);
    --interior-line: var(--ls-line);
    --interior-ink: var(--ls-ink);
    --interior-muted: var(--ls-ink-soft);
    --interior-green: var(--ls-green);
    background: var(--ls-paper);
    color: var(--ls-ink);
}

body.page-leaf-shapes .header {
    background: rgba(245, 243, 232, .93);
    border-bottom-color: var(--ls-line);
}
body.page-leaf-shapes .mobile-menu { background: var(--ls-paper); }

.ls-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }

/* ---------- hero ---------- */
.ls-hero { padding: 54px 0 44px; }

.ls-kicker {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ls-ink-soft); margin-bottom: 20px;
}
.ls-kicker::before { content: ""; width: 32px; height: 1px; background: var(--ls-line-strong); }

.ls-hero h1 {
    font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
    font-weight: 400; font-size: clamp(42px, 5.2vw, 74px); line-height: 1.02;
    letter-spacing: -.03em; color: var(--ls-ink); max-width: 15ch; margin: 0 0 26px;
}

.ls-lede { max-width: 62ch; font-size: 19px; line-height: 1.72; color: var(--ls-ink-soft); }
.ls-lede strong { color: var(--ls-ink); font-weight: 600; }

.ls-twocol {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
    margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--ls-line);
}
.ls-twocol h2 {
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ls-ink); margin: 0 0 10px;
}
.ls-twocol p { font-size: 15px; line-height: 1.7; color: var(--ls-ink-soft); margin: 0 0 16px; max-width: 54ch; }
.ls-twocol p:last-child { margin-bottom: 0; }

/* ---------- filter bar ---------- */
.ls-controls {
    position: sticky; top: var(--header-height, 72px); z-index: 5;
    background: rgba(245, 243, 232, .96);
    border-top: 1px solid var(--ls-line-strong);
    border-bottom: 1px solid var(--ls-line);
}
@supports (backdrop-filter: blur(4px)) {
    .ls-controls { backdrop-filter: blur(8px); }
}
.ls-controls-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 15px 0; }
.ls-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.ls-filter {
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--ls-ink-soft); background: transparent;
    border: 1px solid var(--ls-line-strong); border-radius: 3px;
    padding: 8px 14px; min-height: 40px; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ls-filter:hover { color: var(--ls-ink); border-color: var(--ls-ink-soft); }
.ls-filter[aria-pressed="true"] { background: var(--ls-ink); border-color: var(--ls-ink); color: #f7f4e7; }
.ls-filter:focus-visible { outline: 2px solid var(--ls-green); outline-offset: 2px; }

.ls-status {
    margin: 0 0 0 auto; font-size: 13px; color: var(--ls-ink-soft);
    font-variant-numeric: tabular-nums;
}
.ls-status::before {
    content: ""; display: inline-block; width: 20px; height: 1px;
    background: var(--ls-line-strong); margin-right: 11px; vertical-align: middle;
}

/* ---------- specimen table ---------- */
.ls-grid-wrap { padding: 0 0 20px; }
.ls-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ls-line); border-left: 1px solid var(--ls-line);
}
.ls-card {
    position: relative; display: flex; flex-direction: column;
    padding: 26px 24px 22px;
    border-right: 1px solid var(--ls-line); border-bottom: 1px solid var(--ls-line);
    background: transparent; transition: background .3s ease;
}
.ls-card[hidden] { display: none; }
.ls-card:hover, .ls-card:focus-within { background: var(--ls-card); }

/* The card outline draws itself on hover or keyboard focus.
   pathLength="100" on the rect keeps the dash length independent of
   the card's real size, and vector-effect keeps the stroke 1px. */
.ls-frame {
    position: absolute; inset: 7px;
    width: calc(100% - 14px); height: calc(100% - 14px);
    pointer-events: none;
}
.ls-frame rect {
    fill: none; stroke: var(--ls-green); stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1);
}
.ls-card:hover .ls-frame rect,
.ls-card:focus-within .ls-frame rect { stroke-dashoffset: 0; }

.ls-no {
    font-family: var(--font-display, Georgia, serif); font-size: 14px;
    color: var(--ls-line-strong); letter-spacing: .04em; line-height: 1;
}
.ls-figure { margin: 6px 0 16px; }
.ls-leaf {
    width: 100%; height: 132px; display: block; color: #334e39;
    transition: color .3s ease;
}
.ls-blade {
    fill: rgba(51, 78, 57, .07); stroke: currentColor; stroke-width: 1.4;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.ls-stem {
    fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
    vector-effect: non-scaling-stroke; opacity: .5;
}
.ls-card:hover .ls-leaf, .ls-card:focus-within .ls-leaf { color: var(--ls-green); }

.ls-name {
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 24px;
    line-height: 1.15; letter-spacing: -.01em; color: var(--ls-ink); margin: 0;
}
.ls-latin {
    display: block; font-family: var(--font-body, sans-serif); font-size: 12px;
    font-style: italic; letter-spacing: .02em; color: var(--ls-ink-soft);
    margin-top: 5px; transition: color .25s ease;
}
.ls-card:hover .ls-latin, .ls-card:focus-within .ls-latin { color: var(--ls-green); }
.ls-note { font-size: 14px; line-height: 1.65; color: var(--ls-ink-soft); margin: 12px 0 0; }

/* The "what it often means" line reserves its own height, so revealing it
   never moves the card or the grid behind it. Devices without hover get it
   permanently, since nothing else would reveal it. */
.ls-meaning {
    font-size: 13px; line-height: 1.6; color: var(--ls-green);
    margin: 10px 0 0; padding-left: 12px; border-left: 1px solid #b9c9b6;
    min-height: 3.2em; opacity: 0; transition: opacity .3s ease .06s;
}
.ls-meaning-label {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ls-ink-soft); margin-bottom: 3px;
}
.ls-card:hover .ls-meaning, .ls-card:focus-within .ls-meaning { opacity: 1; }

.ls-examples {
    list-style: none; margin: auto 0 0; padding: 16px 0 0;
    display: flex; flex-wrap: wrap;
}
.ls-examples li { font-size: 13px; line-height: 1.5; }
.ls-examples li::after { content: "·"; color: var(--ls-line-strong); padding: 0 7px; }
.ls-examples li:last-child::after { content: none; }
.ls-examples li > span { color: var(--ls-ink-soft); }
.ls-examples a {
    color: var(--ls-ink); text-decoration: underline; text-decoration-color: transparent;
    text-underline-offset: .18em; text-decoration-thickness: 1px;
    transition: text-decoration-color .2s ease, color .2s ease;
}
.ls-examples a:hover, .ls-examples a:focus-visible {
    color: var(--ls-green); text-decoration-color: currentColor;
}
.ls-examples a:focus-visible { outline: 2px solid var(--ls-green); outline-offset: 2px; }

/* ---------- shape is a clue ---------- */
.ls-clue { border-top: 1px solid var(--ls-line-strong); margin-top: 8px; padding: 50px 0 56px; }
.ls-clue-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; }
.ls-clue h2 {
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 18px; color: var(--ls-ink); max-width: 18ch;
}
.ls-clue p { font-size: 16px; line-height: 1.75; color: var(--ls-ink-soft); margin: 0 0 16px; max-width: 58ch; }
.ls-clue p:last-child { margin-bottom: 0; }

.ls-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ls-line); }
.ls-links li { border-bottom: 1px solid var(--ls-line); }
.ls-links a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--ls-ink); min-height: 44px;
    transition: color .2s ease;
}
.ls-links a span { font-size: 12px; font-weight: 400; color: var(--ls-ink-soft); text-align: right; }
.ls-links a:hover, .ls-links a:focus-visible { color: var(--ls-green); }
.ls-links a:focus-visible { outline: 2px solid var(--ls-green); outline-offset: 2px; }

/* ---------- FAQ ---------- */
.ls-faq { border-top: 1px solid var(--ls-line-strong); padding: 44px 0 64px; }
.ls-faq h2 {
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 30px;
    letter-spacing: -.01em; margin: 0 0 20px; color: var(--ls-ink);
}
.ls-faq details { border-top: 1px solid var(--ls-line); }
.ls-faq details:last-child { border-bottom: 1px solid var(--ls-line); }
.ls-faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    padding: 17px 2px; min-height: 48px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; color: var(--ls-ink);
    transition: color .2s ease;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
    content: "+"; font-weight: 400; font-size: 21px; line-height: 1; color: var(--ls-ink-soft);
}
.ls-faq details[open] summary::after { content: "\2212"; }
.ls-faq summary:hover { color: var(--ls-green); }
.ls-faq summary:focus-visible { outline: 2px solid var(--ls-green); outline-offset: 2px; }
.ls-faq p { margin: 0 0 18px; max-width: 68ch; font-size: 15px; line-height: 1.75; color: var(--ls-ink-soft); }

/* ---------- motion ----------
   One gesture: the leaf stroke redraws itself once on hover or focus. */
@keyframes ls-draw {
    from { stroke-dasharray: 100; stroke-dashoffset: 100; }
    to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .ls-card:hover .ls-blade,
    .ls-card:focus-within .ls-blade { animation: ls-draw .85s cubic-bezier(.4, 0, .2, 1); }
}

/* No hover available: the meaning is always on, the outline already drawn. */
@media (hover: none) {
    .ls-meaning { opacity: 1; }
    .ls-frame rect { stroke-dashoffset: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .ls-wrap { padding-inline: 28px; }
    .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-clue-layout { grid-template-columns: 1fr; gap: 28px; }
    .ls-twocol { grid-template-columns: 1fr; gap: 0; }
    .ls-twocol > div + div { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ls-line); }
    .ls-status { margin-left: 0; }
}
@media (max-width: 639px) {
    .ls-wrap { padding-inline: 22px; }
    .ls-hero { padding: 36px 0 32px; }
    .ls-kicker { margin-bottom: 16px; font-size: 10px; }
    .ls-hero h1 { font-size: clamp(34px, 10.5vw, 46px); max-width: none; }
    .ls-lede { font-size: 16px; line-height: 1.7; }
    .ls-twocol { margin-top: 26px; padding-top: 20px; }
    .ls-controls-inner { gap: 10px; padding: 12px 0; }
    .ls-filter { font-size: 12px; padding: 8px 11px; min-height: 38px; }
    .ls-status { font-size: 12px; }
    .ls-status::before { width: 14px; margin-right: 8px; }
    .ls-grid { grid-template-columns: 1fr; }
    .ls-card { padding: 22px 18px 20px; }
    .ls-leaf { height: 116px; }
    .ls-name { font-size: 22px; }
    .ls-clue { padding: 36px 0 40px; }
    .ls-clue h2 { font-size: 27px; }
    .ls-faq { padding: 34px 0 50px; }
    .ls-faq h2 { font-size: 26px; }
    .ls-links a { flex-direction: column; gap: 2px; align-items: flex-start; }
    .ls-links a span { text-align: left; }
}
@media (min-width: 1440px) {
    .ls-leaf { height: 148px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ls-frame rect, .ls-meaning, .ls-leaf, .ls-latin, .ls-filter, .ls-card,
    .ls-examples a, .ls-links a, .ls-faq summary { transition: none; }
    .ls-card:hover .ls-blade, .ls-card:focus-within .ls-blade { animation: none; }
}