/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION · home.css
   Front page: cinematic hero, the daily index, three puzzle plates,
   and a full-bleed statement band.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────
   The film moves, and the golden retriever moves with it, so no scrim keeps
   cream type reliably off a cream dog. The hero is set like a front page
   instead: the photograph keeps a frame entirely to itself and the words sit
   on an ink column beside it (desktop) or beneath it (small screens).
   ──────────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto;
  background:linear-gradient(168deg,#2C1C0D 0%,#1F1409 54%,#170F07 100%);
  color:var(--cream);
  isolation:isolate;
  overflow:clip;
}
.hero-media{ position:relative; overflow:hidden; height:clamp(268px,46svh,430px) }
.hero-media > img,
.hero-media > video{
  width:100%; height:100%; object-fit:cover; object-position:56% 46%;
  transform:translate3d(var(--hero-dx,0px),var(--par,0px),0) scale(1.1);
  will-change:transform;
}
.hero-media video{ opacity:0; transition:opacity 1.1s var(--e-out) }
.hero-media video.is-ready{ opacity:1 }
.hero-media video.is-ready + .hero-poster{ opacity:0 }
.hero-poster{ position:absolute; inset:0; transition:opacity 1.1s var(--e-out) }
/* The photograph runs under the fixed masthead, so it needs a little weight at
   the top; everything else is left as it was shot. */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(20,13,6,.52) 0%,rgba(20,13,6,.14) 16%,rgba(20,13,6,0) 38%,
                          rgba(20,13,6,0) 74%,rgba(24,16,8,.34) 100%);
}

.hero-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(30px,5vh,46px) clamp(32px,5vh,54px);
  color:var(--cream);
}
.hero-dateline{
  position:relative;
  /* Centres the dateline between the bottom of the photo and the headline:
     half the gap this row already has above (the hero-inner top padding)
     minus half the gap it already has below (its own margin-bottom), so it
     settles evenly between them instead of at a fixed offset. */
  top:calc((clamp(12px,1.8vh,20px) - clamp(30px,5vh,46px)) / 2);
  font-family:var(--f-mono); text-transform:uppercase;
  color:rgba(244,234,214,.72);
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  margin-bottom:clamp(12px,1.8vh,20px);
  animation:dpFade .9s var(--e-out) .15s both;
}
.hero-date{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; white-space:nowrap }
.hero-dateline b{ font-size:.8125rem; font-weight:500; letter-spacing:.19em; color:var(--amber) }

/* The reset countdown sits directly under the date in the dateline's own
   voice, one step quieter: the date is what this block is for, the countdown
   is a note on it. The 05:00 Europe/London rule lives in daily-paws-day.js. */
.hero-reset{
  font-size:.625rem; letter-spacing:.11em; line-height:1.3;
  color:rgba(244,234,214,.6);
}

.hero h1{ color:var(--cream); max-width:13ch; line-height:1.04; margin-bottom:clamp(17px,2.5vh,27px) }
.hero h1 em{ color:#F2D9A8 }
.hero-line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em }
.hero-line:last-child{ margin-bottom:0 }
.hero-line > span{ display:block; transform:translateY(105%); animation:dpRise 1.05s var(--e-out) both }
.hero-line:nth-of-type(1) > span{ animation-delay:.22s }
.hero-line:nth-of-type(2) > span{ animation-delay:.34s }
@keyframes dpRise{ to{ transform:none } }
@keyframes dpFade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.hero-sub{
  font-size:clamp(1rem,.4vw + .94rem,1.14rem); line-height:1.55;
  color:rgba(244,234,214,.86); max-width:38ch;
  animation:dpFade .9s var(--e-out) .5s both;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,2.8vh,32px);
           animation:dpFade .9s var(--e-out) .62s both }
.hero-cta .dp-btn{ --btn-bg:var(--rust); --btn-bd:var(--rust); --btn-fg:#FFF6EA;
                   --btn-hov-bg:var(--cream); --btn-hov-fg:var(--night) }
.hero-cta .dp-btn--onDark{ --btn-bg:transparent; --btn-bd:rgba(244,234,214,.44); --btn-fg:var(--cream);
                           --btn-hov-bg:var(--cream); --btn-hov-fg:var(--night) }

/* Small screens: the buttons go full width rather than shrinking */
@media (max-width:539px){
  .hero h1{ font-size:clamp(2.25rem,10.4vw,3.1rem); max-width:11ch }
  .hero-dateline{ gap:4px }
  .hero-dateline b{ font-size:.75rem; letter-spacing:.16em }
  .hero-date{ gap:5px }
  .hero-reset{ font-size:.5625rem; letter-spacing:.09em }
  .hero-sub{ font-size:1rem; max-width:34ch }
  .hero-cta{ flex-direction:column; align-items:stretch; max-width:340px; gap:10px }
}
@media (max-width:359px){
  .hero h1{ font-size:2.05rem }
  .hero-sub{ font-size:.9375rem }
}

