/* Dystopia. WOW! — Acid Press × Street Press, without decorative stars.
   Each block describes a visible component. Local fonts avoid external font services. */

@font-face {
  /* Choose the typeface and fallback fonts. */
  font-family: PressSerif;
  /* Load the locally bundled font file. */
  src: url("assets/press-serif.ttf") format("truetype");
  /* Keep text visible while a local font loads. */
  font-display: swap;
  /* Set text weight. */
  font-weight: 700;
}

@font-face {
  /* Choose the typeface and fallback fonts. */
  font-family: PressCondensed;
  /* Load the locally bundled font file. */
  src: url("assets/press-condensed.otf") format("opentype");
  /* Keep text visible while a local font loads. */
  font-display: swap;
  /* Set text weight. */
  font-weight: 700;
}

/* Palette tokens keep public pages and the creator studio consistent. --red is retained
   as an older selector alias, now pointing to the approved acid accent. */

:root {
  /* Request matching dark native controls. */
  color-scheme: dark;
  /* Define a shared theme token. */
  --paper: #f4f3ed;
  /* Define a shared theme token. */
  --ink: #f4f3ed;
  /* Define a shared theme token. */
  --acid: #dcff00;
  /* Define a shared theme token. */
  --red: var(--acid);
  /* Define a shared theme token. */
  --muted: #b6b6ae;
  /* Define a shared theme token. */
  --line: #45453f;
  /* Define a shared theme token. */
  --black: #080808;
}

/* Border-box prevents padded columns exceeding the viewport; long text can always wrap. */

* {
  /* Control box sizing for this component. */
  box-sizing: border-box;
}

body {
  /* Set space outside this component. */
  margin: 0;
  /* Set the surface fill. */
  background: var(--black);
  /* Set foreground text or icon color. */
  color: var(--ink);
  /* Set typeface, size, weight and line spacing together. */
  font:
    15px/1.6 "Courier New",
    monospace;
  /* Wrap otherwise unbreakable text safely. */
  overflow-wrap: anywhere;
}

a {
  /* Set foreground text or icon color. */
  color: inherit;
  /* Set link decoration. */
  text-decoration: none;
}

a:hover {
  /* Set foreground text or icon color. */
  color: var(--acid);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  /* Make focused controls visible to keyboard users. */
  outline: 2px solid var(--acid);
  /* Separate the focus ring from the control. */
  outline-offset: 5px;
}

/* Desktop masthead stays alongside persistent home/nav links; neither is rendered into a bitmap. */

.site-header {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Align children on the cross axis. */
  align-items: center;
  /* Allow flex children to move to a new row. */
  flex-wrap: wrap;
  /* Separate grid or flex children. */
  gap: 20px;
  /* Set space inside this component. */
  padding: 24px 28px;
  /* Limit the component width. */
  max-width: 1800px;
  /* Set space outside this component. */
  margin: auto;
}

.masthead {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 clamp(35px, 5.7vw, 90px) / 1 PressSerif,
    Georgia,
    serif;
  /* Set spacing between characters. */
  letter-spacing: -5px;
  /* Control wrapping and retained line breaks. */
  white-space: nowrap;
  /* Allocate available flex-row space. */
  flex: 1;
}

.brand-first {
  /* Apply the subtle ink-wear treatment. */
  filter: url("assets/ink.svg#wear");
}

.brand-second {
  /* Choose how the component participates in layout. */
  display: inline-block;
  /* Set the surface fill. */
  background: var(--acid);
  /* Set foreground text or icon color. */
  color: #080808;
  /* Choose the typeface and fallback fonts. */
  font-family: PressCondensed, Impact, sans-serif;
  /* Set spacing between characters. */
  letter-spacing: -2px;
  /* Set space inside this component. */
  padding: 4px 8px;
  /* Move or rotate the decorative treatment. */
  transform: rotate(-3deg);
  /* Trim the edge into the torn-paper shape. */
  clip-path: polygon(
    0 6%,
    8% 2%,
    13% 5%,
    22% 0,
    34% 5%,
    47% 1%,
    59% 5%,
    73% 0,
    85% 4%,
    98% 0,
    100% 94%,
    88% 98%,
    73% 94%,
    61% 100%,
    49% 95%,
    37% 99%,
    24% 94%,
    10% 100%,
    0 94%
  );
}

.masthead i {
  /* Control font style for this component. */
  font-style: normal;
}

.topline {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Align children on the cross axis. */
  align-items: center;
  /* Separate grid or flex children. */
  gap: 25px;
}

.home-link {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 19px PressCondensed,
    sans-serif;
  /* Control wrapping and retained line breaks. */
  white-space: nowrap;
  /* Add a rule below this component. */
  border-bottom: 3px solid var(--acid);
  /* Control padding bottom for this component. */
  padding-bottom: 6px;
}

