/* TaleWorld — taleworldstudio.com
   Two rules below look like mistakes and are not:
   1. Exactly six colours are declared. Nothing outside them, not even a grey — hovers and
      quiet text are made with opacity, never with a seventh value.
   2. There is no sans-serif anywhere, including labels, buttons and numbers. One serif only.
   Both come from ../TaleWorldMail/DESIGN_Packaging.md. */

:root {
  --kraft:        #C8A87C;
  --letter-cream: #EDE4D0;
  --postal-red:   #B5432F;
  --postal-green: #5E7A4A;
  --ink-brown:    #4A3628;
  --wood:         #7A5C3E;

  /* Placeholder stack. Replace with the self-hosted old-style serif (EB Garamond or
     Crimson Pro) via @font-face — no Google Fonts hotlink, no external request. */
  --serif: "EB Garamond", "Crimson Pro", Iowan Old Style, Palatino, "Palatino Linotype",
           Georgia, "Times New Roman", serif;

  --measure: 34rem;
  --gap: clamp(2.75rem, 6vw, 5.25rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--letter-cream);
  color: var(--ink-brown);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.7;
}

/* ---------- the house stripe ------------------------------------------------
   The red-and-green airmail dashes. This page is the post office, so it earns the
   stripe — it appears once, at the top edge, and nowhere else. */
.stripe {
  height: 9px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--postal-red)   0 10px,
      var(--letter-cream) 10px 20px,
      var(--postal-green) 20px 30px,
      var(--letter-cream) 30px 40px
    );
}

/* ---------- shared -------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-brown);
  color: var(--letter-cream);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid rgba(74, 54, 40, 0.12);
}

.wordmark,
.main-nav a {
  color: var(--ink-brown);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.wordmark {
  flex: none;
  font-size: 0.9rem;
  text-decoration: none;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
}

.main-nav a { font-size: 0.72rem; }
.main-nav a[aria-current="page"],
.wordmark[aria-current="page"] { text-decoration-thickness: 2px; }

@media (max-width: 40rem) {
  .site-header { display: block; }
  .main-nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    gap: 0.65rem 1.25rem;
    margin-top: 0.8rem;
  }
}

.mark {                       /* the postal-mark voice: letterspaced small capitals */
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.76rem;
  line-height: 1.5;
}

a { color: var(--ink-brown); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { opacity: 0.7; }

:focus-visible {
  outline: 2px solid var(--ink-brown);
  outline-offset: 3px;
}

/* ---------- page rhythm ---------------------------------------------------
   One clear action per block, and the space around a photograph stays clean.
   Carried over from ../Design System/MANUAL_Instructional_Handwork_v1.0.md. */

.block { padding-block: var(--gap); }
.block + .block { border-top: 1px solid rgba(74, 54, 40, 0.12); }

.arrival { padding-top: clamp(3rem, 8vw, 6rem); }

h1 {
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}

h2 { margin: 0 0 0.35rem; font-weight: 400; }

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05em;
  font-weight: 400;
}

.step__no { display: block; margin-bottom: 0.75rem; opacity: 0.65; }

.step__title {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.3;
  margin: 0 0 1.75rem;
  font-weight: 400;
}

p { max-width: var(--measure); margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.08em; }

/* Two columns from tablet up: photograph on one side, the single action on the other.
   Below that they stack, photograph first. */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) {
  .split--hero  { grid-template-columns: 17rem 1fr; align-items: start; }
  .split--detail{ grid-template-columns: 1fr 15.5rem; align-items: start; }
  .split--detail > .split__fig { order: 2; }
}

/* ---------- photograph placeholders ---------------------------------------
   Never stock photography, never a generated image. A missing photograph is a
   labelled box at the exact frame proportion from the manual. */
.ph {
  margin: 0;
  border: 1px solid var(--kraft);
  background: rgba(200, 168, 124, 0.14);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-brown);
  opacity: 0.85;
}
.ph--pano   { aspect-ratio: 174 / 76; }
/* HERO is 1:2.17. Left at full column width on a phone it becomes a tower nobody
   scrolls past, so it is capped and centred; the desktop column is 22rem. */
