/* =========================================================
   Regine Z. — Social Media, Automated
   Editorial layout. Plain CSS, no utility framework.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* paper + ink */
  --paper:        #F7F4EF;
  --paper-2:      #EFE9DF;
  --paper-3:      #E6DED1;
  --ink:          #1B1917;
  --ink-soft:     #5C5349;
  --ink-faint:    #8B8178;
  --rule:         rgba(27, 25, 23, 0.13);
  --rule-strong:  rgba(27, 25, 23, 0.26);

  /* accents */
  --gold:         #A0845C;
  --gold-deep:    #7A6137;
  --espresso:     #2A2420;
  --live:         #4A6B52;

  /* type */
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --sans:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid scale */
  --t-hero:    clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --t-section: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --t-quote:   clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  --t-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);

  /* rhythm */
  --bay:   clamp(4.5rem, 3rem + 7vw, 10rem);   /* section padding */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --measure: 1260px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, blockquote, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---------- shared pieces ---------- */
.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 28, "WONK" 1;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--gold-deep);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.eyebrow--light { color: rgba(247, 244, 239, 0.62); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
}

.microcopy {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }

.btn--sm { padding: 0.625rem 1.05rem; font-size: 0.8125rem; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--light:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

.icon-wa { width: 1.0625em; height: 1.0625em; fill: currentColor; flex: none; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 239, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.875rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.wordmark img { width: 38px; height: 38px; border-radius: 2px; }
.wordmark__text { display: flex; flex-direction: column; }

.wordmark__name {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 500;
  font-variation-settings: "SOFT" 24, "WONK" 1;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.wordmark__tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-faint);
}

.masthead__nav { display: flex; gap: 1.75rem; }
.masthead__nav a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--bay); }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.hero__copy { grid-column: 1 / span 6; }
.hero__cal  { grid-column: 7 / span 6; }
.hero__title {
  font-size: var(--t-hero);
  margin-block: 1.25rem 1.75rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 2.25rem 1.25rem;
}


/* ---------- hero calendar ----------
   28 cells = four clean weeks. Not a real month: no ragged edges and no
   month name to go stale. Cells fill in on load, which is the whole point —
   you watch a month of content populate itself. */
.hero__cal { min-width: 0; }

.cal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 0.875rem;
}

.cal__label {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cal__sub {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(3px, 0.5vw, 6px);
  margin-bottom: clamp(3px, 0.5vw, 6px);
}
.cal__dow span {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--ink-faint);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(3px, 0.5vw, 6px);
}

.day {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--paper-3);
  background-size: cover;
  background-position: center;
}

/* hairline inside the photo cells so they read as framed posts */
.day--post { box-shadow: inset 0 0 0 1px rgba(27, 25, 23, 0.1); }

