/* ============================================================
   Pomona — the morning brief.
   Orchard's crimson and warm greige, set as a classical page:
   Didot titles, Optima capitals, Roman numerals, a running
   meander between movements, laurel where something is won.
   ============================================================ */

@import url("../tokens.css");

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 0.4vw + 14px, 16.5px);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* Fine tooth over everything, so the flat colour never looks like a swatch. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: 0.18; }
}

.sheet {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) var(--gutter) 0;
}

::selection { background: var(--crimson); color: var(--on-crimson); }

a { color: inherit; }

.rule { height: 1px; background: var(--hair); }
.rule--double { display: none; }

/* ── Masthead ──────────────────────────────────────── */

/* Three columns, with the outer two sharing whatever is left over. The date
   sits in the middle of the page rather than in the middle of the gap between
   a short wordmark and a long row of buttons. */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
}

.masthead__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--classical);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.masthead__wordmark .blossom { width: 22px; height: 22px; flex: none; color: var(--crimson); }

.masthead__nav,
.masthead__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.masthead__wordmark { justify-self: start; }
.masthead__nav { justify-self: center; }
.masthead__actions { justify-self: end; }

/* The date is the only thing here that changes width, so pin it: otherwise the
   arrows shuffle sideways from one day to the next. */
.masthead__day {
  min-width: 12ch;
  text-align: center;
}

.masthead__day,
.masthead__stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.masthead__stamp { padding: 4px 2px; }

.chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(31, 29, 27, 0.05);
  transition: color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.chip:hover:not(:disabled) { color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(31, 29, 27, 0.4); }
.chip:active:not(:disabled) { transform: none; }
.chip:disabled { opacity: 0.35; cursor: default; }

.chip--action { background: var(--crimson); color: var(--on-crimson); }
.chip--action:hover:not(:disabled) { background: var(--crimson-deep); color: var(--on-crimson); }

.chip.is-busy { animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.5; } }

/* ── Overture ──────────────────────────────────────── */

.overture { position: relative; padding-top: clamp(10px, 2vw, 20px); }

.plate {
  /* One height, shared by the finished plate and the one still developing, so
     the two pages line up to the pixel. */
  --plate-h: clamp(210px, 32vh, 330px);
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  box-shadow: var(--shadow);
}

.plate__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--plate-h);

  /* Fill the card, and crop off the top when something has to go. Paintings
     put their subject low: a boat on the water, the foot of a building, the
     shoulders under a face. Cropping from the centre takes exactly that. */
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1s ease, transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.plate__img.is-loaded { opacity: 1; transform: none; }

/* A blossom pressed into the corner of the plate. */
/* Just enough darkness under the title for it to sit on any painting. */
.plate::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
}

.plate__flag {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  width: 26px;
  height: 26px;
  color: var(--on-crimson);
  opacity: 0.85;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Two flexible columns, never an auto one: a long plate caption in an auto
   column takes the whole row and leaves the greeting a word wide. The greeting
   is the thing being read, so it gets the larger share and the caption wraps. */
.overture__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px 28px;
  margin: clamp(12px, 1.6vw, 16px) 0 0;
}

@media (max-width: 760px) {
  .overture__foot { grid-template-columns: 1fr; }
  .plate__caption { text-align: left; }
}

.plate__caption {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: right;
  opacity: 0;
  transition: opacity 0.9s ease 0.35s;
}

.plate__caption.is-visible { opacity: 1; }

/* A running Greek key. Tiled, masked to fade at both ends so it reads as an
   ornament rather than a border. */
.meander {
  height: 26px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  background-image: var(--meander);
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.meander--inverse {
  filter: grayscale(1) brightness(3);
  opacity: 0.35;
  margin: 0 0 20px;
}

/* The title lives on the plate. Standing it below cost a full screen of
   nothing before the first real line of the brief, which is the whole quarrel
   with the old fold: the part you look at first was all ornament. */
.title {
  position: absolute;
  left: clamp(18px, 2.6vw, 32px);
  right: clamp(18px, 2.6vw, 32px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.26em;
  margin: 0;
  line-height: 0.98;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.title__the {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.5rem);
  font-weight: 400;
  color: var(--crimson);
  flex: none;
}

.title__day {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.6vw, 4.2rem);
  color: #fff;
  letter-spacing: -0.012em;
  white-space: nowrap;
  flex: none;
}

.title__rule {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--crimson);
  opacity: 0.28;
  transform: translateY(-0.42em);
  transform-origin: left;
  animation: draw 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.25s both;
}

