/* ============================================================
   HEIRLOOM — a private conservatory
   Botanical / living-growth entry plate. Warm paper & ink.
   ============================================================ */

@font-face{
  font-family:"Italiana";
  src:url("/wall/p3/fonts/italiana.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Crimson";
  src:url("/wall/p3/fonts/crimson.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Crimson";
  src:url("/wall/p3/fonts/crimson-italic.woff2") format("woff2");
  font-weight:200 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Hand";
  src:url("/wall/p3/fonts/hand.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlateMono";
  src:url("/wall/p3/fonts/mono.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Herbarium naturalist palette */
  --paper:    #E9E0CC;   /* aged mounting paper */
  --paper-2:  #E1D6BB;   /* pressed-edge shadow */
  --paper-3:  #F1EADA;   /* light bloom of paper near the card */
  --ink:      #262117;   /* iron-gall ink — body text (AA+ on paper) */
  --ink-soft: #4A4231;   /* faded ink — secondary */
  --sap:      #55672F;   /* deep olive stem */
  --sap-lt:   #879a4f;   /* young growth */
  --madder:   #A6371F;   /* rose-madder bloom */
  --gold:     #B77F26;   /* goldenrod stamen */
  --plum:     #6E3B50;   /* muted plum bloom */
  --rule:     #6b5f45;   /* hairline plate rule */

  --serif:"Crimson", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --display:"Italiana", "Crimson", Georgia, serif;
  --hand:"Hand", "Segoe Script", cursive;
  --mono:"PlateMono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --sheet-inset: clamp(14px, 2.4vw, 34px);
}

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

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 8%, var(--paper-3) 0%, var(--paper) 46%, var(--paper-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* subtle mottled paper grain, pure CSS (no external asset) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(90,74,44,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(90,74,44,.04) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 85%, rgba(90,74,44,.05) 0 1px, transparent 1.5px);
  background-size:13px 13px, 19px 19px, 23px 23px;
}
/* vignette to press focus toward the card */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(58,46,26,.14) 100%);
}

/* ---------- the living canvas ---------- */
#garden{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  display:block;
}

/* ---------- herbarium mounting frame ---------- */
.plate{
  position:fixed; inset:var(--sheet-inset); z-index:2;
  pointer-events:none;
  border:1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--paper-3) 60%, transparent) inset;
}
.plate::before{
  content:""; position:absolute; inset:6px;
  border:1px solid color-mix(in srgb, var(--rule) 26%, transparent);
}
.tick{ position:absolute; width:13px; height:13px; }
.tick::before,.tick::after{
  content:""; position:absolute; background:var(--rule); opacity:.7;
}
.tick::before{ width:100%; height:1px; top:0; }
.tick::after{ height:100%; width:1px; left:0; }
.tick.tl{ top:-1px; left:-1px; }
.tick.tr{ top:-1px; right:-1px; }
.tick.tr::after{ left:auto; right:0; }
.tick.bl{ bottom:-1px; left:-1px; }
.tick.bl::before{ top:auto; bottom:0; }
.tick.br{ bottom:-1px; right:-1px; }
.tick.br::before{ top:auto; bottom:0; }
.tick.br::after{ left:auto; right:0; }

/* ---------- the sheet layout ---------- */
.sheet{
  position:relative; z-index:3;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:calc(var(--sheet-inset) + 26px) clamp(22px,5vw,72px);
}

.masthead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft);
}
.accession{
  margin:0; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--ink-soft);
}
.mono{ font-family:var(--mono); }

/* ---------- the mounting card / gate ---------- */
.card{
  place-self:center;
  width:min(560px, 100%);
  text-align:center;
  padding:clamp(26px,4vw,44px) clamp(22px,4vw,46px) clamp(24px,3.4vw,38px);
  position:relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 82%, transparent), color-mix(in srgb, var(--paper) 78%, transparent));
  border:1px solid color-mix(in srgb, var(--rule) 30%, transparent);
  border-radius:2px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--paper-3) 70%, transparent) inset,
    0 22px 60px -34px rgba(40,32,16,.55),
    0 2px 10px -6px rgba(40,32,16,.30);
  backdrop-filter:blur(1.5px);
}
/* pressed-corner mounting tabs (like photo corners holding a specimen) */
.card::before,.card::after{
  content:""; position:absolute; width:22px; height:22px;
  border:1px solid color-mix(in srgb, var(--rule) 45%, transparent);
  opacity:.7;
}
.card::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.card::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.kicker{
  margin:0 0 18px;
  font-style:italic; color:var(--ink-soft);
  font-size:clamp(13px,1.5vw,15px); letter-spacing:.02em;
}
.wordmark{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(52px, 12vw, 96px);
  line-height:.9;
  letter-spacing:.02em;
  color:var(--ink);
}
.lede{
  margin:16px auto 0;
  max-width:40ch;
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.5;
  color:var(--ink-soft);
}
.lede em{ color:var(--madder); font-style:italic; }

