/* The floating chrome is out of flow now, so a page whose first thing is TYPE
   has to reserve the height itself. A page whose first thing is ARTWORK does
   not, and should not: the corporate table and the picks room are meant to
   run under the exit mark, the way the blog room already does. */
:root{--vb-h:clamp(66px,9vh,86px)}

/* ============================================================================
   pages.css — the interior pages.

   Each page is a SEPARATE visual system, not a recolour of a shared shell.
   Nothing in this file is shared between them except the panel chrome
   inherited from index.html. If you find yourself reaching for a class from
   another page's block, don't — that is how they went generic the first time.

   PICKS      "After Hours"   warm black · hanging neon · one light source
   BLOG       "The Gazette"   grey newsprint · two-ink · broadsheet
   CORPORATE  "The Commission" cool plaster + oxblood · documentary
   ============================================================================ */


/* ============================================================================
   PICKS — "AFTER HOURS"
   A room, not a page. You are looking at the back wall of a place that is
   still open: a hanging neon board over a listings wall, everything lit by
   that board and by nothing else.

   THE LIGHT IS THE LAYOUT. One registered custom property, --lit, carries the
   sign's instantaneous output, and every surface in the room reads from it —
   the tube's core, its halo, the frame's bloom, the haze on the back wall,
   the bounce on the floor, even the ink on the first rows. So when the tube
   stutters the whole room stutters with it, which is the only way a fake
   flicker ever reads as real: light that fails locally is a CSS trick, light
   that fails everywhere at once is a room.

   Modelled off how a failing tube actually behaves rather than a blink:
     · strike is fast, decay is not — the phosphor keeps glowing after the
       discharge drops, so every fall has a tail and every rise does not
     · a failing tube restrikes at PARTIAL output, so the flicker steps
       through .12 / .45 / .7 rather than 0 and 1
     · halo falls off faster than core, because radiant flux is superlinear
       in current — the bloom collapses before the glass goes dark
     · a restrike overshoots slightly before settling
     · dropouts cluster. Long calm, brief crisis, long calm.
   ============================================================================ */

@property --lit{syntax:'<number>';inherits:true;initial-value:1}

#v-picks{
  --room:#0A0508;         /* warm black — a red room with the lights off */
  --room-2:#150A10;
  --tube:#FFC24A;         /* the filament inside the board */
  --tube-hot:#FFF0C8;
  --tube-deep:#FF6A1E;
  --neon:#FF2437;         /* the frame's own red */
  --ink:#F3E7D6;
  --ink-2:rgba(243,231,214,.62);
  --ink-3:rgba(243,231,214,.34);
  --gold:#E7B54B;
  --hair:rgba(243,231,214,.13);
  --pad:clamp(18px,5vw,64px);
}
#v-picks .view-panel{background:var(--room);color:var(--ink);overflow-x:hidden}
#v-picks .view-panel::before{background:linear-gradient(90deg,#7E0F1B,var(--neon) 40%,var(--tube))}
#v-picks .vb-logo img{filter:brightness(1.25) saturate(1.2) drop-shadow(0 1px 6px rgba(0,0,0,.7))}
#v-picks .vb-menu{color:var(--ink)}
#v-picks :focus-visible{outline:2px solid var(--tube);outline-offset:3px}

/* --- the room ----------------------------------------------------------- */
.pk{position:relative;isolation:isolate;padding-bottom:clamp(40px,7vw,90px)}
.pk-haze,.pk-grain,.pk-floor{position:absolute;inset:0;pointer-events:none}
/* everything the sign throws onto the back wall */
.pk-haze{z-index:0;
  background:
    radial-gradient(120% 42% at 50% 8%,rgba(255,36,55,.30),transparent 62%),
    radial-gradient(80% 30% at 50% 15%,rgba(255,194,74,.22),transparent 70%),
    radial-gradient(140% 60% at 50% 0%,rgba(120,10,26,.5),transparent 68%);
  opacity:calc(.34 + .66 * var(--lit))}
.pk-floor{z-index:0;top:auto;height:46vh;
  background:radial-gradient(90% 100% at 50% 100%,rgba(255,106,30,.10),transparent 70%);
  opacity:calc(.3 + .7 * var(--lit))}
.pk-grain{z-index:2;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:pk-grain 1.2s steps(1) infinite}
@keyframes pk-grain{
  0%{background-position:0 0}25%{background-position:-22px 14px}
  50%{background-position:16px -18px}75%{background-position:-12px -9px}100%{background-position:0 0}}
.pk-inner{position:relative;z-index:3;max-width:1120px;margin:0 auto;padding:var(--vb-h) var(--pad) 0}

/* --- the sign ----------------------------------------------------------- */
.pk-sign{position:relative;width:min(430px,74%);margin:clamp(4px,2vh,26px) auto clamp(26px,5vh,52px);
  aspect-ratio:1383/790;transform-origin:50% 2%;
  animation:pk-sway 9s ease-in-out infinite}
@keyframes pk-sway{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}
.pk-sign img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:brightness(calc(.55 + .45 * var(--lit))) saturate(calc(.7 + .3 * var(--lit)))}
/* the frame's own bloom, sitting under the plate so it reads as spill */
.pk-sign::before{content:"";position:absolute;left:2%;right:2%;top:34%;bottom:2%;
  border-radius:26px;pointer-events:none;z-index:-1;
  box-shadow:0 0 calc(70px * var(--lit)) calc(14px * var(--lit)) rgba(255,36,55,.42),
             0 0 calc(150px * var(--lit)) calc(40px * var(--lit)) rgba(255,36,55,.2)}

/* the tube, hung in the glass. Core and halo are separate layers because
   they do not fall off at the same rate. */
.pk-tube{position:absolute;left:7%;right:7%;top:42%;bottom:10%;
  display:grid;place-items:center;pointer-events:none}
/* The letters are GLASS, not ink: a monoline uppercase set hollow, with the
   fill knocked out and the whole letterform carried by a stroke of constant
   width — which is what a bent neon tube is. A serif would give you thicks
   and thins, and no glassblower ever bent one of those.

   The glow is a drop-shadow chain rather than text-shadow on purpose:
   text-shadow is cast from the glyph's FILL, so on a hollow letter it would
   light up the empty middle of the O. drop-shadow works off the rendered
   alpha — here, the stroke — so the light hugs the tube and the counters
   stay dark, the way they do on a real sign. */
.pk-tube span{position:relative;display:block;
  font-family:Inter,system-ui,sans-serif;font-weight:500;font-style:normal;
  font-size:clamp(22px,3.9vw,44px);line-height:1;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:calc(1.5px + .7px * var(--lit)) rgba(255,244,222,1);
  opacity:calc(.20 + .80 * var(--lit));
  filter:
    drop-shadow(0 0 calc(2px * var(--lit)) rgba(255,246,228,.95))
    drop-shadow(0 0 calc(7px * var(--lit)) var(--tube))
    drop-shadow(0 0 calc(16px * var(--lit)) var(--tube-deep))
    drop-shadow(0 0 calc(34px * var(--lit)) rgba(255,106,30,.5))}
/* halo: a fatter, softer duplicate of the same tube, driven by --lit squared
   so the bloom collapses before the glass does */
.pk-tube span::after{content:attr(data-t);position:absolute;inset:0;
  color:transparent;-webkit-text-stroke:calc(3px * var(--lit)) var(--tube);
  filter:blur(calc(9px * var(--lit)));
  opacity:calc(.7 * var(--lit) * var(--lit));z-index:-1}

/* --- the failing tube ---------------------------------------------------
   The asymmetry is the whole trick. A gas discharge STRIKES in under a
   millisecond, so every rise here is an instant jump — steps(1,end) holds
   the previous value and then cuts. But it does not go dark that fast: the
   phosphor keeps emitting for a few tens of milliseconds after the current
   stops, so every FALL is a short decelerating ramp instead of a cut.
   Interpolate both ends and you get a dimmer being turned; cut both ends and
   you get a strobe. One of each is a tube with a bad starter. */
.pk-lit{animation:pk-flicker 13s linear infinite}
@keyframes pk-flicker{
  /* long calm */
  0%    {--lit:1;    animation-timing-function:steps(1,end)}
  25.85%{--lit:1;    animation-timing-function:cubic-bezier(.6,0,1,.4)}
  /* crisis one: four failed strikes, then a partial, then a good one */
  26.05%{--lit:.10;  animation-timing-function:steps(1,end)}
  26.36%{--lit:.93;  animation-timing-function:cubic-bezier(.6,0,1,.4)}
  26.55%{--lit:.14;  animation-timing-function:steps(1,end)}
  26.80%{--lit:.78;  animation-timing-function:cubic-bezier(.6,0,1,.4)}
  26.99%{--lit:.05;  animation-timing-function:steps(1,end)}
  27.45%{--lit:.42;  animation-timing-function:steps(1,end)}
  27.95%{--lit:1.08; animation-timing-function:cubic-bezier(.25,.9,.3,1)}
  28.45%{--lit:1;    animation-timing-function:steps(1,end)}
  /* calm */
  57.9% {--lit:1;    animation-timing-function:cubic-bezier(.6,0,1,.4)}
  /* a single dropout — one fall, one clean restrike */
  58.15%{--lit:.07;  animation-timing-function:steps(1,end)}
  58.75%{--lit:1.05; animation-timing-function:cubic-bezier(.25,.9,.3,1)}
  59.1% {--lit:1;    animation-timing-function:steps(1,end)}
  /* calm */
  80.9% {--lit:1;    animation-timing-function:cubic-bezier(.6,0,1,.4)}
  /* crisis two, shorter */
  81.1% {--lit:.18;  animation-timing-function:steps(1,end)}
  81.38%{--lit:.88;  animation-timing-function:cubic-bezier(.6,0,1,.4)}
  81.58%{--lit:.09;  animation-timing-function:steps(1,end)}
  81.95%{--lit:.52;  animation-timing-function:steps(1,end)}
  82.3% {--lit:1.06; animation-timing-function:cubic-bezier(.25,.9,.3,1)}
  82.75%{--lit:1;    animation-timing-function:steps(1,end)}
  100%  {--lit:1}}

