/* Case study destination pages. Built from the Figma frames
   "Case study destination • <Project>" (1440 × 780) and their mobile versions (390 wide).
   Desktop (1024px and up): the 1440 × 780 frame is scaled to the window width (js/fit.js sets --s)
   and centred vertically; its background covers the whole window (--sb).
   Mobile: the 390-wide frame is scaled to the screen width, up to 480px (--k). */

:root {
  --d-anchor: #ed9e33;
  --d-heading: #faf2e8;
  --d-status: #f0a333;
  --d-detail: #bacfd4;
  --d-button: #f0a233;
  --d-frame: #091a24;
}

html, body { background: var(--frame, var(--d-frame)); }
body { color: var(--d-heading); }

.dest { position: relative; display: flex; align-items: center; min-height: 100vh; overflow: hidden; background: var(--frame, var(--d-frame)); }
.dest--axiom { --frame: #091a24; }

/* ---------- Background (cover) ---------- */
.dest-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dest-bg-art { position: absolute; left: 50%; top: 50%; width: 1440px; height: 780px; transform: translate(-50%, -50%) scale(var(--sb, 1)); }
.bg-layer { position: absolute; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }

/* ---------- Foreground frame ---------- */
.dest-fg { position: relative; flex: none; width: 1440px; height: 780px; zoom: var(--s, 1); }
.d-anchor { position: absolute; left: 44px; top: 51px; width: 58px; height: 4px; background: var(--d-anchor); transform-origin: left center; }
.d-heading { position: absolute; left: 44px; top: 78px; width: 614px; margin: 0; font: 500 38px/49px var(--display); color: var(--d-heading); }
.d-status { position: absolute; left: 44px; top: 158px; width: 614px; margin: 0; font: 600 16px/21px var(--body); color: var(--d-status); }
.d-detail { position: absolute; left: 44px; top: 204px; width: 614px; margin: 0; font: 400 19px/25px var(--body); color: var(--d-detail); }
.d-back { position: absolute; left: 44px; top: 332px; font: 600 18px/23px var(--body); color: var(--d-heading); text-decoration: none; white-space: pre; text-underline-offset: 5px; }
.d-back:hover { text-decoration: underline; text-decoration-color: var(--d-anchor); }

/* Primary action: clipped button, 238 × 52, cuts 10 (left) and 12 (right), 1px black stroke */
.d-visit { position: absolute; left: 44px; top: 630px; display: block; width: 238px; height: 52px; color: var(--ink); text-decoration: none; }
.d-visit svg { position: absolute; inset: 0; overflow: visible; }
.d-visit path { fill: var(--d-button); stroke: #000; stroke-width: 1; transition: fill 160ms ease; }
.d-visit:hover path { fill: #f5b85e; }
.d-visit span { position: absolute; left: var(--label-x, 39px); top: 12px; font: 600 18px/26px var(--body); white-space: pre; }
.d-visit:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

.d-art { position: absolute; inset: 0; pointer-events: none; }
.d-art > * { position: absolute; display: block; max-width: none; }

/* Hootworth */
.dest--hootworth .bg-hoot { left: -2px; top: -103px; width: 1444px; height: 904px; background-size: 1605.34px 904px; background-position: -161.18px 0; }
.halo { border-radius: 50%; border: 2.28px solid rgba(208, 158, 71, 0.2); }
.dest--hootworth .halo { left: 569px; top: 200px; width: 436px; height: 436px; }
.dest--hootworth .sched { left: 858.75px; top: 68.14px; width: 582px; height: 629px; }
.dest--hootworth .owl { left: 616px; top: 247px; width: 342px; height: 342px; }

/* DISCO */
.dest--disco .bg-disco { left: -538px; top: -92px; width: 2126px; height: 1329px; }
.dest--disco .mentions { left: 416px; top: -2px; width: 608px; height: 782px; object-fit: cover; }

/* Diaspora */
.dest--diaspora .calder { left: 795px; top: -13px; width: 645px; height: 806px; object-fit: cover; }
.dest--diaspora .d-visit { --label-x: 17px; }

/* AXIOM Reader */
.dest--axiom .bg-axiom { left: -448px; top: 0; width: 1888px; height: 1029px; }
.bg-blend { display: none; }

/* ---------- Page-load entrance (js/page.js) ----------
   Hidden before first paint by the head script, then handed to the entrance. */
.is-entering .dest-bg, .dest.is-bg-pending .dest-bg { visibility: hidden; }
.is-entering-text .dest :is(.d-anchor, .d-heading, .d-status, .d-detail, .d-back, .d-visit, .d-art > *),
.dest.is-text-pending :is(.d-anchor, .d-heading, .d-status, .d-detail, .d-back, .d-visit, .d-art > *) { opacity: 0; }
.dest > .entrance-edge { z-index: 0; }
.dest-fg { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .d-visit path { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
  .dest { display: block; }
  .dest--axiom { --frame: #0b0907; }
  /* The DISCO frame ends at 730; on taller screens the page continues in the image's bottom-edge colour. */
  .dest--disco { --frame: #12122c; }

  .dest-bg-art { top: 0; width: 390px; height: 1200px; transform: translateX(-50%) scale(var(--k, 1)); transform-origin: 50% 0; }
  .dest-fg { width: 390px; height: auto; margin: 0 auto; padding: 40px 20px 0; zoom: var(--k, 1); }

  .d-anchor, .d-heading, .d-status, .d-detail, .d-back, .d-visit, .d-art, .d-art > * { position: relative; left: auto; top: auto; }
  .d-anchor { display: block; width: 40px; }
  .d-heading { width: auto; margin-top: 16px; font-size: 32px; line-height: 40px; }
  .d-status { width: auto; margin-top: 16px; font-size: 14px; line-height: 19px; }
  .d-detail { width: 350px; margin-top: 10px; font-size: 17px; line-height: 24px; }
  .d-back { display: inline-block; margin-top: 32px; font-size: 16px; line-height: 22px; }
  .d-art { inset: auto; }
  .d-art > * { position: absolute; }

  /* Hootworth: halo 36 below the back link; owl at 70%, centred in the halo;
     scheduling card at 72%, 250 below the halo's top; button 40 below the card. */
  .dest--hootworth .bg-hoot { left: -330px; top: -60px; width: 1050px; height: 1132px; background-size: 1167.32px 1132px; background-position: -117.2px 0; }
  .dest--hootworth .d-art { height: 622.7px; margin: 36px -20px 0; }
  .dest--hootworth .halo { left: 45px; top: 0; width: 300px; height: 300px; border-width: 1.6px; }
  .dest--hootworth .owl { left: 75.6px; top: 30.6px; width: 239.4px; height: 239.4px; }
  .dest--hootworth .sched { left: -18.71px; top: 226.84px; width: 419.04px; height: 452.88px; }
  .dest--hootworth .owl { z-index: 1; }
  .dest--hootworth .sched { z-index: 2; }

  /* DISCO: the mascot 20 below the back link, ending the page. */
  .dest--disco .bg-disco { left: -560px; top: 0; width: 1408px; height: 880px; }
  .dest--disco .d-art { height: 463px; margin: 20px -20px 0; }
  .dest--disco .mentions { left: 15px; top: 0; width: 360px; height: 463px; }

  /* Diaspora: the figure 16 below the back link, full width; button 32 below. */
  .dest--diaspora .d-art { height: 487px; margin: 16px -20px 0; }
  .dest--diaspora .calder { left: 0; top: 0; width: 390px; height: 487px; }

  .d-visit { margin-top: 40px; }
  .dest--diaspora .d-visit { margin-top: 32px; }
  .dest--hootworth .dest-fg, .dest--diaspora .dest-fg { padding-bottom: 44px; }

  /* AXIOM Reader: the image starts at y262 and blends up into the page. */
  .dest--axiom .dest-fg { min-height: 900px; }
  .dest--axiom .bg-axiom { left: -890px; top: 262px; width: 1394px; height: 760px; }
  .bg-blend { display: block; left: 0; top: 262px; width: 390px; height: 160px; background: linear-gradient(to bottom, #0b0907, rgba(11, 9, 7, 0)); }
}