.ph--hero   { aspect-ratio: 96 / 208; max-width: 14rem; margin-inline: auto; }
.ph--sq     { aspect-ratio: 1 / 1; max-width: 15.5rem; margin-inline: auto; }
/* BREATH is no longer used on the form — it lives on letter-sent.html, where the whole
   page is the pause. */
.ph--breath { aspect-ratio: 4 / 5; max-width: 24rem; margin-inline: auto; }
.breath     { text-align: center; }

/* ---------- fields --------------------------------------------------------
   A field is a ruled line, not a box. No border, no fill, no rounded corner —
   typing should look like writing on a line. */

.field { margin-bottom: 1.85rem; max-width: var(--measure); }

/* Inline-block, not block: the quiet "optional" now sits outside the <label> so that
   Netlify's notification email does not read "Their age optional:", and it has to stay
   on the same line as the label it belongs to. */
.field label { display: inline-block; margin-bottom: 0.35rem; }

/* "optional" said once, quietly, so nobody stalls wondering whether they must answer. */
.opt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.6;
  margin-left: 0.6em;
}

/* The hint sits ABOVE the line, never below it and never inside the field as
   placeholder text. Read order has to be: what this field is → what to write →
   the place to write it. A hint under the line arrives after the hesitation. */
.hint {
  display: block;
  max-width: var(--measure);
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.72;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink-brown);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kraft);
  border-radius: 0;
  padding: 0.4rem 0;
}

.field input:focus {
  border-bottom-color: var(--ink-brown);
  border-bottom-width: 2px;
  padding-bottom: calc(0.4rem - 1px);
}

/* A textarea is a page of letter paper, not an empty rectangle. The ruled lines are
   the affordance: they say "write here" without a word of interface, and they are the
   product itself. Line height, background step and padding must stay in step — change
   one and the writing lifts off the rules. */
.field textarea {
  --rule: 1.75rem;
  line-height: var(--rule);
  /* Three whole ruled lines. The padding is inside the height (border-box), so it has to
     be added back or the third rule is clipped and the paper looks unfinished. */
  min-height: calc(var(--rule) * 3 + 0.7rem);
  padding: 0.35rem 0;
  resize: vertical;
  border-bottom: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--rule) - 1px),
    var(--kraft) calc(var(--rule) - 1px) var(--rule)
  );
  background-position: 0 0.35rem;
  background-attachment: local;
}

.field textarea:focus {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--rule) - 1px),
    var(--ink-brown) calc(var(--rule) - 1px) var(--rule)
  );
}

/* The boundary note. Set quietly — it is not a warning box. */
.boundary {
  max-width: var(--measure);
  margin: 0 0 2.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--postal-green);
  font-size: 0.95em;
  opacity: 0.9;
}

.step__note {
  margin-top: 2.5rem;
  opacity: 0.7;
}

/* ---------- send ---------------------------------------------------------- */