/* --- masthead ----------------------------------------------------------- */
.pk-mast{text-align:center;margin-bottom:clamp(24px,4vw,44px)}
.pk-kick{margin:0;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.34em;
  text-transform:uppercase;color:var(--tube);opacity:calc(.5 + .5 * var(--lit))}
.pk-stand{margin:16px auto 0;max-width:52ch;
  font:400 clamp(14.5px,1.4vw,17px)/1.62 Inter,sans-serif;color:var(--ink-2);
  /* lit by the sign like everything else, but floored well above legibility */
  opacity:calc(.82 + .18 * var(--lit))}
.pk-dateline{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 22px;font:600 10px/1.6 Inter,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.pk-dateline b{color:var(--gold);font-weight:600}


/* --- THE BOARD ----------------------------------------------------------
   Five rows, ranked, and the ranking has to be legible before the words are.
   Four devices carry it, and each one is doing a different job:

     · the MEDAL says what position this is, in metal you can name at a
       glance — gold, steel, copper, then nothing, because a leaderboard
       whose fourth place is also decorated has no podium.
     · the MOVE CHIP says what changed since last week. This is the whole
       reason a board beats a list: a list is a state, a board is a story.
     · the METER says by how much. Rank is ordinal and hides the gap — 02
       could be a whisker behind 01 or a mile, and the bar is the only thing
       on the row that answers that.
     · the POINTS COUNT UP on reveal, which is the one piece of pure game
       here. It is also the only animation, so it lands.

   All four are driven off two authored numbers per row: --fill and the
   points text. Nothing computes a rank at runtime.
   --------------------------------------------------------------------- */
.pk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.pick{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(150px,21vw,230px);
  gap:clamp(14px,2.2vw,30px);align-items:start;
  padding:clamp(20px,2.8vw,30px) 0;border-bottom:1px solid var(--hair);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-standard),transform .6s cubic-bezier(.22,.9,.24,1)}
.pick.in{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 55ms)}
/* each row gets a little of the sign, and the ones nearest the top get more */
.pick::before{content:"";position:absolute;left:-4%;right:-4%;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,106,30,.07),transparent);
  opacity:0;transition:opacity .3s var(--ease-standard)}
@media (hover:hover){.pick:hover::before{opacity:1}.pick:hover .pk-name{color:var(--tube-hot)}}





.pk-name{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.8vw,34px);line-height:1.12;letter-spacing:-.012em;color:var(--ink);
  transition:color .22s var(--ease-standard)}
/* The area is its own line now, not a span inside the name — two facts, two
   fields, and in the panel two inputs. */
.pk-hood{display:block;margin:7px 0 0;font:600 10px/1 Inter,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--neon);opacity:.9}
.pk-dsc{margin:12px 0 0;max-width:54ch;font:400 15px/1.62 Inter,sans-serif;color:var(--ink-2);
  opacity:calc(.86 + .14 * var(--lit))}
.pk-ord{margin:11px 0 0;display:flex;gap:10px;align-items:flex-start;
  font:500 13.5px/1.5 Inter,sans-serif;color:var(--gold)}
.pk-ord .mn{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--gold);
  transform:translateY(-3px);box-shadow:0 0 8px rgba(231,181,75,.7)}

/* THE MARK. The square-and-disc every Indian menu carries: a ring in the
   colour, a filled dot inside it, green for vegetarian and red for not. It is
   drawn rather than set as a character because the two are one shape in two
   colours, and because a glyph would be at the mercy of whatever font the
   device has. Both are labelled for a reader who cannot see the colour —
   colour is the whole signal here, so it cannot be the only one. */
.pk-marks{flex:0 0 auto;display:inline-flex;gap:5px;margin-top:3px}
.pk-mark{flex:0 0 auto;width:14px;height:14px;
  border:1.5px solid currentColor;border-radius:2.5px;
  display:inline-grid;place-items:center}
.pk-mark::before{content:"";width:6.5px;height:6.5px;border-radius:50%;
  background:currentColor}
.pk-mark.veg{color:#5FBE6E}
.pk-mark.nonveg{color:#E0524F}
.pk-tag{display:none}

/* --- the figures: a Griddle rating, and whether you will be standing --- */
.pk-fig{display:flex;flex-direction:column;gap:13px;align-items:flex-end;text-align:right}
.pk-fig .fl{display:block;font:600 9.5px/1 Inter,sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.pk-fig .fv{display:block;font-family:'Fraunces',Georgia,serif;font-size:20px;
  line-height:1;color:var(--ink)}
.pk-fig .fv i{font-style:normal;font-family:Inter,sans-serif;font-size:11px;
  font-weight:500;letter-spacing:.06em;color:var(--ink-3);margin-left:3px}
.pk-fig .fv.na{font-size:13px;font-family:Inter,sans-serif;color:var(--ink-2);letter-spacing:.02em}

.pk-rate{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
/* Griddle Select wears a name, not a count — it is deliberately not a mark
   you could mistake for a smaller number of stars. */
.pk-sel-mark{display:inline-block;padding:7px 12px;border-radius:999px;
  font:600 9.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tube-hot);white-space:nowrap;
  background:linear-gradient(160deg,rgba(255,194,74,.16),rgba(255,106,30,.06));
  box-shadow:inset 0 0 0 1px rgba(255,194,74,.5),
             0 0 calc(18px * var(--lit)) rgba(255,194,74,.22)}
.pk-score{font-family:'Fraunces',Georgia,serif;font-size:clamp(18px,2vw,23px);line-height:1;
  color:var(--gold);order:2}
.pk-score small{font-size:.52em;color:var(--ink-3);margin-left:.18em}
/* THE STARS.

   A count, the way a guide gives them: one, two or three, whole. There is no
   half star and no score out of anything, so the two-layer trick this used to
   run — a grey row under a gold row clipped to a percentage — is gone with
   the number it existed to draw. What is left is N marks. */
.stars{--sz:clamp(30px,3.6vw,44px);display:inline-flex;gap:8px;line-height:0}
.star,.stars i{flex:0 0 auto;width:var(--sz);height:var(--sz);display:block;
  background:url(../assets/star.webp) center/contain no-repeat;
  filter:saturate(1.2) brightness(1.08)
    drop-shadow(0 0 calc(var(--sz) * .07 * var(--lit)) rgba(231,181,75,.45))}

/* --- what a star means ---------------------------------------------------
   A legend, at the FOOT of the board. Put at the top it would be a rulebook
   you have to read before you are allowed to look at anything; put here, you
   have already seen five ratings and this answers the question they raised.

   Each tier is lit by the sign like the rest of the room, and lit a little
   harder as the count goes up, so the three read as a scale before a word of
   it is read. */
.pk-tiers{margin-top:clamp(44px,7vw,84px);padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--hair)}
.pk-tiers-h{max-width:46ch;margin-bottom:clamp(24px,4vw,40px)}
.pk-tiers-h h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(23px,2.8vw,34px);line-height:1.1;letter-spacing:-.012em;color:var(--ink)}
.pk-tiers-h p{margin:10px 0 0;font:400 14.5px/1.6 Inter,sans-serif;color:var(--ink-2)}

.pk-tier-set{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,1fr)}
.pk-tier{position:relative;padding:clamp(20px,2.2vw,28px);border-radius:14px;
  background:linear-gradient(168deg,rgba(255,194,74,.055),rgba(255,106,30,.02) 60%,transparent);
  box-shadow:inset 0 0 0 1px var(--hair)}
.pk-tier[data-tier="2"]{box-shadow:inset 0 0 0 1px rgba(255,194,74,.2)}
.pk-tier[data-tier="3"]{box-shadow:inset 0 0 0 1px rgba(255,194,74,.36),
  0 0 calc(30px * var(--lit)) rgba(255,194,74,.1)}

/* the marks, at the size the tier cards use them: big enough to be counted
   before they are read */
.pk-tier-stars{--sz:clamp(26px,2.9vw,36px);display:flex;gap:8px;margin-bottom:16px}
.pk-tier-stars .star{filter:saturate(1.2) brightness(1.08)
  drop-shadow(0 0 calc(var(--sz) * .07 * var(--lit)) rgba(231,181,75,.45))}

.pk-tier-n{margin:0 0 9px;font:600 9.5px/1 Inter,sans-serif;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tube);opacity:calc(.55 + .45 * var(--lit))}
.pk-tier h3{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(18px,1.9vw,23px);line-height:1.18;letter-spacing:-.008em;color:var(--ink)}
.pk-tier-b{margin:11px 0 0;font:400 13.5px/1.6 Inter,sans-serif;color:var(--ink-2)}

/* Griddle Select, set below the three and across all of them: a different
   kind of answer rather than a fourth rung, and the layout has to say so
   before the words do. */
.pk-select{margin-top:clamp(14px,1.6vw,22px);padding:clamp(20px,2.4vw,30px);
  border-radius:14px;display:grid;gap:clamp(12px,1.6vw,26px);
  grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start;
  background:linear-gradient(120deg,rgba(255,194,74,.09),rgba(255,36,55,.05) 70%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,194,74,.3)}
.pk-select-n{margin:0;align-self:center;white-space:nowrap;
  font:600 10px/1 Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tube-hot);text-shadow:0 0 calc(14px * var(--lit)) rgba(255,194,74,.55)}
