/* ============================================================
   THE SAM HILL! REVIEW — About & Submit pages
   Loaded after /style.css. These are the styles the old
   one-page landing used, moved here unchanged.
   ============================================================ */
:root {
  --paper:      #000000;
  --ink:        #FFFFFF;
  --ink-quiet:  #C9C4BC;
  --ink-faint:  #8F897C;
  --ink-hover:  #F2E4C0;
  --rule:       #3A3A3A;

  --face-display: 'IM Fell DW Pica SC', serif;
  --face-caps:    'IM Fell DW Pica SC', serif;
  --face-text:    'Sorts Mill Goudy', serif;

  --measure:    680px;   /* reading column */
  --mast-width: 700px;   /* masthead image — the one knob */

  --space-titlepage-top: 42px;
  --space-section:       54px;
  --space-para:          1.1em;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: var(--space-titlepage-top) 0 56px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: clamp(1rem, 2.1vw, 1.06rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

/* ---------- shared bits ---------- */
.ornament {
  text-align: center;
  letter-spacing: 8px;
  font-size: 1.3rem;
  line-height: 1;
  margin: 26px 0;
}
.rule-short { border: 0; border-top: 1px solid var(--rule); width: 84px; margin: 22px auto; }

/* ============================================================
   LETTERPRESS TILT — type set by hand never sits square.
   Fixed, not random. Past ~1deg it reads as a mistake.
   ============================================================ */
.tp-l1           { transform: rotate( 0.4deg);  }
.tp-l2           { transform: rotate(-0.22deg); }
.tp-l3           { transform: rotate( 0.5deg);  }
.tp-l4           { transform: rotate(-0.3deg);  }
.tp-l5           { transform: rotate( 0.18deg); }
.tp-l6           { transform: rotate(-0.45deg); }
.tp-l7           { transform: rotate( 0.24deg); }
.tp-shout        { transform: rotate(-0.35deg); }
.tp-editors      { transform: rotate( 0.2deg);  }
.tp-status       { transform: rotate(-0.3deg);  }
.sec-num         { transform: rotate( 0.4deg);  }
.section-head    { transform: rotate(-0.3deg);  }
.ornament        { transform: rotate( 0.3deg);  }
.featured-label  { transform: rotate( 0.3deg);  }
.featured-title  { transform: rotate(-0.4deg);  }


/* ============================================================
   TITLE PAGE
   ============================================================ */

.titlepage { text-align: center; }

/* the small connective lines — or / of / that it */
.tp-small {
  font-family: var(--face-caps);
  font-size: 0.7rem;
  letter-spacing: 5px;
  color: var(--ink-quiet);
  margin: 9px 0;
}

/* the medium declarative lines */
.tp-med {
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  line-height: 1.35;
  margin: 9px 0;
}

/* the emphasized line */
.tp-large {
  font-family: var(--face-caps);
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  letter-spacing: 1px;
  line-height: 1.3;
  margin: 11px 0;
}

.tp-shout {
  font-family: var(--face-display);
  font-size: clamp(1.2rem, 3.6vw, 1.62rem);
  line-height: 1.3;
  margin: 15px auto 0;
  max-width: 20em;
}

.tp-editors {
  font-family: var(--face-caps);
  letter-spacing: 3px;
  font-size: 1rem;
  margin: 0;
}
.tp-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 5px;
  color: var(--ink-quiet);
  margin-bottom: 8px;
}

.tp-status {
  font-family: var(--face-caps);
  letter-spacing: 4px;
  font-size: 0.82rem;
  margin-top: 24px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { margin-top: var(--space-section); scroll-margin-top: 20px; }

.sec-num {
  text-align: center;
  font-family: var(--face-display);
  font-size: 1.15rem;
  color: var(--ink-quiet);
  margin-bottom: 2px;
}

.section-head {
  text-align: center;
  font-family: var(--face-display);
  font-weight: normal;
  font-size: clamp(1.32rem, 3.5vw, 1.62rem);
  line-height: 1.2;
  margin: 0 0 5px;
}

.section-gloss {
  text-align: center;
  font-family: var(--face-caps);
  letter-spacing: 3px;
  font-size: 0.72rem;
  color: var(--ink-quiet);
  margin: 0 0 26px;
}
.gloss-key { font-size: 1.28em; letter-spacing: 4px; color: var(--ink); }

/* justified prose, hyphenated so the rivers don't open up */
.section p, .cat p {
  margin: 0 0 var(--space-para);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.section p:last-child { margin-bottom: 0; }

.subhead {
  font-family: var(--face-caps);
  letter-spacing: 3px;
  font-size: 0.85rem;
  margin: 30px 0 12px;
}

.section ul { margin: 0 0 var(--space-para); padding-left: 1.1em; list-style: none; }
.section li { margin-bottom: 0.7em; position: relative; }
.section li::before { content: "\2014"; position: absolute; left: -1.1em; color: var(--ink-faint); }

.bio { margin-bottom: 26px; }
.bio-role {
  display: block; font-family: var(--face-caps);
  letter-spacing: 4px; font-size: 0.7rem; color: var(--ink-quiet);
  margin-bottom: 4px;
}
.bio-name { font-family: var(--face-caps); letter-spacing: 2px; }

.spec { font-style: italic; color: var(--ink-quiet); }

.cat { margin-bottom: 22px; }
.cat-name { font-family: var(--face-caps); letter-spacing: 2px; font-size: 0.95rem; }
.cat-limit { font-style: italic; color: var(--ink-quiet); font-size: 0.9em; }

/* ============================================================
   FEATURED CALL — double-ruled box
   ============================================================ */
.featured {
  position: relative;
  margin-top: var(--space-section);
  padding: 34px 28px 30px;
  border: 1px solid var(--rule);
  scroll-margin-top: 20px;
}
.featured::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.featured-label {
  text-align: center;
  font-family: var(--face-caps);
  letter-spacing: 5px;
  font-size: 0.72rem;
  color: var(--ink-quiet);
  margin-bottom: 8px;
}

.featured-title {
  text-align: center;
  font-family: var(--face-display);
  font-weight: normal;
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 22px;
}

.years { margin: 16px 0 var(--space-para); }
.year-row { display: flex; align-items: baseline; padding: 3px 0; }
.year-num {
  white-space: nowrap; font-family: var(--face-caps);
  letter-spacing: 1px; min-width: 6.6em;
}
.year-note { font-size: 0.96em; }

.deadline {
  text-align: center;
  font-family: var(--face-caps);
  letter-spacing: 4px;
  font-size: 0.9rem;
  margin: 26px 0 0;
}

/* SUBMIT */
.submit-wrap { text-align: center; margin-top: 22px; }
.submit-btn {
  display: inline-block;
  font-family: var(--face-caps);
  letter-spacing: 6px;
  font-size: 1rem;
  padding: 12px 34px;
  border: 1px solid var(--ink-faint);
  transition: color 130ms linear, border-color 130ms linear;
}
.submit-btn:hover { color: var(--ink-hover); border-color: var(--ink-hover); }

.email { border-bottom: 1px dotted var(--ink-faint); }
.email:hover { color: var(--ink-hover); border-bottom-color: var(--ink-hover); }

.backlink {
  display: block; text-align: center;
  font-family: var(--face-caps); letter-spacing: 3px;
  font-size: 0.72rem; color: var(--ink-faint);
  margin-top: 26px;
}
.backlink:hover { color: var(--ink-hover); }

.chill { text-align: center; margin-top: 26px; }
.chill img {
  width: 58px; height: auto; display: inline-block;
  opacity: 0.82; transition: opacity 140ms linear;
}
.chill a:hover img { opacity: 1; }
.chill-cap {
  display: block; font-family: var(--face-caps);
  letter-spacing: 3px; font-size: 0.66rem;
  color: var(--ink-faint); margin-top: 6px;
}

.duosuma { text-align: center; margin-top: 30px; }
.duosuma img {
  display: inline-block;
  opacity: 0.6;
  transition: opacity 140ms linear;
}
.duosuma a:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* header spacing on these pages */
.site-head { margin-bottom: 30px; }
.wrap > .titlepage { margin-top: 6px; }