/* page 02 · #announce · "The column" (WORLD.md 5.1). On the first screen: a normal stylesheet. The release's lying pose
   and the title are placed here exactly as js/p02-announce.js puts them at scroll 0 (S0 is held for p <= 0.1). */
#announce { --q: calc(92vw / 540); }
#announce .desk > .sheet, #announce .desk > .cur { position: absolute; left: 0; top: 0; }
#announce .desk > .sheet { transform-origin: 0 0; }
#announce .an-fw, #announce .an-card, #announce .an-hot, #announce .an-po, #announce .an-cur, #announce .an-me { opacity: 0; }
#announce .stage.is-near .an-pr, #announce .stage.is-near .an-fw, #announce .stage.is-near .an-po,
#announce .stage.is-near .an-card { will-change: transform, opacity; }

/* hands over to #example on the table's flat colour (moved from p02.css) */
#announce .x-bot { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, rgb(230, 233, 230) 0, rgba(230, 233, 230, 0) 32%); }

/* ── the press release: 92vw wide, 1.3 x as tall, its body blank paper ── */
#announce .desk > .an-pr { transform-origin: 50% 50%; --lift: 0.04;
  transform: translate3d(27.6vw, calc(calc(109 * var(--sv)) - 59.8vw), 0) rotateX(56deg) rotateY(0deg) rotateZ(-10deg) scale(1); }
#announce .an-pr .press { position: relative; display: block; box-sizing: border-box; width: 92vw; height: 119.6vw; max-width: none;
  margin: 0; padding: 0; background: #fff; color: #202124; border-radius: calc(3 * var(--q)); }
#announce .an-pr .pr-band { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
  height: calc(30 * var(--q)); margin: 0; padding: 0 calc(40 * var(--q)); border: 0; border-radius: calc(3 * var(--q)) calc(3 * var(--q)) 0 0;
  background: #2b2f33; color: #fff; font: 600 calc(9.5 * var(--q))/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.14em; text-transform: uppercase; }
#announce .an-pr .pr-top { display: flex; align-items: center; justify-content: space-between; margin: 0;
  padding: calc(34 * var(--q)) calc(40 * var(--q)) 0; border: 0; }
#announce .an-pr .pr-logo { display: block; flex: none; width: calc(96 * var(--q)); height: calc(30 * var(--q)); margin: 0;
  border-radius: calc(3 * var(--q)); background: #d5d9dd; }
#announce .an-pr .pr-date { font: 500 calc(10.5 * var(--q))/1.3 var(--f-app, var(--f-sheet)); color: #5f6368; letter-spacing: 0.02em; }
#announce .an-pr .pr-h { margin: calc(30 * var(--q)) calc(40 * var(--q)) 0; padding: 0; max-width: none; color: #202124;
  font: 400 calc(31 * var(--q))/1.1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; text-transform: none; }

/* ── captions: each placed per shot (the script moves conn, could, team, moving and the two halves of the last line) ── */
#announce .cap:not([data-k="title"]) { opacity: 0; visibility: hidden; }
#announce .cap[data-k="title"] { left: 5.5vw; top: calc(10 * var(--sv)); width: 88vw; }
#announce .cap[data-k="title"] .h1 { max-width: 11.6em; margin: 0; }
#announce .an-maybe { margin: 0.6em 0 0; }
#announce .cap[data-k="sends"] { left: 5.5vw; top: calc(15 * var(--sv)); width: 64vw; }
#announce .cap[data-k="conn"] { left: 61.7vw; top: calc(26 * var(--sv)); width: 34vw; }
#announce .cap[data-k="could"] { left: 0; top: 0; width: max-content; }
#announce .cap[data-k="hot"] { left: 3vw; top: calc(8 * var(--sv)); width: 94vw; }
#announce .cap[data-k="desp"] { left: calc(24px + 20.2vw); top: calc(15 * var(--sv)); width: 60vw; }
#announce .cap[data-k="team"] { left: 24px; top: 0; width: 56vw; }
#announce .cap[data-k="moving"] { left: 24px; top: 0; width: max-content; max-width: 56vw; }
#announce .cap[data-k="but"] { left: 6vw; top: calc(26 * var(--sv)); width: 84vw; }
#announce .cap[data-k="paying"] { left: 6vw; top: calc(calc(500 * var(--sv)) / 6 + calc(2 * var(--sv))); width: 70vw; }
#announce .cap[data-k="po"] { left: 0; top: 0; width: 100vw; }
#announce .an-split { margin: 0; }
#announce .an-split strong { display: block; position: relative; }
#announce .an-sa, #announce .an-sb { position: absolute; left: 0; top: 0; display: block; width: max-content; }
#announce .an-sb { max-width: 47.84vw; }
/* the wall's clear fields (js/p02-announce.js places them, --fb for "but", --fp for "paying"): the table's own colour,
   the quiet surface's shape and feather, under the words (z -1 inside the caps) and over the sheet, so a line rising in
   or leaving over the wall never has a row line or a grey box through its words */