/* ---------- form ---------- */
.gate{
  margin-top:clamp(26px,3.4vw,38px);
  position:relative;
}
.hand-note{
  position:absolute;
  top:-26px; right:8px;
  font-family:var(--hand);
  font-size:26px; line-height:1;
  color:var(--sap);
  transform:rotate(-6deg);
  opacity:.92;
  pointer-events:none;
}
.field-label{
  display:block;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft);
  text-align:left;
  margin:0 4px 8px;
}
.field{
  display:flex; align-items:stretch; gap:10px;
}
#key{
  flex:1 1 auto; min-width:0;
  font-family:var(--serif);
  font-size:clamp(16px,2.2vw,19px);
  color:var(--ink);
  padding:14px 16px;
  background:color-mix(in srgb, var(--paper-3) 70%, #fff 6%);
  border:1px solid color-mix(in srgb, var(--rule) 42%, transparent);
  border-bottom:2px solid var(--sap);
  border-radius:2px;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#key::placeholder{ color:color-mix(in srgb, var(--ink-soft) 62%, transparent); font-style:italic; }
#key:hover{ background:var(--paper-3); }
#key:focus-visible{
  border-color:var(--sap-lt);
  border-bottom-color:var(--sap);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sap-lt) 40%, transparent);
  background:var(--paper-3);
}

.sow{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif);
  font-size:clamp(15px,2vw,18px);
  color:var(--paper-3);
  padding:0 22px;
  background:linear-gradient(175deg, var(--sap-lt), var(--sap) 78%);
  border:1px solid color-mix(in srgb, var(--sap) 60%, #2c331a);
  border-radius:2px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow:0 8px 18px -12px rgba(48,60,22,.9);
}
.sow .leaf{ transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.sow:hover{ filter:brightness(1.05); box-shadow:0 12px 22px -12px rgba(48,60,22,.95); }
.sow:hover .leaf{ transform:rotate(-14deg); }
.sow:active{ transform:translateY(1px); }
.sow:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);
}
.sow[disabled]{ cursor:progress; filter:saturate(.7) brightness(.98); }

.verdict{
  min-height:1.35em;
  margin:14px 4px 0;
  text-align:left;
  font-size:14.5px; line-height:1.35;
  font-style:italic;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.verdict.is-denied{ color:var(--madder); font-style:normal; }
.verdict.is-wait{ color:var(--gold); font-style:normal; }
.verdict.is-open{ color:var(--sap); font-style:normal; }

.specimen{
  margin:clamp(22px,3vw,32px) 0 0;
  font-size:11px; letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ---------- colophon ---------- */
.colophon{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink-soft) 82%, transparent);
}
.colophon .dot{ width:4px; height:4px; border-radius:50%; background:var(--sap); opacity:.7; }

/* ---------- denied shake + open crossing ---------- */
@keyframes shudder{
  0%,100%{ transform:translateX(0) rotate(0); }
  15%{ transform:translateX(-8px) rotate(-.4deg); }
  32%{ transform:translateX(7px) rotate(.35deg); }
  50%{ transform:translateX(-5px); }
  68%{ transform:translateX(4px); }
  85%{ transform:translateX(-2px); }
}
.card.is-denied{ animation:shudder .5s cubic-bezier(.36,.07,.19,.97); }