nav {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Separate grid or flex children. */
  gap: 20px;
  /* Align children on the cross axis. */
  align-items: center;
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 21px PressCondensed,
    sans-serif;
}

nav .active {
  /* Set foreground text or icon color. */
  color: var(--acid);
}

nav span {
  /* Set foreground text or icon color. */
  color: var(--muted);
}

.headernote {
  /* Set the initial width within the flex row. */
  flex-basis: 100%;
  /* Control wrapping and retained line breaks. */
  white-space: pre-line;
  /* Set foreground text or icon color. */
  color: var(--muted);
}

.headernote:empty,
.masthead i:empty {
  /* Choose how the component participates in layout. */
  display: none;
}

/* The announcement has ragged paper edges, a real pause button, and duplicate hidden copy
   for a seamless loop. Hover/focus/reduced-motion also stop animation. */

#notice {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Set the surface fill. */
  background: var(--acid);
  /* Set foreground text or icon color. */
  color: #080808;
  /* Align children on the cross axis. */
  align-items: center;
  /* Control min height for this component. */
  min-height: 48px;
  /* Trim the edge into the torn-paper shape. */
  clip-path: polygon(
    0 5%,
    4% 0,
    9% 6%,
    16% 0,
    23% 5%,
    31% 0,
    40% 5%,
    49% 0,
    58% 6%,
    66% 0,
    73% 5%,
    82% 0,
    91% 6%,
    100% 0,
    100% 96%,
    94% 100%,
    86% 94%,
    78% 100%,
    69% 95%,
    61% 100%,
    50% 95%,
    40% 100%,
    31% 95%,
    20% 100%,
    10% 94%,
    0 100%
  );
}

#notice:empty {
  /* Choose how the component participates in layout. */
  display: none;
}

.ticker-window {
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 0;
  /* Control overflow for this component. */
  overflow: hidden;
  /* Allocate available flex-row space. */
  flex: 1;
}

.ticker-track {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Set the component width. */
  width: max-content;
  /* Move the repeating announcement strip. */
  animation: ticker-scroll 35s linear infinite;
}

.ticker-track span {
  /* Control wrapping and retained line breaks. */
  white-space: nowrap;
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 25px PressCondensed,
    sans-serif;
  /* Set spacing between characters. */
  letter-spacing: 1px;
  /* Set space inside this component. */
  padding: 12px 100px;
}

.ticker-pause {
  /* Set the surface fill. */
  background: transparent;
  /* Set foreground text or icon color. */
  color: #080808;
  /* Set the outline of this component. */
  border: 1px solid #080808;
  /* Set space outside this component. */
  margin: 6px 18px;
  /* Set space inside this component. */
  padding: 4px 10px;
  /* Set text size. */
  font-size: 12px;
}

#notice:hover .ticker-track,
#notice:focus-within .ticker-track,
#notice.paused .ticker-track {
  /* Pause or resume announcement movement. */
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  to {
    /* Move or rotate the decorative treatment. */
    transform: translateX(-50%);
  }
}

/* Equal home columns preserve the selected composition. Side rules separate Words, Art and
   Sound; auto-growing height accommodates real posts of any length. */

main {
  /* Limit the component width. */
  max-width: 1800px;
  /* Set space inside this component. */
  padding: 24px 28px 50px;
  /* Set space outside this component. */
  margin: auto;
  /* Control min height for this component. */
  min-height: 50vh;
}

.home-grid {
  /* Choose how the component participates in layout. */
  display: grid;
  /* Size and arrange the grid columns. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-column {
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 0;
  /* Set space inside this component. */
  padding: 0 20px;
  /* Choose the positioning context. */
  position: relative;
}

.home-column:first-child {
  /* Control padding left for this component. */
  padding-left: 0;
}

.home-column:last-child {
  /* Control padding right for this component. */
  padding-right: 0;
}

.home-column + .home-column {
  /* Separate columns with a left rule. */
  border-left: 1px solid var(--line);
}

.column-label {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 16px PressCondensed,
    sans-serif;
  /* Set foreground text or icon color. */
  color: #080808;
  /* Set the surface fill. */
  background: var(--acid);
  /* Choose how the component participates in layout. */
  display: table;
  /* Set space inside this component. */
  padding: 3px 10px;
  /* Set space outside this component. */
  margin: 0 0 15px;
}

/* Rough art edges are CSS masks around replaceable, independently uploaded image files. */

.cover {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set space outside this component. */
  margin: 0 0 16px;
  /* Trim the edge into the torn-paper shape. */
  clip-path: polygon(
    0 1%,
    8% 0,
    14% 1%,
    22% 0,
    33% 1%,
    46% 0,
    58% 1%,
    71% 0,
    83% 1%,
    100% 0,
    99% 14%,
    100% 28%,
    99% 46%,
    100% 63%,
    99% 82%,
    100% 99%,
    89% 100%,
    75% 99%,
    62% 100%,
    50% 99%,
    34% 100%,
    20% 99%,
    0 100%
  );
}

