/* Controlled home panels and concept desk; visual overrides share the comic print palette. */
.is-home .content-page { width: 100%; max-width: none; padding: 0; }
html:has(body.is-home) { scroll-behavior: auto; }
html.home-controlled { overflow-y: hidden; overscroll-behavior-y: none; }
.home-controlled .home-experience { touch-action: pan-x pinch-zoom; }
.is-home .site-footer { height: var(--home-height, 100svh); overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.home-gateway { min-height: calc(100svh - var(--home-chrome, 72px)); scroll-margin-top: var(--home-chrome, 72px); }
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, .72fr);
  grid-template-areas: "operator journal" "kit kit";
  height: calc(var(--home-height, 100svh) - var(--home-chrome, 72px));
}
.portal { position: relative; min-width: 0; overflow: hidden; padding: clamp(28px, 2.7vw, 46px); background-size: cover; background-repeat: no-repeat; }
.portal-cover { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(28px, 2.7vw, 46px); color: inherit; text-decoration: none; transition: background-color .2s ease; }
.portal-cover:hover, .portal-cover:focus-visible { background-color: rgba(114, 180, 220, .1); outline: 2px solid currentColor; outline-offset: -8px; }
.portal-kicker { margin: 0; font: 11px/1.45 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.portal h1, .portal h2, .desk-section h2 { margin: 0 0 12px; font-size: clamp(48px, 5.2vw, 82px); line-height: .96; letter-spacing: -.06em; }
.portal-period { color: #8fd4f8; }
.portal p:not(.portal-kicker) { max-width: 42ch; margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }
.portal-link, .home-down, .desk-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
.portal-link span { font-size: 20px; font-weight: 400; }
.portal--operator {
  grid-area: operator;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
  background-image: linear-gradient(90deg, rgba(10,20,31,.85), rgba(10,20,31,.46) 75%, rgba(10,20,31,.12)), url("/assets/desk/operator-bg-v3.png");
  background-position: center;
}
.portal--operator .portal-copy, .portal--journal .portal-copy { position: relative; z-index: 1; }
.portal--operator .portal-copy { max-width: 560px; }
.portal--journal {
  grid-area: journal;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  background-image: linear-gradient(90deg, rgba(248,252,255,.91), rgba(248,252,255,.66) 68%, rgba(248,252,255,.2)), url("/assets/desk/journal-bg-v3.png");
  background-position: center;
}
.portal--journal .portal-period { color: var(--primary); }
.portal--journal .portal-copy { max-width: 550px; }
.portal--operator .portal-link, .portal--journal .portal-link { margin-top: 20px; }
.portal--kit {
  grid-area: kit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  color: var(--paper);
  background-image: linear-gradient(90deg, rgba(12,24,35,.76), rgba(12,24,35,.05) 65%), url("/assets/desk/kit-flatlay-v1.webp");
  background-position: center 54%;
}
.kit-intro { position: relative; z-index: 1; }
.kit-intro p:not(.portal-kicker) { margin-bottom: 8px; }
.kit-objects { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: min(100%, 1080px); }
.kit-object {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 82px;
  padding: 10px 24px 10px 0;
  border-top: 1px solid rgba(248,252,255,.56);
  color: var(--paper);
  text-decoration: none;
}
.kit-object + .kit-object { padding-left: 16px; }
.kit-object:hover, .kit-object:focus-visible { background: rgba(248,252,255,.09); outline-color: var(--paper); }
.kit-object__number, .kit-object__rating { font: 10px/1.4 var(--mono); opacity: .82; }
.kit-object__name { margin: 3px 0; font-size: clamp(18px, 1.9vw, 25px); font-weight: 600; line-height: 1.1; }
.kit-object__arrow { position: absolute; top: 12px; right: 22px; }
.home-down { position: absolute; z-index: 2; right: clamp(28px, 2.7vw, 46px); top: clamp(28px, 2.7vw, 46px); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; font-size: 25px; text-decoration: none; }
.home-down:hover, .home-down:focus-visible { background: rgba(248,252,255,.2); }
.desk-section {
  position: relative;
  width: 100%;
  height: var(--home-height, 100svh);
  overflow: hidden;
  color: var(--paper);
  background: #13202b;
  isolation: isolate;
}
.desk-section__heading { position: absolute; z-index: 4; top: clamp(30px, 4vw, 68px); left: clamp(30px, 4vw, 68px); max-width: 550px; text-shadow: 0 2px 20px rgba(0,0,0,.48); }
.desk-section__heading h2 { margin: 0 0 12px; }
.desk-section__heading p:not(.portal-kicker) { margin: 0; font-size: 16px; }
.desk-back { margin-top: 8px; }
.desk-up { position: absolute; z-index: 5; top: clamp(30px, 4vw, 68px); right: clamp(30px, 4vw, 68px); width: 48px; height: 48px; display: grid; place-items: center; color: var(--paper); border: 1px solid currentColor; border-radius: 50%; font-size: 25px; text-decoration: none; }
.desk-up:hover, .desk-up:focus-visible { background: #f8fcff25; }
.desk-mobile-links { display: none; }
.desk-stage { position: absolute; inset: 0; overflow: hidden; }
.desk-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.68svh);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  isolation: isolate;
}
.desk-stage__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 17% at var(--spot-x,50%) var(--spot-y,50%), transparent 5%, rgba(8,20,32,.05) 47%, rgba(8,20,32,.5) 100%);
  transition: opacity .22s ease-out;
}
.desk-art:has(.desk-hotspot:is(:hover,:focus-visible,.is-selected))::after { opacity: 1; }
.desk-art:has(.desk-hotspot--anker-nano-station:is(:hover,:focus-visible,.is-selected)) { --spot-x: 35%; --spot-y: 31%; }
.desk-art:has(.desk-hotspot--logitech-lift-graphite:is(:hover,:focus-visible,.is-selected)) { --spot-x: 66%; --spot-y: 66%; }
.desk-art:has(.desk-hotspot--oxo-sweep-swipe:is(:hover,:focus-visible,.is-selected)) { --spot-x: 33%; --spot-y: 66%; }
.desk-art:has(.desk-hotspot--ifixit-precision-cleaning-kit:is(:hover,:focus-visible,.is-selected)) { --spot-x: 64%; --spot-y: 29%; }
.desk-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  min-width: 44px;
  min-height: 44px;
  border-radius: 45%;
  color: var(--paper);
  text-decoration: none;
}
.desk-hotspot:is(:hover,:focus-visible,.is-selected) {
  outline: 1px solid rgba(210,240,255,.75);
  background: radial-gradient(ellipse, rgba(179,226,255,.08), transparent 72%);
  box-shadow: 0 0 44px 14px rgba(79,179,255,.38), inset 0 0 38px rgba(196,238,255,.23);
}
.desk-hotspot__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: max-content;
  padding: 6px 12px;
  background: rgba(15,27,39,.94);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
}
.desk-hotspot:is(:hover,:focus-visible,.is-selected) .desk-hotspot__label { opacity: 1; }
.desk-selection {
  position: absolute;
  z-index: 5;
  left: clamp(30px, 4vw, 68px);
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: min(620px, calc(100% - 60px));
  padding: 14px 16px 14px 24px;
  background: rgba(14,27,39,.93);
  color: var(--paper);
  backdrop-filter: blur(8px);
}
.desk-selection[hidden] { display: none; }
.desk-selection span { font-weight: 600; }
.desk-selection a { white-space: nowrap; }
.desk-caption { position: absolute; z-index: 3; left: clamp(30px, 4vw, 68px); bottom: 100px; margin: 0; font-size: 11px; color: var(--paper); text-shadow: 0 1px 8px #07121e; }
.desk-list {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 88px;
  padding: 12px clamp(30px, 4vw, 68px);
  background: rgba(12,24,35,.78);
  backdrop-filter: blur(8px);
}
.desk-list > span { flex: 0 0 auto; font: 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.desk-list ul { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; list-style: none; padding: 0; margin: 0; }
.desk-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-size: 12px; line-height: 1.2; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 761px) and (max-height: 800px) {
  .home-grid { grid-template-rows: minmax(0, 1fr) minmax(0, .85fr); }
  .portal h1, .portal h2 { font-size: clamp(48px, 4.6vw, 66px); }
  .portal p:not(.portal-kicker) { font-size: 15px; }
}
@media (max-width: 1000px) {
  .home-down { position: absolute; }
  .desk-list { display: block; }
  .desk-list ul { flex-wrap: wrap; justify-content: flex-start; }
  .desk-list li { max-width: 46%; }
}
@media (max-width: 760px) {
  .home-grid { display: block; height: auto; }
  .portal { height: var(--home-height, 100svh); padding: 28px 22px; }
  .portal h1, .portal h2 { font-size: clamp(50px, 13vw, 64px); }
  .portal--operator { height: calc(var(--home-height, 100svh) - var(--home-chrome, 72px)); }
  .portal--kit { gap: 22px; }
  .kit-objects { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .kit-object { min-height: 76px; padding-right: 10px; }
  .kit-object + .kit-object { padding-left: 0; }
  .kit-object__name { font-size: 20px; }
  .home-down { align-self: flex-start; }
  .desk-section { padding: 32px 0; display: flex; flex-direction: column; }
  .desk-mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 20px 22px 0; }
  .desk-mobile-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--paper); min-height: 52px; font-size: 12px; border-bottom: 1px solid #f8fcff40; text-decoration: none; }
  .desk-section__heading { padding-right: 48px; }
  .desk-section__heading { position: relative; top: auto; left: auto; margin: 0 22px 28px; }
  .desk-section__heading h2 { font-size: 56px; }
  .desk-section__heading p:not(.portal-kicker) { font-size: 14px; }
  .desk-stage { position: relative; inset: auto; width: 100%; flex: 1; min-height: 0; display: grid; place-items: center; overflow: visible; }
  .desk-art { position: relative; top: 0; left: 0; width: 100%; height: auto; transform: none; }
  .desk-hotspot__label { display: none; }
  .desk-selection { position: fixed; bottom: 12px; left: 12px; right: 12px; max-width: none; justify-content: space-between; gap: 12px; padding: 12px; }
  .desk-selection span { font-size: 13px; line-height: 1.2; }
  .desk-selection a { font-size: 12px; }
  .desk-caption { position: relative; left: auto; bottom: auto; margin: 12px 22px 0; }
  .desk-list { position: relative; inset: auto; margin-top: 20px; padding: 18px 22px; background: transparent; backdrop-filter: none; }
  .desk-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; }
  .desk-list li { max-width: none; }
  .desk-list a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .desk-art::after { transition: none; }
  html { scroll-behavior: auto !important; }
}