#announce .caps::before, #announce .caps::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; pointer-events: none;
  background: var(--table); border-radius: 0.18em;
  box-shadow: 0 0 0 0.3em var(--table), 0 0 1.1em 0.55em color-mix(in srgb, var(--table) 78%, transparent); }
#announce .caps::before { font-size: var(--fb-fs, 16px); width: var(--fb-w, 0); height: var(--fb-h, 0); translate: var(--fb-x, 0) var(--fb-y, 0);
  opacity: var(--fb-o, 0); visibility: var(--fb-v, hidden); }
#announce .caps::after { font-size: var(--fp-fs, 16px); width: var(--fp-w, 0); height: var(--fp-h, 0); translate: var(--fp-x, 0) var(--fp-y, 0);
  opacity: var(--fp-o, 0); visibility: var(--fp-v, hidden); }

/* ── the forward, the team's cards ── */
#announce .an-fw .an-mail { margin: 0; }
#announce .an-note { font-style: normal; }   /* their own note, typed upright in the mail's own face */
#announce .an-card .doc { position: relative; box-sizing: border-box; margin: 0; padding: 0; background: #fff; border-radius: 0;
  overflow: hidden; font-family: var(--f-app, var(--f-sheet)); color: #202124; }
#announce .an-drc { --f-app: var(--f-google); width: 228px; }
#announce .an-drh { margin: 0; padding: 11px 16px; background: #3c4043; color: #fff; font: 600 15px/18px var(--f-app, var(--f-sheet)); }
#announce .an-drl { margin: 0; padding: 10px 16px; border-bottom: 1px solid #e1e3e6; color: #5f6368; font: 400 15px/18px var(--f-app, var(--f-sheet)); }
#announce .an-drb { height: 92px; }
#announce .an-drf { margin: 0; padding: 10px 16px 14px; }
#announce .an-drf b { display: inline-block; padding: 7px 18px; border-radius: 18px; background: #1a73e8; color: #fff; font: 600 15px/18px var(--f-app, var(--f-sheet)); }
#announce .an-ppc { --f-app: var(--f-sys); width: 196px; height: 252px; }
#announce .an-ppc-band { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: #5f6b7a; }
#announce .an-ppc-logo { position: absolute; left: 20px; top: 34px; width: 58px; height: 20px; border-radius: 3px; background: #d5d9dd; }
#announce .an-ppc-logo.mk-you > span { font-size: 14.5px; } /* the card lies smaller on a phone: still 12 px there */
#announce .an-ppc-h { position: absolute; left: 20px; right: 20px; top: 128px; margin: 0; color: #202124;
  font: 400 28px/1.1 Georgia, "Times New Roman", serif; }

/* ── the HOT sheet: column-major, so the wall moves columns by transform only ── */
#announce .an-ss { position: relative; display: block; box-sizing: border-box; width: calc(100vw - 48px); max-width: none; height: auto;
  margin: 0; padding: 0; background: #fff; color: #202124; border-radius: 0.5vw; overflow: visible;
  font: 400 1.62vw/1.2 var(--f-app, var(--f-sheet)); --rh: 4.4vw; --lr: 2.2vw; --ht: 4.6vw; }
#announce .an-ss .ht-top { display: flex; align-items: center; box-sizing: border-box; height: var(--ht); margin: 0; padding: 0 1.4vw; gap: 0.9vw;
  border-bottom: 1px solid #e1e3e6; font-size: 1.62vw; }
#announce .an-ss .ht-ic { flex: none; width: 1.7vw; height: 1.7vw; border-radius: 0.3vw; background: #9aa0a6; }
#announce .an-ss .ht-file { font: 600 1.62vw/1 var(--f-app, var(--f-sheet)); color: #202124; }
#announce .an-ss .ht-hot { font: 700 1.25vw/1.6 var(--f-app, var(--f-sheet)); padding: 0 0.7vw; }
#announce .an-ss .ht-avs { display: flex; gap: 0.4vw; margin-left: auto; }
#announce .an-ss .ht-avs .av { width: 2.2vw; height: 2.2vw; }
#announce .ss { position: relative; display: flex; align-items: flex-start; }
#announce .ss-col { flex: none; transform-origin: 0 0; }
#announce .ss-col > span { position: relative; display: flex; align-items: center; box-sizing: border-box; height: var(--rh);
  padding: 0 0.7vw; border-bottom: 1px solid #e1e3e6; white-space: nowrap; }
