/* ============================================================
   Homepage "desktop" hero - fully scoped under .hos so nothing
   collides with site.css (the reference uses generic names like
   .grain/.btn/.eyebrow/.note that site.css also defines).
   Source of truth: tvdb-hero-handover/hero-reference.html
   ============================================================ */
.hos {
  --ink: #13110F;
  --cream: #F1ECE4; --cream-dim: rgba(241,236,228,.74);
  --cobalt: #3B33E0; --cobalt-light: #554DF2; --cobalt-deep: #2A22B8;
  --yellow: #FFD23F; --mustard: #E9AE45; --green: #C6EA6A;
  --display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --script: "Caveat", "Brush Script MT", cursive;
  --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M20 70 C10 30 40 8 90 12 C140 16 180 4 240 8 C300 12 360 2 380 40 C398 74 388 120 384 150 C380 184 340 196 290 192 C230 187 180 198 120 194 C70 191 14 196 10 156 C7 122 26 104 20 70 Z'/%3E%3C/svg%3E");
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; /* board centred; the menu bar and dock float over the top/bottom */
  color: var(--cream);
  -webkit-user-select: none; user-select: none; /* the desktop chrome isn't selectable (window text still is) */
  font-family: var(--mono); -webkit-font-smoothing: antialiased;
  /* Full-bleed wallpaper: the 16:9 board is centred and transparent, and this
     cobalt gradient fills the whole viewport so there are no black letterbox
     bars - the board region and its surround are one continuous wallpaper. */
  background-color: var(--cobalt);
  background-image: radial-gradient(ellipse 80% 82% at 50% 42%, var(--cobalt-light) 0%, var(--cobalt) 54%, var(--cobalt-deep) 100%);
}
/* grain across the whole viewport, not just the board */
.hos::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0 0.3  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hos :focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
/* our display:flex/grid rules would otherwise beat the UA [hidden] rule, so
   make [hidden] authoritative for hero chrome (notification, AirDrop, etc.) */
.hos [hidden], .hos-airdrop[hidden] { display: none !important; }
.hos button { font: inherit; color: inherit; }

/* The whole hero is one 16:9 frame, scaled to fit the window */
.hos-fit { position: relative; z-index: 1; width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; overflow: visible; }
.hos-board { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; isolation: isolate; overflow: hidden; background: transparent; }
.hos-grain { display: none; } /* grain now covers the whole viewport via .hos::before */

/* Layer order: backdrop 0, grain 1, headline 2, photo 3, overlays 4+, menu 9 */
/* Floating rounded menu bar, fixed to the top of the viewport (iMac-style corners) */
.hos-menubar { position: fixed; z-index: 900; top: 12px; left: 14px; right: 14px; height: 46px; display: flex; align-items: center; gap: 32px; padding-inline: 22px; color: var(--ink); font-size: 15px; border-radius: 16px;
  background: rgba(247,244,238,0.6); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 28px rgba(20,14,80,.2); }
