/* Laundry Defense's own pages (/laundrydefense/, /laundrydefense/privacy, /laundrydefense/support): a night courtyard.
   /games/games.css is loaded first and gives the layout: the top bar, the footer, the .page text layout, .card,
   .chips. This file turns its cream paper into the game's night (Carson, 2026-11-15: "laundry defense website can
   be like a dark mode based one"): it re-sets the shared tokens on <body class="ld">, so every rule in games.css
   that reads --bg, --ink, --muted and the rest comes out dark without being copied here, then adds the game page's
   own parts (.ld-*). Dark is the only look; it does not follow the reader's light or dark setting.
   In games.css --ink is both the text colour and every border. Here --ink is the text (warm paper white) and
   --edge is the border, so each bordered thing games.css draws is given --edge below.
   The sky: stars at the top (a tile, plus two small sets that twinkle; bright only above the words and clear of the menu's row, faint behind the text), a wash of moonlight, and at the very bottom
   the game's own night courtyard, faded up into the sky. The pages end on its lawn.
   Bump ?v= in all three pages on every edit. */
.ld {
  color-scheme:dark;
  --bg:#0b1130; --bg2:#101a44; --card:#141d49; --well:#0f1638;
  --line:#060a1e;                                  /* the hard shadow under every card */
  --ink:#f6efe0; --muted:#b7c0e0; --faint:#8791bb;
  --edge:#3b4a92;                                  /* borders */
  --lamp:#ffcf6b;                                  /* lantern light: links, kickers, numbers */
  --red:var(--lamp); --red-deep:var(--lamp);       /* games.css paints links and kickers with these */
  --g:#8fc4ff; --gd:var(--lamp); --sun:#ffd447; --dusk:#161033;   /* --dusk: text on a lit (yellow) button */
  --night:#0a0e20; --night2:#27357a;
  position:relative; min-height:100vh; padding-bottom:max(13vw,132px);
  background:
    linear-gradient(to bottom, #0b1130 0, rgba(11,17,48,.9) 26%, rgba(11,17,48,.35) 62%, rgba(11,17,48,0) 86%) bottom center / 100% max(25.5vw,230px) no-repeat,
    url(/laundrydefense/img/courtyard.webp?v=1) bottom center / max(100%,900px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='380'%3E%3Ccircle cx='119' cy='6' r='1.4' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='119' cy='14' r='0.9' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='37' cy='15' r='0.7' fill='%23cfe0ff' opacity='0.6'/%3E%3Ccircle cx='213' cy='109' r='0.7' fill='%23cfe0ff' opacity='0.6'/%3E%3Ccircle cx='214' cy='51' r='0.6' fill='%23cfe0ff' opacity='0.33'/%3E%3Ccircle cx='256' cy='57' r='0.5' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='682' cy='72' r='0.7' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='212' cy='55' r='0.5' fill='%23cfe0ff' opacity='0.33'/%3E%3Ccircle cx='547' cy='6' r='1.4' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='446' cy='23' r='1.1' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='273' cy='93' r='1.1' fill='%23cfe0ff' opacity='0.67'/%3E%3Ccircle cx='670' cy='93' r='1.1' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='317' cy='229' r='0.5' fill='%23ffeebf' opacity='0.15'/%3E%3Ccircle cx='201' cy='9' r='0.7' fill='%23ffeebf' opacity='0.92'/%3E%3Ccircle cx='101' cy='181' r='0.7' fill='%23cfe0ff' opacity='0.2'/%3E%3Ccircle cx='316' cy='38' r='0.7' fill='%23fff' opacity='0.34'/%3E%3Ccircle cx='211' cy='11' r='1.1' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='124' cy='122' r='0.6' fill='%23fff' opacity='0.26'/%3E%3Ccircle cx='656' cy='276' r='0.5' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='170' cy='22' r='0.9' fill='%23cfe0ff' opacity='0.74'/%3E%3Ccircle cx='528' cy='143' r='0.6' fill='%23ffeebf' opacity='0.24'/%3E%3Ccircle cx='506' cy='343' r='0.7' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='501' cy='265' r='0.5' fill='%23cfe0ff' opacity='0.12'/%3E%3Ccircle cx='29' cy='338' r='0.6' fill='%23cfe0ff' opacity='0.12'/%3E%3Ccircle cx='485' cy='216' r='0.6' fill='%23fff' opacity='0.16'/%3E%3Ccircle cx='388' cy='6' r='1.1' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='584' cy='13' r='0.7' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='309' cy='229' r='0.7' fill='%23fff' opacity='0.15'/%3E%3Ccircle cx='575' cy='120' r='0.7' fill='%23cfe0ff' opacity='0.26'/%3E%3Ccircle cx='203' cy='26' r='0.7' fill='%23cfe0ff' opacity='0.35'/%3E%3Ccircle cx='482' cy='43' r='0.6' fill='%23fff' opacity='0.34'/%3E%3Ccircle cx='539' cy='59' r='0.6' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='710' cy='318' r='0.6' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='688' cy='6' r='0.7' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='393' cy='14' r='1.1' fill='%23ffeebf' opacity='0.63'/%3E%3Ccircle cx='252' cy='115' r='0.6' fill='%23fff' opacity='0.27'/%3E%3Ccircle cx='633' cy='6' r='1.1' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='376' cy='77' r='0.9' fill='%23cfe0ff' opacity='0.71'/%3E%3Ccircle cx='207' cy='62' r='0.5' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='308' cy='46' r='0.7' fill='%23ffeebf' opacity='0.33'/%3E%3Ccircle cx='225' cy='11' r='0.7' fill='%23cfe0ff' opacity='0.94'/%3E%3Ccircle cx='466' cy='285' r='0.7' fill='%23ffeebf' opacity='0.12'/%3E%3Ccircle cx='431' cy='164' r='0.5' fill='%23fff' opacity='0.22'/%3E%3Ccircle cx='308' cy='93' r='1.4' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='283' cy='36' r='0.6' fill='%23ffeebf' opacity='0.34'/%3E%3Ccircle cx='255' cy='286' r='0.7' fill='%23ffeebf' opacity='0.12'/%3E%3Ccircle cx='242' cy='68' r='0.9' fill='%23ffeebf' opacity='0.79'/%3E%3Ccircle cx='690' cy='262' r='0.7' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='559' cy='6' r='1.4' fill='%23cfe0ff' opacity='0.93'/%3E%3Ccircle cx='269' cy='106' r='1.1' fill='%23cfe0ff' opacity='0.87'/%3E%3Ccircle cx='571' cy='172' r='0.5' fill='%23cfe0ff' opacity='0.21'/%3E%3Ccircle cx='588' cy='7' r='0.9' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='425' cy='7' r='1.1' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='67' cy='233' r='0.6' fill='%23fff' opacity='0.15'/%3E%3C/svg%3E") top center / 720px 380px repeat-x,
    radial-gradient(70% 460px at 80% 0, rgba(86,112,220,.36), rgba(86,112,220,0) 70%),
    linear-gradient(180deg, #080d26 0, #0e1740 420px, #0b1130 1000px);
  background-color:#0b1130;
}
.ld::before, .ld::after { content:""; position:absolute; z-index:-1; top:0; left:0; width:2px; height:2px; border-radius:50%; pointer-events:none; animation:ld-twinkle 4.6s ease-in-out infinite alternate }
.ld::before { box-shadow:50vw 13px 0 .5px #ffeebf, 63vw 8px 0 0 #cfe0ff, 72vw 74px 0 .5px #ffeebf, 32vw 18px 0 .5px #fff, 88vw 22px 0 0 #fff, 37vw 7px 0 0 #cfe0ff, 53vw 90px 0 .5px #cfe0ff, 15vw 72px 0 0 #fff }
.ld::after { box-shadow:19vw 79px 0 0 #cfe0ff, 34vw 7px 0 .5px #fff, 61vw 18px 0 0 #ffeebf, 54vw 18px 0 0 #ffeebf, 92vw 13px 0 0 #cfe0ff, 95vw 83px 0 0 #cfe0ff, 52vw 14px 0 .5px #ffeebf, 46vw 9px 0 0 #cfe0ff; animation-delay:-2.3s; animation-duration:5.8s }
@keyframes ld-twinkle { from { opacity:.15 } to { opacity:1 } }
@keyframes ld-glow { from { opacity:.55 } to { opacity:1 } }
.ld ::selection { background:var(--lamp); color:var(--dusk) }
.ld a:hover { color:#fff }
.ld a:focus-visible { outline:3px solid var(--sun); outline-offset:3px; border-radius:4px }

/* the shared parts, on the night */
.ld .top nav { gap:4px 16px }
.ld .brand { flex:none }
.ld .brand img, .ld footer .made img, .ld-app img { border-color:var(--edge) }
.ld .top nav a.on { color:var(--lamp) }
.ld .kicker { color:var(--lamp) }
.ld .chips li { background:var(--card); border-color:var(--edge); color:var(--ink) }
.ld .page .card { border-color:var(--edge); box-shadow:0 8px 0 var(--line) }
.ld .page footer { position:relative; border-top-color:var(--edge); margin-top:104px }
.ld .page footer a { margin-right:0 }   /* games.css spaces footer links apart; here the one link ends a sentence */
.ld footer .made img { background:#fff }   /* the mark is ink on nothing: it needs its paper */
/* .wrap's padding shorthand outranks games.css's `section`, so the sections' space is set here */
.ld section.wrap { padding:68px 22px 0 }
.ld footer.wrap { margin-top:20px }

/* the stone lantern from the game's garden: it stands on the text pages' footer rule, and in the night card */
.ld .page footer::before, .ld .page footer::after { content:""; position:absolute; pointer-events:none }
.ld .page footer::after { right:18px; bottom:calc(100% - 2px); width:62px; aspect-ratio:200/246; background:url(/laundrydefense/img/lantern.webp?v=1) center / contain no-repeat }
/* the glow stays inside the page's 22px side padding, so a phone never scrolls sideways */
.ld .page footer::before { right:-21px; bottom:calc(100% - 34px); width:140px; height:140px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,196,96,.42), rgba(255,196,96,.12) 55%, rgba(255,196,96,0)); animation:ld-glow 3.4s ease-in-out infinite alternate }
/* the moon, by the title of the text pages */
.ld .page { position:relative }
.ld .page::before { content:""; position:absolute; top:112px; right:26px; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 36% 34%, #fffbe6 0, #f6e7b4 58%, #dcc88c 100%); box-shadow:0 0 0 9px rgba(255,236,170,.07), 0 0 0 22px rgba(255,236,170,.04), 0 0 70px 20px rgba(255,226,150,.22); pointer-events:none }
.ld .page h1 { padding-right:84px }

/* hero: the game's own painting in a sticker frame, then the icon, the name and what it is */
.ld-hero { padding-top:24px }
.ld-art { border:2.5px solid var(--edge); border-radius:32px; overflow:hidden; background:var(--night); aspect-ratio:1024/500; box-shadow:0 12px 0 var(--line), 0 30px 90px rgba(70,100,230,.28) }
.ld-art img { width:100%; height:100%; object-fit:cover }
.ld-head { display:flex; align-items:center; gap:20px; margin:40px 0 0 }
.ld-head .ic { width:96px; height:96px; flex:none; border-radius:24px; border:2.5px solid var(--edge); box-shadow:0 6px 0 var(--line) }
.ld-head h1 { font-size:clamp(36px,6.4vw,62px); line-height:1.02; letter-spacing:-.025em; margin:0; font-weight:900 }
.ld-head .sub { margin:8px 0 0; font-weight:800; color:var(--g); font-size:clamp(15px,2.2vw,19px) }
.ld-soon { margin-left:auto; flex:none; align-self:center; background:var(--sun); color:var(--dusk); border:2.5px solid #fff3c0; border-radius:999px; padding:8px 18px; font-weight:900; font-size:14px; letter-spacing:.04em; box-shadow:0 4px 0 var(--line), 0 0 34px rgba(255,212,71,.4); white-space:nowrap }
.ld-lead { font-size:clamp(21px,3vw,27px); line-height:1.3; font-weight:800; letter-spacing:-.01em; margin:30px 0 12px; max-width:22em }
.ld-intro { color:var(--muted); font-size:18px; margin:0; max-width:40em }

/* the game in four numbers */
.ld-nums { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:38px 0 0; padding:0; list-style:none }
.ld-nums li { background:var(--card); border:2.5px solid var(--edge); border-radius:22px; padding:16px 18px 14px; box-shadow:0 6px 0 var(--line) }
.ld-nums b { display:block; font-size:clamp(34px,5vw,48px); line-height:1; font-weight:900; letter-spacing:-.03em; color:var(--lamp); font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(255,196,96,.35) }
.ld-nums span { display:block; margin-top:6px; font-weight:800; font-size:14px; color:var(--muted) }

.ld h2.big { font-size:clamp(28px,4.4vw,40px); line-height:1.1; letter-spacing:-.02em; margin:0 0 26px; font-weight:900 }

/* what is in the game: four cards, point form */
.ld-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.ld-card { background:var(--card); border:2.5px solid var(--edge); border-radius:24px; padding:24px 26px; box-shadow:0 8px 0 var(--line) }
.ld-card h3 { margin:0 0 10px; font-size:21px; line-height:1.2; font-weight:900; letter-spacing:-.01em }
.ld-card ul { margin:0; padding-left:20px; color:var(--muted) }
.ld-card li { margin:7px 0 } .ld-card li:last-child { margin-bottom:0 }
.ld-card li::marker { color:var(--lamp) }

/* the store screenshots: the first one wide, then two to a row */
.ld-shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.ld-shots figure { margin:0; border:2.5px solid var(--edge); border-radius:22px; overflow:hidden; background:var(--night); aspect-ratio:2868/1320; box-shadow:0 8px 0 var(--line) }
.ld-shots figure:first-child { grid-column:1 / -1; border-radius:28px }
.ld-shots img { width:100%; height:100% }

/* play anywhere: the promises as chips, then the night card with the logo, lit by two lanterns.
   This card is where the store badges go when a store page is public. */
.ld-any .chips { margin:0 0 30px }
.ld-night { position:relative; background:radial-gradient(60% 70% at 50% 30%, rgba(255,200,104,.2), rgba(255,200,104,0) 72%), linear-gradient(180deg,var(--night2) 0%,#182257 55%,#0f1640 100%); border:2.5px solid #5a6cc4; border-radius:32px; padding:34px 26px 38px; text-align:center; color:#fff; box-shadow:0 12px 0 var(--line), 0 30px 90px rgba(70,100,230,.25) }
.ld-night::before, .ld-night::after { content:""; position:absolute; bottom:22px; width:84px; aspect-ratio:200/246; background:url(/laundrydefense/img/lantern.webp?v=1) center / contain no-repeat; filter:drop-shadow(0 0 22px rgba(255,190,90,.5)); pointer-events:none }
.ld-night::before { left:30px } .ld-night::after { right:30px; transform:scaleX(-1) }
.ld-night img { width:min(420px,78%); margin:0 auto }
.ld-night p { margin:14px auto 0; max-width:30em; color:#c9d3ee; font-size:17px }
.ld-night p.when { margin-top:6px; color:#fff; font-size:clamp(22px,3.4vw,30px); font-weight:900; letter-spacing:-.015em; line-height:1.2 }
.ld-night .links { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px }
.ld-night .links a { background:var(--lamp); color:var(--dusk); text-decoration:none; font-weight:900; font-size:15px; border:2.5px solid #fff3c0; border-radius:999px; padding:10px 22px; box-shadow:0 4px 0 rgba(0,0,0,.45) }
.ld-night .links a:hover { background:#fff; color:var(--dusk) }

/* the two text pages: the game's icon and name under the title */
.ld-app { display:flex; align-items:center; gap:10px; margin:0 0 20px; font-weight:800; font-size:14px; color:var(--muted) }
.ld-app img { width:30px; height:30px; border-radius:9px; border:1.5px solid var(--edge) }

@media (max-width:900px) {
  .ld-nums { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .ld-grid { grid-template-columns:minmax(0,1fr) }
  .ld-night::before, .ld-night::after { display:none }
}
@media (max-width:640px) {
  /* a phone shows the courtyard's left corner (the azaleas and the stepping stones), not a strip of plain lawn */
  .ld { background-image:
    linear-gradient(to bottom, #0b1130 0, rgba(11,17,48,.9) 26%, rgba(11,17,48,.35) 62%, rgba(11,17,48,0) 86%),
    url(/laundrydefense/img/courtyard-900.webp?v=1),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='380'%3E%3Ccircle cx='119' cy='6' r='1.4' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='119' cy='14' r='0.9' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='37' cy='15' r='0.7' fill='%23cfe0ff' opacity='0.6'/%3E%3Ccircle cx='213' cy='109' r='0.7' fill='%23cfe0ff' opacity='0.6'/%3E%3Ccircle cx='214' cy='51' r='0.6' fill='%23cfe0ff' opacity='0.33'/%3E%3Ccircle cx='256' cy='57' r='0.5' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='682' cy='72' r='0.7' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='212' cy='55' r='0.5' fill='%23cfe0ff' opacity='0.33'/%3E%3Ccircle cx='547' cy='6' r='1.4' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='446' cy='23' r='1.1' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='273' cy='93' r='1.1' fill='%23cfe0ff' opacity='0.67'/%3E%3Ccircle cx='670' cy='93' r='1.1' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='317' cy='229' r='0.5' fill='%23ffeebf' opacity='0.15'/%3E%3Ccircle cx='201' cy='9' r='0.7' fill='%23ffeebf' opacity='0.92'/%3E%3Ccircle cx='101' cy='181' r='0.7' fill='%23cfe0ff' opacity='0.2'/%3E%3Ccircle cx='316' cy='38' r='0.7' fill='%23fff' opacity='0.34'/%3E%3Ccircle cx='211' cy='11' r='1.1' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='124' cy='122' r='0.6' fill='%23fff' opacity='0.26'/%3E%3Ccircle cx='656' cy='276' r='0.5' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='170' cy='22' r='0.9' fill='%23cfe0ff' opacity='0.74'/%3E%3Ccircle cx='528' cy='143' r='0.6' fill='%23ffeebf' opacity='0.24'/%3E%3Ccircle cx='506' cy='343' r='0.7' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='501' cy='265' r='0.5' fill='%23cfe0ff' opacity='0.12'/%3E%3Ccircle cx='29' cy='338' r='0.6' fill='%23cfe0ff' opacity='0.12'/%3E%3Ccircle cx='485' cy='216' r='0.6' fill='%23fff' opacity='0.16'/%3E%3Ccircle cx='388' cy='6' r='1.1' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='584' cy='13' r='0.7' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='309' cy='229' r='0.7' fill='%23fff' opacity='0.15'/%3E%3Ccircle cx='575' cy='120' r='0.7' fill='%23cfe0ff' opacity='0.26'/%3E%3Ccircle cx='203' cy='26' r='0.7' fill='%23cfe0ff' opacity='0.35'/%3E%3Ccircle cx='482' cy='43' r='0.6' fill='%23fff' opacity='0.34'/%3E%3Ccircle cx='539' cy='59' r='0.6' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='710' cy='318' r='0.6' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='688' cy='6' r='0.7' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='393' cy='14' r='1.1' fill='%23ffeebf' opacity='0.63'/%3E%3Ccircle cx='252' cy='115' r='0.6' fill='%23fff' opacity='0.27'/%3E%3Ccircle cx='633' cy='6' r='1.1' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='376' cy='77' r='0.9' fill='%23cfe0ff' opacity='0.71'/%3E%3Ccircle cx='207' cy='62' r='0.5' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='308' cy='46' r='0.7' fill='%23ffeebf' opacity='0.33'/%3E%3Ccircle cx='225' cy='11' r='0.7' fill='%23cfe0ff' opacity='0.94'/%3E%3Ccircle cx='466' cy='285' r='0.7' fill='%23ffeebf' opacity='0.12'/%3E%3Ccircle cx='431' cy='164' r='0.5' fill='%23fff' opacity='0.22'/%3E%3Ccircle cx='308' cy='93' r='1.4' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='283' cy='36' r='0.6' fill='%23ffeebf' opacity='0.34'/%3E%3Ccircle cx='255' cy='286' r='0.7' fill='%23ffeebf' opacity='0.12'/%3E%3Ccircle cx='242' cy='68' r='0.9' fill='%23ffeebf' opacity='0.79'/%3E%3Ccircle cx='690' cy='262' r='0.7' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='559' cy='6' r='1.4' fill='%23cfe0ff' opacity='0.93'/%3E%3Ccircle cx='269' cy='106' r='1.1' fill='%23cfe0ff' opacity='0.87'/%3E%3Ccircle cx='571' cy='172' r='0.5' fill='%23cfe0ff' opacity='0.21'/%3E%3Ccircle cx='588' cy='7' r='0.9' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='425' cy='7' r='1.1' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='67' cy='233' r='0.6' fill='%23fff' opacity='0.15'/%3E%3C/svg%3E"),
    radial-gradient(70% 460px at 80% 0, rgba(86,112,220,.36), rgba(86,112,220,0) 70%),
    linear-gradient(180deg, #080d26 0, #0e1740 420px, #0b1130 1000px);
    background-position:bottom center, bottom left, top center, 0 0, 0 0 }
  .ld-art { border-radius:22px; box-shadow:0 8px 0 var(--line), 0 20px 60px rgba(70,100,230,.28) }
  .ld-head { flex-wrap:wrap; gap:14px 16px; margin-top:30px }
  .ld-head .ic { width:72px; height:72px; border-radius:19px }
  .ld-head .name { flex:1 1 calc(100% - 90px); min-width:0 }   /* the name takes the rest of the icon's row, so the chip drops to its own */
  .ld-soon { margin-left:0 }
  .ld section.wrap { padding-top:50px }
  .ld-shots { grid-template-columns:minmax(0,1fr); gap:14px }
  .ld-shots figure, .ld-shots figure:first-child { border-radius:16px; box-shadow:0 6px 0 var(--line) }
  .ld-card { padding:20px 20px }
  .ld-night { border-radius:24px; padding:26px 18px 30px }
  .ld .page::before { top:98px; right:22px; width:40px; height:40px }
  .ld .page h1 { padding-right:60px }
}
/* narrow phones: the mark alone, so the three links stay on one row */
@media (max-width:480px) {
  .ld .brand span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .ld .top nav { gap:4px 14px }
}
@media (prefers-reduced-motion:reduce) {
  .ld::before, .ld::after, .ld .page footer::before { animation:none }
}