@keyframes draw { from { transform: translateY(-0.42em) scaleX(0); } }

/* Italic serif: this is the one line of the brief that is voice rather than
   information, so it is the one place the display face belongs in the body. */
.greeting {
  max-width: 60ch;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── Movements ─────────────────────────────────────── */

.movement {
  padding-top: var(--step);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.movement.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .movement { opacity: 1; transform: none; transition: none; }
  .title__rule { animation: none; }
  .plate__img { opacity: 1; transform: none; }
}

.movement__head {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.movement__index {
  display: grid;
  place-items: center;
  width: var(--rail);
  height: var(--rail);
  flex: none;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--on-crimson);
  font-family: var(--classical);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
}

.movement__title {
  display: flex;
  align-items: center;
  margin: 0 0 0 var(--rail-gap);
  font-family: var(--classical);
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The rule after a heading is the meander, faded right down. */
.movement__rule {
  flex: 0 0 clamp(76px, 11vw, 168px);
  margin-left: 18px;
  height: 26px;
  background-image: var(--meander);
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent);
  mask-image: linear-gradient(90deg, #000 0 58%, transparent);
}

.movement__count {
  flex: none;
  margin-left: auto;
  padding-left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ── Push your work forward ────────────────────────── */

.push {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* A wash of crimson bleeding in from the right edge of the card. */
.push::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 120% at 100% 50%, var(--crimson-wash), transparent 70%);
}

.push__body { flex: 1; min-width: 0; position: relative; }

/* The reading faces. A to-do is something you scan and act on, and Didot is
   built for engraving, not for scanning: high contrast and hairline serifs
   cost legibility at the exact sizes the brief needs to be read at. The
   display face keeps the plate title and the greeting; everything you are
   meant to act on is set in the sans. */
.push__title {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: clamp(1.24rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.16;
}

.push__text { margin: 0; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }

.push__seal {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--on-crimson);
  font-family: var(--classical);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  box-shadow: 0 14px 26px -16px var(--crimson);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.25s ease;
}

.push__seal:hover { background: var(--crimson-deep); transform: translateY(-2px); box-shadow: 0 20px 32px -16px var(--crimson); }
.push__seal:active { transform: none; }
.push__seal .arrow { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1); }
.push__seal:hover .arrow { transform: translateX(4px); }

/* ── To-dos ────────────────────────────────────────── */

.todo {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  align-items: start;
  gap: var(--rail-gap);
  padding: 18px;
  margin: 0 -18px;
  border-radius: var(--radius);
  transition: background 0.25s ease, opacity 0.35s ease;
}

.todo:hover { background: var(--surface); }
.todo + .todo { box-shadow: 0 -1px 0 var(--hair); }
.todo:hover + .todo, .todo:hover { box-shadow: none; }

.todo__check { cursor: pointer; padding-top: 2px; }
.todo__check input { position: absolute; opacity: 0; pointer-events: none; }

.todo__box {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1.6px solid var(--ink-faint);
  border-radius: 7px;
  color: var(--on-crimson);
  transition: background 0.22s ease, border-color 0.22s ease;
}

.todo__box svg { width: 15px; height: 15px; opacity: 0; transform: scale(0.5); transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 1.7, 0.4, 1); }
.todo__check:hover .todo__box { border-color: var(--crimson); }
.todo__check input:focus-visible + .todo__box { outline: 2px solid var(--crimson); outline-offset: 2px; }
.todo__check input:checked + .todo__box { background: var(--crimson); border-color: var(--crimson); }
.todo__check input:checked + .todo__box svg { opacity: 1; transform: none; }

.todo__label {
  margin: 0 0 7px;
  display: inline-block;
  font-family: var(--classical);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  border-radius: 999px;
  padding: 3px 11px;
}