.cover img {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set the component width. */
  width: 100%;
  /* Set the component height. */
  height: auto;
  /* Control how an image fits its allotted box. */
  object-fit: contain;
}

.home-column.blog .cover img {
  /* Keep the displayed cover shape consistent. */
  aspect-ratio: 1.13;
  /* Control how an image fits its allotted box. */
  object-fit: cover;
}

.home-column.art .cover img {
  /* Keep the displayed cover shape consistent. */
  aspect-ratio: 0.86;
  /* Control how an image fits its allotted box. */
  object-fit: cover;
}

.post {
  /* Control padding bottom for this component. */
  padding-bottom: 25px;
  /* Control margin bottom for this component. */
  margin-bottom: 28px;
  /* Add a rule below this component. */
  border-bottom: 1px solid var(--line);
}

.post h2 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 clamp(29px, 3.4vw, 55px) / 1.03 Arial,
    sans-serif;
  /* Set spacing between characters. */
  letter-spacing: -1.5px;
  /* Set space outside this component. */
  margin: 14px 0;
}

.home-column.art .post h2 {
  /* Set text size. */
  font-size: clamp(25px, 2.4vw, 36px);
}

.home-column.blog .post h2 {
  /* Choose the positioning context. */
  position: relative;
  /* Control padding bottom for this component. */
  padding-bottom: 12px;
}

.home-column.blog .post h2:after {
  /* Create the non-text decorative underline. */
  content: "";
  /* Choose the positioning context. */
  position: absolute;
  /* Control bottom for this component. */
  bottom: 0;
  /* Control left for this component. */
  left: 0;
  /* Set the component width. */
  width: 94%;
  /* Set the component height. */
  height: 4px;
  /* Set the surface fill. */
  background: var(--acid);
  /* Move or rotate the decorative treatment. */
  transform: rotate(-2deg);
  /* Trim the edge into the torn-paper shape. */
  clip-path: polygon(
    0 20%,
    24% 0,
    38% 35%,
    70% 0,
    100% 50%,
    96% 100%,
    50% 65%,
    24% 100%,
    0 80%
  );
}

.post h3 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 17px/1.3 "Courier New",
    monospace;
  /* Set space outside this component. */
  margin: 0 0 16px;
}

.meta,
.eyebrow {
  /* Set typeface, size, weight and line spacing together. */
  font:
    12px/1.5 "Courier New",
    monospace;
  /* Set foreground text or icon color. */
  color: var(--muted);
  /* Control text transform for this component. */
  text-transform: uppercase;
}

.post-body {
  /* Set space outside this component. */
  margin: 16px 0;
}

.text {
  /* Control wrapping and retained line breaks. */
  white-space: pre-wrap;
}

.read,
.button,
button {
  /* Choose how the component participates in layout. */
  display: inline-block;
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 17px PressCondensed,
    sans-serif;
  /* Set the outline of this component. */
  border: 2px solid var(--acid);
  /* Set the surface fill. */
  background: transparent;
  /* Set foreground text or icon color. */
  color: var(--acid);
  /* Set space inside this component. */
  padding: 10px 16px;
  /* Show the interaction pointer. */
  cursor: pointer;
}

.read:hover,
.button:hover,
button:hover {
  /* Set the surface fill. */
  background: var(--acid);
  /* Set foreground text or icon color. */
  color: #080808;
}

.secondary {
  /* Control border color for this component. */
  border-color: var(--line);
  /* Set foreground text or icon color. */
  color: var(--ink);
}

button:disabled {
  /* Dim inactive controls. */
  opacity: 0.5;
  /* Show the interaction pointer. */
  cursor: wait;
}

.archive-link {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Distribute children along the main axis. */
  justify-content: space-between;
  /* Separate grid or flex children. */
  gap: 10px;
  /* Set foreground text or icon color. */
  color: var(--acid);
  /* Set text weight. */
  font-weight: bold;
  /* Control margin top for this component. */
  margin-top: 20px;
}

/* Eye doodle is retained from the approved version; all decorative stars are absent. */

.eye-flair {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set the component width. */
  width: 90px;
  /* Set the component height. */
  height: 50px;
  /* Set space outside this component. */
  margin: 0 0 10px auto;
  /* Set SVG interior color. */
  fill: none;
  /* Set SVG line color. */
  stroke: var(--paper);
  /* Control stroke width for this component. */
  stroke-width: 2;
}

/* Sound's compact horizontal cassette/player treatment is borrowed from Street Press. */