/* Tablet and up: the photograph gets more air above the words */
@media (min-width:600px) and (max-width:899px){
  .hero-media{ height:clamp(320px,52svh,520px) }
}

/* ── Desktop: the two halves sit side by side ──────────────────────────── */
@media (min-width:900px){
  .hero{
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    grid-template-rows:minmax(0,1fr) auto;
    min-height:min(92svh,880px);
  }
  .hero-media{ grid-column:2; grid-row:1; height:auto }
  .hero-media > img,
  .hero-media > video{ object-position:57% 50%; transform:translate3d(0,var(--par,0px),0) scale(1.06) }
  .hero-scrim{
    background:
      /* feather the photograph into the ink column */
      linear-gradient(90deg,rgba(22,14,7,.96) 0%,rgba(22,14,7,.50) 6%,rgba(22,14,7,.10) 15%,rgba(22,14,7,0) 26%),
      /* enough weight for the masthead and the index strip, no more */
      linear-gradient(180deg,rgba(20,13,6,.46) 0%,rgba(20,13,6,.06) 18%,rgba(20,13,6,0) 48%,
                            rgba(20,13,6,.22) 84%,rgba(18,11,5,.52) 100%);
  }
  .hero-inner{
    grid-column:1; grid-row:1;
    justify-content:center;
    padding-top:var(--nav-h);
    padding-left:max(var(--gutter),calc(50vw - 720px + var(--gutter)));
    padding-right:clamp(26px,3vw,58px);
    padding-bottom:clamp(32px,5vh,64px);
    max-width:none;
  }
  /* An empty flex item balancing .hero-dateline's own growth below, so the
     dateline lands centred between the masthead and the headline instead of
     hugging one side of the leftover space. */
  .hero-inner::after{ content:""; flex:1 1 auto }
  .hero-dateline{
    position:static;
    flex:1 1 auto;
    justify-content:center;
    /* Replaces the old fixed top-offset hack: the masthead clearance and the
       headline gap (the two gaps this row used to carry unevenly) are pooled
       and split evenly above and below the dateline's own content. */
    padding-block:calc((clamp(24px,3.5vh,48px) + clamp(12px,1.8vh,20px)) / 2);
    margin-bottom:0;
  }
  .hero h1{ font-size:clamp(2.5rem,4.3vw,4.3rem); max-width:11ch }
  .hero-sub{ max-width:32ch }
  .hero-index{ grid-column:1 / -1; grid-row:2 }
}
@media (min-width:900px) and (max-width:1120px){
  .hero{ grid-template-columns:minmax(0,43fr) minmax(0,57fr) }
  .hero h1{ font-size:clamp(2.25rem,4vw,3.05rem) }
}
/* Past ~1600px the shell-aligned text column keeps shrinking (it tracks the
   masthead/footer's centred 1440px shell) while the headline holds its max
   size, so the wide desktop tier gives the copy a little more of the grid. */
@media (min-width:1600px){
  .hero{ grid-template-columns:minmax(0,43fr) minmax(0,57fr) }
}

/* Front-page index — the three puzzles, printed across the foot of the hero */
/* The index strip doubles as the Today’s Puzzles tracker (see index.html),
   so unlike before it is shown at every width - a phone needs to see which of
   the three it has finished just as much as a desktop does. */
.hero-index{
  position:relative; z-index:2; display:block;
  border-top:1px solid rgba(244,234,214,.16);
  background:rgba(15,10,5,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:dpFade 1s var(--e-out) .8s both;
}
.hero-index-inner{ display:grid; grid-template-columns:repeat(3,1fr) }
.hero-index a{
  position:relative; display:flex; align-items:baseline; gap:14px;
  padding:26px clamp(14px,2vw,28px);
  color:var(--cream);
  transition:background .4s var(--e-out);
}
.hero-index a + a{ border-left:1px solid rgba(244,234,214,.14) }
.hero-index a:hover{ background:rgba(244,234,214,.07) }
.hero-index-num{ font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; color:var(--accent,var(--amber)); flex:none }
.hero-index-name{ font-family:var(--f-display); font-weight:600; font-size:1.06rem; letter-spacing:-.01em }
.hero-index-sub{ font-size:.75rem; color:rgba(244,234,214,.58); margin-left:auto; text-align:right }
/* The middle item's name ("Connect Paws") is the tall pole in the tent: below
   ~1100px the column isn't wide enough to size the names up without wrapping
   it, so the larger, more prominent treatment only kicks in once there's
   room to spare. */
@media (min-width:1100px){
  .hero-index a{ gap:16px }
  .hero-index-name{ font-size:1.2rem; letter-spacing:-.012em }
}
.hero-index a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent,var(--amber));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-io);
}
.hero-index a:hover::after{ transform:scaleX(1) }