.todo__label--active { color: var(--on-crimson); background: var(--crimson); }

.todo__title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.26;
}

.todo__body { margin: 0; color: var(--ink-soft); max-width: 66ch; text-wrap: pretty; font-size: 0.96em; }

.todo__source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.todo__source:hover { color: var(--ink); background: var(--bg); transform: translateY(-1px); }
.todo__source .arrow { opacity: 0.45; font-size: 0.9em; }
.todo__source:empty { display: none; }

.mark { display: block; width: 15px; height: 15px; }
.mark svg { width: 100%; height: 100%; display: block; }

.todo.is-done { opacity: 0.4; }
.todo.is-done .todo__title { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.allclear { position: relative; padding: 34px 0 10px; text-align: center; }

.allclear__wreath {
  display: block;
  width: 210px;
  height: 66px;
  margin: 0 auto -44px;
  color: var(--crimson);
  opacity: 0.45;
}

.allclear__wreath svg { width: 100%; height: 100%; display: block; }

.allclear__stamp {
  position: relative;
  display: inline-block;
  font-family: var(--classical);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-crimson);
  background: var(--crimson);
  border-radius: 999px;
  padding: 9px 24px;
  box-shadow: 0 14px 26px -16px var(--crimson);
  animation: pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.allclear__note { margin: 12px 0 0; color: var(--ink-faint); font-size: 0.94em; }

/* ── Updates ───────────────────────────────────────── */

.update {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--rail-gap);
  padding: 20px 0;
}

.update + .update { border-top: 1px solid var(--hair); }

.update__index {
  font-family: var(--classical);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--crimson);
  opacity: 0.55;
}

.update__title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.35;
}
.update__title a { text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.update__title a:hover { text-decoration-color: var(--crimson); }

.update__title .tag {
  display: inline-block;
  font-family: var(--classical);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 10px;
  vertical-align: 0.18em;
}

.update__title .tag--active { color: var(--crimson); background: var(--crimson-wash); }

.update__body { margin: 0; color: var(--ink-soft); max-width: 66ch; font-size: 0.96em; }

.update__bullets { margin: 10px 0 0; padding: 0; list-style: none; }
.update__bullets li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: 0.92em; }
.update__bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crimson);
  opacity: 0.45;
}

/* ── Your day ──────────────────────────────────────── */

.schedule {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.schedule__list { display: flex; flex-direction: column; gap: 2px; }

.slot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin: 0 -14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.slot__time {
  flex: none;
  width: 9.5ch;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.slot__title { flex: none; max-width: 72%; font-weight: 500; }

.slot__next {
  flex: none;
  font-family: var(--classical);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--crimson-wash);
  border-radius: 999px;
  padding: 2px 9px;
}

.slot__next[hidden] { display: none; }
.slot__leader { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--hair); transform: translateY(-0.3em); }

.slot:hover { background: var(--surface); color: var(--ink); }
.slot.is-active { background: var(--crimson-wash); color: var(--ink); }
.slot.is-active .slot__time,
.slot:hover .slot__time { color: var(--crimson); }

.schedule__detail {
  position: sticky;
  overflow: hidden;
  top: 24px;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  min-height: 170px;
  transition: opacity 0.18s ease;
}

.schedule__detail.is-swapping { opacity: 0; }

.schedule__detail-when {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crimson);
}

.schedule__detail-title { margin: 0 0 10px; font-family: var(--display); font-size: 1.26rem; font-weight: 400; line-height: 1.26; }
.schedule__detail-note { margin: 0; color: var(--ink-soft); font-size: 0.94em; }

.schedule__prep {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--crimson-wash);
  color: var(--crimson);
  font-family: var(--classical);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.schedule__prep:hover { background: var(--crimson); color: var(--on-crimson); }
.schedule__prep[hidden] { display: none; }


/* ── Looking ahead ─────────────────────────────────── */