.day--empty {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

/* A post made and scheduled, but not yet approved. This has to read clearly as
   "a slot is reserved here", not as an empty day — at 75px a 1px hairline on
   cream was invisible and the lower half of the calendar looked broken. */
.day--pending {
  background-color: rgba(160, 132, 92, 0.2);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.day--pending::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-deep);
  opacity: 0.6;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.3rem;
  vertical-align: -1px;
}
.key--post    { background: var(--ink); }
.key--pending { background: rgba(160, 132, 92, 0.2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.key--empty   { box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* ---------- hero approval queue ---------- */
.queue {
  margin-top: 1.125rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--rule-strong);
  background: rgba(255, 255, 255, 0.55);
}
.queue.is-flash { border-color: var(--gold); }

/* the whole month approved — a visible resting state, not just an empty card */
.queue.is-done {
  border-color: var(--gold);
  background: rgba(160, 132, 92, 0.09);
}

.queue__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.queue__count strong { color: var(--gold-deep); font-weight: 500; }

/* while the queue is approving on its own, pulse the counter so it is
   legible as activity rather than looking like a stuck number */
.queue.is-auto .queue__count strong { animation: blink 1.2s ease-in-out infinite; }

.queue__demo {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.queue__body {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0.875rem 0 1rem;
}

.queue__thumb {
  flex: none;
  width: 46px;
  height: 46px;
  background-color: var(--paper-3);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(27, 25, 23, 0.1);
}

.queue__meta { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }

.queue__caption {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.queue__where {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.queue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
/* `display: flex` beats the UA's `[hidden] { display: none }`, so say it here
   or el.hidden = true silently does nothing to this element. */
.queue__actions[hidden] { display: none; }

.queue__link {
  padding: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.queue__link:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.queue__link--all { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

.queue__done { font-size: 0.875rem; color: var(--ink-soft); }
.queue__done .queue__link { margin-left: 0.35rem; }

/* the thumbnail's flight from the card into its date cell */
.ghost {
  position: fixed;
  z-index: 80;
  background-size: cover;
  background-position: center;
  transform-origin: top left;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.day[data-t="01"] { background-image: url("../images/thumbs/t01.jpg"); }
.day[data-t="02"] { background-image: url("../images/thumbs/t02.jpg"); }
.day[data-t="03"] { background-image: url("../images/thumbs/t03.jpg"); }
.day[data-t="04"] { background-image: url("../images/thumbs/t04.jpg"); }
.day[data-t="05"] { background-image: url("../images/thumbs/t05.jpg"); }
.day[data-t="06"] { background-image: url("../images/thumbs/t06.jpg"); }
.day[data-t="07"] { background-image: url("../images/thumbs/t07.jpg"); }
.day[data-t="08"] { background-image: url("../images/thumbs/t08.jpg"); }
.day[data-t="09"] { background-image: url("../images/thumbs/t09.jpg"); }
.day[data-t="10"] { background-image: url("../images/thumbs/t10.jpg"); }
.day[data-t="11"] { background-image: url("../images/thumbs/t11.jpg"); }
.day[data-t="12"] { background-image: url("../images/thumbs/t12.jpg"); }
.day[data-t="13"] { background-image: url("../images/thumbs/t13.jpg"); }
.day[data-t="14"] { background-image: url("../images/thumbs/t14.jpg"); }
.day[data-t="15"] { background-image: url("../images/thumbs/t15.jpg"); }
.day[data-t="16"] { background-image: url("../images/thumbs/t16.jpg"); }
.day[data-t="17"] { background-image: url("../images/thumbs/t17.jpg"); }
.day[data-t="18"] { background-image: url("../images/thumbs/t18.jpg"); }
.day[data-t="19"] { background-image: url("../images/thumbs/t19.jpg"); }
.day[data-t="20"] { background-image: url("../images/thumbs/t20.jpg"); }

/* ---------- section heads ---------- */
.section-head { max-width: 46rem; }
.section-head__title {
  font-size: var(--t-section);
  margin-block: 1rem 0;
}
.section-head__lede {
  margin-top: 1.125rem;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* ---------- pipeline ---------- */
.pipeline {
  padding-block: var(--bay);
  background:
    radial-gradient(circle, rgba(27,25,23,0.16) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--paper-2);
  border-block: 1px solid var(--rule);
  scroll-margin-top: 72px;
}

.flow { display: none; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.flow__svg { width: 100%; height: auto; overflow: visible; }

.flow__rail {
  stroke: var(--rule-strong);
  stroke-width: 1.25;
}

.flow__loop {
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.6;
}

.flow__pulse {
  stroke: var(--gold-deep);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
}

.flow__node {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.flow__node--edge { fill: var(--ink); stroke: var(--ink); }
.flow__node--you  { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 2; }

.flow__key {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--ink);
}
.flow__key--you { font-size: 11px; fill: var(--gold-deep); }
.flow__key--z   { font-size: 17px; }

.flow__name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  fill: var(--ink);
}

.flow__note {
  font-family: var(--sans);
  font-size: 13.5px;
  fill: var(--ink-soft);
}
.flow__note--out { text-anchor: start; font-family: var(--mono); font-size: 10.5px; fill: var(--ink-faint); }

.flow__out {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  fill: var(--ink);
}

.flow__loop-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--gold-deep);
}

/* mobile / accessible stage list */
.stages {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.stages__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  grid-template-areas: "key name" ".   text";
  gap: 0.25rem 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.stages__key {
  grid-area: key;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 0.3rem;
}

.stages__name {
  grid-area: name;
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.stages__item p {
  grid-area: text;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  max-width: 46ch;
}

.stages__item--you {
  background: linear-gradient(90deg, rgba(160,132,92,0.1), transparent 70%);
}
.stages__item--you .stages__key { color: var(--gold-deep); font-weight: 500; }

/* ---------- what I handle ---------- */
.handle {
  padding-block: var(--bay);
  scroll-margin-top: 72px;
}

.handle__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.handle__head { grid-column: 1 / span 7; }
.bento        { grid-column: 1 / -1; margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* ---------- what I handle: bento ----------
   Tiles are dark by default and become photographic the moment a
   matching file lands in images/ — a CSS background 404s silently,
   so there is never a broken-image state. Expected filenames are in
   the .tile--* rules below. */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(8rem, 11vw, 11.5rem);
  gap: clamp(0.5rem, 0.25rem + 0.8vw, 0.875rem);
}

/* Explicit placement: two 2x2 heroes interlocked with four 1x1 tiles. */
.tile--strategy   { grid-column: 1 / 3; grid-row: 1 / 3; }
.tile--production { grid-column: 3 / 5; grid-row: 2 / 4; }
.tile--copy       { grid-column: 3 / 4; grid-row: 1 / 2; }
.tile--scheduling { grid-column: 4 / 5; grid-row: 1 / 2; }
.tile--publishing { grid-column: 1 / 2; grid-row: 3 / 4; }
.tile--reporting  { grid-column: 2 / 3; grid-row: 3 / 4; }

.tile--strategy   { background-image: url("../images/tile-01-strategy.jpg"); }
.tile--production { background-image: url("../images/tile-02-production.jpg"); }
.tile--copy       { background-image: url("../images/tile-03-copy.jpg"); }
.tile--scheduling { background-image: url("../images/tile-04-scheduling.jpg"); }
.tile--publishing { background-image: url("../images/tile-05-publishing.jpg"); }
.tile--reporting  { background-image: url("../images/tile-06-reporting.jpg"); }

.tile {
  position: relative;
  overflow: hidden;
  background-color: var(--espresso);
  background-size: cover;
  background-position: center;
  color: var(--paper);
}

/* scrim keeps text legible once photography is dropped in */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 15, 0.9) 0%, rgba(20, 17, 15, 0.45) 45%, rgba(20, 17, 15, 0.15) 100%);
  transition: background 0.4s ease;
}
.tile:hover::after { background: linear-gradient(to top, rgba(20, 17, 15, 0.94) 0%, rgba(20, 17, 15, 0.7) 60%, rgba(20, 17, 15, 0.4) 100%); }

.tile__face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 0.6rem + 0.9vw, 1.5rem);
}

.tile__num {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}

.tile__text { min-width: 0; }

.tile__title {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.4375rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--paper);
}
.tile--hero .tile__title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); }

/* hover reveal — desktop enhancement only, see the (hover: none) block */
.tile__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.34s ease, opacity 0.28s ease;
}
.tile__detail p {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(247, 244, 239, 0.82);
  max-width: 38ch;
}
.tile:hover .tile__detail,
.tile:focus-within .tile__detail {
  grid-template-rows: 1fr;
  opacity: 1;
}
.tile__detail p { padding-top: 0.5rem; }