/* ── Today’s Puzzles marks ───────────────────────────────────────────────
   The strip above already names exactly the three core daily games, so the
   completion state is shown here rather than in a second panel repeating
   them. The mark is the only thing that moves: a faint ring until that game
   is finished, then a tick in the game’s own accent. Pawdle Plus is not one
   of these three and can never light one up. */
.hero-index-mark{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px;
  color:rgba(244,234,214,.30);
  transition:color .45s var(--e-out), opacity .45s var(--e-out);
}
.hero-index-mark svg{ width:100%; height:100% }
/* Until the real state is known, no marks at all - better than three rings
   that might be about to become ticks. */
.hero-index.is-pending .hero-index-mark{ opacity:0 }
.hero-index a.is-done .hero-index-mark{ color:var(--accent,var(--amber)) }
.hero-index a.is-done .hero-index-name{ color:rgba(244,234,214,.70) }
.hero-index a.is-done::after{ transform:scaleX(1); opacity:.5 }

/* The mark needs room that the blurbs used to take, and below ~1100px the
   middle column has none to give - "Connect Paws" was already the tall pole
   in the tent there. So under that width the strip drops the blurbs and reads
   purely as progress; the plates further down the page still carry the
   descriptions in full. */
.hero-index-sub{ display:none }
.hero-index-name{ margin-right:auto }
@media (min-width:1100px){
  .hero-index-sub{ display:block; margin-right:0 }
  .hero-index-name{ margin-right:0 }
}

/* Phones: one game per line. */
@media (max-width:759px){
  .hero-index-inner{ grid-template-columns:1fr }
  .hero-index a{ align-items:center; gap:12px; padding:13px var(--gutter) }
  .hero-index a + a{ border-left:0; border-top:1px solid rgba(244,234,214,.12) }
  .hero-index-name{ font-size:1rem }
  .hero-index-mark{ width:16px; height:16px }
}

/* ── Section head ──────────────────────────────────────────────────────── */
.sec-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px;
           padding-bottom:22px; border-bottom:1px solid var(--line) }
.sec-head .dp-edition{ margin-left:auto; font-family:var(--f-mono); font-size:.6875rem;
                       letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }

/* Bring the next section into the first viewport on the homepage. The hero
   already provides the visual pause; the full shared section offset leaves
   an unnecessarily empty band beneath its puzzle index. */
.dp-home .hero + .dp-section{ padding-top:clamp(40px,5vw,72px) }
@media (min-width:900px){
  .dp-home .hero + .dp-section{ padding-top:clamp(16px,1.5vw,24px) }
}

/* ── Section head meta ─────────────────────────────────────────────────── */
.sec-head-meta{ margin-left:auto; display:flex; align-items:baseline; gap:10px }
.sec-head-meta .dp-edition{ margin-left:0 }
@media (max-width:539px){
  .sec-head-meta{ width:100%; justify-content:space-between; gap:14px }
}

.sec-intro{ padding-top:clamp(26px,4vw,44px); display:grid; gap:20px }
@media (min-width:900px){ .sec-intro{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:end } }
.sec-intro .dp-lede{ max-width:44ch }

/* ── Puzzle plates ─────────────────────────────────────────────────────── */
.plates{ margin-top:clamp(34px,5vw,58px) }
.plate{
  display:grid; gap:clamp(26px,4vw,60px);
  padding-block:clamp(44px,6.5vw,96px);
  border-top:1px solid var(--line);
}
.plate:first-child{ border-top:0 }
@media (min-width:900px){
  .plate{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center }
  .plate-visual{ grid-column:1 / span 7; grid-row:1 }
  .plate-text{ grid-column:9 / span 4; grid-row:1 }
  .plate--flip .plate-visual{ grid-column:6 / span 7 }
  .plate--flip .plate-text{ grid-column:1 / span 4 }
}
.plate-text{ display:flex; flex-direction:column; align-items:flex-start; gap:16px }
.plate-badge{ display:flex; align-items:center; gap:10px;
              font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em;
              text-transform:uppercase; color:var(--muted) }