.ahead {
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ── The tide ──────────────────────────────────────── */

.colophon { margin-top: clamp(56px, 9vw, 104px); position: relative; }
.colophon .rule { display: none; }

.tide__svg {
  display: block;
  width: 100%;
  height: clamp(90px, 12vw, 150px);
  color: var(--crimson);
  margin-bottom: -1px;
}

.colophon__inner {
  background: var(--crimson);
  color: var(--on-crimson);
  padding: 4px var(--gutter) clamp(34px, 5vw, 56px);
}

.colophon__body { max-width: var(--measure); margin: 0 auto; }

.colophon__line {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(253, 248, 244, 0.78);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.colophon__line--faint { color: rgba(253, 248, 244, 0.5); font-size: 11px; }

.colophon__line--warn { color: rgba(253, 248, 244, 0.88); }
.colophon__line--warn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(253, 248, 244, 0.8);
  flex: none;
}
.colophon__line--warn[hidden] { display: none; }
.colophon__line a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; }
.colophon__line a:hover { color: var(--on-crimson); }

.colophon__line .mark {
  width: 15px;
  height: 15px;
  padding: 3px;
  box-sizing: content-box;
  background: rgba(253, 248, 244, 0.92);
  border-radius: 50%;
  color: var(--crimson-deep);
}

.colophon__ornament { margin: 24px 0 0; }


.colophon__sig {
  margin: 6px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(253, 248, 244, 0.62);
}
.colophon__ornament .blossom { width: 24px; height: 24px; opacity: 0.55; color: var(--on-crimson); }

/* The blossom mark, wherever it appears. */
.blossom { display: block; }
.blossom svg { width: 100%; height: 100%; display: block; }

/* ── Blank state ───────────────────────────────────── */

/* `hidden` is a UA rule, so any display here would override it. Say it again
   with enough specificity to win. */
.blank { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter); }
.blank[hidden], .page[hidden] { display: none; }
.blank__inner { max-width: 44ch; text-align: center; }

.blank__mark { width: 34px; height: 34px; margin: 0 auto 18px; color: var(--crimson); }

.blank__kicker {
  font-family: var(--classical);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 14px;
}

.blank__title { font-family: var(--display); font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 400; line-height: 1.14; margin: 0 0 14px; }
.blank__body { color: var(--ink-soft); margin: 0 0 26px; }
.blank__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.blank__status { margin: 20px 0 0; font-size: 12px; color: var(--ink-faint); min-height: 1.4em; }
.blank__status.is-error { color: var(--crimson); }

/* ── Narrow ────────────────────────────────────────── */

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr auto; row-gap: 10px; }
  .masthead__nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .push { flex-direction: column; align-items: flex-start; }
  .schedule { grid-template-columns: 1fr; }
  .schedule__detail { position: static; }
  .todo { grid-template-columns: var(--rail) 1fr; }
  .todo__source { grid-column: 2; justify-self: start; }
}

/* ── Print ─────────────────────────────────────────── */

@media print {
  body::before, .grain, .masthead__actions, .masthead__nav, .push__seal, .schedule__prep { display: none !important; }
  .movement { opacity: 1; transform: none; break-inside: avoid; }
  .plate { --plate-h: 240px; }
  .colophon__inner { background: none; color: #000; }
  .tide__svg { display: none; }
}

/* ── The press ─────────────────────────────────────────
   A brief takes minutes, most of it spent reading Slack, and minutes of
   nothing is indistinguishable from broken.

   So the wait is not a loading screen, it is this page before it has been
   written: the same masthead, the same plate in the same place, the same
   title. The one thing already decided when the work starts is the day's
   plate, so that is what develops, out of focus and into it, while the
   sources come in. When the words land nothing jumps, because nothing moved. */

.press { min-height: 100vh; }
.press[hidden] { display: none; }

/* Both layers are lifted out of the flow to stack, so the figure has to carry
   the height itself. */
.press .plate { height: var(--plate-h); }

/* The plate is shown at once here: there is nothing else on the page yet. */
.press__layer {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: none;
}

/* Under everything: the same painting, out of focus. What the reveal uncovers
   is not the picture, it is the picture coming into focus, which is a quieter
   thing to watch than a shutter opening. */
.press__ghost {
  filter: blur(14px) saturate(0.3) brightness(0.62);
}

/* Over it: the finished painting, masked to a soft horizon that rises. A hard
   edge with a light on it reads as a scanner. A feathered one reads as
   something developing. */
.press__sharp {
  --edge: calc(var(--reveal, 0) * 100%);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--edge) - 9%), transparent calc(var(--edge) + 9%));
  mask-image: linear-gradient(to top, #000 calc(var(--edge) - 9%), transparent calc(var(--edge) + 9%));
}

