@charset "utf-8";
/* ==========================================================================
   WILDDECK LTD  ::  decking.css
   wilddeck.co.uk  ::  hand written, no build step, no framework.

   NAMING UNIVERSE
   A deck is a made, level, load bearing surface laid over ground that is
   not level and not made. That is the whole idea of the company, so every
   block name is taken from the vocabulary of building one:

     span        width container            headboard   site header
     stepover    skip link                  overlook    hero platform
     grain       small label above a title  tread       button
     decking     section wrapper            boardrun    numbered plank run
     joist       hairline member row        balustrade  edge band over photo
     landing     split level with photo     trestle     offset support pair
     weathering  the honest wear notice     footing     the register base
     verge       the closing edge strip     underdeck   footer
     plank       legal document shell       fixing      inline emphasis
     tbc         an unfinished fixing point

   CONVENTION
   BEM. block, block__element, block--modifier. Held with no exceptions.

   VISUAL FAMILY (assigned, not deviated from)
   Light surface. No monospace anywhere, none loaded, none referenced.
   Sans display. Real photography leading. Flat decoration, sharp corners.

   CONTRAST, calculated from WCAG 2.1 relative luminance, not estimated.
     ink      #131512 on paper #FFFFFF ......... 18.36:1
     ink      #131512 on tint  #F2F0EB ......... 16.12:1
     ink      #131512 on sunk  #E7E4DC ......... 14.45:1
     slate    #4E5349 on paper .................. 7.90:1
     slate    #4E5349 on tint ................... 6.94:1
     slate    #4E5349 on sunk ................... 6.22:1
     spruce   #14563F on paper .................. 8.63:1
     spruce   #14563F on tint ................... 7.58:1
     spruce   #14563F on sunk ................... 6.79:1
     paper    #FFFFFF on spruce #14563F ......... 8.63:1
     bone     #E9E7E1 on ink .................. 14.85:1
     sage     #C3C8BF on ink .................. 10.78:1
     mint     #7FD4AE on ink .................. 10.43:1
     hairfirm #7E786C on paper .................. 4.38:1  (>=3:1 control edge)
     hairfirm #7E786C on tint ................... 3.85:1
     hairfirm #7E786C on sunk ................... 3.45:1
     hair     #D6D2C8 on paper .................. 1.51:1  DECORATIVE ONLY.
              Never the sole edge of a control and never carries meaning.

     Text set over photography: #F4F3EF over img/band.webp composited under
     a flat rgba(19,21,18,0.66) fill. Measured across the decoded WebP
     pixels of the whole text region, the worst case is 6.18:1. The brightest
     composited pixel found anywhere in that region is rgb(93,90,85).

   MOTION INVENTORY, five entries, one justification each.
     M1 headboard link rule, 140ms
        Confirms the pointer has landed on a target without moving layout.
     M2 tread fill and colour, 140ms
        Makes a hover read as a state change rather than a repaint flash.
     M3 headboard panel open, 180ms
        Shows the small screen menu coming from the bar it belongs to, so
        the page does not appear to jump to a different document.
     M4 rise on first scroll into view, 420ms
        Tells the reader on a long page that material continues below the
        fold. Applied to section heads only, never to body copy.
     M5 plank clause target flash, 900ms
        Tells a reader who followed a numbered anchor which clause the jump
        landed on, which a silent scroll does not.
     Everything above is disabled outright under prefers-reduced-motion.
   ========================================================================== */


/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Surfaces. Light family: the page is paper unless a section says otherwise. */
  --paper:      #FFFFFF;
  --tint:       #F2F0EB;
  --sunk:       #E7E4DC;
  --ink:        #131512;

  /* Ink on light */
  --text:       #131512;
  --slate:      #4E5349;

  /* Light on ink */
  --bone:       #E9E7E1;
  --sage:       #C3C8BF;
  --mint:       #7FD4AE;

  /* One accent. Spruce. No second chromatic value exists in this file. */
  --spruce:     #14563F;

  /* Rules */
  --hair:       #D6D2C8;
  --hairfirm:   #7E786C;
  --hair-ink:   #35392F;

  /* Type families. No monospace is loaded or named anywhere on this site. */
  --display: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Scale */
  --t-xl:    clamp(2.5rem, 1.35rem + 4.7vw, 4.5rem);
  --t-lg:    clamp(1.9rem, 1.32rem + 2.4vw, 2.9rem);
  --t-md:    clamp(1.4rem, 1.16rem + 1.0vw, 1.85rem);
  --t-sm:    1.1875rem;
  --t-body:  1.0625rem;
  --t-note:  0.9375rem;
  --t-micro: 0.8125rem;

  /* Corner system. One value. Sharp, everywhere, no exceptions, never animated. */
  --edge: 0px;

  /* Measure and rhythm */
  --span:    1140px;
  --narrow:  64ch;
  --gutter:  clamp(1.25rem, 5vw, 3.25rem);
  --bay:     clamp(3.75rem, 8vw, 7rem);
  --headboard-h: 64px;
}