.hos-wordmark { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 19px; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.hos-wordmark span { color: var(--cobalt); }
.hos-menubar nav { display: flex; gap: 6px; }
.hos-menubar nav a { color: rgba(19,17,15,.62); text-decoration: none; padding: 6px 11px; border-radius: 7px; }
.hos-menubar nav a:hover { color: var(--ink); background: rgba(19,17,15,.06); }
/* letter-roll: the incoming copy is coloured to read on the light glass bar */
.hos-menubar nav a .lchar .lb { color: var(--cobalt); }
.hos-menubar .hos-right { margin-left: auto; display: flex; align-items: center; gap: 22px; white-space: nowrap; color: rgba(19,17,15,.55); }
.hos-nowplaying { display: flex; align-items: center; gap: 10px; }
.hos-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; }
.hos-eq i { width: 3px; background: var(--cobalt); height: 100%; transform-origin: bottom; animation: hos-eq 1s ease-in-out infinite; }
.hos-eq i:nth-child(2) { animation-delay: -.35s; } .hos-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes hos-eq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.hos-sysicons { display: inline-flex; align-items: center; gap: 15px; color: rgba(19,17,15,.72); }
.hos-sysicons svg { height: 16px; width: auto; display: block; }
.hos-clock { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Headline sits behind the photo; its inner edges tuck under the silhouette */
.hos-headline { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hos-left { position: absolute; left: 64px; top: 176px; display: grid; justify-items: start; gap: 18px; }
.hos-eyebrow { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
.hos-heavy { font-family: var(--display); font-weight: 900; font-stretch: 112%; margin: 0; font-size: 82px; line-height: .92; letter-spacing: -0.035em; color: var(--cream); }
.hos-heavy .hos-line { display: block; white-space: nowrap; }
.hos-box { display: inline-block; background: var(--yellow); color: var(--ink); padding: 3px 56px 10px 10px; margin: 8px 0 0 -10px; }
.hos-rightblock { position: absolute; left: 1235px; top: 430px; }
.hos-serif { font-family: var(--display); font-style: normal; font-weight: 900; font-stretch: 112%; margin: 0; font-size: 86px; line-height: .9; letter-spacing: -0.035em; color: var(--cream); white-space: nowrap; }
.hos-serif .hos-line { display: block; }
.hos-serif .hos-move { padding-left: 52px; }
.hos-move b { display: inline-block; font-weight: 900; animation: hos-bob 2.8s var(--ease) infinite; }
.hos-move b:nth-child(2) { animation-delay: .08s; } .hos-move b:nth-child(3) { animation-delay: .16s; } .hos-move b:nth-child(4) { animation-delay: .24s; } .hos-move b:nth-child(5) { animation-delay: .32s; color: var(--green); }
@keyframes hos-bob { 0%, 62%, 100% { transform: translateY(0); } 72% { transform: translateY(-.07em); } 84% { transform: translateY(.015em); } }

.hos-sub { position: absolute; z-index: 4; left: 64px; top: 726px; width: 470px; margin: 0; font-size: 19px; line-height: 1.7; color: var(--cream-dim); }
/* iOS text-selection treatment on the sub-line */
.hos-sub-sel { color: var(--cream); }
.hos-seltext { background: rgba(10,132,255,.34); color: var(--cream); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 2px 1px; }
.hos-sub .sel-h { display: inline-block; width: 3px; height: 20px; background: #0A84FF; vertical-align: -4px; position: relative; }
.hos-sub .sel-h-start::before { content: ""; position: absolute; top: -5px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: #0A84FF; }
.hos-sub .sel-h-end::before { content: ""; position: absolute; bottom: -5px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: #0A84FF; }
.hos-selmenu { position: absolute; top: -52px; left: 0; display: inline-flex; align-items: stretch; color: var(--ink); border-radius: 12px; font-size: 15px; white-space: nowrap;
  background: rgba(247,244,238,.72); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.5); box-shadow: 0 12px 30px rgba(20,14,80,.28); }
.hos-selmenu > span { padding: 11px 16px; }
.hos-selmenu > span + span { box-shadow: -1px 0 0 rgba(19,17,15,.12); }
/* the chevron cell keeps the same outer cap (16px) as the first item so the
   pill's left and right padding match */
.hos-selmenu .more { padding-left: 13px; padding-right: 16px; }
/* downward caret (arrow), not a rotated square/diamond */
.hos-selmenu::after { content: ""; position: absolute; left: 28px; bottom: -7px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid rgba(247,244,238,.82); }

/* Photo */
.hos-stage { display: contents; } /* transparent on desktop: subject positions against the board exactly as before */
.hos-subject { position: absolute; z-index: 3; left: 23.68px; top: 96px; width: 1672px; height: 940px; transform: scale(1.12); transform-origin: 0 0; pointer-events: none; }
.hos-subject > img { position: absolute; inset: 0; width: 1672px; height: 940px; display: block; }
.hos-screen { position: absolute; left: 0; top: 0; width: 1280px; height: 736px; transform-origin: 0 0; overflow: hidden; border-radius: 16px; background: var(--ink); pointer-events: auto; cursor: pointer; }
.hos-screen .hos-glare { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: rgba(255,255,255,.07); clip-path: polygon(0 0, 46% 0, 22% 100%, 0 100%); }
.hos-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 8; }

.msg-tail { position: absolute; bottom: -1px; overflow: visible; }
.msg-tail-l { left: -9px; }
.msg-tail-r { right: -9px; }
@keyframes hos-msg-pop { 0% { opacity: 0; transform: scale(.2); } 65% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }

/* Notification = the one CTA. A real macOS-style banner: frosted glass, app
   icon (Tyler's avatar), app name + timestamp, title, body, action. */
.hos-note { position: absolute; z-index: 6; top: 104px; right: 64px; width: 420px;
  display: grid; grid-template-columns: 52px 1fr; column-gap: 15px; row-gap: 4px; padding: 16px 18px;
  color: var(--ink); border-radius: 22px;
  background: rgba(247,244,238,0.62);
  -webkit-backdrop-filter: blur(30px) saturate(165%); backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 22px 54px rgba(20,14,80,.4), inset 0 1px 0 rgba(255,255,255,.6);
  animation: hos-drop .7s cubic-bezier(.2,.9,.25,1.2) both .9s; }
@keyframes hos-drop { from { transform: translateY(-16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.hos-note .hos-nclose { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; cursor: pointer; line-height: 0; color: #fff; background: rgba(40,40,46,.92); box-shadow: 0 2px 6px rgba(0,0,0,.3); opacity: 0; transform: scale(.8); transition: opacity .16s, transform .16s, background .16s; }
.hos-note .hos-nclose svg { width: 10px; height: 10px; display: block; }
.hos-note:hover .hos-nclose, .hos-note:focus-within .hos-nclose { opacity: 1; transform: scale(1); }
.hos-note .hos-nclose:hover { background: rgba(18,18,22,1); }
.hos-note.is-dismissed { animation: hos-note-out .28s ease forwards; pointer-events: none; }
@keyframes hos-note-out { to { transform: translateY(-14px) scale(.96); opacity: 0; } }
.hos-note.is-repop { animation: hos-drop .7s cubic-bezier(.2,.9,.25,1.2) both; }
.hos-note .hos-app { grid-row: 1 / span 4; align-self: start; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(20,14,80,.28); background: var(--yellow); }
.hos-note .hos-app img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hos-note .hos-ntop { grid-column: 2; display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(19,17,15,.55); }
.hos-note .hos-ntime { font-variant: small-caps; }
.hos-note .hos-ntitle { grid-column: 2; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 18px; color: var(--ink); }
.hos-note p { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.45; color: rgba(19,17,15,.66); }
.hos-btn { grid-column: 2; justify-self: start; margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--green); color: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 14px; text-decoration: none; }
.hos-btn:hover { filter: brightness(1.05); }
.hos-btn svg { transition: transform .2s; } .hos-btn:hover svg { transform: translateX(3px); }

/* Desktop icons */
.hos-icons { position: absolute; inset: 46px 0 0 0; z-index: 7; pointer-events: none; }
/* folder shrinks to its icon width so the label sits centred under the icon,
   while JS positions each one so the icon's right edge lands on the 1856 grid */
.hos-folder { position: absolute; width: max-content; display: grid; justify-items: center; gap: 10px; background: none; border: 0; padding: 6px 0; border-radius: 12px; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; }
.hos-folder svg { width: 110px; height: 90px; filter: drop-shadow(0 14px 18px rgba(20,14,80,.38)); transition: transform .15s; }
.hos-folder:hover svg { transform: translateY(-3px); }
.hos-folder .hos-avatar { width: 98px; height: 98px; border-radius: 24px; object-fit: cover; box-shadow: 0 14px 20px rgba(20,14,80,.42); transition: transform .15s; }
.hos-folder:hover .hos-avatar { transform: translateY(-2px); }

/* Creative-tool apps on the desktop, with a Stickies note explaining them */
.hos-apps { position: absolute; z-index: 7; right: 64px; top: 360px; display: grid; justify-items: end; gap: 12px; }
.hos-appsnote { position: relative; justify-self: end; max-width: 290px; padding: 14px 20px; border-radius: 24px 24px 7px 24px; background: #E9E9EB; color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.25; text-align: right; box-shadow: 0 12px 26px rgba(20,14,80,.28); transform-origin: bottom right; }
@media (prefers-reduced-motion: no-preference) {
  .hos-appsnote { animation: hos-msg-pop .5s cubic-bezier(.2,.9,.25,1.35) both .7s; }
}
.hos-approw { display: flex; gap: 20px; justify-content: flex-end; }
.hos-appicon { display: grid; justify-items: center; gap: 8px; background: none; border: 0; padding: 2px 0 2px 2px; cursor: pointer; }
.hos-appicon svg { width: 64px; height: 64px; filter: drop-shadow(0 12px 18px rgba(20,14,80,.4)); transition: transform .15s; }
.hos-appicon:hover svg { transform: translateY(-3px); }
.hos-appicon span { font-family: var(--mono); font-size: 13px; color: var(--cream); text-shadow: 0 1px 8px rgba(20,14,80,.55); white-space: nowrap; }
.hos-appicon.is-bounce { animation: hos-dock-bounce .6s ease; }
.hos-folder .hos-label { font-size: 17px; line-height: 1.2; padding: 3px 11px; border-radius: 6px; color: var(--cream); white-space: nowrap; text-shadow: 0 1px 8px rgba(20,14,80,.5); }
.hos-folder .hos-meta { font-size: 13px; color: var(--cream-dim); white-space: nowrap; }
.hos-folder.hos-selected .hos-label { background: var(--cream); color: var(--cobalt-deep); text-shadow: none; }
.hos-folder.hos-dragging { cursor: grabbing; z-index: 30; }

/* Dock: a floating rounded glass tray at the bottom, like a computer */
.hos-dock { position: fixed; z-index: 900; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; border-radius: 22px;
  background: rgba(247,244,238,0.5); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 14px 36px rgba(20,14,80,.3); }
.hos-dockicon { position: relative; width: 52px; height: 52px; border: 0; background: none; padding: 3px; cursor: pointer; display: grid; place-items: center; border-radius: 12px;
  transform-origin: bottom center;
  /* --s (1 at rest) is driven by the cursor-proximity magnifier in hero.js;
     the margin pushes neighbours apart so magnified icons never overlap */
  transform: translateY(calc((var(--s, 1) - 1) * -20px)) scale(var(--s, 1));
  margin-inline: calc((var(--s, 1) - 1) * 26px);
  transition: transform .16s var(--ease), margin-inline .16s var(--ease); }
.hos-dockicon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 5px 11px; border-radius: 8px; background: rgba(19,17,15,.92); color: var(--cream); font-family: var(--mono); font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 6px 16px rgba(20,14,80,.3); }
.hos-dockicon:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.hos-dockicon svg { width: 46px; height: 46px; filter: drop-shadow(0 4px 8px rgba(20,14,80,.3)); }
.hos-dockicon img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; filter: drop-shadow(0 4px 8px rgba(20,14,80,.3)); }
/* running-app indicator dot (mirrors macOS): shown when the icon's window is open */
.hos-dockicon.hos-running::before { content: ""; position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(19,17,15,.5); }
/* reduced motion: the magnifier is disabled in JS, so keep the dock static */
@media (prefers-reduced-motion: reduce) { .hos-dockicon { transition: none; } }
.hos-dock-sep { width: 1px; height: 40px; align-self: center; background: rgba(19,17,15,.16); margin: 0 4px; }
.hos-dockicon.is-bounce { animation: hos-dock-bounce .6s ease; }
@keyframes hos-dock-bounce { 0%,100% { transform: translateY(0); } 28% { transform: translateY(-18px); } 52% { transform: translateY(0); } 70% { transform: translateY(-7px); } 86% { transform: translateY(0); } }

/* Subtle idle float on the desktop icons, for a bit of life */
@media (prefers-reduced-motion: no-preference) {
  .hos-folder { animation: hos-ifloat 5.5s ease-in-out infinite; }
  .hos-folder:nth-child(2) { animation-delay: -1.3s; }
  .hos-folder:nth-child(3) { animation-delay: -2.6s; }
  .hos-folder:nth-child(4) { animation-delay: -3.9s; }
  .hos-folder.hos-selected, .hos-folder.hos-dragging { animation: none; }
}
@keyframes hos-ifloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* AirDrop-style CV share */
.hos-airdrop { position: fixed; z-index: 950; top: auto; bottom: 100px; left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 20px; text-align: center;
  color: var(--ink); font-family: var(--mono);
  background: rgba(247,244,238,0.82); -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 30px 72px rgba(20,14,80,.42); }
.hos-airdrop:not([hidden]) { animation: hos-ad-in .3s cubic-bezier(.2,.9,.25,1.2); }
@keyframes hos-ad-in { from { opacity: 0; transform: translateX(-50%) scale(.94); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.hos-airdrop.is-closing { animation: hos-ad-out .2s ease forwards; }
@keyframes hos-ad-out { to { opacity: 0; transform: translateX(-50%) scale(.96); } }
.ad-close { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(19,17,15,.08); color: rgba(19,17,15,.6); line-height: 0; cursor: pointer; }
.ad-close svg { width: 11px; height: 11px; display: block; }
.ad-close:hover { background: rgba(19,17,15,.16); color: var(--ink); }
.ad-top { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--cobalt); }
.ad-top svg { width: 20px; height: 20px; }
.ad-from { font-size: 12.5px; color: rgba(19,17,15,.6); margin-top: 6px; }
.ad-file { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 14px 0 16px; text-align: left; }
.ad-thumb svg { width: 46px; height: 46px; display: block; }
.ad-name { font-size: 14px; font-weight: 600; }
.ad-meta { font-size: 12px; color: rgba(19,17,15,.55); }
.ad-actions { display: flex; gap: 10px; }
.ad-actions button { flex: 1; padding: 11px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; cursor: pointer; }
.ad-decline { background: rgba(19,17,15,.08); color: var(--ink); }
.ad-decline:hover { background: rgba(19,17,15,.14); }
/* selector needs to beat `.hos button { color: inherit; font: inherit }` (0,1,1) */
.ad-actions .ad-accept { background: var(--cobalt); color: #fff; font-weight: 700; }
.ad-actions .ad-accept:hover { filter: brightness(1.08); }
.ad-email { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-email input { flex: 1 1 160px; padding: 10px 12px; border: 1px solid rgba(19,17,15,.15); border-radius: 10px; font: inherit; font-size: 13px; background: rgba(255,255,255,.6); color: var(--ink); }
.ad-email input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.ad-email .ad-send { padding: 10px 16px; border: 0; border-radius: 999px; background: var(--cobalt); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ad-email .ad-send:hover { filter: brightness(1.08); }
.ad-msg { flex-basis: 100%; font-size: 12px; color: rgba(19,17,15,.6); }
.ad-msg.err { color: #c0392b; }
.ad-msg.ok { color: #1e7a3d; }
@media (max-width: 700px) { .hos-airdrop { top: auto; bottom: 16px; } }

/* Boot / login flourish (shows on a real page load, auto-fades) */
.hos-boot { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(ellipse 82% 82% at 50% 44%, #554DF2 0%, #3B33E0 55%, #2A22B8 100%);
  animation: hos-boot-out .55s ease 1.5s forwards; }
.hos-boot-avatar { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 18px 44px rgba(10,8,40,.5); }
.hos-boot-name { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #F1ECE4; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.hos-boot-bar { width: 184px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; margin-top: 4px; }
.hos-boot-bar i { display: block; height: 100%; width: 0; background: #F1ECE4; border-radius: 3px; animation: hos-boot-fill 1.5s ease forwards; }
@keyframes hos-boot-fill { to { width: 100%; } }
@keyframes hos-boot-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .hos-boot { animation: hos-boot-out .01s forwards; } .hos-boot-bar { display: none; } }

/* Spotlight search */
.hos-spotlight { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; padding: 16vh 16px 0;
  background: rgba(10,8,40,.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hos-spotlight[hidden] { display: none !important; }
.spot-box { width: min(600px, 100%); display: flex; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 18px;
  background: rgba(248,245,239,.92); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 30px 80px rgba(10,8,40,.5); }
.spot-mag { width: 26px; height: 26px; color: rgba(19,17,15,.45); flex: 0 0 auto; }
#spotInput { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 26px; color: #13110F; }
#spotInput::placeholder { color: rgba(19,17,15,.4); }
.spot-results:empty { display: none; }
.spot-results { width: min(600px, 100%); margin-top: 10px; border-radius: 16px; overflow: hidden;
  background: rgba(248,245,239,.92); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 60px rgba(10,8,40,.44); }
.spot-item { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; padding: 13px 22px; border: 0; background: none; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #13110F; }
.spot-item.sel { background: #3B33E0; color: #fff; }
.spot-name { font-size: 16px; font-weight: 600; }
.spot-sub { font-size: 13px; opacity: .55; }
.spot-item.sel .spot-sub { opacity: .85; }
.spot-empty { padding: 15px 22px; color: rgba(19,17,15,.5); font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }


/* Showreel player chip (1280 x 736 screen space) */
.hos-chip { position: absolute; z-index: 9; right: 34px; bottom: 30px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; background: rgba(19,17,15,.72); color: var(--cream); font: 500 26px var(--mono); pointer-events: none; transition: opacity .4s; }
.hos-chip i { display: none; }
.hos-screen:not(:hover) .hos-chip.hos-quiet { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hos *, .hos *::before, .hos *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Phone layout (<=700px): the 16:9 desktop board would shrink to
   an unreadable letterbox, so we reflow the same DOM into a
   natural vertical stack. JS (see hero.js) sizes the photo stage.
   ============================================================ */
@media (max-width: 700px) {
  .hos { display: block; min-height: 100svh; overflow: visible; place-items: initial;
    background-image: radial-gradient(ellipse 120% 60% at 50% 30%, var(--cobalt-light) 0%, var(--cobalt) 52%, var(--cobalt-deep) 100%); }
  .hos-fit { width: 100%; aspect-ratio: auto; height: auto; overflow: visible; }
  .hos-board { position: static; width: 100%; height: auto; transform: none !important;
    display: flex; flex-direction: column; align-items: stretch; padding: 0 0 46px; background: none; }
  .hos-grain { position: fixed; z-index: 0; }

  /* Menu bar: full-width fixed at the top. On a phone the real status bar
     already shows wifi/battery/time, and those decorative icons + clock used to
     overflow narrow screens, so drop them and keep the wordmark + working search. */
  .hos-menubar { position: fixed; top: 0; left: 0; right: 0; height: 50px; gap: 12px; padding-inline: 18px; border-radius: 0; z-index: 900; }
  .hos-board { padding-top: 62px; }
  .hos-dock { display: none; }
  .hos-menubar > nav { display: none; }
  .hos-nowplaying { display: none; }
  .hos-wordmark { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hos-right { gap: 12px; flex-shrink: 0; }
  .hos-clock { display: none; }
  .hos-sysicons { gap: 0; }
  .hos-sysicons svg:not(.hos-spot-open) { display: none; }   /* keep only the search button */

  /* Headline: un-absolute the two blocks and let them flow, centered-left */
  .hos-headline { position: static; inset: auto; pointer-events: auto; padding: 30px 22px 4px; }
  .hos-left { position: static; right: auto; top: auto; gap: 12px; }
  .hos-eyebrow { font-size: 12px; letter-spacing: .12em; }
  .hos-heavy { font-size: clamp(52px, 15.5vw, 88px); line-height: .88; }
  .hos-box { padding: 2px 20px 8px 8px; margin: 6px 0 0 -8px; }
  .hos-rightblock { position: static; left: auto; top: auto; margin-top: 8px; }
  .hos-serif { font-size: clamp(60px, 18vw, 104px); line-height: .82; white-space: normal; }
  .hos-serif .hos-move { padding-left: 0; }

  /* On phones the portrait cropped Tyler's head, so we float just the showreel
     as a flat 16:9 card and hide the photo entirely. */
  .hos-stage { display: block; position: relative; width: auto; margin: 16px 22px 6px; }
  .hos-subject { position: static; width: auto; height: auto; transform: none !important; pointer-events: auto; }
  .hos-subject > img { display: none; }
  .hos-screen { position: relative; left: auto; top: auto; transform: none !important;
    width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px;
    box-shadow: 0 20px 46px rgba(20,14,80,.42); }
  .hos-screen .hos-glare { border-radius: 18px; }
  .hos-chip { opacity: 1 !important; } /* no hover on touch, so keep the sound hint visible */

  /* Supporting copy */
  .hos-sub { position: static; left: auto; top: auto; width: auto; padding: 4px 24px 0; font-size: 15px; line-height: 1.6; }
  .hos-selmenu, .hos-sub .sel-h { display: none; }
  .hos-seltext { background: none; padding: 0; }

  /* Availability card becomes a normal block, full width */
  .hos-note { position: static; top: auto; right: auto; width: auto; margin: 22px 22px 0; animation: none; box-shadow: 0 16px 34px rgba(20,14,80,.32); }
  .hos-note .hos-nclose { opacity: 1; transform: scale(1); } /* no hover on touch */

  .hos-apps { display: none; } /* absolutely-positioned for the desktop artboard */

  /* Icons: a tidy 2x2 grid instead of scattered draggable desktop icons */
  .hos-icons { position: static; inset: auto; pointer-events: auto; padding: 26px 18px 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .hos-folder { position: static !important; left: auto !important; top: auto !important;
    width: auto; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px;
    background: rgba(19,17,15,.16); cursor: pointer; touch-action: manipulation; }
  .hos-folder svg { width: 62px; height: 51px; }
  .hos-folder .hos-avatar { width: 62px; height: 62px; border-radius: 16px; }
  .hos-folder.hos-selected .hos-label { background: transparent; color: var(--cream); }
  .hos-chip { right: 16px; bottom: 14px; font-size: 16px; padding: 8px 14px; }
}

/* ============================================================
   Desktop-OS mode: the homepage is a single, non-scrolling screen.
   The portfolio sections below stay in the DOM as the data source
   for the windows, but are hidden; their content opens as windows.
   ============================================================ */
html:has(body.home-os) { height: 100%; overflow: hidden; }
body.home-os { height: 100%; overflow: hidden; }
body.home-os > .grain,
body.home-os > #nav,
body.home-os > .ticker,
body.home-os > #about,
body.home-os > #approach,
body.home-os > #toolkit,
body.home-os > #work,
body.home-os > #statics,
body.home-os > .create-line,
body.home-os > #contact { display: none !important; }

/* ---- Window layer: a fixed overlay above the wallpaper. Windows are
   screen-space (not scaled with the board) so their content stays readable. */
.hos-windows {
  --w-ink: #13110F; --w-cream: #F1ECE4; --w-paper: #FBF8F2;
  --w-cobalt: #3B33E0; --w-yellow: #FFD23F; --w-green: #C6EA6A; --w-mustard: #E9AE45;
  --w-line: rgba(19,17,15,.14); --w-dim: rgba(19,17,15,.58);
  --w-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --w-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --w-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --w-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
}
.hos-window {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  width: min(1060px, 92vw); height: min(720px, 82vh); min-width: 320px; min-height: 240px;
  color: var(--w-ink); border-radius: 18px; overflow: hidden; font-family: var(--w-mono);
  /* Apple-style frosted glass: the cobalt wallpaper shows through, tinting each
     window, so the windows share the hero's branding. */
  background: rgba(247,244,238,0.66);
  -webkit-backdrop-filter: blur(34px) saturate(165%); backdrop-filter: blur(34px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 34px 90px rgba(10,8,40,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.hos-window.is-zoomed { width: min(1320px, 96vw); height: min(890px, 92vh); }
.hos-window.is-rolled { height: 46px !important; min-height: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .hos-window { animation: hos-winopen .22s var(--w-ease); }
}
@keyframes hos-winopen { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hos-window.is-closing { animation: hos-winclose .18s ease forwards; }
@keyframes hos-winclose { to { transform: scale(.96); opacity: 0; } }

.hos-titlebar {
  flex: 0 0 46px; height: 46px; display: grid; grid-template-columns: 84px 1fr 84px; align-items: center;
  gap: 12px; padding: 0 16px; color: var(--w-ink);
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.18));
  border-bottom: 1px solid rgba(19,17,15,.08);
  cursor: grab; user-select: none; touch-action: none;
}
.hos-titlebar.is-dragging { cursor: grabbing; }
.hos-lights { display: flex; gap: 9px; }
.hos-lights button { width: 13px; height: 13px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.hos-lights button:hover { filter: brightness(1.06); transform: scale(1.08); }
.hos-lights .l-close { background: #FF5F57; }
.hos-lights .l-min { background: #FEBC2E; }
.hos-lights .l-zoom { background: #28C840; }
.hos-title { text-align: center; font-size: 14px; color: var(--w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .82; }
.hos-title b { color: var(--w-cobalt); font-weight: 600; opacity: 1; }
.hos-count { text-align: right; font-size: 13px; color: var(--w-dim); white-space: nowrap; }
.hos-winbody { flex: 1 1 auto; overflow: auto; padding: 30px 34px 42px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; container-type: inline-size; }
.hos-window.is-rolled .hos-winbody { display: none; }

/* Resize grip, bottom-right corner */
.hos-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 6; touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(19,17,15,.28) 48% 56%, transparent 56% 70%, rgba(19,17,15,.28) 70% 78%, transparent 78%);
}
.hos-window.is-rolled .hos-resize { display: none; }

/* Section heading shared by window bodies */
.hosc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--w-line); }
.hosc-head h2 { margin: 0; font-family: var(--w-display); font-weight: 900; font-stretch: 112%; font-size: 34px; letter-spacing: -0.02em; }
.hosc-head .k { font-size: 13px; color: var(--w-dim); letter-spacing: .08em; text-transform: uppercase; }

/* ---- work window: list of case studies */
.hosc-work { display: flex; flex-direction: column; }
.hosc-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 20px; align-items: start; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--w-line); padding: 22px 6px; cursor: pointer; color: inherit; font: inherit; }
.hosc-row:first-child { border-top: 0; }
.hosc-row:hover { background: rgba(59,51,224,.05); }
.hosc-row .n { font-size: 15px; color: var(--w-dim); padding-top: 6px; }
.hosc-row h3 { margin: 0 0 6px; font-family: var(--w-display); font-weight: 900; font-stretch: 112%; font-size: 26px; letter-spacing: -0.02em; }
.hosc-row h3 .of { color: var(--w-cobalt); }
.hosc-row p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--w-dim); max-width: 60ch; }
.hosc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.hosc-tags span { font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--w-line); border-radius: 999px; color: var(--w-dim); }
.hosc-row .go { align-self: center; font-size: 22px; color: var(--w-cobalt); transition: transform .2s; }
.hosc-row:hover .go { transform: translateX(4px); }

/* ---- case study sub-window */
.hosc-case .embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.hosc-case .embed iframe, .hosc-case .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hosc-case .meta { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--w-line); }
.hosc-case .meta div { font-size: 14px; } .hosc-case .meta .h { display: block; font-size: 12px; color: var(--w-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.hosc-case p.lead { font-size: 16px; line-height: 1.6; color: var(--w-ink); max-width: 66ch; margin: 0 0 18px; }
.hosc-case a.full { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 20px; background: var(--w-cobalt); color: var(--w-cream); border-radius: 999px; text-decoration: none; font-size: 14px; }
.hosc-case a.full:hover { filter: brightness(1.08); }
.hosc-case .cs-loading { color: var(--w-dim); font-size: 14px; margin: 16px 0; }
.hosc-case .cs-sec { border-top: 1px solid var(--w-line); padding: 22px 0; }
.hosc-case .cs-k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--w-cobalt); font-weight: 600; margin-bottom: 12px; }
.hosc-case .cs-metatag { color: var(--w-dim); text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.hosc-case .cs-body p { font-size: 14.5px; line-height: 1.62; margin: 0 0 12px; color: var(--w-ink); max-width: 66ch; }
.hosc-case .cs-body p.muted { color: var(--w-dim); }
.hosc-case .cs-body .cs-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.hosc-case .cs-body .cs-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--w-dim); }
.hosc-case .cs-body .cs-list .num { color: var(--w-cobalt); font-size: 12px; }
.hosc-case .cs-embeds { display: grid; gap: 14px; }
.hosc-case .cs-embeds.vert { grid-template-columns: repeat(3, 1fr); }
.hosc-case .cs-embed { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.hosc-case .cs-embed.v { aspect-ratio: 9 / 16; }
.hosc-case .cs-embed iframe, .hosc-case .cs-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* ---- statics window: grid + lightbox */
.hosc-grid .grp { column-span: all; break-before: avoid; break-after: avoid; margin: 22px 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-cobalt); }
.hosc-grid .grp:first-child { margin-top: 0; }
/* Masonry columns so each image keeps its true aspect ratio (no cropping) */
.hosc-grid { columns: 4; column-gap: 12px; }
.hosc-grid figure { margin: 0 0 12px; position: relative; break-inside: avoid; border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(19,17,15,.05); }
.hosc-grid img { width: 100%; height: auto; display: block; transition: transform .3s; }
.hosc-grid figure:hover img { transform: scale(1.03); }
.hosc-grid figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; transition: opacity .2s; }
.hosc-grid figure:hover figcaption { opacity: 1; }
.hos-lightbox { position: absolute; inset: 0; z-index: 8; background: rgba(19,17,15,.66); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: flex; align-items: center; justify-content: center; }
.hos-lightbox img { max-width: 86%; max-height: 82%; object-fit: contain; border-radius: 8px; }
.hos-lightbox .cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: var(--w-cream); font-size: 13px; }
.hos-lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: rgba(241,236,228,.14); color: #fff; font-size: 22px; cursor: pointer; }
.hos-lightbox button:hover { background: rgba(241,236,228,.28); }
.hos-lightbox .lb-prev { left: 18px; } .hos-lightbox .lb-next { right: 18px; }
.hos-lightbox .lb-close { top: 18px; transform: none; right: 18px; left: auto; width: 40px; height: 40px; font-size: 18px; }

/* ---- process.md window: styled like the native Notes app (opaque paper) */
.hos-window:has(.hosc-notes) { background: #FCFBF6; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(19,17,15,.12); }
.hos-window:has(.hosc-notes) .hos-titlebar { background: linear-gradient(#FDFCF8, #F2EFE6); border-bottom-color: rgba(19,17,15,.07); }
.hos-window:has(.hosc-notes) .hos-winbody { padding: 0; }
.hosc-notes { --notes: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-family: var(--notes); color: #1c1c1e; }
.notes-toolbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 24px; align-items: center; padding: 9px 24px; background: #FCFBF6; border-bottom: 1px solid rgba(19,17,15,.06); }
.nt-ico { font-size: 16px; color: #E6B000; opacity: .9; cursor: default; user-select: none; }
.nt-aa { font-weight: 800; letter-spacing: -.02em; }
.notes-page { padding: 20px 32px 44px; max-width: 66ch; }
.notes-date { text-align: center; font-size: 12px; color: #9a9a9e; margin-bottom: 16px; }
.notes-h1 { font-family: var(--notes); font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 2px; color: #1c1c1e; }
.notes-sub { font-size: 15px; color: #9a9a9e; margin: 0 0 24px; }
.notes-h2 { font-family: var(--notes); font-size: 20px; font-weight: 700; margin: 24px 0 6px; color: #1c1c1e; }
.notes-p { font-family: var(--notes); font-size: 16px; line-height: 1.5; margin: 0; color: #3a3a3c; }

/* ---- about window */
.hosc-about .top { display: grid; grid-template-columns: 260px 1fr; gap: 30px; margin-bottom: 30px; }
.hosc-about .portrait { border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; background: rgba(19,17,15,.06); }
.hosc-about .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hosc-about .lede { font-family: var(--w-serif); font-style: italic; font-size: 26px; line-height: 1.25; margin: 0 0 16px; }
.hosc-about .lede em { font-style: normal; color: var(--w-cobalt); }
.hosc-about .bio { font-size: 14.5px; line-height: 1.65; color: var(--w-dim); margin: 0; }
.hosc-about h3.sub { margin: 26px 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-cobalt); border-top: 1px solid var(--w-line); padding-top: 22px; }
.hosc-disc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hosc-disc div { border: 1px solid var(--w-line); border-radius: 12px; padding: 16px; }
.hosc-disc .t { font-family: var(--w-display); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.hosc-disc p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--w-dim); }
.hosc-edu { display: grid; gap: 12px; }
.hosc-edu > div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; border: 1px solid var(--w-line); border-radius: 12px; padding: 14px 16px; }
.hosc-edu .deg { font-family: var(--w-display); font-weight: 900; font-stretch: 112%; font-size: 18px; color: var(--w-cobalt); }
.hosc-edu .t { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.hosc-edu p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--w-dim); }
.hosc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hosc-pills span { font-size: 13px; padding: 7px 14px; border-radius: 999px; background: var(--w-cobalt); color: var(--w-cream); }
.hosc-contact { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; margin-top: 6px; }
.hosc-contact a { color: var(--w-cobalt); text-decoration: none; font-size: 15px; border-bottom: 1px solid currentColor; }
.hosc-contact .status { font-size: 14px; color: var(--w-dim); display: inline-flex; align-items: center; gap: 8px; }
.hosc-contact .status i { width: 8px; height: 8px; border-radius: 50%; background: var(--w-green); }
.hosc-cv { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.hosc-cv-email { flex: 1 1 220px; min-width: 170px; padding: 11px 14px; border: 1px solid var(--w-line); border-radius: 10px; background: rgba(255,255,255,.55); font: inherit; font-size: 14px; color: var(--w-ink); }
.hosc-cv-email:focus { outline: 2px solid var(--w-cobalt); outline-offset: 1px; }
.hosc-cv-btn { padding: 11px 18px; border: 0; border-radius: 999px; background: var(--w-cobalt); color: var(--w-cream); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hosc-cv-btn:hover { filter: brightness(1.08); }
.hosc-cv-btn:disabled { opacity: .6; cursor: default; }
.hosc-cv-msg { flex-basis: 100%; font-size: 13px; color: var(--w-dim); }
.hosc-cv-msg.err { color: #c0392b; }
.hosc-cv-msg.ok { color: #1e7a3d; }

/* ---- showreel window */
.hosc-reel { display: flex; flex-direction: column; height: 100%; }
.hosc-reel .frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.hosc-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hosc-reel .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.hosc-reel .row p { margin: 0; font-size: 14px; color: var(--w-dim); }
.hosc-reel a.full { padding: 11px 18px; background: var(--w-cobalt); color: var(--w-cream); border-radius: 999px; text-decoration: none; font-size: 14px; white-space: nowrap; }
.hosc-reel a.full:hover { filter: brightness(1.08); }

/* ---- Phone: the desktop is a scrolling stack (icons sit below the fold),
   and windows fill the screen ---- */
@media (max-width: 700px) {
  html:has(body.home-os) { overflow: auto; height: auto; }
  body.home-os { overflow: auto; height: auto; }
  .hos-window, .hos-window.is-zoomed { position: fixed; width: 100vw !important; height: 100svh !important; left: 0 !important; top: 0 !important; border-radius: 0; }
  .hos-window.is-rolled { height: 46px !important; }
  .hos-winbody { padding: 20px 18px 32px; }
  .hosc-about .portrait { max-width: 220px; }
  .hos-titlebar { grid-template-columns: 70px 1fr 44px; }
}

/* Window content reflows to the WINDOW's width (container queries), so it makes
   sense at any size - resized on desktop or full-screen on a phone alike. */
@container (max-width: 900px) { .hosc-grid { columns: 3; } }
@container (max-width: 640px) { .hosc-grid { columns: 2; } .hosc-head h2 { font-size: 27px; } }
@container (max-width: 400px) { .hosc-grid { columns: 1; } }
@container (max-width: 820px) { .hosc-case .cs-embeds.vert { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 520px) { .hosc-case .cs-embeds.vert { grid-template-columns: 1fr; } }
@container (max-width: 640px) { .hosc-about .top { grid-template-columns: 1fr; } }
@container (max-width: 520px) { .hosc-disc { grid-template-columns: 1fr; } }
@container (max-width: 560px) { .hosc-row { grid-template-columns: 40px 1fr; } .hosc-row .go { display: none; } .hos-winbody { padding: 22px 18px 30px; } }
@container (max-width: 640px) { .hosc-about .portrait { max-width: 200px; } .hosc-head h2 { font-size: 25px; } }
@container (max-width: 420px) { .hosc-head { flex-direction: column; gap: 4px; } .hosc-head .k { align-self: flex-start; } }

/* Homepage only: the brown site nav stays hidden over the hero, then slides
   in once you scroll past it to the cream sections below. */
#nav.nav-home-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
#nav { transition: transform .4s var(--ks-ease, cubic-bezier(.2,.8,.2,1)), opacity .4s, padding .4s var(--ks-ease, ease), background .3s; }