.pk-select h3{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(18px,1.9vw,23px);line-height:1.18;letter-spacing:-.008em;color:var(--ink)}
@media (max-width:760px){
  .pk-select{grid-template-columns:1fr;gap:10px;padding:18px}
}

/* what is under the cut. A board needs one, or the fifth row reads as the
   end of the world rather than the end of the top five. */
.pk-nextup{margin:clamp(20px,3vw,30px) 0 0;display:flex;gap:10px;align-items:baseline;
  font:400 13.5px/1.6 Inter,sans-serif;color:var(--ink-3)}
.pk-nextup .mn{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--ink-3);
  transform:translateY(-3px)}

/* --- empty + footer ----------------------------------------------------- */
.pk-foot{margin-top:clamp(36px,6vw,70px);padding-top:24px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.pk-prov{margin:0;font:500 10px/1.8 Inter,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
/* the house mark rather than a drawn initial, lit by the same sign as
   everything else in the room */
.pk-seal{display:grid;place-items:center;padding:9px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,194,74,.4)}
.pk-seal img{display:block;height:19px;width:auto;
  filter:brightness(calc(1.15 + .35 * var(--lit))) saturate(1.15)
         drop-shadow(0 0 calc(9px * var(--lit)) rgba(255,194,74,.45))}

/* --- narrow -------------------------------------------------------------- */
@media (max-width:760px){
  .pk-tier-set{grid-template-columns:1fr;gap:10px}
  .pk-tier{padding:18px 18px 20px}
  .pk-tier-stars{--sz:30px;margin-bottom:13px}
  /* the board's title, and on a phone it was running at the clamp floor while
     everything under it scaled — the sign shrank to a badge */
  .pk-sign{width:min(420px,94%)}
  .pk-tube span{font-size:clamp(30px,8.2vw,44px)}
  .pick{grid-template-columns:auto minmax(0,1fr);row-gap:10px;
    padding:clamp(18px,4vw,24px) 0}
  .pk-cont{grid-row:1;grid-column:1}
  /* the figures unstack across the full width of the row rather than sitting
     under the copy in a narrow rail — the meter needs the run to mean
     anything, and at phone width the rank column is the only rail left */
  .pk-fig{grid-row:2;grid-column:1;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:flex-start;gap:8px 22px;text-align:left}
  .pk-fig .fl{margin-bottom:6px}
  .pk-rate{align-items:flex-start}
  .pk-dateline{gap:6px 14px;font-size:9px;letter-spacing:.16em}
  .pk-foot{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:420px){
  /* a small sign blooms proportionally more, which closes the counters up.
     Thinner glass and a tighter halo keep the letters hollow at phone size. */
  .pk-tube span{letter-spacing:.22em;text-indent:.22em;
    -webkit-text-stroke-width:calc(1.1px + .5px * var(--lit));
    filter:
      drop-shadow(0 0 calc(1.5px * var(--lit)) rgba(255,246,228,.95))
      drop-shadow(0 0 calc(5px * var(--lit)) var(--tube))
      drop-shadow(0 0 calc(12px * var(--lit)) var(--tube-deep))}
  .pk-tube span::after{-webkit-text-stroke-width:calc(2px * var(--lit));
    filter:blur(calc(6px * var(--lit)))}
  .pk-name{font-size:20px}
  .pk-dsc{font-size:14.5px}
}

/* --- a room that does not strobe ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pk-lit{animation:none;--lit:1}
  .pk-sign{animation:none}
  .pk-grain{animation:none}
  .pick{opacity:1!important;transform:none!important;transition:none}
}


/* ============================================================================
   CORPORATE — "THE COMMISSION"
   The Sistine ceiling was a corporate commission: an institution hired a
   supplier and signed a document. So this page is not a landing page, it is
   the commission itself — a plaster-ground legal instrument with a rubricated
   oxblood masthead, numbered clauses instead of value props, a ruled Schedule
   instead of tag pills, a lapidary inscription instead of a stat row, and a
   countersigned seal instead of a signup form.

   Borrowed: one heavy band as the sole organising device + serif-display /
   sans-meta split (Sotheby's, Pentagram), index numbering as authority
   (Herzog & de Meuron), type-as-architecture with no imagery (OMA), total
   restraint and colour only from content (Caruso St John), specimen data
   tables and monumental/micro contrast with nothing between (Klim,
   Commercial Type), rules drawing themselves on entry rather than cards
   fading (current Awwwards typography SOTDs), asymmetric field division and
   rule discipline (Vignelli/Müller-Brockmann), lapidary capitals with
   interpuncts (Trajan) and rubrication (Renaissance manuscripts), engraved
   seal and countersign (share certificates).

   Discipline: this is the only page on the site with NO border-radius and NO
   shadow anywhere. A document does not levitate and it does not have rounded
   corners.
   ============================================================================ */

#v-corp{
  --doc:#E8E2D4;         /* aged plaster — desaturated toward grey-green, reads
                            as stone rather than the butter cream of picks */
  --ink:#201A14;
  --ink-2:#4A3F35;
  --rule:rgba(32,26,20,.20);
  --rule-soft:rgba(32,26,20,.09);
  --rubric:#A72C2D;      /* brick is demoted to a rubric colour, never a field */
  --oxblood:#4A1516;
  --gold:#C98A2D;
  --cream:#FBF0D8;
  --marg:132px;
  --pad:clamp(20px,6vw,64px);
}
#v-corp .view-panel{background:var(--doc);color:var(--ink);overflow-x:hidden;
  font-optical-sizing:auto}
/* the bar belongs to the masthead band rather than floating over plaster */
/* the only page on a light ground — the marks lose the dark drop shadow and
   take the document's own ink instead, or they look like a sticker on it */
#v-corp .vb-menu{color:var(--ink);filter:none}
#v-corp .vb-logo img{filter:none}
#v-corp .view-bar .home{color:var(--cream)}
#v-corp :focus-visible{outline:2px solid var(--rubric);outline-offset:3px}
#v-corp *,#v-corp *::before,#v-corp *::after{border-radius:0!important;box-shadow:none!important}

.cm{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 var(--pad) 0}
.cm-grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* registration marks on the plaster field */
.cm-reg{position:absolute;width:18px;height:18px;pointer-events:none;
  border-left:1px solid rgba(32,26,20,.28);border-top:1px solid rgba(32,26,20,.28)}
.cm-reg.tr{right:0;transform:scaleX(-1)}
.cm-reg.bl{bottom:0;transform:scaleY(-1)}
.cm-reg.br{right:0;bottom:0;transform:scale(-1)}

/* --- the document grid: permanent, mostly empty margin column --- */
.cm-row{display:grid;grid-template-columns:var(--marg) minmax(0,1fr);column-gap:40px}
.cm-sec{font:600 11px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(32,26,20,.42);font-variant-numeric:tabular-nums}
.cm-field{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:24px}

/* --- masthead: the table itself, entered ---------------------------------
   The document opens in plan view, the way a table is drawn before it is
   built. The title is not laid over the photograph, it is set ON the
   tabletop: same 3D context, so when the camera comes down the type tips
   and foreshortens with the surface. The move is one transform on one
   element — rotateX to bring the plane to eye level, translateZ to push it
   through the perspective origin. Nothing here scales, because scaling a
   plan view looks like a zoom and this has to look like an approach. */
.cm-tablestage{position:relative;height:250vh;background:var(--doc)}
.cm-tablepin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
/* centred by transform, not by grid: when the plate is wider than the viewport
   (it is, on phones) grid alignment falls back to "safe" and pins the item to
   the start edge, which read as a table shoved to the left. */
.cm-persp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  perspective:1150px;perspective-origin:50% 46%;
  width:min(1180px,94vw);aspect-ratio:1023/641}
.cm-table3d{position:relative;width:100%;height:100%;
  transform-style:preserve-3d;will-change:transform,opacity}
.cm-tableimg{display:block;width:100%;height:100%;object-fit:contain}

/* the tabletop's own rectangle, measured off the keyed plate:
   x 11.24%–88.66%, y 18.88%–81.59% of 1023x641 */
.cm-plate-type{position:absolute;left:11.24%;top:18.88%;
  width:77.42%;height:62.71%;transform:translateZ(2px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(10px,1.7vw,22px);text-align:center;color:var(--oxblood);pointer-events:none}
.cm-tablepin .cm-h1{margin:0}
/* the lockup: wordmark with a qualifier hung off its cap height, the way a
   division mark sits against a house mark — small enough to read as a
   superscript rather than as a second word */
.cm-lock{margin:0;display:inline-flex;align-items:flex-start;gap:.3em}
.cm-lock img{display:block;height:clamp(17px,2.4vw,31px);width:auto}
.cm-lock sup{font:600 clamp(6.5px,.6vw,8.5px)/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rubric);opacity:.9;position:relative;top:.14em}
.cm-h1 .l1{display:block;font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(15px,2.5vw,32px);line-height:.98;letter-spacing:.14em;text-transform:uppercase}
.cm-h1 .l2{display:block;font-family:Fraunces,Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(30px,6.6vw,84px);line-height:.92;letter-spacing:-.022em}
.cm-h1 .dot{color:var(--rubric)}

.cm-cue{position:absolute;left:50%;bottom:clamp(24px,4.2vh,48px);transform:translateX(-50%);
  font:600 10px/1 Inter,sans-serif;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-2);opacity:.5;will-change:opacity}

/* --- documentary plates -------------------------------------------------
   Two photographs in a document that otherwise refuses imagery. They are
   plates, not hero images: numbered, captioned under a hairline, and
   revealed by the frame opening rather than by fading in. */
