/* press.css — the press and review kit.

   Loads last, after nocturne.css, theme-classified.css and site.css, and reads
   tokens rather than redefining them (docs/website.md, "The two palettes").

   This page is not a reading surface and not a sales page. It is a desk's
   working document: somebody has ten minutes, needs the description, the
   warnings, the cover and the links, and is going to copy several of them.
   So everything is a block that can be selected cleanly, nothing animates,
   and no section hides anything behind an interaction. */

.press {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 9vw, 6rem);
}

.press__head { padding-block: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 3vw, 2rem); }
.press__head h1 { margin: 0.35rem 0 0.75rem; }
.press__lede { max-width: 46ch; }
.press__contact { margin-top: 1rem; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.9rem; }

.press__section {
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.12));
}
.press__section > .section-h { margin-bottom: 0.9rem; }

.press__copy > p + p { margin-top: 0.85rem; }
.press__copy, .press__lede { line-height: 1.62; }
.press__note { font-size: 0.9rem; opacity: 0.82; }

/* At a glance: a definition list rather than a table, so it reflows to one
   column on a phone instead of scrolling sideways. */
.facts { margin: 0; display: grid; gap: 0.55rem; }
.facts > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.4rem 1rem;
  align-items: baseline;
}
.facts dt {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
}
.facts dd { margin: 0; }

@media (max-width: 40rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Warnings: a list, per the 2026-09-03 layout ruling. The wording is the
   canonical block and is not edited here. */
.warnings { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.warnings li { line-height: 1.55; }

.press__cta { margin-top: 1rem; }
.press__button {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-decoration: none;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.press__cover { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: start; }

/* The framed cover, quoting the studio hub's work panels exactly: a hairline
   brass border, and corner ticks at TWO OPPOSITE CORNERS ONLY, worn 5px
   outside the frame. Author call 2026-09-11 to bring it here, so the cover
   reads the same on both sites. The hub's own comment traces the ticks back
   to Perpetūra's dialogs, so this is the third surface wearing one mark.
   Figures are the hub's: 16px arms, 2px thick, 0.9 opacity, 5px proud. */
/* Mounted rather than flush — see the note in story.css. A hairline pressed
   against a lit cover edge averages away; given dark ground to sit on it
   reads. The alpha is raised from the hub's 0.36 because the hub composites
   over a lighter panel than this site's carbon. */
.press__cover-frame {
  position: relative;
  width: 190px;
  padding: 8px;
  border: 1px solid rgba(169, 133, 84, 0.5);
  border-radius: var(--radius-md);
}
.press__cover-frame::before,
.press__cover-frame::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 0 solid var(--color-accent);
  opacity: 0.9;
}
.press__cover-frame::before {
  top: -5px; left: -5px;
  border-top-width: 2px; border-left-width: 2px;
}
.press__cover-frame::after {
  bottom: -5px; right: -5px;
  border-bottom-width: 2px; border-right-width: 2px;
}
.press__cover img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.press__cover p + p { margin-top: 0.6rem; }
@media (max-width: 40rem) {
  .press__cover { grid-template-columns: 1fr; gap: 1rem; }
  .press__cover img { width: min(58vw, 200px); }
}

.press__links { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; }

/* Social images, under the cover in the same section. The sub-heading is an
   h3 so the section keeps one h2, and the list carries its own note per row
   because a desk choosing a shape wants the use beside the size. */
.press__sub {
  font-size: 1rem; margin: 1.9rem 0 0.5rem;
  color: var(--color-neutral-200);
}
.press__shapes { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.press__shapes li { display: grid; gap: 0.15rem; }

/* ── SELECTION IS ON HERE, AND ONLY HERE ──────────────────────────────────
   site.css sets user-select: none on the body for the whole site, as a speed
   bump against casual copying of the prose. That rule is right for a reading
   surface and exactly backwards for this page: a press kit exists to be
   copied, and a desk that cannot highlight the blurb has been handed a
   picture of a press kit.

   press.css loads after site.css, which is the documented order in
   docs/website.md, so this override lands. It is scoped to this stylesheet and
   this stylesheet is only linked from press.html, so nothing else on the site
   changes. The prose pages stay as they were.

   This replaces a set of per-block copy buttons, removed by author call: if
   the page can simply be highlighted, the buttons were solving a problem the
   site had created for itself. */
body {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}