/* Weekly Draw — "the horizon and the margin" (2026-10-18).
   neo: the title was too big and the stage filled the whole screen, so no copy
   could be seen without a long scroll. The page now reads in three moves:
   1. a calm title, sized for the eye rather than the wall;
   2. the exhibition as one cinematic panoramic band (2.6 : 1 on desktop), the ocean
      walls extended sideways instead of the room growing upwards;
   3. everything else as margin notes: each section's heading sits in a quiet
      left margin beside its content, so headings no longer stack on top of it.
   Loaded last; overrides the older weekly-draw.css layers. */

/* ---------- 1. Calm title ---------- */
.weekly-draw-page{--wd-h1:clamp(2.7rem,4.6vw,4.6rem)}
.weekly-draw-page .wd-intro{padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(1.1rem,2.2vw,1.6rem)}
.weekly-draw-page .wd-intro-layout{
  grid-template-columns:minmax(0,1fr) minmax(0,34ch);
  gap:clamp(1.5rem,5vw,5rem);align-items:end;
  padding-top:clamp(.9rem,1.6vw,1.3rem);
}
.weekly-draw-page .wd-intro h1{font-size:var(--wd-h1)!important;max-width:none}
.weekly-draw-page .wd-intro-aside{align-self:end;margin-top:0;padding-bottom:.35rem;gap:0}
.weekly-draw-page .wd-intro-aside p{max-width:34ch;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.62}
@media(min-width:921px){
  .weekly-draw-page .wd-intro h1{align-self:end}
  .weekly-draw-page .wd-intro-aside{align-self:end;margin-top:0}
}

/* ---------- 2. Panoramic band ----------
   The 1448 × 1086 room keeps its own proportions and layer placement; the band
   is a wider, shorter window onto it. The room is centred and shown from just
   above the lamp to just below the plinth (95.5% of its height); the walls
   and floor continue sideways in .wd-live-horizon, painted from the room's own
   edge colours, and the water light runs across the full width. */