.cm-plate{margin:clamp(46px,7vw,90px) 0 clamp(30px,5vw,58px);grid-column:1/-1}
.cm-plate figcaption{display:flex;gap:14px;align-items:baseline;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);
  font:500 11px/1.5 Inter,sans-serif;letter-spacing:.08em;color:var(--ink-2)}
.cm-plate .cm-pl{font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rubric);flex:0 0 auto}

.cm-wide .cm-plate-win{position:relative;overflow:hidden;
  height:clamp(230px,32vw,400px);
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s cubic-bezier(.22,.9,.24,1),-webkit-clip-path 1.05s cubic-bezier(.22,.9,.24,1)}
.cm-rv.cm-in .cm-wide .cm-plate-win,.cm-plate.cm-in .cm-plate-win{
  -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
.cm-wide img{width:100%;height:100%;object-fit:cover;object-position:50% 84%;display:block}

/* white-ground cut-out: multiply drops the paper away and keeps the cast
   shadows, so the group stands on the plaster instead of in a box */
/* .cm sits in its own stacking context, so multiply has nothing to blend
   against unless the plaster is painted locally — on the figure itself, not
   on .cm, which would otherwise hide the fixed grain across the whole page */
.cm-cut{display:flex;flex-direction:column;align-items:center;background:var(--doc)}
.cm-cut img{display:block;width:min(760px,100%);height:auto;mix-blend-mode:multiply;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease-out .1s,transform 1.1s cubic-bezier(.22,.9,.24,1) .1s}
.cm-plate.cm-in.cm-cut img{opacity:1;transform:none}
.cm-cut figcaption{align-self:stretch}

/* --- lead: rubricated opening instead of a drop cap (the essay page owns those) --- */
.cm-lead-row{padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,48px)}
.cm-lead{grid-column:1/7;margin:0;font:400 clamp(17px,1.5vw,20px)/1.58 Inter,sans-serif;
  color:rgba(32,26,20,.88);max-width:52ch}
.cm-lead .rub{color:var(--rubric);text-transform:uppercase;letter-spacing:.1em;font-size:.82em;
  font-weight:600}

/* --- clauses: never three equal columns --- */
.cm-clause{padding:clamp(28px,3.4vw,44px) 0;position:relative}
.cm-clause .cm-num{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:26px;
  font-variant-numeric:tabular-nums;color:var(--ink);transition:transform .18s ease}
.cm-clause h3{grid-column:1/5;margin:0;font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:clamp(21px,2.1vw,29px);line-height:1.16;letter-spacing:-.008em;max-width:22ch}
.cm-clause p{grid-column:5/11;margin:0;font:400 15.5px/1.66 Inter,sans-serif;
  color:var(--ink-2);max-width:44ch}
/* rules draw themselves rather than cards fading in */
.cm-line{height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,.84,.24,1),background-color .18s ease}
.cm-in .cm-line{transform:scaleX(1)}
.cm-rise{opacity:0;transform:translateY(14px);
  transition:opacity .52s ease-out,transform .52s cubic-bezier(.16,.84,.24,1)}
.cm-in .cm-rise{opacity:1;transform:none}
.cm-in .cm-rise:nth-child(2){transition-delay:.14s}
.cm-in .cm-rise:nth-child(3){transition-delay:.2s}
@media (hover:hover){
  .cm-clause:hover .cm-line{background:rgba(167,44,45,.42)}
  .cm-clause:hover .cm-num{transform:translateX(3px)}
}

/* --- the Schedule: a specimen table, not tag pills --- */
.cm-sched{padding:clamp(24px,3vw,40px) 0 clamp(30px,4vw,52px)}
.cm-sched h2{grid-column:1/6;margin:0 0 22px;font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.01em}
.cm-sched .col-a{grid-column:1/6}
.cm-sched .col-b{grid-column:6/11}
.cm-srow{display:flex;align-items:baseline;gap:12px;padding:12px 0;
  border-top:1px solid var(--rule-soft)}
.cm-srow .rn{flex:0 0 2.4ch;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:13px;
  color:var(--rubric);font-variant-numeric:tabular-nums}
.cm-srow .lb{font:450 15px/1.3 Inter,sans-serif;color:var(--ink)}
.cm-srow .dots{flex:1 1 0;min-width:2ch;height:1em;color:rgba(32,26,20,.38);
  background-image:radial-gradient(circle,currentColor 1.2px,transparent 1.3px);
  background-size:7px 7px;background-position:0 100%;background-repeat:repeat-x;
  transition:color .22s ease}
.cm-srow .cd{font:500 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(32,26,20,.45);font-variant-numeric:tabular-nums}
@media (hover:hover){.cm-srow:hover .dots{color:rgba(167,44,45,.55)}}

/* --- the inscription: carved, not counted up --- */
.cm-insc{padding:clamp(64px,9vw,132px) 0;border-top:1px solid var(--rule)}
/* auto-flow rather than a fixed column count, so adding or removing a figure
   is a markup change and nothing else — the cells always divide the row */
.cm-insc-grid{grid-column:1/11;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.cm-cell{position:relative;padding:0 clamp(14px,2.4vw,34px);text-align:center}
.cm-cell+.cm-cell::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;
  background:var(--rule);transform:scaleY(0);transform-origin:bottom;
  transition:transform .56s cubic-bezier(.16,.84,.24,1)}
.cm-in .cm-cell+.cm-cell::before{transform:scaleY(1)}
.cm-n{display:block;font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(74px,13vw,168px);line-height:.82;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);
  transition:-webkit-clip-path .64s cubic-bezier(.22,.9,.24,1),clip-path .64s cubic-bezier(.22,.9,.24,1)}
.cm-in .cm-n{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
.cm-cell:nth-child(2) .cm-n{transition-delay:.09s}
.cm-cell:nth-child(3) .cm-n{transition-delay:.18s}
.cm-l{display:inline-block;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);
  font:600 clamp(10.5px,1vw,12px)/1.5 Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(32,26,20,.58)}

/* --- queries: the accordion ---------------------------------------------
   Opening is animated with grid-template-rows 0fr -> 1fr rather than a
   max-height guess. max-height forces you to pick a number larger than any
   answer will ever be, which makes every short answer open on a lazy easing
   curve and every long one clip; 1fr is the answer's OWN height, so all five
   open at the same speed regardless of how much copy is inside them.

   The marker is drawn from two rules rather than set as a glyph: the vertical
   one collapses into the horizontal one, so + becomes - as a single scale
   rather than a swapped character. */
.cm-faq-row{padding-top:4px}
/* held to eight of the ten columns: a question set at the left with its
   marker parked against the far edge of a 1440 viewport reads as two
   unrelated objects rather than one row. */
.cm-faq{grid-column:1/9;border-top:1px solid var(--rule)}
.cm-q{border-bottom:1px solid var(--rule)}
.cm-q h3{margin:0;font:inherit}
.cm-q button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2.4vw,30px);
  padding:clamp(20px,2.6vw,28px) 0;background:none;border:0;cursor:pointer;
  text-align:left;color:inherit;font:inherit;
  transition:padding-left .4s var(--ease-standard)}
.cm-q .q-n{font:600 11px/1.6 Inter,sans-serif;letter-spacing:.16em;
  color:rgba(32,26,20,.4);transition:color .3s var(--ease-standard)}
.cm-q .q-t{font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(18px,2.05vw,26px);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);transition:color .3s var(--ease-standard)}
/* the marker: two 1px rules crossed, the vertical one scaling to nothing */
.cm-q .q-m{position:relative;align-self:center;width:15px;height:15px;flex:0 0 auto}
.cm-q .q-m::before,.cm-q .q-m::after{content:"";position:absolute;left:0;top:50%;
  width:15px;height:1.25px;background:var(--oxblood);
  transition:transform .42s cubic-bezier(.22,.9,.24,1)}
.cm-q .q-m::after{transform:rotate(90deg)}
.cm-q.is-open .q-m::after{transform:rotate(90deg) scaleX(0)}
.cm-q.is-open .q-n{color:var(--oxblood)}
.cm-q.is-open .q-t{color:var(--oxblood)}
@media (hover:hover){
  .cm-q button:hover{padding-left:8px}
  .cm-q button:hover .q-t{color:var(--oxblood)}
  .cm-q button:hover .q-n{color:rgba(167,44,45,.7)}
}
.cm-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,.9,.24,1)}
.cm-q.is-open .cm-a{grid-template-rows:1fr}
.cm-a-in{overflow:hidden}
.cm-a p{margin:0;max-width:62ch;
  padding:0 clamp(28px,4vw,54px) clamp(22px,2.6vw,30px) 0;
  font:400 clamp(14.5px,1.05vw,16px)/1.7 Inter,sans-serif;color:rgba(32,26,20,.72);
  opacity:0;transform:translateY(6px);
  transition:opacity .34s var(--ease-standard),transform .34s var(--ease-standard)}
.cm-q.is-open .cm-a p{opacity:1;transform:none;transition-delay:.12s}
@media (max-width:720px){
  /* .cm-field collapses to a single column on a phone, so the desktop
     grid-column:1/9 would invent eight implicit columns and push the marker
     off the right edge of the screen. */
  .cm-faq{grid-column:1/-1}
  .cm-q button{gap:12px;padding:17px 0}
  .cm-q .q-t{font-size:17px}
  .cm-a p{padding-right:8px;font-size:14.5px}
}

/* --- countersign: the second oxblood band --- */
.cm-sign{position:relative;background:var(--oxblood);color:var(--cream);
  padding:clamp(46px,6vw,84px) var(--pad) clamp(52px,7vw,90px);
  border-top:1px solid var(--ink)}