.sound-post {
  /* Set the outline of this component. */
  border: 0;
  /* Set space outside this component. */
  margin: 0 0 28px;
  /* Set space inside this component. */
  padding: 0;
}

.sound-post h2.paper-title {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 17px/1.45 "Courier New",
    monospace;
  /* Set spacing between characters. */
  letter-spacing: -0.6px;
  /* Set foreground text or icon color. */
  color: #080808;
  /* Set the surface fill. */
  background: var(--paper);
  /* Set space inside this component. */
  padding: 12px 8px;
  /* Trim the edge into the torn-paper shape. */
  clip-path: polygon(
    0 8%,
    8% 0,
    18% 6%,
    29% 0,
    41% 5%,
    53% 0,
    67% 7%,
    80% 0,
    93% 6%,
    100% 0,
    99% 95%,
    87% 100%,
    70% 94%,
    55% 100%,
    42% 94%,
    25% 100%,
    11% 94%,
    0 100%
  );
  /* Set space outside this component. */
  margin: 18px 0 28px;
}

.paper-title a:hover {
  /* Set foreground text or icon color. */
  color: #383838;
}

.recording-row {
  /* Choose how the component participates in layout. */
  display: grid;
  /* Size and arrange the grid columns. */
  grid-template-columns: 0.9fr 1.1fr;
  /* Separate grid or flex children. */
  gap: 16px;
  /* Align children on the cross axis. */
  align-items: start;
}

.recording-row .cover {
  /* Set space outside this component. */
  margin: 0;
}

.recording-row .cover img {
  /* Keep the displayed cover shape consistent. */
  aspect-ratio: 1;
  /* Control how an image fits its allotted box. */
  object-fit: cover;
}

.recording-info {
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 0;
}

.recording-info .post-body {
  /* Set text size. */
  font-size: 12px;
  /* Set spacing between lines. */
  line-height: 1.7;
}

.audio-player {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Align children on the cross axis. */
  align-items: center;
  /* Allow flex children to move to a new row. */
  flex-wrap: wrap;
  /* Separate grid or flex children. */
  gap: 10px;
  /* Set space outside this component. */
  margin: 10px 0 18px;
}

.audio-toggle {
  /* Set the outline of this component. */
  border: 0;
  /* Round the recording play button. */
  border-radius: 50%;
  /* Set the surface fill. */
  background: var(--paper);
  /* Set foreground text or icon color. */
  color: #080808;
  /* Set the component width. */
  width: 42px;
  /* Set the component height. */
  height: 42px;
  /* Set space inside this component. */
  padding: 0;
  /* Set typeface, size, weight and line spacing together. */
  font: 20px Arial;
  /* Control flex shrink for this component. */
  flex-shrink: 0;
}

.audio-progress {
  /* Allocate available flex-row space. */
  flex: 1;
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 70px;
}

.audio-progress input {
  /* Set the component width. */
  width: 100%;
  /* Color native checkboxes and seek sliders. */
  accent-color: var(--acid);
  /* Set space inside this component. */
  padding: 0;
  /* Set space outside this component. */
  margin: 0;
  /* Control min height for this component. */
  min-height: 24px;
}

.audio-time {
  /* Set text size. */
  font-size: 10px;
  /* Set foreground text or icon color. */
  color: var(--muted);
  /* Choose how the component participates in layout. */
  display: block;
  /* Align text within its box. */
  text-align: right;
}

.audio-error {
  /* Set text size. */
  font-size: 12px;
  /* Set the component width. */
  width: 100%;
}

.post audio {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set the component width. */
  width: 100%;
  /* Set space outside this component. */
  margin: 18px 0;
}

/* Official Spotify lives inside its own framed sidebar; empty-state text is editable. */

.spotify-sidebar {
  /* Set space inside this component. */
  padding: 18px;
  /* Set the outline of this component. */
  border: 1px solid var(--line);
  /* Set the surface fill. */
  background: #121212;
  /* Control margin top for this component. */
  margin-top: 28px;
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 0;
}

.spotify-sidebar h3 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 24px PressCondensed,
    sans-serif;
  /* Set space outside this component. */
  margin: 4px 0 20px;
}

.spotify-sidebar iframe,
.playlist-preview iframe {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set the component width. */
  width: 100%;
  /* Set the component height. */
  height: 352px;
  /* Set the outline of this component. */
  border: 0;
}

.playlist-empty {
  /* Set space inside this component. */
  padding: 20px 0;
}

.playlist-empty h3 {
  /* Set foreground text or icon color. */
  color: var(--acid);
  /* Set text size. */
  font-size: 30px;
}

/* Category archives and full entries use a spacious reading column and a Spotify rail. */

.layout {
  /* Choose how the component participates in layout. */
  display: grid;
  /* Size and arrange the grid columns. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
  /* Separate grid or flex children. */
  gap: 45px;
}

