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

@font-face{
  font-family:"Italiana";
  src:url("/landing/p3/fonts/italiana.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Crimson";
  src:url("/landing/p3/fonts/crimson.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Crimson";
  src:url("/landing/p3/fonts/crimson-italic.woff2") format("woff2");
  font-weight:200 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Hand";
  src:url("/landing/p3/fonts/hand.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlateMono";
  src:url("/landing/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; } }