/* --- 2. Reset and base --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--headboard-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); letter-spacing: -0.015em; }
h4 { font-size: var(--t-sm); letter-spacing: -0.01em; }

p, ul, ol, dl, table { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--spruce); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; border-radius: var(--edge); }

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 2.5rem 0;
}

::selection { background: var(--spruce); color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--spruce);
  outline-offset: 3px;
  border-radius: var(--edge);
}

.decking--ink :focus-visible,
.verge :focus-visible,
.underdeck :focus-visible,
.balustrade :focus-visible {
  outline-color: var(--mint);
}


/* --- 3. span. The only width container. ---------------------------------- */

.span {
  width: 100%;
  max-width: var(--span);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.span--tight { max-width: 860px; }


/* --- 4. stepover. Skip link. --------------------------------------------- */

.stepover {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  font-size: var(--t-note);
  text-decoration: none;
  border-radius: var(--edge);
}
.stepover:focus { top: 0.75rem; }


/* --- 5. headboard. Site header. ------------------------------------------ */

.headboard {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}

.headboard__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--headboard-h);
}

.headboard__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.headboard__boards {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.headboard__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* M1: hover rule under a nav item. */
.headboard__link {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: var(--t-note);
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 140ms linear, border-color 140ms linear;
}
.headboard__link:hover { color: var(--text); border-bottom-color: var(--hairfirm); }
.headboard__link[aria-current="page"] { color: var(--text); border-bottom-color: var(--spruce); }

.headboard__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--hairfirm);
  border-radius: var(--edge);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-note);
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

@media (max-width: 800px) {
  .headboard__toggle { display: inline-flex; }
  .headboard__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  /* M3: the panel arrives from the bar it belongs to. */
  .headboard__nav.is-open {
    display: block;
    animation: boardslide 180ms ease-out;
  }
  .headboard__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .headboard__nav li { border-top: 1px solid var(--hair); }
  .headboard__link { display: block; padding: 0.85rem 0; font-size: 1.0625rem; border-bottom: 0; }
  .headboard__link[aria-current="page"] { color: var(--spruce); }
}

@keyframes boardslide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- 6. grain. The small label that sits above a title. ------------------- */

.grain {
  display: block;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spruce);
  margin: 0 0 1rem;
}
.grain--pale { color: var(--mint); }


/* --- 7. tread. Buttons and link controls. -------------------------------- */

.tread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.5rem;
  font-family: var(--body);
  font-size: var(--t-note);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--edge);
  border: 1px solid transparent;
  /* M2 */
  transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}

.tread--solid { background: var(--spruce); color: var(--paper); border-color: var(--spruce); }
.tread--solid:hover { background: var(--ink); border-color: var(--ink); }

.tread--edge { background: transparent; color: var(--text); border-color: var(--hairfirm); }
.tread--edge:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.tread--pale { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.tread--pale:hover { background: var(--paper); border-color: var(--paper); }

.tread--ghost { background: transparent; color: var(--bone); border-color: var(--sage); }
.tread--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.treadrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}


/* --- 8. decking. Section wrapper. ---------------------------------------- */