.layout > div,
.layout > section {
  /* Allow grid and flex children to shrink without overflow. */
  min-width: 0;
}

.sectionhead {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Align children on the cross axis. */
  align-items: center;
  /* Distribute children along the main axis. */
  justify-content: space-between;
  /* Separate grid or flex children. */
  gap: 20px;
  /* Control margin bottom for this component. */
  margin-bottom: 28px;
}

h1 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 45px/1.1 PressCondensed,
    sans-serif;
  /* Set space outside this component. */
  margin: 0 0 20px;
}

h2 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 28px/1.2 Arial,
    sans-serif;
}

.layout .post {
  /* Limit the component width. */
  max-width: 950px;
}

.layout .cover img {
  /* Limit the component height. */
  max-height: 700px;
  /* Control how an image fits its allotted box. */
  object-fit: contain;
}

.full-post .cover {
  /* Trim the edge into the torn-paper shape. */
  clip-path: none;
}

.full-post h2 {
  /* Set text size. */
  font-size: clamp(30px, 5vw, 64px);
}

.layout .spotify-sidebar {
  /* Control align self for this component. */
  align-self: start;
}

.empty {
  /* Set space inside this component. */
  padding: 28px;
  /* Set the outline of this component. */
  border: 1px dashed var(--line);
}

.empty h2 {
  /* Set text size. */
  font-size: 26px;
}

footer {
  /* Limit the component width. */
  max-width: 1800px;
  /* Set space inside this component. */
  padding: 26px 28px;
  /* Add a rule above this component. */
  border-top: 1px solid var(--line);
  /* Set space outside this component. */
  margin: auto;
  /* Choose how the component participates in layout. */
  display: flex;
  /* Distribute children along the main axis. */
  justify-content: space-between;
  /* Separate grid or flex children. */
  gap: 15px;
  /* Allow flex children to move to a new row. */
  flex-wrap: wrap;
  /* Set foreground text or icon color. */
  color: var(--muted);
  /* Set text size. */
  font-size: 12px;
}

/* Studio forms use accessible native inputs. Controls are intentionally clean even though
   public artwork and headline accents have a photocopied feel. */

.studio {
  /* Limit the component width. */
  max-width: 1050px;
  /* Set space outside this component. */
  margin: 10px auto;
}

.studio > p {
  /* Set foreground text or icon color. */
  color: var(--muted);
}

.studio form {
  /* Set space inside this component. */
  padding: 24px;
  /* Set the surface fill. */
  background: #111;
  /* Set the outline of this component. */
  border: 1px solid var(--line);
  /* Set space outside this component. */
  margin: 24px 0;
}

.studio label {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set text weight. */
  font-weight: bold;
  /* Set space outside this component. */
  margin: 18px 0;
}

input,
textarea,
select {
  /* Choose how the component participates in layout. */
  display: block;
  /* Set the component width. */
  width: 100%;
  /* Set the surface fill. */
  background: #080808;
  /* Set foreground text or icon color. */
  color: var(--paper);
  /* Set the outline of this component. */
  border: 1px solid #666;
  /* Set space inside this component. */
  padding: 12px;
  /* Set typeface, size, weight and line spacing together. */
  font:
    16px/1.5 "Courier New",
    monospace;
  /* Control margin top for this component. */
  margin-top: 8px;
}

textarea {
  /* Control min height for this component. */
  min-height: 220px;
  /* Allow resizing the writing area. */
  resize: vertical;
}

input[type="checkbox"] {
  /* Choose how the component participates in layout. */
  display: inline-block;
  /* Set the component width. */
  width: 20px;
  /* Set the component height. */
  height: 20px;
  /* Set space outside this component. */
  margin: 0 0 0 10px;
  /* Control vertical align for this component. */
  vertical-align: middle;
  /* Color native checkboxes and seek sliders. */
  accent-color: var(--acid);
}

.hint {
  /* Set typeface, size, weight and line spacing together. */
  font:
    13px/1.6 "Courier New",
    monospace;
  /* Set foreground text or icon color. */
  color: var(--muted);
}

.buttons {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Separate grid or flex children. */
  gap: 10px;
  /* Allow flex children to move to a new row. */
  flex-wrap: wrap;
}

.listrow {
  /* Choose how the component participates in layout. */
  display: flex;
  /* Distribute children along the main axis. */
  justify-content: space-between;
  /* Align children on the cross axis. */
  align-items: center;
  /* Separate grid or flex children. */
  gap: 20px;
  /* Add a rule below this component. */
  border-bottom: 1px solid var(--line);
  /* Set space inside this component. */
  padding: 18px 0;
}

.copy-fields,
.labels-grid {
  /* Choose how the component participates in layout. */
  display: grid;
  /* Size and arrange the grid columns. */
  grid-template-columns: 1fr 1fr;
  /* Separate grid or flex children. */
  gap: 18px;
}

