/* vestibule quarterly: submissions, as an experimental bulletin.
   a full-bleed plate for a cover, a readable interior. paper, ink, one orange.
   system: DESIGN.md. tokens first; both themes follow. */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/BigShouldersDisplay-900.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
/* the same file again, for the title only: block, not swap, because the one-row title is sized
   in this face's widths and a wide fallback would overrun the page. the browser fetches it once */
@font-face { font-family: "Big Shoulders Title"; src: url("fonts/BigShouldersDisplay-900.woff2") format("woff2"); font-weight: 700 900; font-display: block; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --paper:       #f3eedf;
  --paper-hi:    #fbf8ef;   /* fields: a fresh sheet on the paper */
  --ink:         #181713;
  --muted:       #625a4c;
  --rule:        color-mix(in srgb, var(--ink) 22%, transparent);
  --accent:      #e09b4c;   /* the castle orange from the hero print: fills, large marks. never small text on paper */
  --accent-text: #8a5418;   /* the same orange, dense enough for small text on paper */
  --on-accent:   #181713;
  --fig-filter:  none;       /* how the ink-on-white figure prints into the paper */
  --fig-blend:   multiply;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --read:    "Fraunces", Georgia, serif;
  --label:   "Space Grotesk", system-ui, sans-serif;

  --page:    76rem;
  --measure: 64ch;
  --gutter:  clamp(1rem, 3vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #17140f;
    --paper-hi:    #211d16;
    --ink:         #efe7d6;
    --muted:       #b3a893;
    --accent-text: #e9b36f;
    --fig-filter:  invert(1);
    --fig-blend:   screen;
  }
}
:root[data-theme="dark"] {
  --paper:       #17140f;
  --paper-hi:    #211d16;
  --ink:         #efe7d6;
  --muted:       #b3a893;
  --accent-text: #e9b36f;
  --fig-filter:  invert(1);
  --fig-blend:   screen;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--paper); color: var(--ink);
  font-family: var(--read);
  font-size: 1.1875rem; line-height: 1.62;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* breakout grid: everything sits in the content column; the hero spans the full lines */
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - 2 * var(--gutter), var(--page) - 2 * var(--gutter))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(2rem, 5vw, 3.5rem);
}
.page > * { grid-column: content; }


/* strip: journal identity, where you are */

.strip {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--label); font-size: 0.95rem; font-weight: 500;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
}
.strip a { color: var(--ink); text-decoration: none; font-weight: 700; }
.strip a:hover { text-decoration: underline; }
.strip span { color: var(--muted); }


/* cover: the plate edge to edge, the title posted beneath it on one row */

.cover {
  grid-column: full;
  display: grid; grid-template-columns: subgrid;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.cover > * { grid-column: content; }
.cover > .hero { grid-column: full; }
.hero img {
  width: 100%;
  height: min(66vh, 58vw); object-fit: cover; object-position: 50% 45%;
  border-block: 2px solid var(--ink);
}
.masthead { container-type: inline-size; margin-top: clamp(0.75rem, 2vw, 1.5rem); }
.title {
  font-family: "Big Shoulders Title", var(--display); font-weight: 900;
  text-transform: uppercase;
  /* one row, sized from the page width so the whole word always fits */
  font-size: 19.6cqi;
  line-height: 0.82; letter-spacing: -0.01em;
  white-space: nowrap;
  margin-left: -0.03em; /* optical: the S's shoulder to the column edge */
}
.dek {
  margin-top: clamp(0.9rem, 2.5vw, 1.5rem);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3;
  font-style: italic; font-variation-settings: "opsz" 72;
}
.dek a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

@media (max-width: 52rem) {
  /* phones: the whole plate, nearly full screen */
  .hero img { height: 86svh; object-position: 50% 50%; }
}


/* reading: one calm column */

/* the particulars as a solid ink panel: paper text, light rules; flips with the theme */
.rail {
  --rule: color-mix(in srgb, var(--paper) 28%, transparent);
  background: var(--ink); color: var(--paper);
  padding: 1.25rem 1.4rem 0.6rem;
}
.rail .spec > div:last-child { border-bottom: 0; }

main > * { max-width: var(--measure); }
/* wide screens: the particulars ride beside the reading column, in view while you read and fill in */
@media (width > 60rem) {
  main {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(15rem, 21rem);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
  main > * { grid-column: 1; }
  main > .rail {
    grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: 1.5rem;
    margin-top: clamp(2rem, 5vw, 3rem);
  }
  .rail .spec > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.lead {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 1.3rem; line-height: 1.55;
  font-variation-settings: "opsz" 36;
}

.block { margin-top: clamp(3rem, 7vw, 4.5rem); }
h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem); line-height: 1;
  letter-spacing: 0.005em;
  margin-bottom: 1rem;
}
h2 em { font-style: normal; color: var(--accent); }  /* the paste-up strip's orange (owner, 2026-09-24) */

p + p { margin-top: 1rem; }

/* what we publish: one engraved vignette per kind of work, alternating sides, the kind of work beside each */
.kinds { list-style: none; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.kinds li {
  --art: 12rem;
  display: grid; grid-template-columns: var(--art) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem); align-items: center;
}
.kinds li:nth-child(even) { grid-template-columns: minmax(0, 1fr) var(--art); }
.kinds li:nth-child(even) img { order: 2; }
.kinds li.wide { --art: 17rem; }  /* a landscape print gets the width to match the others' weight */
.kinds img {
  width: 100%;
  filter: var(--fig-filter); mix-blend-mode: var(--fig-blend);  /* the engraving's white becomes this paper */
}
.kinds h3 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1;
  margin-bottom: 0.4rem;
}
@media (max-width: 34rem) { .kinds li { --art: 7.5rem; } .kinds li.wide { --art: 10rem; } }