.cm-sign::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.cm-sign-in{position:relative;max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:24px;row-gap:30px}
.cm-sign .cm-sec{color:rgba(251,240,216,.5)}
.cm-sign-a{grid-column:1/6}
.cm-sign-b{grid-column:6/11;position:relative}
.cm-sign h2{margin:8px 0 14px;font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.01em}
.cm-sign p{margin:0;font:400 15.5px/1.62 Inter,sans-serif;color:rgba(251,240,216,.78);max-width:42ch}
.cm-lab{display:block;font:600 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,240,216,.7);margin-bottom:6px}
/* a ruled line on paper, not a bordered pill */
.cm-in-line{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end}
.cm-fld{flex:1 1 220px;min-width:0}
.cm-fld input{width:100%;min-height:48px;padding:13px 2px;font:400 16px Inter,sans-serif;
  color:var(--cream);background:transparent;border:0;
  border-bottom:1px solid rgba(251,240,216,.34);
  transition:border-color .2s ease}
.cm-fld input::placeholder{color:rgba(251,240,216,.3)}
.cm-fld input:focus{outline:none;border-bottom-color:var(--gold);border-bottom-width:1.5px}
.cm-fld.hc{flex:0 0 88px}
/* The one thing on this page you are meant to press, so it is a button rather
   than an underlined phrase that reads as a footnote. Not the site's pill:
   Corporate is a printed document and forbids a rounded corner anywhere on
   itself, so this is a stamped block — cream on the oxblood, which makes it
   the brightest object in the section, ruled in the seal's own gold. */
.cm-submit{cursor:pointer;margin-top:28px;min-height:52px;
  font:600 12.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oxblood);background:var(--cream);
  border:1px solid var(--gold);
  padding:16px 28px;display:inline-flex;align-items:center;gap:12px;
  /* The fill is a wipe rather than a colour change, because everything else
     that moves on this page draws itself in from an edge — the rules, the
     numerals, the seal. It is a background LAYER growing rather than a
     pseudo-element, so the label needs no wrapper of its own and the key the
     editor derives from this button's markup does not move. */
  background-image:linear-gradient(var(--oxblood),var(--oxblood));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .34s var(--ease-standard),color .28s var(--ease-standard)}
.cm-submit .ar{font-size:15px;transition:transform .28s var(--ease-standard)}
@media (hover:hover){
  .cm-submit:hover{color:var(--cream);background-size:100% 100%}
  .cm-submit:hover .ar{transform:translateX(4px)}
}
.cm-submit:active{transform:translateY(1px)}
.cm-submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cm-note{margin-top:24px;font:400 12px/1.5 Inter,sans-serif;color:rgba(251,240,216,.52);max-width:40ch}
.cm-note.err{color:#EFAFAC}
.cm-seal{position:absolute;right:0;bottom:-8px;width:92px;height:92px;
  transform:rotate(-9deg);transition:transform .26s ease,opacity .26s ease;opacity:.86}
.cm-seal.done{transform:rotate(0deg) scale(1);opacity:1}
.cm-folio{max-width:1120px;margin:0 auto;padding:26px var(--pad) 44px;
  font:500 10px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(32,26,20,.4);display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.cm-folio a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0 -8px}
.cm-folio-mark{display:inline-flex;align-items:flex-start;gap:.3em}
.cm-folio-mark img{display:block;height:21px;width:auto}
.cm-folio-mark sup{font:600 6.5px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rubric);opacity:.85;position:relative;top:.2em}

/* --- the commission, mobile: strict grid degrades to a single column --- */
@media (max-width:1023px){#v-corp{--marg:96px}.cm-row{column-gap:28px}}
@media (max-width:720px){
  #v-corp{--marg:0px}
  .cm-row{grid-template-columns:1fr;row-gap:10px}
  .cm-field,.cm-sign-in{grid-template-columns:1fr;column-gap:0}
  .cm-lead,.cm-clause h3,.cm-clause p,
  .cm-sched h2,.cm-sched .col-a,.cm-sched .col-b,.cm-insc-grid,
  .cm-sign-a,.cm-sign-b{grid-column:1}
  /* the section mark becomes a full-width row with a rule filling the line */
  .cm-sec{display:flex;align-items:center;gap:12px}
  .cm-sec::after{content:"";flex:1;height:1px;background:var(--rule)}
  /* On a phone the pin was a full viewport tall, so once the dive finished
     there was a whole screen of empty paper to scroll through before the
     document arrived — nothing on screen said "keep going". A shorter pin
     ends the dive sooner AND lets the top of the document ride up into the
     last stretch of it, so the next section announces itself while the table
     is still dissolving. */
  .cm-tablestage{height:148vh}
  .cm-tablepin{height:86vh;height:86svh}
  .cm-persp{width:118vw;perspective:820px}
  .cm-clause{padding:22px 0}
  .cm-clause .cm-hd{display:flex;align-items:baseline;gap:12px}
  .cm-clause .cm-hd::after{content:"";flex:0 0 24px;height:1px;background:var(--rule);order:1}
  .cm-clause h3{font-size:21px;max-width:none}
  .cm-clause p{font-size:15px;line-height:1.68;margin-top:10px;max-width:none}
  .cm-sched .col-b{margin-top:0}
  /* the inscription stacks as a ledger — three tiny numerals would be illegible */
  .cm-insc{padding:44px 0}
  .cm-insc-grid{grid-auto-flow:row;grid-auto-columns:auto}
  .cm-cell{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    text-align:left;padding:14px 0;border-top:1px solid var(--rule)}
  .cm-cell+.cm-cell::before{display:none}
  .cm-n{font-size:clamp(52px,15vw,72px);min-width:3.2ch;text-align:right}
  .cm-l{margin-top:0;padding-top:0;border-top:0;text-align:right;letter-spacing:.2em}
  .cm-seal{position:static;margin-top:26px;width:76px;height:76px}
  .cm-in-line{flex-direction:column;align-items:stretch}
  .cm-fld,.cm-fld.hc{flex:1 1 auto;width:100%}
  .cm-submit{width:100%;justify-content:center;margin-top:22px}
  .cm-reg{display:none}
}
@media (max-width:520px){.cm-reg{display:none}}
@media (prefers-reduced-motion:reduce){
  #v-corp *{animation:none!important;transition:none!important}
  .cm-line{transform:scaleX(1)!important}
  .cm-rise{opacity:1!important;transform:none!important}
  .cm-n{-webkit-clip-path:none!important;clip-path:none!important}
  .cm-cell+.cm-cell::before{transform:scaleY(1)!important}
}


/* ============================================================================
   MOMENTS — "THE REEL"
   A dark room with a tape deck in it. Where the other three pages are lit
   surfaces (plaster, newsprint, plaster), this one is the absence of light:
   everything you see is either emitted by a CRT or lying under a desk lamp.

   Two acts, no tab bar. ACT I is a camcorder still running — upcoming events
   live on tape, cued from a shelf of cassette spines. ACT II is the archive:
   prints that eject from a slot and DEVELOP in front of you, because the
   thing a Polaroid actually does is not "look old", it is "resolve".

   The analog is all hand-rolled: feTurbulence grain, gradient scanlines, a
   feColorMatrix RGB split for the tracking glitch, and a filter ramp for the
   emulsion. No libraries, no video, no canvas.
   ============================================================================ */

.mo-panel{
  --osd:#FFA53D;              /* camcorder on-screen display amber */
  --osd-dim:rgba(255,165,61,.5);
  --tape:#12100D;             /* cassette shell */
  --card:#F4EFE2;             /* polaroid stock */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* low-frequency cloud field, luminance pushed into alpha. Used as the
     opacifier's mask so the print clears in patches, not as a crossfade. */
  --emul:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.013' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.6 0 0 0 -0.72'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23c)'/%3E%3C/svg%3E");
  background:#08070A;
  color:var(--cream-100);
}
.mo-panel .view-bar{color:var(--cream-100)}
.mo-panel .vb-back img{filter:brightness(1.15) drop-shadow(0 0 6px rgba(232,51,47,.6)) drop-shadow(0 0 18px rgba(200,40,38,.34))}