.copy-fields label {
  /* Set space outside this component. */
  margin: 0;
}

.copy-fields textarea {
  /* Control min height for this component. */
  min-height: 95px;
}

.studio-settings {
  /* Control margin top for this component. */
  margin-top: 40px;
}

.studio-settings details {
  /* Add a rule above this component. */
  border-top: 1px solid var(--line);
}

.studio-settings summary {
  /* Set typeface, size, weight and line spacing together. */
  font:
    700 23px PressCondensed,
    sans-serif;
  /* Show the interaction pointer. */
  cursor: pointer;
  /* Set space inside this component. */
  padding: 20px 0;
  /* Set foreground text or icon color. */
  color: var(--acid);
}

.studio-settings form {
  /* Set space outside this component. */
  margin: 0 0 24px;
}

.previewbox {
  /* Set the outline of this component. */
  border: 1px solid var(--acid);
  /* Set space inside this component. */
  padding: 24px;
  /* Set space outside this component. */
  margin: 24px 0;
}

.demo-label {
  /* Choose how the component participates in layout. */
  display: inline-block;
  /* Set the surface fill. */
  background: var(--acid);
  /* Set foreground text or icon color. */
  color: #080808;
  /* Set space inside this component. */
  padding: 3px 7px;
  /* Set text size. */
  font-size: 11px;
}

/* Tablet keeps three columns where practical; smaller devices stack in reading order. */

@media (max-width: 1150px) {
  .site-header {
    /* Separate grid or flex children. */
    gap: 20px;
  }

  .masthead {
    /* Set text size. */
    font-size: 64px;
  }

  .topline {
    /* Set the initial width within the flex row. */
    flex-basis: 100%;
    /* Distribute children along the main axis. */
    justify-content: space-between;
  }

  nav {
    /* Separate grid or flex children. */
    gap: 22px;
  }

  .recording-row {
    /* Size and arrange the grid columns. */
    grid-template-columns: 1fr;
  }

  .recording-row .cover {
    /* Limit the component width. */
    max-width: 180px;
  }

  .post h2 {
    /* Set text size. */
    font-size: 38px;
  }
}

@media (max-width: 760px) {
  .site-header {
    /* Set space inside this component. */
    padding: 20px 16px;
  }

  .masthead {
    /* Set text size. */
    font-size: clamp(34px, 8.5vw, 62px);
    /* Set spacing between characters. */
    letter-spacing: -2px;
  }

  .topline {
    /* Allow flex children to move to a new row. */
    flex-wrap: wrap;
    /* Separate grid or flex children. */
    gap: 18px;
  }

  nav {
    /* Separate grid or flex children. */
    gap: 18px;
    /* Set text size. */
    font-size: 21px;
  }

  .home-link {
    /* Set text size. */
    font-size: 18px;
  }

  .home-grid {
    /* Size and arrange the grid columns. */
    grid-template-columns: 1fr;
  }

  .home-column,
  .home-column:first-child,
  .home-column:last-child {
    /* Set space inside this component. */
    padding: 24px 0;
  }

  .home-column + .home-column {
    /* Separate columns with a left rule. */
    border-left: 0;
    /* Add a rule above this component. */
    border-top: 1px solid var(--line);
  }

  .home-column.blog .cover img,
  .home-column.art .cover img {
    /* Keep the displayed cover shape consistent. */
    aspect-ratio: auto;
    /* Limit the component height. */
    max-height: 700px;
    /* Control how an image fits its allotted box. */
    object-fit: contain;
  }

  .post h2 {
    /* Set text size. */
    font-size: 42px;
  }

  .recording-row {
    /* Size and arrange the grid columns. */
    grid-template-columns: 0.85fr 1.15fr;
  }

  .recording-row .cover {
    /* Limit the component width. */
    max-width: none;
  }

  .layout {
    /* Size and arrange the grid columns. */
    grid-template-columns: 1fr;
    /* Separate grid or flex children. */
    gap: 20px;
  }

  main {
    /* Set space inside this component. */
    padding: 8px 16px 30px;
  }

  .copy-fields,
  .labels-grid {
    /* Size and arrange the grid columns. */
    grid-template-columns: 1fr;
  }

  .listrow {
    /* Align children on the cross axis. */
    align-items: start;
    /* Control flex direction for this component. */
    flex-direction: column;
  }

  .studio form {
    /* Set space inside this component. */
    padding: 16px;
  }

  .sectionhead {
    /* Align children on the cross axis. */
    align-items: start;
    /* Allow flex children to move to a new row. */
    flex-wrap: wrap;
  }

  .ticker-track span {
    /* Set text size. */
    font-size: 21px;
  }

  .ticker-pause {
    /* Set space outside this component. */
    margin: 6px 10px;
  }

  .post-body {
    /* Set text size. */
    font-size: 14px;
  }
}