#announce .ss-col > .ss-l { height: var(--lr); justify-content: center; padding: 0; background: #f1f3f4; color: #5f6368; font-size: 1.2vw; }
#announce .ss-col > .ss-hd { font-weight: 600; background: #f8f9fa; }
#announce .c-rn > span { justify-content: center; padding: 0; background: #f8f9fa; color: #5f6368; font-size: 1.2vw; }
#announce .c-rn { width: 3vw; }
#announce .c-bz { width: 16.5vw; }
#announce .c-sg { width: 21.5vw; }
#announce .c-tp { width: 8.5vw; }
#announce .c-ct { width: 11.5vw; }
#announce .c-st { width: 16vw; }
#announce .c-nd { width: calc(23vw - 48px); }
#announce .ss-ndh { display: inline-block; font-weight: 600; transform-origin: 0 50%; white-space: nowrap; }
#announce .ss-e::before { content: ""; position: absolute; inset: 0.55vw 0.6vw; border-radius: 0.25vw; background: #e8eaed; }
#announce .ss-vr { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #dadce0; }
#announce .ss-sel { display: none; }
#announce .ss b.hot { all: unset; display: inline-block; padding: 0 0.5em; border-radius: 0.2em; background: #fce8e6; color: #c5221f;
  font: 700 0.8em/1.7 var(--f-app, var(--f-sheet)); letter-spacing: 0.05em; }
#announce .ss b.v { font-weight: 400; }
#announce .ss-col > span.is-s0 { box-shadow: inset 0 0 0 2px #e8710a; }
#announce .ss-col > span.is-s1 { box-shadow: inset 0 0 0 2px #1a73e8; }
#announce .ss-col > span.is-s2 { box-shadow: inset 0 0 0 2px #12b5cb; }

/* ── the visitor's cursor: an arrow that becomes the column-resize glyph ── */
#announce .an-me { width: 28px; height: 28px; }
#announce .an-me .an-arrow { position: absolute; left: 0; top: 0; width: 18px; height: 22px; }
#announce .an-me .an-rs { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: none; }
#announce .an-me.is-rs .an-arrow { display: none; }
#announce .an-me.is-rs .an-rs { display: block; }

@media (max-width: 899px) {
  #announce .desk > .an-pr { transform: translate3d(-3vw, calc(calc(77.8 * var(--sv)) - 68.9vw), 0) rotateX(52deg) rotateY(0deg) rotateZ(-6deg) scale(1); }
  #announce .an-pr .press { width: 106vw; height: 137.8vw; border-radius: 3px; }
  #announce .an-pr .pr-band { height: 28px; padding: 0 calc(3vw + 18px); font-size: 12.5px; letter-spacing: 0.1em; border-radius: 3px 3px 0 0; }
  #announce .an-pr .pr-top { padding: 20px calc(3vw + 18px) 0; }
  #announce .an-pr .pr-logo { width: 64px; height: 22px; }
  #announce .an-pr .pr-date { font-size: 13px; }
  #announce .an-pr .pr-h { margin: 18px calc(3vw + 18px) 0; font-size: 25px; line-height: 1.12; }

  #announce .cap[data-k="title"] { left: 16px; top: calc(9 * var(--sv)); width: calc(100vw - 32px); }
  #announce .cap[data-k="sends"] { left: 16px; top: calc(26 * var(--sv)); width: calc(100vw - 32px); }
  #announce .cap[data-k="conn"] { left: 16px; top: 0; width: calc(100vw - 32px); }
  #announce .cap[data-k="hot"] { left: 16px; top: calc(8 * var(--sv)); width: calc(100vw - 32px); }
  #announce .cap[data-k="desp"] { left: 16px; top: calc(5 * var(--sv)); width: calc(100vw - 32px); }
  #announce .cap[data-k="team"], #announce .cap[data-k="moving"] { left: 16px; width: calc(100vw - 32px); }
  #announce .cap[data-k="but"] { left: 26px; top: calc(22 * var(--sv)); width: calc(100vw - 52px); }
  #announce .cap[data-k="paying"] { left: 26px; width: calc(100vw - 52px); }
  #announce .an-sa, #announce .an-sb { max-width: calc(100vw - 32px); }

  #announce .an-ss { width: calc(100vw + 8px); border-radius: 4px; font-size: 15px; --rh: 48px; --lr: 24px; --ht: 48px; }
  #announce .an-ss .ht-top { padding: 0 16px; gap: 8px; font-size: 15px; }
  #announce .an-ss .ht-file, #announce .an-ss .ht-hot { font-size: 15px; }
  #announce .an-ss .ht-ic { width: 18px; height: 18px; border-radius: 3px; }
  #announce .an-ss .ht-avs .av { width: 22px; height: 22px; }
  #announce .c-tp, #announce .c-ct, #announce .c-st { display: none; }
  #announce .c-rn { width: 7vw; }
  #announce .c-bz { width: 35vw; }
  #announce .c-sg { width: 33vw; }
  #announce .c-nd { width: calc(25vw + 8px); }
  #announce .ss-col > span { padding: 0 8px; white-space: normal; line-height: 1.2; }
  #announce .ss-col > .ss-l, #announce .c-rn > span { font-size: 15px; padding: 0; }
  #announce .ss-ndh { white-space: normal; }
  #announce .ss-e::before { inset: 7px 6px; }
  #announce .an-po .po-items, #announce .an-po .po-sum, #announce .an-po .po-auth { visibility: hidden; }
}