.sheet.is-open .card{
  transition:transform 1.1s cubic-bezier(.2,.7,0,1), opacity 1.1s ease, filter 1.1s ease;
  transform:translateY(-14px) scale(1.012);
  filter:brightness(1.04);
}
.crossing{
  position:fixed; inset:0; z-index:9;
  pointer-events:none; opacity:0;
  /* nightfall, not daybreak: the garden dims toward the app's dark canvas (photosensitivity mandate) */
  background:radial-gradient(120% 90% at 50% 62%, #2a2620 0%, #16130f 55%, #0b0d12 100%);
  transition:opacity 1.15s ease;
}
.crossing.is-on{ opacity:1; }

/* ---------- responsive ---------- */
@media (max-width:560px){
  .field{ flex-direction:column; }
  .sow{ padding:13px; justify-content:center; }
  .hand-note{ top:-24px; right:2px; font-size:23px; }
  .masthead .accession{ display:none; }
}
@media (max-height:620px){
  .kicker{ margin-bottom:10px; }
  .lede{ display:none; }
}

/* ---------- gesture tech-showcase overlays ---------- */
/* Ambient "field studies" summoned by a gesture. They sit above the garden
   but below the sheet, and are pointer-transparent so the gate never breaks. */
.fx{
  position:fixed; inset:0; z-index:2;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s ease;
}
.fx.is-on{ opacity:1; }
#svgfx{ padding:6vmin; }              /* keep the unfurling petals off the very edge */

/* the field-note that names the current living study */
.fx-label{
  position:fixed; z-index:6;
  left:50%; bottom:calc(var(--sheet-inset) + 30px);
  transform:translateX(-50%) rotate(-1.1deg);
  margin:0; padding:7px 15px;
  max-width:min(86vw, 460px);
  text-align:center;
  font-family:var(--hand);
  font-size:clamp(15px,2.2vw,20px); line-height:1.2;
  color:var(--sap);
  background:color-mix(in srgb, var(--paper-3) 90%, transparent);
  border:1px solid color-mix(in srgb, var(--rule) 34%, transparent);
  border-radius:2px;
  box-shadow:0 10px 24px -18px rgba(40,32,16,.7);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
}
.fx-label.is-on{ opacity:1; }
.fx-label .tech{
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:3px;
}

@media (max-height:620px){
  .fx-label{ bottom:calc(var(--sheet-inset) + 12px); font-size:14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .card.is-denied{ animation:none; }
  .sheet.is-open .card{ transition:opacity .3s ease; transform:none; }
  .crossing{ transition:opacity .3s ease; }
  .sow, .sow .leaf, #key{ transition:none; }
  .fx{ transition:opacity .2s ease; }
  .fx-label{ transition:opacity .2s ease; }
}

/* exit veil: the LAST painted frame before leaving must match the app's dark canvas (#0b0d12) so the
   browser never shows a bright frame between documents — photosensitivity mandate, applies to every exit */
.exit-veil{ position:fixed; inset:0; z-index:2147483000; background:#0b0d12; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.exit-veil.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .exit-veil{ transition:none; } }

/* ============================================================
   DEPARTURES FROM THE HOST  (bind.com port of MERIDIAN p3)
   ------------------------------------------------------------
   A port that improves a door is not a port (wall/PORT-NOTES.txt STEP 8), so this file changes
   the host's design ONLY where an ASL v2 law or one of the brief's three never-overridden
   absolutes makes the RENDER a build failure, and only in the state where the failure was
   measured. This door needed the least of the three: the Sow button and the seed-key field
   already clear 44 px at a coarse pointer, and every control it paints keeps a real border
   under forced colours. Nothing below moves a pixel at the two viewports the acquired bar was
   captured at with zero safe-area insets and no keyboard.

   D1  SAFE AREA.  The mounting sheet is the page's own content and it starts at the top edge:
       measured at 390x844 with the notch insets pushed in, the masthead's first text sat inside
       a 47 px top inset. The gutter is max(the sheet's own inset, the device's), not their sum,
       because a notch already IS the gutter; env() resolves to 0 where there is none. ASL
       section 5 assertion 6; brief item 19. The herbarium plate and the four generative canvases
       behind the sheet are aria-hidden, pointer-events:none and carry no text, and they go on
       reaching the physical edge, which is what viewport-fit=cover is declared for.
   D2  THE KEY ROW IS PINNED WHERE THE KEYBOARD IS OPEN.  ASL Law 11 asks for the focused field
       visible and the primary action reachable WITHOUT dismissing the keyboard. Measured at
       390x430 with the notch insets pushed in: the seed-key field carries autofocus, so the
       browser scrolls it into view once at load and element.focus() afterwards is a no-op on an
       already focused element (measured: scrollTop 0 before and after the call), leaving the
       Sow button at y 306-354 in a region that ends at 316 - ten of its forty-eight pixels on
       screen. A scroll cannot be relied on, so the gate becomes the pinned floor of the sheet
       and the specimen line and the colophon scroll behind it. Sticky, so it costs nothing at
       any size where the sheet does not scroll.
   D3  CONTRAST ON THE PRIMARY ACTION.  Sow's label is --paper-3 on a 175deg gradient that runs from
       --sap-lt (#879a4f) to --sap (#55672f) at 78%, so the label sits on the pale end of it.
       Measured against the pixels chromium actually paints under the glyphs, at 390x430 under
       prefers-reduced-motion so the garden holds still: 3.80:1 across 778 glyph pixels, under the
       4.5:1 floor (evidence/portals-p1p2p3-r2/doors-gate.json). The stop moves, not the colours:
       --sap-lt becomes a hairline highlight along the button's top edge and the label sits on --sap,
       which measures 5.20:1 against --paper-3. Both are the host's own tokens - no new colour is
       introduced by this port, on this door or any other. brief item 27; ASL section 5 assertion 3.

   D4  THE HINGE IS A GUTTER.  At the spanned foldable profile (2 horizontal segments, hinge
       x 552-562 of 1114) input#key measured x 323-676 in round 1: the seed-key field lay
       across the fold. ASL section 5's spanned row says nothing critical may, and Law 2 allows
       this query on a page shell. THE COMPOSITION DECISION: the mounting sheet becomes the
       left leaf - the herbarium plate's rule and the sheet's own grid both stop at segment 0,
       and the field-note re-centres on that leaf - while canvas#garden and the three study
       overlays keep both leaves, so a spanned device reads as a pressed specimen on one page
       of an open book with the living garden on the other. env() carries a 50% fallback, so a
       browser that answers the media feature but not the segment variables still puts the card
       on one half (ASL Law 7). Inert at one segment, which is every other profile in the
       matrix and every desktop render.
   ============================================================ */

/* D3 */
.sow{ background:linear-gradient(175deg, var(--sap-lt), var(--sap) 22%); }

/* D4 - the page shell, and only at two segments. */
@media (horizontal-viewport-segments: 2){
  .plate{ right:calc(100% - env(viewport-segment-right 0 0, 50%) + var(--sheet-inset)); }
  .sheet{ inline-size:env(viewport-segment-right 0 0, 50%); }
  .fx-label{ left:calc(env(viewport-segment-right 0 0, 50%) / 2); }
}

/* D1 */
.sheet{
  padding-block-start:max(calc(var(--sheet-inset) + 26px), env(safe-area-inset-top, 0px));
  padding-block-end:max(calc(var(--sheet-inset) + 26px), env(safe-area-inset-bottom, 0px));
  padding-inline:max(clamp(22px, 5vw, 72px), env(safe-area-inset-left, 0px))
                 max(clamp(22px, 5vw, 72px), env(safe-area-inset-right, 0px));
}

/* ============================================================
   THE CHIP'S LANE  (bind.com port - wall/PORT-NOTES.txt STEP 7)
   ------------------------------------------------------------
   The mounting sheet is a full-viewport grid, so on a short surface the whole sheet outgrows the
   screen and the DOCUMENT is what scrolls - and a document cannot end above an element fixed to
   the viewport. Measured on this door at 390x430 with the notch insets pushed in: the sheet
   stood 481 px tall in a 430 px viewport with 51 px of document scroll, and the chip's pill was
   y 338-382, so a scroll of 51 px parks the Sow button under it.
   So the page shell takes the viewport and .sheet becomes the ASL Law 4 internal scroll region
   with the lane reserved beneath it: the chip's tallest measured box (52 px, where its armed
   line wraps at 320 and 344), its own 14 px inset, a 14 px gutter, and that inset again.
   THE THRESHOLD IS MEASURED, NOT CHOSEN: the sheet outgrows the viewport at 430 (481 px) and at
   390 (471 px), and fits inside it at 568, 844, 1194 and above, where the chip clears the Sow
   button by 263 px or more. 700 px sits in the empty band between the two, so the tall renders
   keep the host's geometry to the pixel and the short ones get the lane.
   ============================================================ */
:root{ --b-lane:calc(52px + 28px + env(safe-area-inset-bottom, 0px)); }
@media (max-height:700px){
  body{
    block-size:100svh; min-height:0;
    padding-block-end:var(--b-lane);
    display:flex; flex-direction:column;
  }
  .sheet{
    min-height:0; flex:1 1 auto; min-block-size:0;
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .fx-label{ bottom:calc(var(--b-lane) + 6px); }
  /* The hand-written flourish is absolutely placed 26 px above the gate. Once the gate is pinned it
     lands on the Heirloom wordmark - measured at 390x430 in this round's own capture. It is
     aria-hidden, it says in script what the field label says in small caps, and it stands down here
     for the same reason the lede does at 620. */
  .hand-note{ display:none; }
  /* D2 - the pinned floor of the sheet. */
  .gate{
    position:sticky; bottom:0; z-index:2;
    background:var(--paper-3);
    padding-block:12px 0;
    box-shadow:0 -1px 0 color-mix(in srgb, var(--rule) 26%, transparent),
               0 -16px 20px -16px var(--paper-3);
  }
}