/* =============================================================================
   SHAI — desktop shell (html.is-shell: top-level window ≥ 820px wide and ≥ 740px tall)

   Figma "Desktop" frame (1842 × 1084): the mobile site sits in a phone frame dead centre. The left half is
   a flat #16101a field with a soft glow top-left and the pitch; the right half is a photo at 75% opacity,
   scaled to the window height, so a wider window reveals more of it. A QR code sits bottom-right.
   The phone is an <iframe> of this same page: it shrinks with the window height, so the
   mobile layout inside responds exactly as it would on a smaller phone.
   Below the breakpoint none of this applies and the page is the plain responsive mobile site.
   ============================================================================= */
.shell { display: none; }
html.is-shell, html.is-shell body { height: 100%; overflow: hidden; background: #16101a; }
html.is-shell body > :not(.shell) { display: none !important; }

html.is-shell .shell {
  display: block; position: fixed; inset: 0; overflow: hidden;
  background: #16101a; color: #b8aacb;

  --mid: 50vw;                                            /* the phone's vertical centre line: colour left, photo right */
  --ph: min(893px, calc(100vh - 64px));                   /* phone height: Figma 893, shrinks to fit the window */
  --m: min(2.877vw, 53px);                                /* left margin (53 / 1842) */
  --mr: min(2.17vw, 40px);                                /* right margin (40 / 1842) */
  /* type scale: everything on the left is a multiple of --f (Figma headline = 57px), but never so big
     that the longest headline line (~10.5em) reaches the phone */
  --avail: calc(var(--mid) - var(--ph) * 0.2385 - 2 * var(--m));   /* room between the left margin and the phone */
  --f: max(18px, min(3.094vw, 57px, calc(var(--avail) / 10.5)));
}

.shell__glow {                                            /* Figma: 968 × 966 ellipse at (-484, -210) */
  position: absolute; left: -26.3vw; top: -19.4vh; width: 52.55vw; aspect-ratio: 968 / 966;
  background: url("../assets/brand/desktop-glow.svg") center / 100% 100% no-repeat;
}
.shell__photo {                                           /* centre line → right edge, 75% over the field; scaled to the height (cover), so more shows as the window widens */
  position: absolute; top: 0; bottom: 0; left: var(--mid); right: 0; opacity: .75;
  background: url("../assets/shell/insomnia.webp") center bottom / cover no-repeat;   /* 1.9 MB PNG → 42 KB AVIF / 37 KB WebP (alpha kept) */
  background: image-set(url("../assets/shell/insomnia.avif") type("image/avif"), url("../assets/shell/insomnia.webp") type("image/webp")) center bottom / cover no-repeat;
}

.shell__title, .shell__limited { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-feature-settings: "dlig" 1; }
.shell__title { position: absolute; left: var(--m); top: 25.2vh; font-size: var(--f); line-height: .982; }
.shell__l1 { font-size: .9505em; line-height: 1.008; }   /* Figma sets the first line a touch smaller (54.17 vs 57px) */
.shell__offer { position: absolute; left: var(--m); bottom: 27vh;   /* Figma: the offer block ends ~27% of the height up from the bottom; anchored there so it grows upward */
  width: min(calc(var(--f) * 10.16), var(--avail)); display: flex; flex-direction: column; gap: calc(var(--f) * .42); }
.shell__limited { font-size: max(calc(var(--f) * .6316), 15px); line-height: 1.055; }   /* floors keep the small type readable on small desktops */
.shell__body { margin: 0; font-family: "Iosevka Charon", ui-monospace, monospace; font-size: max(calc(var(--f) * .3158), 11px); line-height: 1.2; font-feature-settings: "dlig" 1; }

.shell__qr { position: absolute; bottom: max(2vh, 14px); display: flex; flex-direction: column; gap: calc(var(--f) * .2); color: inherit; text-decoration: none;
  font-family: "Iosevka Charon", ui-monospace, monospace; font-size: max(calc(var(--f) * .2807), 11px); letter-spacing: .04em; white-space: nowrap; }
.shell__qr img { display: block; width: max(calc(var(--f) * 1.123), 64px); height: auto; }   /* never under the Figma 64px, so it stays scannable */
.shell__qr { right: var(--mr); align-items: flex-end; }

/* Phone hardware. The screen (the iframe) keeps the Figma 426 × 893 size so the mobile layout inside is untouched;
   the bezel, rim and buttons are drawn OUTSIDE it. Light comes from the top-left glow, so every edge facing it
   (top / left) catches a lavender highlight and the opposite edges fall into shadow, and the cast shadow
   drops down-right, away from the light. */
.shell__phone {
  --r: calc(var(--ph) * .065);                            /* screen corner radius */
  --bz: max(5px, calc(var(--ph) * .0095));                /* black glass bezel */
  --rim: max(2px, calc(var(--ph) * .0028));               /* lit metal edge */
  --bw: max(3px, calc(var(--ph) * .0042));                /* side-button thickness */
  position: absolute; left: var(--mid); top: 50%; transform: translate(-50%, -50%);
  height: var(--ph); width: calc(var(--ph) * 426 / 893); border-radius: var(--r);
  background: #0d040d;
  box-shadow:
    0 0 0 var(--bz) #07030a,                                                       /* bezel */
    0 0 0 calc(var(--bz) + var(--rim)) #1b1422,                                    /* rim base under the gradient */
    calc(var(--ph) * .03) calc(var(--ph) * .045) calc(var(--ph) * .08) rgba(0, 0, 0, .55),   /* cast shadow, away from the light */
    calc(var(--ph) * -.012) calc(var(--ph) * -.012) calc(var(--ph) * .06) rgba(184, 170, 203, .16);   /* faint spill on the lit side */
}
.shell__phone iframe { display: block; width: 100%; height: 100%; border: 0; background: #0d040d; border-radius: var(--r); }

/* metal rim: a gradient ring just outside the bezel — bright top-left, dark mid, a soft bounce light bottom-right */
.shell__phone::before {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  inset: calc(-1 * (var(--bz) + var(--rim))); padding: var(--rim);
  border-radius: calc(var(--r) + var(--bz) + var(--rim));
  background: linear-gradient(135deg, #f1e9fb 0%, rgba(184, 170, 203, .85) 18%, rgba(92, 85, 101, .5) 42%, rgba(30, 24, 36, .9) 62%, rgba(120, 108, 138, .7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* glass: inner edge of the bezel (light top-left, dark bottom-right) and a faint reflection across the screen */
.shell__phone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: var(--r);
  background: linear-gradient(125deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 32%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .22), inset -1px -1px 2px rgba(0, 0, 0, .7);
}
.shell__btn { position: absolute; z-index: 1; pointer-events: none; width: var(--bw); display: none; }   /* hidden for a more minimal frame; remove "display: none" to bring the side buttons back */
.shell__btn--l {                                          /* action + volume up + volume down; the outer face catches the light */
  left: calc(-1 * (var(--bz) + var(--rim) + var(--bw) - 1px)); top: calc(var(--ph) * .16); height: calc(var(--ph) * .17);
  border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #d9cfe8, #6a5f78 55%, #231b2a);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 22% no-repeat, linear-gradient(#000 0 0) 0 38% / 100% 28% no-repeat, linear-gradient(#000 0 0) bottom / 100% 28% no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% 22% no-repeat, linear-gradient(#000 0 0) 0 38% / 100% 28% no-repeat, linear-gradient(#000 0 0) bottom / 100% 28% no-repeat;
}
.shell__btn--r {                                          /* power: on the shadow side, so just a thin cool edge */
  right: calc(-1 * (var(--bz) + var(--rim) + var(--bw) - 1px)); top: calc(var(--ph) * .24); height: calc(var(--ph) * .095);
  border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #3a3044, #15101a);
  box-shadow: inset -1px 0 0 rgba(184, 170, 203, .25);
}