.weekly-draw-page .wd-prize{padding:0 0 clamp(1.6rem,3vw,2.6rem)}
html .weekly-draw-page .wd-prize-figure.wd-gallery-layered{
  aspect-ratio:auto;height:auto;min-height:0;overflow:visible;
  border:0;border-radius:0;background:transparent;perspective:none;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.weekly-draw-page .wd-prize-figure.wd-gallery-layered::before,
.weekly-draw-page .wd-prize-figure.wd-gallery-layered::after{content:none;display:none}
.weekly-draw-page .wd-band{
  --band-ratio:2.6;
  /* the room: 95.5% of its height is shown, so it is 1/0.955 of the band tall */
  --room-h:104.7cqh;--room-w:calc(var(--room-h) * 1448 / 1086);
  --room-top:-.5cqh;
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:var(--band-ratio);container-type:size;
  border-radius:20px;background:#021a45;
  border:1px solid var(--wd-line);
  box-shadow:0 30px 95px -56px rgba(0,0,0,.92);
}
.weekly-draw-page .wd-band::after{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,10,32,.38),transparent 14% 86%,rgba(0,10,32,.38));
}
.weekly-draw-page .wd-band .wd-live-layer{
  inset:auto;top:var(--room-top);left:calc(50% - var(--room-w) / 2);
  width:var(--room-w);height:var(--room-h);border-radius:0;aspect-ratio:auto;
}
/* soft side edges on the room's own wall and floor, so it melts into the horizon */
.weekly-draw-page .wd-band :is(.wd-live-background,.wd-live-architecture){
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 17%,#000 83%,transparent 98%);
  mask-image:linear-gradient(90deg,transparent 2%,#000 17%,#000 83%,transparent 98%);
}
.weekly-draw-page .wd-band .wd-live-horizon{
  position:absolute;left:0;right:0;top:var(--room-top);height:var(--room-h);z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,#00275f 0%,#00265e 6.5%,#02235a 12.9%,#00235a 19.4%,#022257 25.8%,#011c4e 32.3%,#001e4f 38.7%,#001d4c 45.2%,#011c48 51.6%,#001942 58.1%,#02153a 64.5%,#001438 66%,#001537 67.5%,#021536 68.9%,#001739 70.4%,#052e60 71.9%,#081f49 73.4%,#0b244e 74.8%,#10254f 76.3%,#091e47 77.8%,#0f254b 79.3%,#1b2f5a 83.4%,#213663 87.6%,#12305c 91.7%,#0f2d5a 95.9%,#0a2a58 100%) left top/50.5% 100% no-repeat,
    linear-gradient(180deg,#002252 0%,#011e4c 6.5%,#011c47 12.9%,#021d48 19.4%,#011c46 25.8%,#001840 32.3%,#001940 38.7%,#00173a 45.2%,#011738 51.6%,#011537 58.1%,#001231 64.5%,#00132f 66%,#001231 67.5%,#01132f 68.9%,#001332 70.4%,#062958 71.9%,#0a2149 73.4%,#0d244c 74.8%,#0e2347 76.3%,#13264e 77.8%,#12244a 79.3%,#24375f 83.4%,#283b64 87.6%,#182f57 91.7%,#112853 95.9%,#0e2b58 100%) right top/50.5% 100% no-repeat;
}
/* the ocean light now spans the whole band: on the walls either side of the
   niche, fading out at the floor line (71% of the room). */
.weekly-draw-page .wd-band .wd-live-caustics,
.weekly-draw-page .wd-band .wd-live-caustics.has-gl{
  inset:0;top:0;left:0;width:auto;height:auto;
  --niche-l:calc(50% - var(--room-w) * .245);
  --niche-r:calc(50% + var(--room-w) * .218);
  --floor:calc(var(--room-top) + var(--room-h) * .705);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 calc(var(--floor) - 3cqh),rgba(0,0,0,.55) calc(var(--floor) - 1cqh),transparent calc(var(--floor) + .5cqh)),linear-gradient(to right,#000 0 calc(var(--niche-l) - 9cqh),transparent calc(var(--niche-l) + 2cqh) calc(var(--niche-r) - 2cqh),#000 calc(var(--niche-r) + 9cqh) 100%);
  mask-image:linear-gradient(to bottom,#000 0 calc(var(--floor) - 3cqh),rgba(0,0,0,.55) calc(var(--floor) - 1cqh),transparent calc(var(--floor) + .5cqh)),linear-gradient(to right,#000 0 calc(var(--niche-l) - 9cqh),transparent calc(var(--niche-l) + 2cqh) calc(var(--niche-r) - 2cqh),#000 calc(var(--niche-r) + 9cqh) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* Under the band: one reading line — what it is, the facts, the way in. */
.weekly-draw-page .wd-prize-figure .wd-gallery-foreground{
  position:relative;inset:auto;z-index:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;
  align-items:start;gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(.9rem,1.6vw,1.25rem) .15rem 0;
  background:none;color:var(--wd-ink);pointer-events:auto;
}
.weekly-draw-page .wd-prize-figure .wd-gallery-foreground-copy{display:grid;gap:.25rem;max-width:none}
.weekly-draw-page .wd-prize-figure .wd-gallery-foreground-copy strong{
  font:400 clamp(1.45rem,2.1vw,2rem)/1.05 "EB Garamond",serif;letter-spacing:-.025em;text-shadow:none;color:var(--wd-ink);
}
.weekly-draw-page .wd-prize-figure .wd-gallery-foreground-copy small{position:static;margin-top:.2rem;color:var(--wd-muted)}
.weekly-draw-page .wd-prize-figure .wd-gallery-foreground-kicker{font-size:.62rem}
.weekly-draw-page .wd-work-note{
  margin:0;max-width:52ch;font:400 .9rem/1.6 var(--ui);color:var(--wd-muted);
  font-size-adjust:.46;letter-spacing:0;text-transform:none;
}
.weekly-draw-page .wd-work-actions{display:grid;justify-items:end;gap:.6rem}
.weekly-draw-page .wd-work-actions .wd-gallery-foreground-status{max-width:none;text-align:right;white-space:nowrap;color:var(--wd-mint);font-size:.6rem}
.weekly-draw-page .wd-work-actions a{
  font:600 .76rem/1.4 var(--ui);font-size-adjust:.46;letter-spacing:0;
  text-decoration:none!important;padding-bottom:.25rem;border-bottom:1px solid var(--wd-line);color:var(--wd-ink);
}
.weekly-draw-page .wd-work-actions a span{margin-left:.4rem;color:var(--wd-mint)}
.weekly-draw-page .wd-prize::after{content:none}

/* ---------- 3. Margin notes ---------- */
.weekly-draw-page .wd-spectral-aisle{height:clamp(64px,7vw,104px)}
.weekly-draw-page :is(.wd-entry,.wd-how,.wd-previous,.wd-clarity){padding-block:clamp(2.2rem,4.5vw,3.6rem)}
.weekly-draw-page .wd-section-top{margin-bottom:clamp(1rem,2vw,1.5rem);gap:.6rem}
.weekly-draw-page .wd-section-top h2{font-size:clamp(2rem,3vw,2.75rem)!important;line-height:1.02!important;letter-spacing:-.03em}
.weekly-draw-page .wd-steps article{min-height:0}
.weekly-draw-page .wd-steps h3{margin-top:1.2rem;font-size:clamp(1.4rem,1.9vw,1.75rem)}
.weekly-draw-page .wd-odds h3{font-size:clamp(1.6rem,2.2vw,2.2rem)}
.weekly-draw-page .wd-odds-number{font-size:clamp(2.6rem,4vw,3.6rem)}

@media(min-width:1180px){
  .weekly-draw-page :is(.wd-entry,.wd-how,.wd-previous,.wd-clarity){
    display:grid;grid-template-columns:minmax(180px,.27fr) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,4rem);align-items:start;
  }
  .weekly-draw-page :is(.wd-entry,.wd-how,.wd-previous,.wd-clarity)>*{grid-column:2}
  .weekly-draw-page :is(.wd-entry,.wd-how,.wd-previous,.wd-clarity)>.wd-section-top{
    grid-column:1;grid-row:1 / span 4;margin:0;position:sticky;top:120px;
  }
  .weekly-draw-page :is(.wd-entry,.wd-how,.wd-previous,.wd-clarity)>.wd-section-top h2{max-width:9ch}
  .weekly-draw-page .wd-entry-explainer{margin-top:0}
  .weekly-draw-page .wd-entry-grid{grid-template-columns:minmax(0,1.3fr) minmax(250px,.8fr)}
  .weekly-draw-page .wd-entry .wd-entry-offer h3{font-size:clamp(2.2rem,3vw,3rem)}
}

/* ---------- Tablet and phone ---------- */
@media(max-width:920px){
  .weekly-draw-page .wd-intro-layout{grid-template-columns:1fr;gap:1rem}
  .weekly-draw-page .wd-band{--band-ratio:2}
  .weekly-draw-page .wd-prize-figure .wd-gallery-foreground{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .weekly-draw-page .wd-work-actions{grid-column:1 / -1;grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;gap:1rem}
  .weekly-draw-page .wd-work-actions .wd-gallery-foreground-status{text-align:left}
}
@media(max-width:670px){
  .weekly-draw-page .wd-intro{padding-top:1.6rem}
  .weekly-draw-page .wd-intro .wd-eyebrow{letter-spacing:.1em;font-size:.56rem}
  .weekly-draw-page .wd-band{--band-ratio:1.4;border-radius:15px}
  .weekly-draw-page .wd-prize-figure .wd-gallery-foreground{grid-template-columns:1fr;gap:.8rem;padding-top:1rem}
  .weekly-draw-page .wd-prize-figure .wd-gallery-foreground-copy strong{font-size:clamp(1.5rem,6.6vw,1.9rem)}
  .weekly-draw-page .wd-work-actions{grid-template-columns:1fr;justify-items:stretch;gap:.7rem}
  .weekly-draw-page .wd-work-actions .wd-enter-now{width:100%}
  .weekly-draw-page .wd-work-actions a{justify-self:start}
  .weekly-draw-page .wd-section-top h2{font-size:clamp(1.9rem,8vw,2.3rem)!important}
}