.hint { color: var(--ink-faint); }

/* ---------- manifesto ---------- */
.manifesto {
  padding-block: var(--bay);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.manifesto__figure { grid-column: 1 / span 5; }
.manifesto__figure img {
  width: 100%;
  /* 3:4 matches the source art, so the image is never cropped */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.92);
}

.manifesto__copy { grid-column: 7 / span 6; }

.manifesto__quote {
  font-size: var(--t-quote);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  line-height: 1.22;
  color: var(--ink);
}

.claims {
  margin-top: 2.25rem;
  display: grid;
  gap: 0;
}
.claims li {
  padding-block: 1.125rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 50ch;
}
.claims li:last-child { border-bottom: 1px solid var(--rule); }
.claims strong { color: var(--ink); font-weight: 600; }

/* ---------- output: profile feed ---------- */
.frames {
  padding-block: var(--bay);
  scroll-margin-top: 72px;
}

/* Instagram-style profile feed, in the site's own palette
   rather than a literal clone of the app. */
.feed {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  max-width: 44rem;
  margin-inline: auto;
}

.feed__bar {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  padding-bottom: 1.75rem;
}

.feed__avatar {
  width: clamp(64px, 10vw, 84px);
  height: clamp(64px, 10vw, 84px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
  padding: 3px;
  background: var(--paper);
}

.feed__id { min-width: 0; }

.feed__handle {
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.feed__bio {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.feed__tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 0.5rem + 4vw, 3.5rem);
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.875rem;
  margin-bottom: 1.25rem;
}

.feed__tabs span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.875rem;
  margin-bottom: -0.9375rem;
  border-bottom: 1px solid transparent;
}
.feed__tabs .is-active { color: var(--ink); border-bottom-color: var(--ink); }

.feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.post {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}

.post img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.92);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.post:hover img { filter: saturate(1.04); transform: scale(1.03); }

.post__kind {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.125rem;
  height: 1.125rem;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* ---------- faq ---------- */
.faq {
  padding-block: var(--bay);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  scroll-margin-top: 72px;
}

.faq__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.faq__head { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / span 7; }

.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }

.qa__h { margin: 0; font-size: inherit; font-weight: inherit; }

.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.375rem;
  text-align: left;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.qa__q:hover { color: var(--gold-deep); }

