/* ==========================================================================
   Deep River Works: the shared floor.

   Everything every page needs: the six colour roles, the two faces, the bar,
   the buttons, the form controls and the footer. Page-specific layout stays in
   the page. Loaded after scrollcraft.css, which it overrides by design.
   ========================================================================== */

:root {
  --sc-canvas:     #0A0806;
  --sc-surface:    #17110D;
  --sc-ink:        #F2E8DA;
  --sc-ink-soft:   #B0A08C;
  --sc-accent:     #D79A4E;   /* 8.5:1 on the canvas, and carries dark ink at the same ratio */
  --sc-accent-ink: #0A0806;
  --bronze-deep:   #A9784A;   /* rules and marks only. Never text. */

  /* The lit rooms. Everywhere else on this site is near-black on purpose; the
     two places a visitor is asked to write something are not, because a form
     that reads as an unlit corner does not get filled in. Tokens rather than
     hex in two stylesheets, since both sections and both forms use them. */
  --warm-charcoal:   #1D1611;  /* the panel ground: brown, never black */
  --warm-charcoal-2: #261C15;  /* the lift inside it */
  --warm-glow:       color-mix(in oklab, var(--sc-accent) 13%, transparent);
  --warm-ivory:      #F6EEE2;  /* a step brighter than --sc-ink */
  --parchment:       #F2E7D6;  /* field ground */
  --parchment-ink:   #241A13;  /* 13.4:1 on parchment */
  --parchment-edge:  #C9A87E;

  --sc-font-display: "Cormorant Garamond", Georgia, serif;
  --sc-font-text:    "Source Serif 4", Georgia, serif;

  /* Readability floor for an older audience. NOTHING on this site renders below
     17px (1.0625rem), including labels, captions, footers and buttons. The
     small and extra-small steps are floored at that value rather than the
     browser defaults they inherit, so anything derived from a token is safe by
     construction; the audit in lab/ checks the rendered page for the rest. */
  --sc-t-base: clamp(1.19rem, 1.10rem + 0.35vw, 1.35rem);
  --sc-t-lg:   clamp(1.45rem, 1.20rem + 1.00vw, 1.95rem);
  --sc-t-sm:   clamp(1.0625rem, 1.02rem + 0.20vw, 1.16rem);
  --sc-t-xs:   clamp(1.0625rem, 1.02rem + 0.15vw, 1.12rem);
  --sc-leading-body: 1.7;
  --sc-measure: 60ch;

  /* A literary page. Near-square corners, held everywhere. */
  --sc-r-sm: 2px; --sc-r-md: 3px; --sc-r-lg: 4px;

  /* The river is gone -- her note asked for the scattered words to come off
     the page. The variable stays at zero rather than being deleted: a dozen
     bottom paddings across the page were floored at "clear the band", and
     with the band at 0 each of those floors simply collapses to the spacing
     it was already asking for. The comments nearby that explain clearing the
     river are historical. */
  --river-h: 0px;
}

.sc-display { font-weight: 600; letter-spacing: -0.012em; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 600; }

/* --------------------------------------------------------------- chrome --
   Her four next steps are the navigation, and the current one is marked as you
   pass it. No section numbers: the chapter names are the information. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.5rem);
  padding: var(--sc-3) var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 40%, transparent);
  backdrop-filter: blur(3px);
}
.bar--solid { background: var(--sc-canvas); border-bottom: 1px solid var(--sc-hairline); }
/* The supplied logo stacks three parts over 397 units of height: the circular
   mark takes 369, the wordmark 88, the tagline 43. Fitted to a bar the height
   goes almost entirely to the circle, so the wordmark rendered at 6.4px and the
   tagline at 4.8px -- a smudge at every size, because the words were never
   getting the width.

   The supplied tagline has since been retired anyway. RECOGNITION ·
   RELATIONSHIP · RENEWAL is outlined letterforms baked into the artwork, so it
   cannot be retyped; the replacement is set as real HTML text under the
   wordmark instead, which is both correct and legible where the baked one never
   was. Two crops of the artwork remain, generated from it, nothing redrawn:
     logo-lockup  mark + wordmark, the tagline crop dropped
     logo-mark    the circle alone, for bars too narrow for words at all       */
.bar__mark { flex: none; display: grid; justify-items: start; gap: 0.3rem; }
.bar__lockup, .bar__symbol { display: none; height: auto; }

/* The one place on the site that sits below the 17px floor, and deliberately:
   this is a logo lockup, not copy. It replaces a baked-in tagline that rendered
   at 4.8px, so it is more legible than what it replaces by a factor of two. */
.bar__tagline {
  display: none;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sc-accent);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .bar__symbol { display: block; height: 40px; width: auto; }
}
@media (min-width: 360px) {
  /* Above 1200px there is room for the wordmark to be a wordmark; below it the
     nav and the CTA are the binding constraint and it gives way to them. */
  .bar__lockup { display: block; width: clamp(240px, 22vw, 320px); }
}
@media (max-width: 1200px) {
  .bar__lockup { width: clamp(146px, 40vw, 220px); }
}
@media (min-width: 560px) { .bar__tagline { display: block; } }