/* the one paste-up gesture: the gloss set in a solid orange block */
.pasted {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.08;
}

/* issue one: the theme beside its figure, an apparatus printed straight into the page */
.theme p { font-size: 1.3rem; }
.theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.theme h2 { grid-column: 1 / -1; }
.figure img {
  width: 100%;
  filter: var(--fig-filter); mix-blend-mode: var(--fig-blend);  /* the engraving's white becomes this paper */
}
@media (max-width: 34rem) {
  .theme { grid-template-columns: minmax(0, 1fr); }
  .figure { width: 9rem; margin-top: 1.25rem; }
}

.spec > div {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec > div:first-child { padding-top: 0; }
.spec dt {
  font-family: var(--label); font-size: 0.95rem; font-weight: 700;
}
.spec dd { margin: 0; }
@media (max-width: 30rem) {
  .spec > div { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* the form: a plain intake sheet. the heading can be unruly; the fields are familiar */

.intake {
  margin-top: 1.75rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 34rem) { .row { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--label); font-size: 0.95rem; font-weight: 600;
  margin-bottom: 0.35rem;
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--paper-hi);
  border: 2px solid var(--ink); border-radius: 0;
  padding: 0.5rem 0.7rem;
  -webkit-appearance: none; appearance: none;
}
.field select {
  cursor: pointer; padding-right: 2.4rem;
  /* a down-pointing wedge in ink, drawn from two half-squares so it follows the theme */
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 1.2rem center / 0.45rem 0.45rem no-repeat,
    linear-gradient(-45deg, var(--ink) 50%, transparent 50%) right 0.75rem center / 0.45rem 0.45rem no-repeat,
    var(--paper-hi);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:user-invalid, .field select:user-invalid,
.field [aria-invalid] { border-style: dashed; border-color: var(--accent-text); }

button.submit {
  min-height: 2.75rem;
  font-family: var(--label); font-size: 1.05rem; font-weight: 700;
  color: var(--on-accent); background: var(--accent);
  border: 2px solid var(--ink); border-radius: 0;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button.submit:hover { background: var(--ink); color: var(--paper); }
button.submit:disabled { opacity: 0.6; cursor: progress; }

.status:empty { display: none; }
.status {
  margin-top: 1rem;
  font-family: var(--label); font-weight: 600;
  color: var(--accent-text);
}
.fallback { margin-top: 1.25rem; font-size: 1rem; color: var(--muted); }
.fallback a { overflow-wrap: break-word; }

.thanks {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  font-size: 1.2rem;
}
.thanks:focus { outline: none; }


/* colophon */

footer {
  margin-top: clamp(4rem, 9vw, 6rem);
}
.motto {
  font-style: italic; font-variation-settings: "opsz" 72;
  font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1;
}
.colophon {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 1.1rem;
  font-family: var(--label); font-size: 0.9rem;
  color: var(--muted);
}
.colophon a { color: var(--ink); display: inline-block; padding-block: 0.35rem; overflow-wrap: break-word; }