.decking { padding-block: var(--bay); }
.decking--tint { background: var(--tint); }
.decking--sunk { background: var(--sunk); }
.decking--ink  { background: var(--ink); color: var(--bone); }
.decking--ink h2, .decking--ink h3 { color: var(--paper); }
.decking--ink a { color: var(--mint); }
.decking--short { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

.decking__head { max-width: var(--narrow); margin-bottom: clamp(2rem, 4vw, 3rem); }
.decking__head p { color: var(--slate); font-size: var(--t-sm); }
.decking--ink .decking__head p { color: var(--sage); }


/* --- 9. overlook. LAYOUT FAMILY 1. Platform with a view. ------------------
   Text column on paper, photograph running to the right page edge. The two
   halves do not overlap, so no copy is ever set over these pixels.
   -------------------------------------------------------------------------- */

.overlook { border-bottom: 1px solid var(--hair); }

.overlook__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.overlook__words { padding-block: clamp(3rem, 7vw, 5.5rem); }
.overlook__words h1 { max-width: 15ch; }

.overlook__deck {
  font-size: var(--t-sm);
  color: var(--slate);
  max-width: 56ch;
}

.overlook__state {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  font-size: var(--t-note);
  color: var(--slate);
  max-width: 56ch;
}

.overlook__view { position: relative; }
.overlook__view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
}

.overlook__credit {
  border-top: 1px solid var(--hair);
  padding: 0.7rem 0;
  font-size: var(--t-micro);
  color: var(--slate);
}

@media (min-width: 900px) {
  .overlook__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .overlook__view {
    margin-right: calc(50% - 50vw);
  }
  .overlook__view img { min-height: 520px; }
}

/* Bare variant. Same block, no photograph, used where a page opens on text. */
.overlook--bare { background: var(--tint); }
.overlook--bare .overlook__words { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.overlook--bare .overlook__state { border-top-color: var(--hairfirm); }


/* --- 10. joist. LAYOUT FAMILY 2. Members on hairlines, no boxes. ---------- */

.joist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairfirm);
}

.joist__member {
  border-bottom: 1px solid var(--hair);
  padding: 1.5rem 0;
}
.joist__member:last-child { border-bottom: 0; }

.joist__index {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--hairfirm);
  display: block;
  margin-bottom: 0.7rem;
}

.joist__member h3 { font-size: var(--t-sm); margin-bottom: 0.45rem; }
.joist__member p { font-size: var(--t-note); color: var(--slate); }
.joist__member a { font-weight: 600; }

@media (min-width: 720px) {
  .joist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
  .joist__member { border-bottom: 1px solid var(--hair); }
  .joist__member:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 1000px) {
  .joist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .joist__member { border-bottom: 0; padding-top: 1.75rem; }
  .joist__member + .joist__member {
    border-left: 1px solid var(--hair);
    padding-left: clamp(1.25rem, 2.4vw, 2rem);
  }
  .joist--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- 11. boardrun. LAYOUT FAMILY 3. Numbered planks, full width. ---------- */

.boardrun { border-top: 1px solid var(--hairfirm); }

.boardrun__plank {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--hair);
}

.boardrun__no {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sunk);
}
.decking--tint .boardrun__no { color: var(--hairfirm); opacity: 0.55; }

.boardrun__plank h3 { margin-bottom: 0.5rem; }
.boardrun__body { color: var(--slate); max-width: 62ch; }
.boardrun__body p + p { margin-top: 0.75rem; }

@media (min-width: 820px) {
  .boardrun__plank { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 0.85fr); }
  .boardrun__no { text-align: right; }
  .boardrun__plank h3 { margin-top: -0.25rem; }
}


/* --- 12. balustrade. LAYOUT FAMILY 4. Edge band, copy over photograph. ----
   The flat fill below is a single opaque colour at one alpha. It is not a
   gradient and it does not move. Contrast over the decoded pixels is
   recorded at the head of this file.
   -------------------------------------------------------------------------- */

.balustrade {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  color: #F4F3EF;
}

.balustrade__plate {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.balustrade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(19, 21, 18, 0.66);
}

.balustrade__line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

.balustrade__note {
  margin-top: 1.5rem;
  max-width: 54ch;
  color: #F4F3EF;
  font-size: var(--t-note);
}

.balustrade__rule {
  display: block;
  width: 72px;
  height: 3px;
  background: var(--mint);
  margin-bottom: 1.75rem;
}


/* --- 13. trestle. LAYOUT FAMILY 5. Two supports, deliberately unequal. ---- */