.qa__mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.4rem;
}
.qa__mark::before,
.qa__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--gold-deep);
}
.qa__mark::before { width: 14px; height: 1.5px; }
.qa__mark::after  { width: 1.5px; height: 14px; transition: transform 0.28s ease, opacity 0.28s ease; }

.qa.is-open .qa__mark::after { transform: scaleY(0); opacity: 0; }

.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }

.qa__a-inner { overflow: hidden; }
.qa__a-inner p {
  padding-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  max-width: 54ch;
}

/* ---------- closing ---------- */
.closing {
  padding-block: var(--bay);
  background: var(--espresso);
  color: var(--paper);
  text-align: center;
}

.closing__inner { max-width: 44rem; margin-inline: auto; }

.closing__title {
  font-size: var(--t-section);
  margin-block: 1.125rem 1.375rem;
  color: var(--paper);
}

.closing__lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: rgba(247, 244, 239, 0.68);
  max-width: 40ch;
  margin-inline: auto;
}

.closing .btn { margin-top: 2.25rem; }

.closing__fine {
  margin-top: 1.125rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(247, 244, 239, 0.45);
}

.closing__alt {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 244, 239, 0.14);
  font-size: 0.875rem;
  color: rgba(247, 244, 239, 0.55);
}
.closing__alt a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.4rem;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 244, 239, 0.35);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.closing__alt a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.icon-mail { width: 1.0625em; height: 1.0625em; flex: none; }