/* Motion-sensitive visitors get one static announcement; content remains readable. */

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    /* Move the repeating announcement strip. */
    animation: none;
    /* Set the component width. */
    width: auto;
  }

  .ticker-track span {
    /* Control wrapping and retained line breaks. */
    white-space: normal;
    /* Set space inside this component. */
    padding: 12px 16px;
  }

  .ticker-track span[aria-hidden],
  .ticker-pause {
    /* Choose how the component participates in layout. */
    display: none;
  }

  * {
    /* Control scroll behavior for this component. */
    scroll-behavior: auto !important;
  }
}

/* Applies to .post-body: public post layout. */

.post-body {
  /* Set foreground text or icon color. */
  color: #e6e6e6;
  /* Wrap otherwise unbreakable text safely. */
  overflow-wrap: anywhere;
}

/* Applies to .markdown: formatted post content. */

.markdown {
  /* Set spacing between lines. */
  line-height: 1.7;
}

/* Applies to .markdown>*:first-child: formatted post content. */

.markdown > *:first-child {
  /* Control margin top for this component. */
  margin-top: 0;
}

/* Applies to .markdown h1: formatted post content. */

.markdown h1 {
  /* Set typeface, size, weight and line spacing together. */
  font:
    36px/1.2 Arial,
    sans-serif;
}

/* Applies to .markdown h2: formatted post content. */

.markdown h2 {
  /* Set text size. */
  font-size: 30px;
  /* Set spacing between characters. */
  letter-spacing: 0;
}

/* Applies to .markdown h3: formatted post content. */

.markdown h3 {
  /* Set text size. */
  font-size: 24px;
}

/* Applies to .markdown h1,.markdown h2,.markdown h3,.markdown h4: formatted post content. */

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  /* Set space outside this component. */
  margin: 1.2em 0 0.5em;
}

/* Applies to .markdown p: formatted post content. */

.markdown p {
  /* Limit the component width. */
  max-width: none;
  /* Set space outside this component. */
  margin: 1em 0;
}

/* Applies to .markdown a: formatted post content. */

.markdown a {
  /* Set foreground text or icon color. */
  color: var(--acid);
  /* Set link decoration. */
  text-decoration: underline;
  /* Control text underline offset for this component. */
  text-underline-offset: 3px;
}

/* Applies to .markdown ul,.markdown ol: formatted post content. */

.markdown ul,
.markdown ol {
  /* Control padding left for this component. */
  padding-left: 1.6em;
}

/* Applies to .markdown blockquote: formatted post content. */

.markdown blockquote {
  /* Set space outside this component. */
  margin: 20px 0;
  /* Separate columns with a left rule. */
  border-left: 4px solid var(--red);
  /* Set space inside this component. */
  padding: 8px 20px;
  /* Set the surface fill. */
  background: #151515;
}

/* Applies to .markdown pre: formatted post content. */

.markdown pre {
  /* Control overflow x for this component. */
  overflow-x: auto;
  /* Set space inside this component. */
  padding: 18px;
  /* Set the surface fill. */
  background: #191919;
  /* Set the outline of this component. */
  border: 1px solid #444;
  /* Control wrapping and retained line breaks. */
  white-space: pre;
}

/* Applies to .markdown code: formatted post content. */

.markdown code {
  /* Set typeface, size, weight and line spacing together. */
  font: 15px/1.6 monospace;
  /* Set the surface fill. */
  background: #222;
  /* Set space inside this component. */
  padding: 2px 5px;
}

/* Applies to .markdown pre code: formatted post content. */

.markdown pre code {
  /* Set space inside this component. */
  padding: 0;
  /* Set the surface fill. */
  background: none;
}

/* Applies to .markdown table: formatted post content. */

.markdown table {
  /* Choose how the component participates in layout. */
  display: block;
  /* Limit the component width. */
  max-width: 100%;
  /* Control overflow x for this component. */
  overflow-x: auto;
  /* Control border collapse for this component. */
  border-collapse: collapse;
  /* Set space outside this component. */
  margin: 20px 0;
}

/* Applies to .markdown th,.markdown td: formatted post content. */

.markdown th,
.markdown td {
  /* Set space inside this component. */
  padding: 10px 14px;
  /* Set the outline of this component. */
  border: 1px solid #555;
  /* Align text within its box. */
  text-align: left;
}

/* Applies to .markdown img: formatted post content. */

.markdown img {
  /* Limit the component width. */
  max-width: 100%;
  /* Set the component height. */
  height: auto;
}

/* Applies to .markdown hr: formatted post content. */

.markdown hr {
  /* Set the outline of this component. */
  border: 0;
  /* Add a rule above this component. */
  border-top: 1px solid #666;
  /* Set space outside this component. */
  margin: 24px 0;
}