.trestle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.trestle__post {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--spruce);
  border-radius: var(--edge);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.trestle__post h3 { margin-bottom: 0.75rem; }
.trestle__post p { color: var(--slate); }

.trestle__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.trestle__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: var(--t-note);
  color: var(--slate);
}
.trestle__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--spruce);
}
.trestle__list li:last-child { margin-bottom: 0; }

@media (min-width: 880px) {
  .trestle { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .trestle__post--drop { margin-top: clamp(2rem, 4vw, 3.5rem); }
}


/* --- 14. landing. LAYOUT FAMILY 6. Split level, photograph and copy. ------ */

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.landing__view img { width: 100%; }

.landing__caption {
  margin-top: 0.75rem;
  font-size: var(--t-micro);
  color: var(--slate);
  border-left: 2px solid var(--hairfirm);
  padding-left: 0.75rem;
}

.landing__words p { color: var(--slate); }
.landing__words p + p { margin-top: 1rem; }

@media (min-width: 900px) {
  .landing { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
  .landing--flip .landing__view { order: 2; }
}


/* --- 15. weathering. LAYOUT FAMILY 7. What has not happened yet. ---------- */

.weathering {
  border-top: 3px solid var(--ink);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.weathering__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.weathering__head p { color: var(--slate); max-width: 58ch; }

.weathering__list { list-style: none; margin: 0; padding: 0; }

.weathering__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem clamp(1.5rem, 4vw, 3rem);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairfirm);
}
.weathering__item:first-child { border-top: 1px solid var(--hairfirm); }

.weathering__claim {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-note);
  letter-spacing: 0.02em;
}

.weathering__truth { color: var(--slate); font-size: var(--t-note); }

@media (min-width: 820px) {
  .weathering__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; }
  .weathering__item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}


/* --- 16. footing. LAYOUT FAMILY 8. The register base. --------------------- */

.footing {
  border-top: 1px solid var(--hairfirm);
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--t-note);
}

.footing caption {
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: 0.9rem;
}

.footing th, .footing td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--hair);
}

.footing th {
  font-weight: 600;
  color: var(--slate);
  width: 34%;
  font-size: var(--t-note);
}

.footing td { color: var(--text); }

.footing__wrap { width: 100%; overflow-x: auto; }


/* --- 17. verge. LAYOUT FAMILY 9. The closing edge strip. ------------------ */

.verge {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(3rem, 6vw, 4.75rem);
}

.verge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.verge h2 { color: var(--paper); max-width: 18ch; }
.verge p { color: var(--sage); max-width: 52ch; }
.verge a { color: var(--mint); }

.verge__routes { list-style: none; margin: 0; padding: 0; }
.verge__routes li { padding: 0.85rem 0; border-bottom: 1px solid var(--hair-ink); }
.verge__routes li:first-child { border-top: 1px solid var(--hair-ink); }
.verge__key {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.25rem;
  font-family: var(--display);
  font-weight: 700;
}

@media (min-width: 880px) {
  .verge__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}


/* --- 18. underdeck. Footer. Statutory disclosure lives here. -------------- */

.underdeck {
  background: var(--paper);
  border-top: 1px solid var(--hair);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  font-size: var(--t-note);
}

.underdeck__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem clamp(2rem, 5vw, 4rem);
}

.underdeck__nav ul { list-style: none; margin: 0; padding: 0; }
.underdeck__nav li { margin-bottom: 0.5rem; }
.underdeck__nav a { color: var(--slate); text-decoration: none; }
.underdeck__nav a:hover { color: var(--spruce); text-decoration: underline; }

.underdeck__key {
  display: block;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.9rem;
}

.underdeck__disclosure {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  color: var(--slate);
  font-size: var(--t-note);
  max-width: 78ch;
}
.underdeck__disclosure strong { color: var(--text); font-weight: 600; }

@media (min-width: 780px) {
  .underdeck__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)); }
}


/* --- 19. plank. LAYOUT FAMILY 10. Legal document shell. ------------------- */

.plank { padding-block: clamp(2.5rem, 5vw, 4rem); }

.plank__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.plank__meta {
  border-top: 3px solid var(--ink);
  padding-top: 1.25rem;
  margin-bottom: 2.25rem;
  font-size: var(--t-note);
  color: var(--slate);
}
.plank__meta dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.4rem 1.25rem; margin: 0; }
.plank__meta dt { font-weight: 600; color: var(--text); }
.plank__meta dd { margin: 0; }