.plate-badge b{ font-weight:500; color:var(--accent) }
.plate-badge i{ width:9px; height:9px; border-radius:2px; background:var(--accent); display:inline-block }
.plate-text h3{ margin-block:-2px }
.plate-text > p{ color:var(--ink-soft); max-width:38ch }
.plate-rules{ list-style:none; display:flex; flex-direction:column; width:100%; max-width:38ch;
              border-top:1px solid var(--line); margin-top:2px }
.plate-rules li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);
                 font-size:.875rem; line-height:1.5; color:var(--ink-soft) }
.plate-rules li::before{ content:counter(r,decimal-leading-zero); counter-increment:r;
                         font-family:var(--f-mono); font-size:.6875rem; color:var(--accent);
                         letter-spacing:.1em; padding-top:.28em; flex:none }
.plate-rules{ counter-reset:r }
.plate-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px }
.plate-actions .dp-btn{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#FFF7EC;
                        --btn-hov-bg:var(--ink); --btn-hov-fg:var(--paper) }

/* The board plate that every preview sits on */
.board{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,34px);
  background:radial-gradient(120% 110% at 32% -10%,#31220F 0%,#1B1209 62%,#140D07 100%);
  border:1px solid rgba(244,234,214,.11);
  box-shadow:0 40px 72px -44px rgba(31,21,12,.85), inset 0 1px 0 rgba(244,234,214,.08);
}
.board::before{
  content:""; position:absolute; inset:-45% -12% auto; height:78%; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0,rgba(255,206,138,.20),transparent 72%);
}
.board-head{ position:relative; display:flex; align-items:center; gap:10px; margin-bottom:clamp(14px,2vw,22px);
             font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
             color:rgba(244,234,214,.44) }
.board-head b{ font-weight:500; color:var(--accent) }
.board-head span{ margin-left:auto }
.board-foot{ position:relative; margin-top:clamp(14px,2vw,20px); padding-top:14px;
             border-top:1px solid rgba(244,234,214,.10);
             display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
             font-family:var(--f-mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
             color:rgba(244,234,214,.44) }
.board-key{ display:inline-flex; align-items:center; gap:7px }
.board-key i{ width:11px; height:11px; border-radius:3px; display:inline-block }

/* Pawdle preview ------------------------------------------------------- */
.pv{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
     gap:clamp(6px,.85vw,10px); max-width:440px; margin-inline:auto; perspective:900px }
.pv-cell{
  aspect-ratio:1; display:grid; place-items:center;
  border-radius:var(--r-sm);
  border:1.5px solid rgba(244,234,214,.17);
  background:rgba(244,234,214,.05);
  font-family:var(--f-display); font-weight:700; font-optical-sizing:auto;
  font-size:clamp(1.05rem,2.6vw,1.75rem); color:var(--cream);
  opacity:0; transform:rotateX(-96deg);
  transform-origin:center 55%;
}
.is-in .pv-cell{ animation:pvFlip .62s var(--e-out) forwards; animation-delay:calc(var(--i) * 88ms + 180ms) }
@keyframes pvFlip{ 0%{opacity:0;transform:rotateX(-96deg)} 55%{opacity:1} 100%{opacity:1;transform:none} }
.pv-cell.is-cor{ background:#55764A; border-color:#55764A; color:#FCF7EC }
.pv-cell.is-pre{ background:#C98526; border-color:#C98526; color:#2A1B08 }
.pv-cell.is-abs{ background:rgba(244,234,214,.055); border-color:rgba(244,234,214,.10); color:rgba(244,234,214,.42) }

/* Connect Paws preview ------------------------------------------------- */
.cv{ position:relative; max-width:460px; margin-inline:auto }
.cv-cat{ height:2.1em; margin-bottom:10px; position:relative }
.cv-cat span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(.95rem,1.9vw,1.18rem); color:var(--cream);
  opacity:0; transform:translateY(6px); transition:opacity .5s var(--e-out), transform .5s var(--e-out);
  text-align:center;
}
.cv-cat span.is-on{ opacity:1; transform:none }
.cv-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,.8vw,9px) }
.cv-tile{
  aspect-ratio:1.14; display:grid; place-items:center; text-align:center; padding:3px;
  border-radius:var(--r-sm); border:1px solid rgba(244,234,214,.15);
  background:rgba(244,234,214,.05);
  font-size:clamp(.48rem,1.15vw,.7rem); font-weight:700; letter-spacing:.045em; line-height:1.15;
  text-transform:uppercase; color:rgba(244,234,214,.82);
  opacity:0; transform:scale(.86);
  transition:background .55s var(--e-out), border-color .55s var(--e-out),
             color .55s var(--e-out), transform .55s var(--e-spring), box-shadow .55s var(--e-out);
}
.is-in .cv-tile{ animation:cvIn .5s var(--e-out) forwards; animation-delay:calc(var(--i) * 34ms + 140ms) }
@keyframes cvIn{ to{ opacity:1; transform:none } }
.is-in .cv-tile.is-lit{
  background:var(--g); border-color:transparent; color:#FFF8EC;
  transform:translateY(-3px); box-shadow:0 10px 22px -12px var(--g);
}