.consent {
  max-width: var(--measure);
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.send {
  display: inline-block;
  font-family: inherit;
  background: var(--postal-red);
  color: var(--letter-cream);
  border: 0;
  border-radius: 0;
  padding: 1.15rem 2.5rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  text-decoration: none;
}
.send:hover,
.send:focus { opacity: 0.88; }
.send:visited { color: var(--letter-cream); }

/* The honeypot: hidden from people, offered to robots. */
.hp { position: absolute; left: -9999px; }

/* ---------- two small helpers --------------------------------------------- */

.push    { margin-top: 2.25rem; }
.centred { margin-inline: auto; }

/* ---------- foot ---------------------------------------------------------- */

footer {
  padding-block: 3rem 4rem;
  border-top: 1px solid rgba(74, 54, 40, 0.12);
  opacity: 0.75;
}
footer .mark a { margin-right: 1.5rem; }

/* ---------- questions with choices ----------------------------------------
   Added for the research report form. Nothing new visually: the same ruled-line
   idiom, the same six colours. A choice is a line of text with a mark beside it,
   not a card and not a button. */

.q { margin-bottom: 2.75rem; max-width: var(--measure); }
.q + .q { padding-top: 2.25rem; border-top: 1px solid rgba(74, 54, 40, 0.10); }

.q__no { display: block; margin-bottom: 0.6rem; opacity: 0.55; }

.q__ask {
  display: block;
  margin: 0 0 0.9rem;
  font-size: 1.05em;
  line-height: 1.45;
}

/* A group of choices is a real fieldset so that a screen reader announces the
   question before the options. The browser's own border is removed. */
.choices { border: 0; padding: 0; margin: 0 0 1.25rem; }
.choices legend { padding: 0; }

.choice {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.3rem 0;
  cursor: pointer;
}
.choice input {
  /* The one place a browser control is left as it is — recoloured, not rebuilt. */
  accent-color: var(--postal-red);
  margin: 0;
  flex: none;
}

/* Q4 is the whole account of the delivery. Three ruled lines would say "be brief",
   which is the opposite of what it asks for. */
.textarea--long { min-height: calc(var(--rule) * 9 + 0.7rem) !important; }
.textarea--mid  { min-height: calc(var(--rule) * 5 + 0.7rem) !important; }

/* The instruction that stands before the questions. Same voice as .boundary,
   the other edge of the page. */
.note {
  max-width: var(--measure);
  padding-left: 1.25rem;
  border-left: 1px solid var(--kraft);
  font-size: 0.95em;
  opacity: 0.9;
}

/* The D-ID shown back to the Helper, so a wrong page is visible at a glance. */
.did { letter-spacing: 0.28em; opacity: 0.6; }

/* ---------- photographs, once they exist -----------------------------------
   A real photograph replaces its placeholder box outright — the box is draft
   scaffolding and a visitor should never meet it. Where a photograph is still
   missing the frame survives as an HTML comment in the page, carrying the exact
   proportion, so adding one later is a single line and not a decision. */

.frame { margin: 0; }
.frame img {
  display: block;
  width: 100%;
  height: auto;
  /* the photograph sits on the paper, it is not pasted onto it */
  border: 1px solid rgba(200, 168, 124, 0.55);
}
.frame--sq { max-width: 15.5rem; margin-inline: auto; }

/* ---------- the postmark ---------------------------------------------------
   The post office's own seal. It is a mark, not a logo bar and not a picture:
   it appears once on a page, at the head of the room it belongs to, and never
   beside a second mark. Line art on the cream — no box, no shadow. */

.seal { margin: 0 0 2.25rem; }
.seal img {
  display: block;
  width: clamp(6.5rem, 17vw, 9rem);
  height: auto;
}
.seal--centre img { margin-inline: auto; }
.seal--large img  { width: clamp(9rem, 32vw, 14rem); }

/* ---------- elsewhere ------------------------------------------------------
   Where TaleWorld is found outside its own house. This lives in the footer and
   never in the header: there are two shops, so a single header button could not
   say which one it meant, and the loudest thing on the site would point away
   from it. Each line says where it goes before you click it. */

.elsewhere { margin-bottom: 2.5rem; }
.elsewhere__head { margin: 0 0 1.1rem; opacity: 0.65; }

.elsewhere__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 44rem) {
  .elsewhere__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
}

.elsewhere__list li { max-width: 22rem; }
.elsewhere__what {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* ---------- the wordmark ---------------------------------------------------
   The drawn mark replaces the word. It is sized by height, never by width: the
   needle rises well above the letters, so height is what keeps the mark in step
   with the navigation beside it. The header aligns on the baseline, and an image
   has none — so the mark is nudged onto the same optical line by hand. */
/* The anchor hugs the drawing exactly. Left as a normal inline link it kept a strip
   of empty line-box beside the mark, and over that strip the pointer turned into a
   text caret — which reads as "this word can be edited". A mark is not a word. */
.wordmark {
  display: inline-flex;
  align-items: flex-end;
  line-height: 0;
  cursor: pointer;
  /* The header aligns on the baseline. With no line box of its own the mark hangs
     a few pixels high of the navigation beside it; this sets it back down. It moves
     the clickable area with it, so the mark and its door stay the same shape. */
  position: relative;
  top: 0.3rem;
}

/* Text links fade on hover. The mark does not: greying the logo looks like the page
   is disabling itself. The pointer alone says it is a door. */
.wordmark:hover { opacity: 1; }

.wordmark img {
  display: block;
  height: clamp(1.6rem, 4.5vw, 2rem);
  width: auto;
}

/* the header is a row of marks, not a paragraph — no caret anywhere in it */
.site-header { cursor: default; }
.site-header a { cursor: pointer; }