.plank__toc {
  background: var(--tint);
  border-radius: var(--edge);
  padding: 1.5rem;
}
.plank__toc h2 {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}
.plank__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.plank__toc li { counter-increment: toc; margin-bottom: 0.45rem; font-size: var(--t-note); line-height: 1.4; }
.plank__toc li::before {
  content: counter(toc) ".";
  display: inline-block;
  min-width: 1.9rem;
  color: var(--slate);
  font-weight: 600;
}
.plank__toc a { color: var(--text); text-decoration: none; }
.plank__toc a:hover { color: var(--spruce); text-decoration: underline; }

.plank__doc { max-width: 76ch; }
.plank__doc h2 {
  font-size: var(--t-md);
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.plank__doc > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.plank__doc h3 { font-size: var(--t-sm); margin-top: 2rem; }
.plank__doc h4 { font-size: 1.0625rem; margin-top: 1.5rem; font-weight: 600; }
.plank__doc p, .plank__doc li { color: var(--text); }
.plank__doc ul, .plank__doc ol { padding-left: 1.4rem; }
.plank__doc li { margin-bottom: 0.5rem; }

.plank__lead {
  font-size: var(--t-sm);
  color: var(--slate);
  border-left: 3px solid var(--spruce);
  padding-left: 1.1rem;
  margin-bottom: 2rem;
}

.plank__role {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sunk);
  color: var(--text);
  padding: 0.25rem 0.6rem;
  border-radius: var(--edge);
  margin-bottom: 0.9rem;
}
.plank__role--processor { background: var(--ink); color: var(--bone); }

.plank__note {
  background: var(--tint);
  border-left: 3px solid var(--hairfirm);
  padding: 1.1rem 1.25rem;
  font-size: var(--t-note);
  border-radius: var(--edge);
  margin-bottom: 1.25rem;
}

/* M5 */
.plank__doc h2:target,
.plank__doc h3:target { animation: plankflash 900ms ease-out; }

@keyframes plankflash {
  0%   { background: var(--sunk); }
  100% { background: transparent; }
}

@media (min-width: 1000px) {
  .plank__grid { grid-template-columns: 258px minmax(0, 1fr); }
  .plank__toc { position: sticky; top: calc(var(--headboard-h) + 1.5rem); max-height: 76vh; overflow-y: auto; }
}


/* --- 20. Tables inside legal documents ----------------------------------- */

.slat__wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--edge);
  margin-bottom: 1.5rem;
}

.slat {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-note);
  min-width: 560px;
  margin: 0;
}

.slat caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1rem;
  font-weight: 600;
  background: var(--tint);
  border-bottom: 1px solid var(--hair);
}

.slat th, .slat td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hair);
}

.slat thead th {
  background: var(--sunk);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slat tbody tr:last-child th,
.slat tbody tr:last-child td { border-bottom: 0; }


/* --- 21. fixing and tbc -------------------------------------------------- */

.fixing {
  font-weight: 600;
  border-bottom: 2px solid var(--spruce);
}

.tbc {
  display: inline-block;
  background: #FCE9C8;
  color: #3B2A05;          /* 12.02:1 on #FCE9C8, calculated */
  border: 1px dashed #8A6A1E;
  border-radius: var(--edge);
  padding: 0.1rem 0.45rem;
  font-size: 0.9em;
  font-weight: 600;
}


/* --- 22. rise. M4 scroll reveal. ----------------------------------------- */

.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.rise.is-set { opacity: 1; transform: none; }

.no-js .rise { opacity: 1; transform: none; }


/* --- 23. Utility --------------------------------------------------------- */

.awayfromview {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lastcheck {
  font-size: var(--t-micro);
  color: var(--slate);
  margin-top: 1.5rem;
}


/* --- 24. Reduced motion. Everything in the inventory is switched off. ----- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; transform: none; }
}


/* --- 25. Print ----------------------------------------------------------- */

@media print {
  .headboard, .stepover, .verge, .balustrade__plate, .plank__toc { display: none; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .plank__grid { display: block; }
  a { text-decoration: underline; }
}