/* Paw Paths preview ---------------------------------------------------- */
.wv{ position:relative; max-width:470px; margin-inline:auto; perspective:1100px }
.wv-frame{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(244,234,214,.14);
  box-shadow:0 26px 52px -30px rgba(0,0,0,.85);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .7s var(--e-out);
}
.wv-frame img{ width:100%; height:auto; display:block }
.wv-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,rgba(255,225,175,.20),transparent 42%);
  opacity:0; transition:opacity .6s var(--e-out);
}
.wv:hover .wv-frame::after{ opacity:1 }

/* ── Statement band ────────────────────────────────────────────────────── */
/* The dog sits in the lower third of this photograph, so the words are
   set across the top of the band and the frame is left clear beneath them. */
.band{
  position:relative; isolation:isolate; overflow:clip;
  min-height:min(80svh,700px);
  display:grid; place-items:start center; align-content:start;
  padding-block:clamp(56px,8vw,104px) clamp(150px,26vw,260px);
  text-align:center; color:var(--cream);
}
.band-img{
  position:absolute; inset:-14% 0 auto; width:100%; height:128%; object-fit:cover; z-index:-2;
  object-position:20% 62%;
  transform:translate3d(0,var(--par,0px),0); will-change:transform;
}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,13,6,.70) 0%,rgba(20,13,6,.56) 34%,
                                    rgba(20,13,6,.22) 58%,rgba(20,13,6,.10) 74%,rgba(18,11,5,.46) 100%);
}
/* A narrow viewport cropped to this photograph loses the whippet on one end
   and the dachshund on the other. Below 900px the band stops cropping: the
   words sit on ink and the picture runs underneath at its own proportions,
   with all four of the pack in frame. */
@media (max-width:899px){
  .band{
    display:flex; flex-direction:column; min-height:0; text-align:center;
    padding:clamp(44px,7vw,74px) 0 0;
    background:linear-gradient(180deg,#2C1C0D 0%,#20150A 60%,#1A1108 100%);
  }
  .band-inner{ order:1; padding-inline:var(--gutter); margin-bottom:clamp(26px,5vw,44px) }
  .band-img{
    order:2;
    position:static; inset:auto; width:100%; height:auto; object-fit:contain;
    transform:none; will-change:auto;
  }
  .band::after{ display:none }
}

.band-inner{ max-width:min(760px,100%); display:flex; flex-direction:column; align-items:center; gap:22px }
.band h2{ color:var(--cream); max-width:17ch }
.band h2 em{ color:#F2D9A8 }
.band p{ color:rgba(244,234,214,.80); max-width:52ch; font-size:clamp(1rem,.4vw + .94rem,1.14rem) }
.band .dp-eyebrow{ color:rgba(244,234,214,.62) }

/* ── Dark mode ─────────────────────────────────────────────────────────────
   The hero and the statement band are printed dark already; only the
   daily-edition section in between (and its hairlines) sits on --paper and
   needs an explicit night ground when .dp-dark lands on <body>. ────────── */
.dp-dark .sec-head{ border-color:var(--night-line) }
.dp-dark .sec-head .dp-edition{ color:var(--cream-mute) }
.dp-dark .plate{ border-color:var(--night-line) }
.dp-dark .plate-badge{ color:var(--cream-mute) }
.dp-dark .plate-text > p{ color:rgba(244,234,214,.78) }
.dp-dark .plate-rules{ border-color:var(--night-line) }
.dp-dark .plate-rules li{ border-color:var(--night-line); color:rgba(244,234,214,.78) }

/* ── Easter egg toast ──────────────────────────────────────────────────── */
.dp-toast{
  position:fixed; left:50%; bottom:34px; z-index:420; transform:translate(-50%,16px);
  background:var(--ink); color:var(--paper); padding:12px 22px; border-radius:var(--r-pill);
  font-family:var(--f-display); font-size:1rem; letter-spacing:-.01em;
  opacity:0; pointer-events:none; transition:opacity .4s var(--e-out), transform .4s var(--e-spring);
}
.dp-toast.is-on{ opacity:1; transform:translate(-50%,0) }