/* The Operator's comic edition. Geometry remains tied to viewport stops. */
.home-grid { grid-template-columns:.95fr 1.05fr; grid-template-rows:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"operator journal" "operator kit"; gap:16px; padding:18px 24px 24px; }
.portal { border:3px solid var(--ink); padding:0; box-shadow:4px 5px 0 #202a2d; }
.portal-cover { align-items:flex-start; padding:28px 32px; overflow:hidden; }
.portal-copy { position:relative; z-index:3; }
.portal .portal-kicker { font:9px/1.5 var(--mono); letter-spacing:.06em; margin-bottom:18px; }
.portal h1,.portal h2 { font-size:clamp(46px,4.7vw,72px); line-height:.96; margin:0 0 14px; }
.portal-period { color:#e7bb72; }
.portal--operator { background-color:#2b3b42; background-image:radial-gradient(#b3c2be35 1px,transparent 1px); background-size:7px 7px; }
.portal--operator::before { content:''; position:absolute; width:95%; aspect-ratio:1; bottom:-5%; left:2%; border:3px solid #111b22; border-radius:50%; background:#d8ac68; }
.home-operator { position:absolute; z-index:1; height:78%; width:100%; object-fit:contain; object-position:center bottom; bottom:0; left:0; pointer-events:none; }
.portal--operator .portal-copy { max-width:none; }
.portal .portal-hand { font:17px/1.4 'Segoe Print','Bradley Hand',cursive; max-width:none; color:#f7dfb6; }
.portal-caption { position:absolute; z-index:3; bottom:22px; left:24px; padding:8px 12px; background:#fff8e9; color:var(--ink); border:2px solid var(--ink); font:10px var(--mono); box-shadow:3px 3px 0 #202a2d; }
.portal--journal { background-color:#e9be80; background-image:radial-gradient(#202a2d1a 1px,transparent 1px); background-size:7px 7px; color:var(--ink); }
.portal--journal .portal-period { color:#8b512a; }
.portal--journal .portal-copy { max-width:none; }
.portal--journal .portal-copy > p:last-child { font:12px var(--mono); }
.home-journal-map { position:absolute; right:20px; bottom:24px; width:49%; color:#263a3d; transform:rotate(3deg); }
.home-map-note { display:block; padding:12px 18px; border:2px solid var(--ink); background:#f8edcf; font:21px/1.15 'Segoe Print','Bradley Hand',cursive; box-shadow:4px 4px 0 #202a2d; transform:rotate(-7deg); width:fit-content; margin:0 auto 6px; }
.home-journal-map svg { width:100%; height:auto; }
.home-map-annotation { display:block; text-align:right; font:14px/1.4 'Segoe Print','Bradley Hand',cursive; }
.portal--kit { background:#2b3b42; background-image:none; color:#fff8e9; }
.home-kit-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portal--kit .portal-copy { background:#fff8e9; border:2px solid var(--ink); padding:14px 18px; color:var(--ink); box-shadow:3px 4px 0 #202a2d; }
.portal--kit .portal-kicker { margin-bottom:10px; }
.portal--kit h2 { margin:0; font-size:clamp(40px,4vw,62px); }
.portal--kit .portal-period { color:#975e30; }
.home-down,.desk-up { border:2px solid var(--ink); border-radius:0; background:#fff8e9; color:var(--ink); box-shadow:3px 3px 0 #202a2d; width:44px; height:44px; }
.home-down { top:auto; bottom:22px; right:24px; }
.portal-cover:hover,.portal-cover:focus-visible { background-color:#e8b76b12; outline:3px solid #e7bb72; outline-offset:-8px; }
.desk-section { background:#293a40; }
.desk-section__heading { padding:18px 24px; background:#fff8e9; border:3px solid var(--ink); box-shadow:5px 5px 0 #202a2d; color:var(--ink); text-shadow:none; top:28px; left:32px; max-width:440px; transform:rotate(-1deg); }
.desk-section__heading h2 { font-size:52px; margin:6px 0 10px; }
.desk-section__heading .portal-period { color:#975e30; }
.desk-section__heading .portal-kicker { font-size:9px; }
.desk-section__heading p:not(.portal-kicker) { font-size:12px; }
.desk-up { top:32px; right:32px; }
.desk-caption { bottom:24px; left:32px; background:#fff8e9; color:var(--ink); padding:5px 10px; border:1px solid var(--ink); text-shadow:none; font:10px var(--mono); }
.desk-hotspot { border-radius:8%; }
.desk-hotspot:is(:hover,:focus-visible,.is-selected) { outline:2px dashed #f7dc9d; background:#e7bb721a; box-shadow:none; }
.desk-hotspot__label { border:2px solid var(--ink); background:#fff8e9; color:var(--ink); font:11px var(--mono); padding:10px 14px; box-shadow:3px 4px 0 #202a2d; }
.desk-selection { border:2px solid var(--ink); background:#fff8e9; color:var(--ink); backdrop-filter:none; box-shadow:4px 5px 0 #202a2d; }
@media(min-width:761px) and (max-height:800px) { .portal-cover { padding:22px 26px; } .portal h1,.portal h2 { font-size:52px; } .portal--kit h2 { font-size:44px; } .portal .portal-kicker { margin-bottom:12px; } .portal .portal-hand { font-size:14px; } .home-journal-map { width:43%; bottom:16px; } .home-map-note { font-size:17px; padding:8px 12px; } .home-map-annotation { display:none; } .portal-caption { bottom:16px; left:20px; font-size:9px; } .home-down { bottom:16px; right:20px; } }
@media(max-width:760px) { .home-grid { display:block; padding:0; } .portal { padding:0; box-shadow:none; border-width:0 0 3px; } .portal-cover { padding:32px 26px; } .portal h1,.portal h2 { font-size:64px; } .portal--operator::before { width:125%; left:-12%; bottom:0; } .home-operator { height:78%; } .home-journal-map { width:76%; right:10%; bottom:18%; } .home-map-note { font-size:28px; } .portal-caption { bottom:32px; left:26px; } .portal--kit .portal-copy { padding:18px 22px; } .portal--kit h2 { font-size:56px; } .home-kit-art { object-position:48%; } .home-down { right:26px; bottom:32px; } .desk-section { padding:28px 0 22px; } .desk-section__heading { position:relative; top:auto; left:auto; margin:0 22px 22px; padding:16px 18px; } .desk-section__heading h2 { font-size:44px; } .desk-up { top:34px; right:30px; width:36px; height:36px; } .desk-mobile-links a { color:#fff0d1; border-color:#a99b73; font:11px/1.4 var(--mono); } .desk-caption { position:relative; left:auto; bottom:auto; width:fit-content; margin:18px 22px 0; } }