/* --- room atmospherics: grain, scanlines, vignette. All fixed, all inert. -- */
.mo-grain,.mo-scan,.mo-vig{position:fixed;inset:0;pointer-events:none;z-index:3}
.mo-grain{opacity:.09;                 /* NOT mix-blend-mode: a full-viewport blended
                                          layer re-composites the whole panel every
                                          scrolled frame. On black, alpha is identical. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mo-grain 1.1s steps(1) infinite}
@keyframes mo-grain{
  0%{background-position:0 0}20%{background-position:-24px 12px}40%{background-position:18px -20px}
  60%{background-position:-14px -8px}80%{background-position:26px 22px}100%{background-position:0 0}}
.mo-scan{opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.42) 0 1px,transparent 1px 3px)}
.mo-vig{box-shadow:inset 0 0 min(38vw,420px) rgba(0,0,0,.85)}

/* ============================ ACT I — the deck ============================ */

.mo-mast{position:relative;z-index:2;padding:calc(var(--vb-h) + clamp(14px,4vh,42px)) clamp(20px,5vw,64px) clamp(16px,3vh,30px);max-width:1320px;margin:0 auto}
.mo-rec{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.24em;color:var(--osd);text-transform:uppercase}
.mo-rec i{width:9px;height:9px;border-radius:50%;background:#E8332F;box-shadow:0 0 10px #E8332F;animation:mo-blink 1.6s steps(1) infinite}
@keyframes mo-blink{0%,55%{opacity:1}56%,100%{opacity:.12}}
.mo-rec span:last-child{margin-left:auto;color:var(--osd-dim);letter-spacing:.16em}

.mo-h1{margin:14px 0 0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(58px,15vw,190px);line-height:.86;letter-spacing:-.035em;color:var(--cream-050);
  text-shadow:0 0 60px rgba(255,165,61,.10)}
/* chroma bleed: the tube can't quite converge the three guns */
.mo-h1 .sp{position:relative;display:inline-block}
.mo-h1 .sp::before,.mo-h1 .sp::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.mo-h1 .sp::before{color:#FF2D5E;mix-blend-mode:screen;transform:translate(-.011em,.004em);opacity:.42}
.mo-h1 .sp::after{color:#22E0FF;mix-blend-mode:screen;transform:translate(.009em,-.004em);opacity:.34}
.mo-panel.is-shift .mo-h1 .sp::before{animation:mo-jitL .34s steps(3) 1}
.mo-panel.is-shift .mo-h1 .sp::after{animation:mo-jitR .34s steps(3) 1}
@keyframes mo-jitL{0%{transform:translate(-.011em,.004em)}33%{transform:translate(-.075em,-.014em)}66%{transform:translate(.035em,.018em)}100%{transform:translate(-.011em,.004em)}}
@keyframes mo-jitR{0%{transform:translate(.009em,-.004em)}33%{transform:translate(.07em,.014em)}66%{transform:translate(-.03em,-.018em)}100%{transform:translate(.009em,-.004em)}}

.mo-lede{margin:20px 0 0;max-width:44ch;font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:rgba(251,240,216,.72)}
.mo-lede em{font-style:normal;color:var(--osd)}

/* ---- the deck: CRT on the left, a shelf of cassette spines on the right --- */
.mo-deck{position:relative;z-index:2;max-width:1320px;margin:0 auto;
  padding:clamp(20px,4vh,44px) clamp(20px,5vw,64px) clamp(40px,8vh,90px);
  display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:minmax(0,1.36fr) minmax(280px,.85fr);align-items:start}

.mo-crt{position:relative;aspect-ratio:4/3;border-radius:16px/22px;overflow:hidden;
  background:#04050A;isolation:isolate;
  box-shadow:0 0 0 1px rgba(251,240,216,.09),0 40px 90px rgba(0,0,0,.7),
             inset 0 0 60px rgba(0,0,0,.9)}
/* Four stills stacked in the same square, told apart by opacity alone — so
   all four are still THERE, and the last one in the markup sits on top of the
   other three catching every click aimed at whichever one you can see. On the
   site that is an invisible target; in /admin it meant uploading a picture for
   the tape on screen always replaced the still on the last tape. Only the one
   showing takes a pointer. */
.mo-shot{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .28s linear}
.mo-shot.on{opacity:1;pointer-events:auto}
.mo-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.22) contrast(1.06) brightness(.94)}
/* two extra passes of the same (cached) frame, colour-separated, parked at
   opacity 0 until the heads lose tracking */
.mo-shot .g{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;pointer-events:none}
.mo-shot .g img{filter:none}
.mo-shot .g.r img{filter:url(#moRed)}
.mo-shot .g.b img{filter:url(#moCyan)}
.mo-crt.tracking .g{opacity:.85}
.mo-crt.tracking .g.r{transform:translate(-7px,1px)}
.mo-crt.tracking .g.b{transform:translate(7px,-1px)}
.mo-crt.tracking .mo-shot.on{animation:mo-slip .42s steps(4) 1}
@keyframes mo-slip{
  0%{transform:translateX(0);clip-path:inset(0 0 0 0)}
  25%{transform:translateX(-13px);clip-path:inset(18% 0 46% 0)}
  50%{transform:translateX(9px);clip-path:inset(52% 0 12% 0)}
  75%{transform:translateX(-5px);clip-path:inset(4% 0 74% 0)}
  100%{transform:translateX(0);clip-path:inset(0 0 0 0)}}

/* the hum bar that crawls up every tube ever built */
.mo-roll{position:absolute;left:0;right:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.055),transparent);
  animation:mo-roll 7.5s linear infinite}
@keyframes mo-roll{from{top:-30%}to{top:104%}}
/* the torn band of noise the deck throws while it re-locks */
.mo-tear{position:absolute;left:-4%;right:-4%;height:0;opacity:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 3px,rgba(0,0,0,.55) 3px 5px,
    rgba(255,255,255,.18) 5px 12px,rgba(0,0,0,.4) 12px 14px,rgba(255,255,255,.42) 14px 17px,
    rgba(0,0,0,.5) 17px 23px,rgba(255,255,255,.25) 23px 29px);
  filter:blur(.5px)}
.mo-crt.tracking .mo-tear{animation:mo-tear .42s steps(6) 1}
@keyframes mo-tear{
  0%{opacity:.9;height:16px;top:88%}30%{opacity:.75;height:34px;top:56%}
  60%{opacity:.6;height:12px;top:26%}100%{opacity:0;height:6px;top:-6%}}

.mo-crt .mo-scanin{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.mo-crt .mo-bulge{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 96% at 50% 42%,transparent 52%,rgba(0,0,0,.72) 100%)}

/* on-screen display — burnt into the corners, never over the subject's face */
.mo-osd{position:absolute;inset:0;pointer-events:none;font:600 11px/1 var(--mono);
  letter-spacing:.16em;color:var(--osd);
  text-shadow:0 0 10px rgba(255,165,61,.7),0 1px 2px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.mo-osd>*{position:absolute;padding:0}
.mo-osd .tl{top:14px;left:16px;display:flex;align-items:center;gap:7px}
.mo-osd .tl i{width:8px;height:8px;border-radius:50%;background:#E8332F;box-shadow:0 0 9px #E8332F;animation:mo-blink 1.6s steps(1) infinite}
.mo-osd .tr{top:14px;right:16px;color:var(--osd-dim)}
.mo-osd .bl{bottom:14px;left:16px;font-variant-numeric:tabular-nums}
.mo-osd .br{bottom:14px;right:16px;font-variant-numeric:tabular-nums;font-size:12px}

/* ---- shelf of cassette spines ---- */
.mo-side{display:flex;flex-direction:column}
.mo-shelf{display:flex;flex-direction:column;gap:9px}
.mo-shelf-h{font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,240,216,.4);margin:0 0 6px}
.mo-spine{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  width:100%;text-align:left;cursor:pointer;
  border:none;border-radius:3px 5px 5px 3px;padding:13px 14px 13px 20px;
  background:linear-gradient(90deg,#000 0 5px,var(--tape) 5px),var(--tape);
  box-shadow:inset 0 1px 0 rgba(251,240,216,.09),inset 0 -1px 0 rgba(0,0,0,.6),
             0 6px 16px rgba(0,0,0,.55);
  color:var(--cream-100);
  transition:transform .42s cubic-bezier(.2,.9,.25,1),box-shadow .3s}
.mo-spine::after{content:"";position:absolute;left:20px;right:14px;top:13px;bottom:13px;
  border-radius:2px;background:rgba(251,240,216,.045);pointer-events:none}
.mo-spine .t{position:relative;z-index:1;font-family:'Fraunces',Georgia,serif;font-size:16.5px;line-height:1.2}
.mo-spine .d{position:relative;z-index:1;font:600 11px/1 var(--mono);letter-spacing:.1em;color:rgba(251,240,216,.5);white-space:nowrap}
@media (hover:hover){.mo-spine:hover{transform:translateX(-10px)}}
.mo-spine[aria-selected="true"]{transform:translateX(-24px);
  box-shadow:inset 0 1px 0 rgba(255,165,61,.35),0 10px 26px rgba(0,0,0,.65),-8px 0 0 -4px var(--osd)}
.mo-spine[aria-selected="true"] .d{color:var(--osd)}

/* ---- what is actually on the tape ---- */
.mo-now{margin-top:clamp(26px,4vh,40px)}
.mo-now h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.015em;color:var(--cream-050)}
.mo-now .where{margin:10px 0 0;font:600 11.5px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--osd)}
.mo-now p{margin:12px 0 0;max-width:42ch;font-size:15.5px;line-height:1.62;color:rgba(251,240,216,.7)}
.mo-now .btn{margin-top:20px}
.mo-now-in{animation:mo-cut .5s cubic-bezier(.2,.9,.25,1) 1}
@keyframes mo-cut{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---- transport ---- */
.mo-trans{display:flex;align-items:center;gap:8px;margin-top:24px}
.mo-trans button{width:48px;height:44px;border:none;border-radius:5px;cursor:pointer;
  display:grid;place-items:center;color:var(--cream-100);
  background:linear-gradient(180deg,#26221C,#15120E);
  box-shadow:inset 0 1px 0 rgba(251,240,216,.14),0 3px 0 #0A0806,0 6px 12px rgba(0,0,0,.5);
  transition:transform .1s,box-shadow .1s}
.mo-trans button:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(251,240,216,.1),0 0 0 #0A0806}
/* Forward is the one to press, so it is the one that is lit. A deck's play
   key has a lamp under it and the rewind key does not; here the lamp pulses
   slowly, which is what makes it read as an invitation rather than a state. */
#moNext{color:var(--osd);
  box-shadow:inset 0 1px 0 rgba(255,165,61,.28),inset 0 0 0 1px rgba(255,165,61,.34),
             0 3px 0 #0A0806,0 6px 12px rgba(0,0,0,.5),0 0 16px rgba(255,165,61,.28);
  animation:mo-cue 2.6s ease-in-out infinite}
#moNext svg{filter:drop-shadow(0 0 5px rgba(255,165,61,.7))}
@keyframes mo-cue{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,165,61,.28),inset 0 0 0 1px rgba(255,165,61,.30),
                     0 3px 0 #0A0806,0 6px 12px rgba(0,0,0,.5),0 0 12px rgba(255,165,61,.20)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,165,61,.4),inset 0 0 0 1px rgba(255,165,61,.62),
                     0 3px 0 #0A0806,0 6px 12px rgba(0,0,0,.5),0 0 26px rgba(255,165,61,.5)}}
#moNext:active{animation:none}
@media (hover:hover){#moNext:hover{animation:none;
  box-shadow:inset 0 1px 0 rgba(255,165,61,.45),inset 0 0 0 1px rgba(255,165,61,.75),
             0 3px 0 #0A0806,0 6px 12px rgba(0,0,0,.5),0 0 30px rgba(255,165,61,.55)}}
.mo-trans svg{width:15px;height:15px;fill:currentColor}
.mo-trans .cnt{margin-left:10px;font:600 11px/1 var(--mono);letter-spacing:.18em;color:rgba(251,240,216,.42)}
.mo-trans .cnt b{color:var(--osd);font-weight:600}

/* =========================== the filmstrip rule =========================== */
.mo-film{position:relative;z-index:2;overflow:hidden;padding:11px 0;margin:0;
  background:#0D0C0F;border-top:1px solid rgba(251,240,216,.08);border-bottom:1px solid rgba(251,240,216,.08)}
.mo-film::before,.mo-film::after{content:"";position:absolute;left:0;right:0;height:11px;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(251,240,216,.16) 9px 18px)}
.mo-film::before{top:0}.mo-film::after{bottom:0}
/* It runs, and it keeps running. The travel is one set's width in pixels,
   published by moFilmFill after it has counted how many copies this window
   needs — a percentage of the track cannot work when the track's length
   depends on the viewport. Nothing pauses it: a strip that stops when the
   pointer crosses it looks broken rather than considerate, and there is
   nothing on it to read. */
.mo-film-run{display:flex;width:max-content;
  animation:mo-run 52s linear infinite;will-change:transform}
.mo-film-set{display:flex;gap:6px;padding-right:6px}
.mo-film-set img{display:block;height:clamp(74px,11vh,116px);width:auto;object-fit:cover;
  filter:grayscale(.7) contrast(1.2) brightness(.62) sepia(.24)}
@keyframes mo-run{to{transform:translate3d(calc(var(--fw,50%) * -1),0,0)}}

/* ========================== ACT II — the archive ========================== */
.mo-arch{position:relative;z-index:2;max-width:1320px;margin:0 auto;
  padding:clamp(46px,9vh,110px) clamp(20px,5vw,64px) clamp(20px,4vh,40px)}
.mo-arch-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px;margin:0 0 clamp(28px,5vh,56px)}
.mo-arch-h h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(34px,6.4vw,80px);line-height:.98;letter-spacing:-.025em;color:var(--cream-050)}
.mo-arch-h span{font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(251,240,216,.4)}
.mo-arch-h span b{color:var(--osd);font-weight:600}

/* Two across, so an even number of prints fills its rows; the wall narrows to
   the count rather than stretching, and a lone print gets the full width of a
   single column instead of sitting stranded in the corner of a 2x2. */
.mo-wall{display:grid;gap:clamp(6px,1.4vw,22px);grid-template-columns:repeat(2,1fr);
  max-width:940px}
.mo-wall:has(> .mo-cell:only-child){grid-template-columns:1fr;max-width:470px}
/* the cell is the camera: the print is behind its lip until it is pushed out */
.mo-cell{position:relative;overflow:hidden;padding:48px 34px 30px}
.mo-cell::before{content:"";position:absolute;top:0;left:8%;right:8%;height:7px;z-index:3;
  border-radius:0 0 4px 4px;background:linear-gradient(180deg,#1B1813,#0A0907);
  box-shadow:0 5px 14px rgba(0,0,0,.8),inset 0 1px 0 rgba(251,240,216,.16)}

.mo-pol{margin:0;position:relative;background:var(--card);padding:12px 12px 0;
  border-radius:2px;box-shadow:0 18px 40px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.4);
  transform:translateY(-120%) rotate(0deg);
  transition:transform .92s cubic-bezier(.18,.86,.24,1)}
.mo-cell.mo-out .mo-pol{transform:translateY(0) rotate(var(--rot,0deg))}

/* ---- the post-it --------------------------------------------------------
   Stuck to the corner of the print, not printed on it: it overhangs the top
   right so it reads as a second piece of paper, and it counter-rotates
   against the polaroid's own tilt so the two were clearly not placed by the
   same hand. It stays inside .mo-cell's 34/30px padding, which is what keeps
   the cell's overflow:hidden from cropping it.

   It is a TEXT field, and the text is the switch. Words in it, and the note
   is there; clear it in /admin, and moFlags() takes it off that print. The
   store holds strings, so a note that hides when it has nothing to say is a
   toggle that needs no new kind of record. */
.mo-flag{position:absolute;top:-42px;right:-8px;z-index:4;max-width:112px;
  padding:8px 10px 9px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:12.5px;line-height:1.2;
  color:#3A2A08;text-align:center;
  background:linear-gradient(158deg,#F6D970 0%,#EFC93F 62%,#E7BC28 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.5);
  transform-origin:80% 20%}
/* counter-rotated off the print's own tilt, so the note is never parallel to
   the thing it is stuck to whatever angle that print landed at */
.mo-flag{transform:rotate(calc(var(--rot,0deg) * -1.9))}
/* the one strip of adhesive, top edge only — the rest of the note lifts */
.mo-flag::before{content:"";position:absolute;left:22%;right:22%;top:-4px;height:8px;
  background:rgba(251,240,216,.16);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mo-flag.off{display:none}
/* in the editor an empty note must still be there to click into, or a note
   once cleared could never be written again */
html.is-admin .mo-flag.off{display:block;min-width:74px;min-height:30px;opacity:.42;
  background:none;box-shadow:inset 0 0 0 1px rgba(251,240,216,.5)}
html.is-admin .mo-flag.off::before{display:none}

.mo-pol-win{position:relative;overflow:hidden;aspect-ratio:1/1;background:#B9B5A8}
.mo-pol-win img{width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.mo-cell.mo-out .mo-pol-win img{animation:mo-develop 3.1s cubic-bezier(.25,.7,.2,1) .52s both}
/* Instant film does not fade in. An opacifier layer sitting ON the print
   clears away, and it clears unevenly. So: a flat opacifier masked by a low
   -frequency turbulence field, fading as one property. Where the mask alpha
   is thin the print surfaces first, where it is thick it holds — which is
   what blotchy development actually looks like, for the cost of one opacity. */
.mo-pol-win::after{content:"";position:absolute;inset:-2%;pointer-events:none;
  background:linear-gradient(150deg,#D2CEC2,#9EA39B);
  -webkit-mask-image:var(--emul);mask-image:var(--emul);
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:var(--mp,0 0);mask-position:var(--mp,0 0)}
.mo-cell.mo-out .mo-pol-win::after{animation:mo-clear 2.9s cubic-bezier(.3,.62,.2,1) .55s both}
@keyframes mo-clear{from{opacity:1}to{opacity:0}}
/* and it resolves cold before it resolves warm */
@keyframes mo-develop{
  0%  {opacity:0;filter:saturate(0) contrast(.40) brightness(1.46) hue-rotate(-20deg)}
  20% {opacity:1;filter:saturate(.10) contrast(.60) brightness(1.24) hue-rotate(-16deg)}
  60% {opacity:1;filter:saturate(.68) contrast(.88) brightness(1.06) hue-rotate(-8deg)}
  100%{opacity:1;filter:none}}
.mo-pol figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  align-items:flex-end;padding:14px 4px 18px;color:#2B2620}
.mo-pol .cap{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:16px;line-height:1.25;flex:1 1 auto}
.mo-pol .stamp{font:600 10px/1.35 var(--mono);letter-spacing:.06em;text-align:right;
  color:#E06A12;text-shadow:0 0 6px rgba(224,106,18,.4)}
.mo-pol .where{position:absolute;left:12px;bottom:0;transform:translateY(120%);
  font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(251,240,216,.3)}
@media (hover:hover){
  .mo-cell.mo-out .mo-pol:hover{transform:translateY(-9px) rotate(0deg) scale(1.02);
    box-shadow:0 30px 60px rgba(0,0,0,.7)}
}

/* ============================== the sign-off ============================== */
.mo-end{position:relative;z-index:2;max-width:1320px;margin:0 auto;
  padding:clamp(50px,10vh,120px) clamp(20px,5vw,64px)}
.mo-end-in{border-top:1px solid rgba(251,240,216,.12);padding-top:clamp(28px,5vh,52px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
.mo-end h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;color:var(--cream-050);max-width:14ch}
.mo-end p{margin:12px 0 0;max-width:38ch;font-size:15.5px;line-height:1.6;color:rgba(251,240,216,.65)}
.mo-panel .view-foot a{display:inline-block;padding:14px 6px;margin:-14px -6px}
.mo-panel .view-foot{max-width:1320px;margin:0 auto;padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);color:rgba(251,240,216,.6)}

/* ================================ narrow ================================= */
@media (max-width:900px){
  .mo-deck{grid-template-columns:1fr;padding-bottom:clamp(30px,6vh,60px)}
  .mo-wall{grid-template-columns:repeat(2,1fr)}
  .mo-cell{padding:44px 20px 22px}
}
@media (max-width:560px){
  .mo-wall{grid-template-columns:1fr;gap:4px}
  .mo-cell{padding:44px 28px 22px}
  .mo-spine[aria-selected="true"]{transform:translateX(-12px)}
  .mo-osd{font-size:10px}
}

/* =============================== reduced ================================= */
@media (prefers-reduced-motion:reduce){
  .mo-grain,.mo-rec i,.mo-osd .tl i,.mo-roll,.mo-film-run,#moNext{animation:none}
  .mo-crt.tracking .mo-shot.on,.mo-crt.tracking .mo-tear{animation:none}
  .mo-crt.tracking .g{opacity:0}
  .mo-film-run{transform:translate3d(-25%,0,0)}
  .mo-pol{transform:rotate(var(--rot,0deg))!important;transition:none}
  .mo-cell.mo-out .mo-pol-win img{animation:none;opacity:1;filter:none}
  .mo-cell.mo-out .mo-pol-win::after{animation:none;opacity:0}
  .mo-pol-win img{opacity:1}
  .mo-pol-win::after{opacity:0}
  .mo-now-in{animation:none}
}
/* the people who set these flags are precisely the ones the atmospherics hurt */
@media (prefers-reduced-transparency:reduce){.mo-grain,.mo-scan,.mo-crt .mo-scanin,.mo-roll{display:none}}
@media (prefers-contrast:more){
  .mo-grain,.mo-scan,.mo-crt .mo-scanin,.mo-vig{display:none}
  .mo-lede,.mo-now p,.mo-end p{color:var(--cream-100)}
  .mo-arch-h span,.mo-trans .cnt{color:rgba(251,240,216,.8)}
}


/* ============================================================================
   CONTACT — "THE CARD"
   The other four pages are places you walk into: a wall, a broadsheet, a
   commission, a dark room. This one is an object handed to you across a
   table. So it does not scroll and it has no sections — the page IS the
   card, centred on oxblood, and everything on it is one of two things: a
   way to reach us, or the rule under it.

   Motion budget is deliberately tiny: the card settles once, the rules draw
   themselves left to right, the lines stagger in behind them. Nothing loops,
   nothing follows the cursor.
   ============================================================================ */

#v-contact{
  --ground:#4A1516;
  --card:#FFFBF3;
  --ink:#201A14;
  --ink-2:#5A4C3F;
  --rule:rgba(32,26,20,.16);
  --rubric:#A72C2D;
  --gold:#C98A2D;
}
#v-contact .view-panel{background:var(--ground);color:var(--card);
  display:flex;flex-direction:column}
#v-contact .view-bar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--card)}
#v-contact :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the ground: fresco plaster tooth over oxblood, plus one soft light from
   the upper left so the card has something to sit in */
.ct-ground{position:absolute;inset:0;pointer-events:none;z-index:0}
.ct-ground::before{content:"";position:absolute;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.ct-ground::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 22% 8%,rgba(251,240,216,.16),transparent 58%),
             radial-gradient(90% 70% at 84% 100%,rgba(11,9,6,.4),transparent 60%)}

/* The card is centred in whatever is left after the floating chrome, not in
   the whole panel — on a short screen the two would otherwise centre on the
   same axis and the card's masthead would sit under the exit mark. */
.ct-wrap{position:relative;z-index:1;flex:1;display:grid;justify-items:center;
  align-items:safe center;
  padding:calc(var(--vb-h) + clamp(8px,2vh,24px)) clamp(16px,5vw,48px) clamp(24px,5vh,56px)}

/* --- the card ----------------------------------------------------------- */
.ct-card{width:min(760px,100%);background:var(--card);color:var(--ink);
  border-radius:2px;padding:clamp(30px,5vw,62px);
  box-shadow:0 40px 90px rgba(11,9,6,.45),0 2px 0 rgba(11,9,6,.25);
  opacity:0;transform:translateY(22px) rotate(-.35deg);
  transition:opacity .7s var(--ease-standard),transform .9s cubic-bezier(.22,.9,.24,1)}
#v-contact.is-in .ct-card{opacity:1;transform:none}

.ct-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font:600 10px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2)}
.ct-head b{color:var(--rubric);font-weight:600}

/* every rule on this card draws itself, in order */
.ct-rule{height:1px;background:var(--rule);margin:18px 0 0;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.22,.9,.24,1)}
#v-contact.is-in .ct-rule{transform:scaleX(1)}
#v-contact.is-in .ct-rule.d1{transition-delay:.18s}
#v-contact.is-in .ct-rule.d2{transition-delay:.5s}

.ct-mark{display:inline-flex;align-items:flex-start;gap:.34em;margin:clamp(26px,4.2vw,44px) 0 0}
.ct-mark img{display:block;height:clamp(22px,3vw,30px);width:auto}
.ct-mark sup{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rubric);position:relative;top:.2em}

.ct-h1{margin:clamp(14px,2.2vw,22px) 0 0;font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:clamp(34px,5.6vw,62px);line-height:1;letter-spacing:-.02em}
.ct-h1 em{font-style:italic;font-weight:300}
.ct-sub{margin:16px 0 0;max-width:44ch;font:400 clamp(14.5px,1.35vw,16.5px)/1.6 Inter,sans-serif;
  color:var(--ink-2)}

/* --- the three ways ----------------------------------------------------- */
.ct-list{margin:clamp(28px,4.4vw,46px) 0 0;display:flex;flex-direction:column}
.ct-row{display:grid;grid-template-columns:minmax(78px,auto) 1fr auto;align-items:baseline;
  gap:16px;padding:19px 0;border-top:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
  opacity:0;transform:translateY(9px);
  transition:opacity .55s var(--ease-standard),transform .6s cubic-bezier(.22,.9,.24,1),
             background .22s var(--ease-standard)}
#v-contact.is-in .ct-row{opacity:1;transform:none}
#v-contact.is-in .ct-row:nth-of-type(1){transition-delay:.30s}
#v-contact.is-in .ct-row:nth-of-type(2){transition-delay:.38s}
#v-contact.is-in .ct-row:nth-of-type(3){transition-delay:.46s}
.ct-row .k{font:600 10.5px/1.4 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2)}
.ct-row .v{font-family:'Fraunces',Georgia,serif;font-size:clamp(17px,2.1vw,23px);
  line-height:1.2;letter-spacing:-.01em}
.ct-row .ar{font:400 15px/1 Inter,sans-serif;color:var(--rubric);
  transform:translateX(-5px);opacity:0;transition:transform .28s var(--ease-standard),opacity .28s}
@media (hover:hover){
  .ct-row:hover{background:rgba(167,44,45,.05)}
  .ct-row:hover .ar{transform:none;opacity:1}
  .ct-row:hover .v{color:var(--rubric)}
}
.ct-row:focus-visible .ar{transform:none;opacity:1}

/* --- leave an address --------------------------------------------------- */
.ct-form{margin:clamp(30px,4.6vw,46px) 0 0;
  opacity:0;transform:translateY(9px);
  transition:opacity .55s var(--ease-standard) .54s,transform .6s cubic-bezier(.22,.9,.24,1) .54s}
#v-contact.is-in .ct-form{opacity:1;transform:none}
.ct-fld{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ct-fld label{flex:1 1 220px;display:block}
.ct-fld .lab{display:block;font:600 10px/1 Inter,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:13px}
.ct-fld input{width:100%;border:none;border-bottom:1px solid var(--ink);background:transparent;
  font:400 17px/1.4 Inter,sans-serif;color:var(--ink);padding:0 0 12px;border-radius:0}
.ct-fld input::placeholder{color:rgba(32,26,20,.28)}
.ct-fld input:focus{outline:none;border-bottom-color:var(--rubric)}
.ct-send{flex:0 0 auto;border:none;cursor:pointer;background:var(--rubric);color:var(--card);
  font:600 13.5px/1 Inter,sans-serif;letter-spacing:.02em;border-radius:999px;
  padding:14px 24px;min-height:44px;display:inline-flex;align-items:center;gap:9px;
  transition:background .2s var(--ease-standard),transform .12s}
.ct-send .ar{transition:transform .24s var(--ease-standard)}
@media (hover:hover){.ct-send:hover{background:var(--red-700)}.ct-send:hover .ar{transform:translateX(3px)}}
.ct-send:active{transform:scale(.97)}
.ct-note{margin:20px 0 0;font:400 12.5px/1.55 Inter,sans-serif;color:var(--ink-2);
  display:flex;align-items:flex-start;gap:8px}
.ct-note.err{color:var(--rubric)}
/* the seal only completes once the note has something to say */
.ct-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:4px;
  border:1px solid var(--rubric);background:transparent;
  transition:background .4s var(--ease-standard),transform .4s cubic-bezier(.22,.9,.24,1)}
.ct-note.done .ct-dot{background:var(--rubric);transform:scale(1.25)}

.ct-foot{margin:clamp(20px,3.2vw,30px) 0 0;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  font:500 10px/1.6 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(32,26,20,.42)}

@media (max-width:560px){
  .ct-wrap{padding:calc(var(--vb-h) + 16px) 14px 18px}
  .ct-card{padding:26px 22px 30px}
  .ct-head{font-size:9px;letter-spacing:.16em}
  .ct-head span:last-child{white-space:nowrap}
  .ct-h1{font-size:clamp(30px,9vw,40px)}
  .ct-sub{font-size:14px;line-height:1.5}
  .ct-row{grid-template-columns:1fr auto;row-gap:3px;padding:16px 0}
  .ct-row .k{grid-column:1/-1}
  .ct-fld .lab{margin-bottom:7px;letter-spacing:.13em}
  .ct-send{width:100%;justify-content:center;padding:13px 22px}
  .ct-note{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .ct-card,.ct-rule,.ct-row,.ct-form{transition:none!important}
  .ct-card{opacity:1;transform:none}
  .ct-rule{transform:scaleX(1)}
  .ct-row,.ct-form{opacity:1;transform:none}
}