/* Written, so the last of the feather comes off rather than hanging at the top. */
.press__plate--whole .press__sharp {
  -webkit-mask-image: none;
  mask-image: none;
}
.press__plate--whole .press__ghost { opacity: 0; transition: opacity 1.2s ease; }

.press .plate__flag { opacity: 0.55; animation: breathe 3.8s ease-in-out infinite; }

@keyframes breathe {
  50% { opacity: 0.2; }
}

/* The greeting's place, holding what the server is doing instead. */
.press .greeting { color: var(--ink); }

/* The elapsed time sits where the brief keeps its own stamp. */
.press .masthead__stamp { justify-self: end; }

.press__steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 0;
}

.step {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.6s ease;
}
.step:not(.is-done) { animation: pulse 2.4s ease-in-out infinite; }
.step.is-done { color: var(--ink-soft); }
.step.is-failed { color: var(--crimson); }
.step__count { color: var(--crimson); }

.press__status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--crimson);
  margin: 14px 0 0;
  min-height: 1.3em;
}

@media (prefers-reduced-motion: reduce) {
  .press__sharp { -webkit-mask-image: none; mask-image: none; }
  .press__ghost { display: none; }
  .press .plate__flag { animation: none; }
  .step { animation: none; }
}

/* Ticking a to-do says you did it. This says it was never yours. */
.todo__dismiss {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.todo:hover .todo__dismiss,
.todo__dismiss:focus-visible { opacity: 1; }
.todo__dismiss:hover { color: var(--crimson); }
.todo__dismiss:disabled { cursor: default; color: var(--ink-faint); }

.todo.is-dismissed { opacity: 0.45; }
.todo.is-dismissed .todo__title { text-decoration: line-through; }
.todo.is-dismissed .todo__dismiss { opacity: 1; }

/* An update that points at a real destination, an event page or a board, is a
   thing rather than a paragraph about a thing. It gets a card: the prose sits
   inside it and the destination is the object at the bottom, where you would
   reach for it. Updates with nowhere to go stay plain, so the card means
   something when it appears. */
.update--card > .update__main {
  padding: 16px 18px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.update--card .update__meta {
  margin-top: 12px;
  padding-top: 11px;
}
.update--card .update__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.update--card .update__link::after {
  content: "\2197";
  opacity: 0.6;
}
.update--card .update__link:hover {
  color: var(--crimson);
  border-color: currentColor;
}
.update--card .update__meta { align-items: center; }

/* The line under an update: where it came from and the one place it points at.
   Set apart from the prose rather than buried in it, so the sentence can stay
   a sentence and the details stay scannable. */
.update__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.update__link {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.update__link:hover { color: var(--crimson); border-bottom-color: currentColor; }
.update--card .update__link { border-bottom: 0; }

/* Silencing a place, from the update that made you want to. Hidden until the
   card is under the pointer: it is an escape hatch, not a call to action. */
.update__mute {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.update:hover .update__mute,
.update__mute:focus-visible { opacity: 1; }
.update__mute:hover { color: var(--crimson); }
.update__mute.is-silenced,
.update__mute:disabled { cursor: default; opacity: 1; color: var(--ink-faint); }

.todo__actions {
  display: flex;
  gap: 16px;
  margin: 8px 0 0;
}
.todo__bury {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.todo:hover .todo__bury,
.todo__bury:focus-visible { opacity: 1; }
.todo__bury:hover { color: var(--crimson); }
.todo__bury:disabled { cursor: default; opacity: 1; }

/* A first draft of the thing the push says to write. Set apart as a block,
   in the reading face, with one thing to do with it. */
.draft {
  margin: 16px 0 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.draft__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
}
.draft__label {
  font-family: var(--classical);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}
.draft__copy {
  padding: 4px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface-sunk);
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.draft__copy:hover { color: var(--crimson); border-color: currentColor; }
.draft__text {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95em;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}

.colophon__usage { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; }