/* Bunker Mentality. One-page v2: the creed, printed on a sheet of paper
   years ago. Palette and type per site/reference/design-plan.md. */

/* Fonts, self-hosted. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/courier-prime-v11-latin-regular.woff2') format('woff2');
}

:root {
  --paper: #d6d3ca;
  --paper-light: #e1ded6;
  --paper-deep: #b8b4a8;
  --ink: #211f19;
  --ink-soft: #3b382f;
  --ink-faint: #6b675b;
  --rule: rgba(50, 47, 38, 0.45);
  --stamp: #454136;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --type: 'Courier Prime', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--type);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  background-color: var(--paper);
  /* Aged-paper vibe across the whole screen: uneven tone, age spots,
     darkened screen edges. Not a literal sheet. */
  background-image:
    radial-gradient(ellipse 22% 12% at 82% 16%, rgba(110, 105, 92, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 14% at 8% 58%, rgba(110, 105, 92, 0.16), transparent 70%),
    radial-gradient(ellipse 18% 10% at 68% 88%, rgba(110, 105, 92, 0.18), transparent 70%),
    radial-gradient(ellipse 12% 7% at 30% 6%, rgba(110, 105, 92, 0.13), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 28%, rgba(225, 222, 214, 0.6), transparent 85%),
    linear-gradient(160deg, rgba(184, 180, 168, 0.22), transparent 40%, rgba(184, 180, 168, 0.3));
  background-attachment: fixed;
  min-height: 100vh;
}

/* Screen-edge ageing, fixed so it frames the viewport, not a sheet. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow:
    inset 0 0 12px rgba(60, 56, 44, 0.28),
    inset 0 0 110px rgba(85, 80, 64, 0.3);
}

/* ---- The sheet ---------------------------------------------------- */

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.375rem, 6vw, 3rem) clamp(2rem, 5vw, 3.5rem);
  color: var(--ink-soft);
}

/* Content column inside the full-bleed field. */
.masthead, .hero, .portrait, .signup, footer {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

/* Paper fibre + speckle over everything on the sheet, ink included:
   it is what makes the print sit IN the paper rather than on it. */
.mottle {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ---- Print -------------------------------------------------------- */

.masthead { text-align: center; }
.plate {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* balance the tracking */
  text-transform: uppercase;
  color: var(--stamp);
  border: 4px double var(--stamp);
  /* black-ink stamp, worn */
  padding: 0.55em 0.9em 0.5em;
  transform: rotate(-2.2deg);
  filter: url(#stampwear);
  opacity: 0.75;
  /* ink-starved patches */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0.9 0.9 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0.9 0.9 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

a.plate { text-decoration: none; }

.hero {
  max-width: 58rem;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  text-align: center;
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 7.2vw, 3.6rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  filter: url(#inkbleed);
  text-wrap: balance;
}

.creed {
  margin: clamp(1.75rem, 5vw, 2.5rem) auto 0;
  font-size: clamp(0.95rem, 1.9vw, 1rem);
  line-height: 2;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .creed { text-align: left; max-width: 33em; margin-inline: auto; }
  .creed br { display: none; }
}

/* Photo slot: an old print pasted on. */
.portrait { margin: 2.75rem auto 0; max-width: 24rem; }
.portrait img {
  display: block;
  width: 100%;
  border: 6px solid rgba(225, 222, 214, 0.9);
  outline: 1px solid rgba(50, 47, 38, 0.4);
  box-shadow: 0 2px 8px rgba(50, 46, 36, 0.35);
  filter: grayscale(1) contrast(0.95) brightness(0.98);
  transform: rotate(0.6deg);
}

/* ---- The form, printed like a paper form -------------------------- */

.signup {
  margin: clamp(2.75rem, 7vw, 4rem) auto 0;
  max-width: 27rem;
  text-align: center;
}
form { text-align: left; }
label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}
input[type='email'] {
  flex: 1 1 12rem;
  font-family: var(--type);
  font-size: 1.05rem;
  color: var(--ink);
  /* a printed form box: faintly filled, ruled all round, heavier write-line */
  background: rgba(230, 227, 219, 0.5);
  border: 1px solid rgba(50, 47, 38, 0.35);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 0;
  padding: 0.55em 0.6em;
  min-width: 0;
  box-shadow: inset 0 1px 3px rgba(50, 47, 38, 0.12);
}
input[type='email']::placeholder {
  color: var(--ink-faint);
  opacity: 0.6;
  font-style: italic;
}
input[type='email']:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(50, 47, 38, 0.12), 0 2px 0 0 var(--ink);
}

button {
  font-family: var(--type);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 0.6em 1.3em 0.55em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 60ms ease;
}
/* The one ask on the page: a slow ink pulse, a halo pressed out from the
   border, so the eye lands on it. Rests the moment he engages. */
.signup button {
  animation: join-pulse 2.8s ease-in-out infinite;
}
@keyframes join-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 31, 25, 0.35); }
  55%  { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(33, 31, 25, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 31, 25, 0); }
}
.signup button:hover, .signup button:focus-visible,
.signup button:active, .signup button:disabled {
  animation: none;
}
button:hover {
  background: var(--ink);
  color: var(--paper-light);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: default; }
button:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .field-row button { width: 100%; }
}

.status {
  margin-top: 1rem;
  font-family: var(--type);
  font-size: 0.95rem;
}
.status.ok { color: var(--ink); }
.status.err { color: var(--stamp); }
.status:empty { display: none; }

/* ---- Footer: printer's imprint ------------------------------------ */

footer {
  margin-top: auto;
  padding-top: clamp(3rem, 8vw, 4.5rem);
  text-align: center;
  font-family: var(--type);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

a { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* ---- Log card on the front page: a log-row in a record-card border - */

.logcard {
  display: block;
  width: calc(100% - 0.5rem);
  max-width: 27rem;
  margin: clamp(2.25rem, 6vw, 3rem) auto 0;
  padding: clamp(1.1rem, 3.5vw, 1.5rem) 1.25rem;
  border: 2px solid var(--ink-soft);
  border-radius: 2px;
  background: rgba(230, 227, 219, 0.42);
  box-shadow: inset 0 0 0 1px rgba(50, 47, 38, 0.18);
  text-align: center;
  text-decoration: none;
}
.logcard h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.logcard .stampline { margin-top: 0.7rem; }
.logcard .tminus:empty { display: none; }
.logcard:hover, .logcard:focus-visible {
  border-color: var(--ink);
  background: rgba(230, 227, 219, 0.62);
}

/* ---- Road to the Ultra: the log ------------------------------------ */

.log-head, .log-list, .entry, .log-foot {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.log-head { margin-top: clamp(2.5rem, 7vw, 4rem); text-align: center; }
.log-head h1 {
  font-size: clamp(1.7rem, 6.4vw, 3rem);
}
.log-sub {
  margin-top: 1rem;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The index: a ruled record of sessions, newest first. */
.log-list {
  margin-top: clamp(2.25rem, 6vw, 3.25rem);
  list-style: none;
  border-top: 2px solid var(--rule);
}
.log-row {
  display: block;
  padding: clamp(1.1rem, 3.5vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
a.log-row:hover, a.log-row:focus-visible {
  background: rgba(230, 227, 219, 0.62);
}
.log-row .stampline { margin-bottom: 0.45rem; }
.log-row h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.log-row h2:empty { display: none; }
.log-summary {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.log-summary:empty { display: none; }
/* The stamp line: date, T-count, arc name, set like a record card. */
.stampline {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stampline .tminus {
  color: var(--stamp);
  border: 1px solid var(--stamp);
  padding: 0.1em 0.4em;
  margin: 0 0.15em;
  white-space: nowrap;
}

/* ---- A single entry ------------------------------------------------ */

.entry { margin-top: clamp(2.5rem, 7vw, 4rem); }
.entry h1 {
  font-size: clamp(1.7rem, 6.4vw, 3rem);
  text-wrap: balance;
}
.entry h1:empty { display: none; }
.entry > .stampline { margin-top: 1rem; }

.entry-body { margin-top: clamp(1.75rem, 5vw, 2.5rem); }
.entry-body p { margin-bottom: 1.35rem; line-height: 1.85; }
.entry-body ul { margin: 0 0 1.35rem 1.2rem; }
.entry-body li { margin-bottom: 0.5rem; line-height: 1.75; }
.entry-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

/* ---- The instruction card: do this session ------------------------- */

.prescription {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  border: 2px solid var(--ink-soft);
  border-radius: 2px;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: rgba(230, 227, 219, 0.42);
  box-shadow: inset 0 0 0 1px rgba(50, 47, 38, 0.18);
}
.prescription h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--rule);
}
.prescription dl { margin-top: 1.25rem; }
.prescription dt {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.prescription dd {
  margin: 0.3rem 0 1.15rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.prescription dd:empty::before {
  content: '';
  display: block;
  height: 1px;
}
.prescription dd ul { list-style: none; }
.prescription dd li {
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  position: relative;
  line-height: 1.6;
}
.prescription dd li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: var(--ink-soft);
}
.scaling {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.scaling .scaling-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

/* ---- Back / return links ------------------------------------------- */

.log-foot {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.9rem 1.5rem;
}
.log-foot a { color: var(--ink-soft); }
.log-foot a:hover { color: var(--ink); }

/* Entry pages: older entry on the left, back-to-log centred, newer on the
   right. The side slots flex equally so the centre link stays centred even
   when one slot is empty at an end of the arc. Must stay one line at desktop:
   the one-screen layouts hardcode the foot's height in their chrome sums. */
.foot-prev, .foot-next { flex: 1; white-space: nowrap; }
.foot-prev { text-align: left; }
.foot-next { text-align: right; }
@media (max-width: 719px) {
  .log-foot { flex-wrap: wrap; }
  .log-foot .foot-back { order: 1; flex-basis: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}