.bar__nav { flex: 1 1 auto; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2.1rem); }
.bar__link {
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none;
  padding-block: var(--sc-2);
  border-bottom: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__link:hover { color: var(--sc-ink); }
.bar__link.is-here { color: var(--sc-accent); border-bottom-color: var(--bronze-deep); }
/* Five chapters instead of four. Between 1000 and 1200px the nav no longer
   fits on one line beside a full lockup and the CTA, and a bar that wraps to
   two lines is worse than a smaller wordmark: in that band the logo drops a
   step and the nav closes up. Measured -- the nav needs 538px on one line and
   at 1024px it was being squeezed into 402. */
@media (max-width: 1200px) {
  .bar { padding-inline: var(--sc-5); gap: var(--sc-5); }
  .bar__nav { gap: 0.85rem; }
  /* The tagline is the first thing to go: it is the least readable part of the
     lockup at this size anyway, and dropping to the two-part crop buys the nav
     about 40px without touching the wordmark. The nav type does not shrink --
     the brief floors everything at 17px. */
  .bar .btn { padding-inline: var(--sc-4); }
}
@media (max-width: 1000px) { .bar__nav { display: none; } }
/* The nav carries flex:1, so it is also what pushes the CTA to the right edge.
   Hidden below 1000px it stopped doing that and the bar packed everything left
   with a third of its width empty. The CTA holds the right edge on its own. */
.bar > .btn { margin-left: auto; }

/* A wrapped CTA is a broken CTA. The label is fixed by the brief, so the bar
   gives up logo width and button padding instead of ever breaking the line. */
.bar .btn { white-space: nowrap; }
@media (max-width: 460px) {
/* §7.1 + §2.1: the sticky header covers too much while scrolling, and the gold
   button is the loudest thing on the opening screen. Logo, button and vertical
   padding all come down a step. The button keeps a 44px touch target -- below
   that it stops being reliably tappable, which costs more than the height
   saves. Anchor targets get the same reduction via scroll-margin so a jump
   does not land under the bar. */
@media (max-width: 900px) {
  .bar { padding-block: var(--sc-2); }
  .bar__lockup { width: clamp(128px, 34vw, 190px); }
  .bar .btn {
    min-height: 44px; padding-block: var(--sc-2);
    font-size: 0.9375rem; letter-spacing: 0.04em;
  }
  :target, [id] { scroll-margin-top: 5rem; }
}

  .bar { gap: var(--sc-3); padding-inline: var(--sc-4); }
  .bar .btn { padding-inline: var(--sc-3); font-size: 1.0625rem; letter-spacing: 0.02em; min-height: 48px; }
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--sc-5);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--sc-r-sm); border: 1px solid transparent; cursor: pointer;
  /* A <button> carries the UA's own buttonface background. Without this the
     ghost variant renders as a pale filled box on the dark ground, which is
     invisible in review until a form is on the page. */
  background: transparent;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--solid:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
.btn--ghost { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); color: var(--sc-accent); }
.btn--ghost:hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 60px; padding: 0 var(--sc-6); font-size: var(--sc-t-base); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* JOIN A FREE AUTHOR ENCOUNTER is 28 uppercase characters and the label is
   fixed by the brief. At 19px with 0.06em of tracking it needs 342px of text
   width; a 375px phone offers 269px inside a button that hugs its own content,
   so it broke to two lines on every phone, on the homepage, the closing plate
   and the confirmation pages alike.

   Tracking and padding alone do not close a 73px gap, and the type cannot: the
   brief floors it at 17px. So on a phone the buttons stop hugging their labels
   and take the column instead -- full width, minimal side padding, tracking
   eased. That buys the width the label needs, and it reads as deliberate rather
   than ragged: two stacked actions of equal weight instead of two different
   lengths left-aligned.

   The type steps down only as far as it must, and never below the floor. */
@media (max-width: 900px) {
  .actions { flex-direction: column; align-items: stretch; gap: var(--sc-3); }
  .actions .btn, .form .btn {
    width: 100%; padding-inline: var(--sc-3);
    letter-spacing: 0.015em; white-space: nowrap;
  }
}
@media (max-width: 430px) {
  .actions .btn, .form .btn { font-size: 1.14rem; padding-inline: var(--sc-2); }
}
/* The last of the width: the label keeps the floor and gives up everything
   else -- all side padding, and the tracking with it. */
@media (max-width: 400px) {
  .actions .btn, .form .btn {
    font-size: 1.0625rem; letter-spacing: 0; padding-inline: 0;
  }
}
/* At 320px even that is four pixels short, and inside the closing plate, which
   carries its own gutter, twenty-eight. The type is already on the floor, so
   the last thing left to give is the margin: the actions come out of the text
   column and sit half an inch from the screen edges. Edge-to-edge buttons are
   an ordinary phone pattern and this is the width where they earn it. */
@media (max-width: 340px) {
  .actions { margin-inline: calc(var(--sc-gutter) * -1 + 0.5rem); }
  /* Four pixels still short in the overture, whose column is the narrowest on
     the page. A hair of negative tracking closes it -- 0.01em over 28 characters
     at 17px is under five pixels, and invisible at this size -- which is a
     better trade than pushing the buttons to within four pixels of the glass. */
  .actions .btn { letter-spacing: -0.01em; }
}

/* --------------------------------------------------------------- forms -- */
.form { display: grid; gap: var(--sc-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--sc-2); margin: 0; }
.field label { font-size: var(--sc-t-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field :is(input, select, textarea) {
  width: 100%; padding: var(--sc-3) var(--sc-4); min-height: 52px;
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-base); font-family: var(--sc-font-text);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field :is(input, select, textarea):hover { border-color: var(--sc-hairline-strong); }
.field :is(input, select, textarea):focus-visible { border-color: var(--sc-accent); }
.field__note { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- footer -- */
.foot { width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* The imprint is Deep River Works, not Deep River Sanctuary: the Sanctuary has
   no site of its own and naming it here sends people looking for one. */
.foot__name { font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: 0.01em; color: var(--sc-ink); }
.foot a { color: var(--sc-ink-soft); }
.foot a:hover { color: var(--sc-accent); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin-top: var(--sc-4); }