/* The layers section: a figure-sized drawing beside its text (Adam, 2026-11-06: "much smaller").
   It scrolls with the page, with no pinning; js/layers.js opens the layers while the drawing is on screen.
   Closed, the six slabs read as one block of sediment; open, they float apart (Cara, 2026-11-06). */
.layers.strata-section{height:auto;min-height:0;border-bottom:0;background:none}
/* no line or transcript under the section any more (Adam, 2026-11-06), so the product list sits closer */
.strata-section+.index{margin-top:44px}
@media(max-width:800px){.strata-section+.index{margin-top:22px}}
.strata-section .strata-sticky{position:relative;top:auto;height:auto;min-height:0;max-height:none;display:grid;
  grid-template-columns:min(max(30vw,320px),420px) minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"drawing heading" "drawing caption";column-gap:28px;padding:48px var(--gutter) 40px}
.strata-layout{display:contents}
.strata-heading{grid-area:heading;margin:0}
.strata-section h2{font-size:clamp(26px,2.3vw,34px);line-height:1.1;letter-spacing:-.035em;margin:0}

/* the drawing */
.strata-drawing{grid-area:drawing;min-width:0}
.strata-svg{display:block;width:100%;height:auto;overflow:visible}
.strata-axis{fill:none;stroke:#a9b0ab;stroke-width:.8;stroke-dasharray:2 6}
.plate-shadow{fill:#24323a;filter:url(#slab-blur)}
.plate-body,.plate-top{stroke:#2c3034;stroke-opacity:.13;stroke-width:.8;stroke-linejoin:round}
.plate-gloss,.plate-shade{pointer-events:none}
.plate-rule{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;opacity:.75}
.plate-name{font:500 27px var(--sans);letter-spacing:-.35px;fill:#2c3034}
.plate-number{font:400 18px var(--sans);fill:#666b67;font-variant-numeric:tabular-nums}
.stratum{cursor:pointer;outline:none}
.stratum[data-selected] .plate-number{fill:#8e601c}
.stratum[data-selected] .plate-name{font-weight:620}
/* the five layers not on show are quieter (Adam, 2026-11-06); hovering one brings it up */
.plate-name,.plate-number{transition:opacity .2s}
.stratum:not([data-selected]) .plate-name,.stratum:not([data-selected]) .plate-number{opacity:.75}
.stratum:hover .plate-name,.stratum:hover .plate-number{opacity:1}
.stratum[data-selected] .plate-rule{stroke:#a57429;stroke-width:1.8;opacity:1}
.stratum:hover .plate-top{stroke-opacity:.32}
.stratum:focus-visible .plate-top{stroke:#926620;stroke-width:2.5;stroke-opacity:1}
.strata-leader{fill:none;stroke:#b1b7ab;stroke-width:1.2}

/* the text beside it */
.strata-annotation{grid-area:caption;align-self:center;max-width:460px;min-width:0;padding:0}
.stratum-label{display:flex;align-items:baseline;gap:10px;font-size:13px;letter-spacing:.01em;color:#545d56;margin:0 0 9px}
.stratum-label span{font-size:12px;color:#8e601c;font-variant-numeric:tabular-nums}
.stratum-caption h3{font-size:clamp(19px,1.5vw,22px);letter-spacing:-.025em;line-height:1.2;font-weight:500;margin:0 0 7px}
.stratum-caption h3+p{font-size:16px;line-height:1.5;letter-spacing:-.01em;margin:0;color:#4a4f4c}

/* small laptops and tablets: larger labels, so they stay readable in a smaller drawing */
@media(max-width:1100px){.plate-name{font-size:32px;letter-spacing:-.5px}.plate-number{font-size:22px}}

/* phones and narrow windows: heading, drawing, text, one under the other; smaller, tighter and
   centred (Adam, 2026-11-06) */
@media(max-width:800px){
 .strata-section .strata-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"heading" "drawing" "caption";justify-items:center;text-align:center;padding:32px var(--gutter) 14px}
 .strata-section h2{font-size:24px}
 .strata-drawing{width:min(86vw,340px);max-width:none;margin-top:12px}
 .plate-name{font-size:30px;letter-spacing:-.4px}
 .plate-number{font-size:21px}
 .strata-leader{display:none}
 .strata-annotation{align-self:start;width:min(86vw,340px);max-width:none;margin-top:6px;min-height:0}
 .stratum-label{justify-content:center;font-size:12px;margin-bottom:6px}
 .stratum-caption h3{font-size:18px;margin-bottom:4px}
 .stratum-caption h3+p{font-size:15px;line-height:1.45}
}