/* ---------- colophon ---------- */
.colophon {
  padding-block: 2.25rem;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.colophon__brand { display: flex; flex-direction: column; }

.colophon__handle {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.colophon__handle a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.colophon__handle a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.colophon__handle span { margin-inline: 0.4rem; color: var(--ink-faint); }

.colophon__legal {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Breakpoints
   ========================================================= */

/* show the flow diagram only once its labels have room to stay legible */
@media (min-width: 1024px) {
  .flow { display: block; }

  /* the stage list stays in the DOM for assistive tech */
  .stages {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 1040px) {
  .faq__head { grid-column: 1 / span 5; }
  .faq__list { grid-column: 7 / span 6; }
}

@media (max-width: 880px) {
  .masthead__nav { display: none; }

  /* Collapse the 12-column templates to one column, not just the item spans.
     These grids carry a large `gap`, and a gap applies between every column:
     eleven 40px gaps is 440px of gap on a ~288px content box, which squeezed
     every track to 0px and made any `grid-column: 1 / -1` item 440px wide —
     overflowing the viewport. One column means the gap is only a row gap. */
  .hero__grid,
  .handle__grid,
  .faq__grid,
  .manifesto__grid { grid-template-columns: 1fr; }

  .hero__grid { gap: 2.5rem; }
  .hero__copy { grid-column: 1 / -1; }
  .hero__cal  { grid-column: 1 / -1; }
  .lede { max-width: none; }

  .handle__grid, .faq__grid, .manifesto__grid { gap: 2rem; }
  .handle__head, .bento,
  .faq__head, .faq__list,
  .manifesto__figure, .manifesto__copy { grid-column: 1 / -1; }

  /* two columns, automatic placement: heroes stay double-wide */
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(9rem, 26vw, 13rem); }
  .tile  { grid-column: auto !important; grid-row: auto !important; }
  .tile--hero { grid-column: span 2 !important; }

  .manifesto__figure { max-width: 24rem; }

}

@media (max-width: 560px) {
  .wordmark__tag { display: none; }
  .wordmark img { width: 32px; height: 32px; }

  .hero__actions { gap: 0.625rem; }
  .hero__actions .btn { width: 100%; }

  .stages__item {
    grid-template-columns: 1fr;
    grid-template-areas: "key" "name" "text";
    gap: 0.35rem;
  }
  .stages__key { padding-top: 0; }

  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(9.5rem, auto); }
  .tile, .tile--hero { grid-column: 1 / -1 !important; }

  .feed__bar { gap: 1rem; }
  .feed__grid { gap: 2px; }
  .post__kind { width: 0.875rem; height: 0.875rem; top: 0.3rem; right: 0.3rem; }
  .closing__alt a { margin-left: 0; margin-top: 0.5rem; }

  .qa__q { font-size: 1.0625rem; }

  .colophon__inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Motion
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .flow.is-in .flow__pulse {
    opacity: 1;
    animation: packet 3.4s linear infinite;
  }
  .flow.is-in .flow__pulse--b { animation-delay: 1.15s; }
  .flow.is-in .flow__pulse--c { animation-delay: 1.3s; }
  .flow.is-in .flow__pulse--d { animation-delay: 1.45s; }

  .flow.is-in .flow__node--you { animation: breathe 2.8s ease-in-out infinite; }
}

@keyframes packet {
  0%   { stroke-dashoffset: 100; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes breathe {
  0%, 100% { r: 9; }
  50%      { r: 10.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .post img, .btn { transition: none; }
  .flow__pulse { opacity: 0.9; stroke-dashoffset: 0; stroke-dasharray: none; stroke-width: 1.5; }
  .qa__a { transition: none; }
}

/* =========================================================
   Touch / no-hover: the reveal is a desktop enhancement only,
   so every tile shows its detail permanently instead.
   ========================================================= */
@media (hover: none) {
  .tile__detail { grid-template-rows: 1fr; opacity: 1; }
  /* the detail copy is permanently visible here, so the scrim has to carry
     legible contrast over the whole tile, not just its lower half */
  .tile::after { background: linear-gradient(to top, rgba(20, 17, 15, 0.94) 0%, rgba(20, 17, 15, 0.74) 60%, rgba(20, 17, 15, 0.52) 100%); }
  .hint { display: none; }
}

/* =========================================================
   Hero calendar fill
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .cal__grid .day {
    opacity: 0;
    transform: scale(0.82);
    animation: slot 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .cal__grid .day:nth-child(1) { animation-delay: 0.275s; }
  .cal__grid .day:nth-child(2) { animation-delay: 0.330s; }
  .cal__grid .day:nth-child(3) { animation-delay: 0.385s; }
  .cal__grid .day:nth-child(4) { animation-delay: 0.440s; }
  .cal__grid .day:nth-child(5) { animation-delay: 0.495s; }
  .cal__grid .day:nth-child(6) { animation-delay: 0.550s; }
  .cal__grid .day:nth-child(7) { animation-delay: 0.605s; }
  .cal__grid .day:nth-child(8) { animation-delay: 0.660s; }
  .cal__grid .day:nth-child(9) { animation-delay: 0.715s; }
  .cal__grid .day:nth-child(10) { animation-delay: 0.770s; }
  .cal__grid .day:nth-child(11) { animation-delay: 0.825s; }
  .cal__grid .day:nth-child(12) { animation-delay: 0.880s; }
  .cal__grid .day:nth-child(13) { animation-delay: 0.935s; }
  .cal__grid .day:nth-child(14) { animation-delay: 0.990s; }
  .cal__grid .day:nth-child(15) { animation-delay: 1.045s; }
  .cal__grid .day:nth-child(16) { animation-delay: 1.100s; }
  .cal__grid .day:nth-child(17) { animation-delay: 1.155s; }
  .cal__grid .day:nth-child(18) { animation-delay: 1.210s; }
  .cal__grid .day:nth-child(19) { animation-delay: 1.265s; }
  .cal__grid .day:nth-child(20) { animation-delay: 1.320s; }
  .cal__grid .day:nth-child(21) { animation-delay: 1.375s; }
  .cal__grid .day:nth-child(22) { animation-delay: 1.430s; }
  .cal__grid .day:nth-child(23) { animation-delay: 1.485s; }
  .cal__grid .day:nth-child(24) { animation-delay: 1.540s; }
  .cal__grid .day:nth-child(25) { animation-delay: 1.595s; }
  .cal__grid .day:nth-child(26) { animation-delay: 1.650s; }
  .cal__grid .day:nth-child(27) { animation-delay: 1.705s; }
  .cal__grid .day:nth-child(28) { animation-delay: 1.760s; }
}

@keyframes slot {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pop {
    0%   { transform: scale(0.72); opacity: 0.4; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
}

/* =========================================================
   Section stacking
   Short, visual sections pin and get covered by the next one.
   `top: min(0px, calc(100vh - 100%))` means a section taller than the
   viewport scrolls fully into view BEFORE it pins, so nothing is clipped.
   Static elements paint under positioned ones regardless of DOM order,
   so every section gets an explicit z-index in document order.
   ========================================================= */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero, .manifesto, .closing {
    position: sticky;
    top: min(0px, calc(100vh - 100%));
  }
  .hero      { z-index: 1; background: var(--paper); }
  .pipeline  { position: relative; z-index: 2; }
  .handle    { position: relative; z-index: 3; background: var(--paper); }
  .manifesto { z-index: 4; }
  .frames    { position: relative; z-index: 5; background: var(--paper); }
  .faq       { position: relative; z-index: 6; }
  .closing   { z-index: 7; }
  .colophon  { position: relative; z-index: 8; background: var(--paper); }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes blink { 50% { opacity: 0.35; } }
}