/* Applies to .markdown-help: formatted post content. */

.markdown-help {
  /* Set space inside this component. */
  padding: 16px;
  /* Set the outline of this component. */
  border: 1px solid #555;
  /* Set the surface fill. */
  background: #0a0a0a;
}

/* Applies to .markdown-help summary: formatted post content. */

.markdown-help summary {
  /* Show the interaction pointer. */
  cursor: pointer;
  /* Set text weight. */
  font-weight: bold;
}

/* Applies to .markdown-help pre: formatted post content. */

.markdown-help pre {
  /* Control overflow x for this component. */
  overflow-x: auto;
  /* Set typeface, size, weight and line spacing together. */
  font: 14px/1.6 monospace;
}

/* Applies to .markdown-help p: formatted post content. */

.markdown-help p {
  /* Set text size. */
  font-size: 14px;
}

/* Uploaded logos and site graphics keep their proportions; hidden live brand text still
   supplies the editable name used by browser titles and the logo image description. */

.has-logo .brand-first,
.has-logo .brand-second,
.has-logo i {
  /* Choose how the component participates in layout. */
  display: none;
}

.logo-image {
  /* Choose how the component participates in layout. */
  display: block;
  /* Limit the component width. */
  max-width: 100%;
  /* Limit the component height. */
  max-height: 110px;
  /* Set the component width. */
  width: auto;
}

.eye-flair {
  /* Control how an image fits its allotted box. */
  object-fit: contain;
}

.setting-thumbnail {
  /* Choose how the component participates in layout. */
  display: block;
  /* Limit the component width. */
  max-width: 160px;
  /* Limit the component height. */
  max-height: 120px;
  /* Control how an image fits its allotted box. */
  object-fit: contain;
  /* Set space outside this component. */
  margin: 10px 0;
}

/* Post videos fit each existing column without affecting the approved page composition.
   Uploaded videos preserve their own aspect ratio; provider frames use a 16:9 viewport. */
.post-video {
  display: block; /* Place media on its own line within the post. */
  width: 100%; /* Constrain playback to the current reading column. */
  max-width: 100%; /* Prevent video overflow on narrow devices. */
  height: auto; /* Keep uploaded video proportions. */
  background: #000; /* Letterbox unused space with the site black. */
  margin: 20px 0; /* Separate video from surrounding paragraphs. */
  border: 1px solid var(--line); /* Match existing component outlines. */
}
.video-embed {
  aspect-ratio: 16 / 9; /* Size the embedded provider player without fixed pixel dimensions. */
  height: auto; /* Let the aspect ratio determine the iframe height. */
}
/* Custom Wear shop: use the established black/red palette and existing type.
 * Grid cards collapse to a single column; cart controls remain touch accessible. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
  margin: 1.5rem 0;
}
.shop-product {
  padding: 1rem;
  border: 1px solid #555;
  background: #111;
  min-width: 0;
}
.shop-product > img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #080808;
}
.shop-product h2 {
  margin-top: 1rem;
  overflow-wrap: anywhere;
}
.shop-product form {
  display: grid;
  gap: 0.7rem;
}
.wear-shop label,
.shop-admin label {
  display: grid;
  gap: 0.4rem;
  margin: 0.7rem 0;
}
.wear-shop input,
.wear-shop select,
.shop-admin input,
.shop-admin textarea {
  width: 100%;
  min-width: 0;
  background: #090909;
  color: #fff;
  border: 1px solid #777;
  padding: 0.7rem;
  font: inherit;
}
.shop-test {
  border: 2px solid #ff3838;
  padding: 0.8rem;
  background: #210909;
  color: #fff;
}
.shop-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 1rem;
}
.shop-cart-line {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #555;
}
.shop-cart-line small {
  display: block;
  font-weight: normal;
}
.shop-admin-body {
  padding: 1rem;
}
.shop-admin-body > section,
.shop-admin-body > form {
  margin-bottom: 2rem;
}
.shop-admin details {
  padding: 0.7rem 0;
  border-bottom: 1px solid #555;
}
.shop-admin .shop-checkbox {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.shop-admin .shop-checkbox input {
  width: auto;
}
.shop-admin code {
  overflow-wrap: anywhere;
}
@media (max-width: 650px) {
  .shop-grid,
  .shop-address-grid {
    grid-template-columns: 1fr;
  }
  .shop-cart-line {
    grid-template-columns: 1fr 1fr;
  }
  .shop-cart-line strong {
    grid-column: 1/-1;
  }
  .wear-shop .sectionhead {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}
/* Editable masthead words may be longer than the defaults. Permit wrapping on
 * small screens so a custom title cannot push the shop or posts off screen. */
@media (max-width: 760px) {
  .masthead {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}