/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — COMPUTE GALLEON (/compute-galleon)
   Built on interior.css and markets.css (split hero, fact strip, psplit,
   contained rows, closing band), with tech.css loaded first for the pillar
   cards and the hardware list it shares with /technology/ (interior and
   markets load after it, so they win wherever the two overlap). This file
   adds only the pieces the page needs that none of them have.
   ═══════════════════════════════════════════════════════════════════════ */

/* The hero's secondary button. Same spacing as tech.css, which this page
   does not load. */
.xhero-cta{margin-top:clamp(24px,3.4vh,32px)}

/* The fleet mesh is a drawing, not a photograph: contain it on the
   schematic ground rather than cropping it like one. */
.srow-pic img.cg-diagram{object-fit:contain;background:var(--schematic)}

/* Frontier: text stacked on the left, a picture filling the right column,
   so the split isn't two columns of text in a row. */
#frontier .psplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"head pic" "body pic";row-gap:clamp(24px,3.4vh,36px);align-items:stretch}
#frontier .sechead{grid-area:head}
#frontier .psplit-body{grid-area:body}
#frontier .psplit-body .spec{margin-top:0}
.cg-pic{grid-area:pic;margin:0;position:relative;border-radius:var(--r-sm);
  overflow:hidden;min-height:420px;background:var(--hull)}
.cg-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.cg-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  font-family:var(--instrument);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog);background:linear-gradient(transparent,rgba(var(--abyss-rgb),.75))}
@media(max-width:980px){
  #frontier .psplit{grid-template-columns:1fr;grid-template-areas:"head" "pic" "body"}
  #frontier .sechead{margin-bottom:0}
  .cg-pic{min-height:0;aspect-ratio:4 / 3}
}

/* Chips sitting inline beside a label or at the end of a lede. */
.sowhat .t .chip,.sechead .lede .chip{margin-left:10px;vertical-align:middle}

/* ── ROADMAP — a track with a node per stage; the first is "now". ───── */
.cg-stages{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);
  position:relative;z-index:1}
.cg-stages::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;
  background:linear-gradient(90deg,var(--current) 0 18%,var(--line) 18% 100%)}
.cg-stages li{position:relative;padding:34px clamp(18px,1.8vw,26px) clamp(20px,2.4vh,28px);
  margin-top:22px;background:rgba(var(--abyss-rgb),.6);border:1px solid var(--line);
  border-radius:var(--r-sm);display:flex;flex-direction:column}
.cg-stages li.now{border-color:var(--current);box-shadow:inset 0 2px 0 var(--current)}
.cg-dot{position:absolute;top:-27px;left:clamp(18px,1.8vw,26px);width:16px;height:16px;
  border-radius:50%;background:var(--abyss);border:2px solid var(--line-strong)}
.cg-stages li.now .cg-dot{background:var(--current);border-color:var(--current);
  box-shadow:0 0 0 6px rgba(62,140,255,.2)}
.cg-when{font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--current-lift);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cg-today{font-size:.6rem;letter-spacing:.16em;color:var(--abyss);background:var(--current-lift);
  padding:3px 7px;border-radius:2px}
.cg-stages h3{margin:14px 0 0;font-size:clamp(1.1rem,1.6vw,1.36rem);font-weight:500}
.cg-stages p{margin:10px 0 0;color:var(--mist);font-size:.92rem;line-height:1.6;max-width:none}
.cg-scale{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
@media(max-width:780px){
  .cg-stages{grid-template-columns:1fr;padding-left:26px}
  .cg-stages::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,var(--current) 0 22%,var(--line) 22% 100%)}
  .cg-stages li{margin-top:0}
  .cg-dot{top:22px;left:-27px}
}

/* ── THE LOOP (#problem) — four bottlenecks round a ring ──────────────── */
.cg-loop{list-style:none;margin:0 0 clamp(18px,2.4vh,26px);padding:0;position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  grid-template-areas:"a b" "d c"}
.cg-loop li{position:relative;background:var(--schematic);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:clamp(14px,1.8vh,20px) clamp(16px,1.6vw,22px);
  display:flex;flex-direction:column}
.cg-loop li:nth-child(1){grid-area:a}
.cg-loop li:nth-child(2){grid-area:b}
.cg-loop li:nth-child(3){grid-area:c}
.cg-loop li:nth-child(4){grid-area:d}
.cg-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--current-lift)}
.cg-loop b{margin-top:6px;font-weight:500;color:var(--white);font-size:.95rem}
.cg-fig{margin-top:10px;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.02em;
  line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.cg-fig small{font-size:.5em;margin-left:3px;color:var(--current-lift);font-weight:500}
.cg-l{margin-top:8px;color:var(--mist);font-size:.84rem;line-height:1.5}
.cg-loop .cg-ring{position:absolute;left:50%;top:50%;width:46px;height:46px;padding:8px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--abyss);
  border:1px solid var(--line-strong);z-index:2;display:block}
.cg-ring svg{width:100%;height:100%;fill:none;stroke:var(--current-lift);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .cg-ring svg{animation:cg-spin 14s linear infinite}
}
@keyframes cg-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){
  .cg-loop{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .cg-loop .cg-ring{display:none}
}

/* ── THE LINE (#line) — cost against scarcity, cost against volume ──── */
#line .sechead .spec{margin-top:clamp(20px,3vh,30px)}
.cg-curve{background:var(--schematic);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:inset 2px 0 0 var(--current);padding:clamp(18px,2.4vh,26px) clamp(18px,2vw,28px)}
.cg-curve-k{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--current-lift)}
.cg-vs{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cg-side{background:var(--abyss);padding:clamp(16px,2vh,22px) clamp(16px,1.6vw,22px);
  display:flex;flex-direction:column}
.cg-side-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}
.cg-side p{margin:10px 0 0;color:var(--mist);font-size:.86rem;line-height:1.55;max-width:none}
.cg-arw{margin:0 .25em;font-size:.6em;color:var(--current-lift);vertical-align:middle}
.cg-spark{width:100%;height:40px;margin:14px 0;fill:none;stroke-width:2.5;stroke-linecap:round}
.cg-side.up .cg-spark{stroke:var(--warn)}
.cg-side.down .cg-spark{stroke:var(--charge)}
.cg-side .chip{align-self:start;margin-top:auto}
@media(max-width:560px){ .cg-vs{grid-template-columns:1fr} }

/* ── WORK WITH US (#partner) — four steps on one row ───────────────────── */
.cg-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.cg-steps li{position:relative;background:var(--schematic);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:clamp(18px,2.2vh,24px) clamp(16px,1.6vw,22px);
  display:flex;flex-direction:column}
.cg-steps li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;
  width:6px;height:6px;border-top:2px solid var(--current-lift);border-right:2px solid var(--current-lift);
  transform:translateY(-50%) rotate(45deg);z-index:1}
.cg-steps h3{margin:10px 0 0;font-size:clamp(1.05rem,1.4vw,1.22rem);font-weight:500}
.cg-steps p{margin:8px 0 0;color:var(--mist);font-size:.88rem;line-height:1.55;max-width:none}
.cg-tag{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--current-lift)}
.cg-flex{margin-top:clamp(18px,2.4vh,26px);max-width:none}
.cg-flex p{max-width:none}
@media(max-width:980px){ .cg-steps{grid-template-columns:1fr 1fr} .cg-steps li:nth-child(2)::after{display:none} }
@media(max-width:560px){ .cg-steps{grid-template-columns:1fr} .cg-steps li::after{display:none} }

/* ── PILLARS + HARDWARE — tech.css's components, compute tag ───────────── */
.hwlist .hw-tag.cx{color:var(--charge)}

/* ── SOURCES ──────────────────────────────────────────────────────────── */
.cg-sources{padding-block:clamp(36px,6vh,64px)}
.cg-sources ul{list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(24px,3vw,44px)}
.cg-sources li{color:var(--mist);font-size:.8rem;line-height:1.55}
@media(max-width:780px){
  .cg-sources ul{grid-template-columns:1fr}
}

/* "The way out" spans the page under the heading and the loop (James,
   6 Oct 2026) rather than sitting under the loop in the right column. */
#problem .psplit{row-gap:clamp(20px,3vh,32px)}
.cg-wayout{grid-column:1 / -1;margin-top:0;max-width:none}
.cg-wayout p{max-width:none}
#problem .cg-loop{margin-bottom:0}

/* #problem now follows Hydrogen's #advantage (James, 6 Oct 2026): heading
   across the page, the four bottlenecks in the same figure panel, the way
   out underneath. */
#problem .sechead{max-width:none}
#problem .sechead h2,#problem .sechead .lede{max-width:none}
#problem .sechead .lede{max-width:92ch}
#problem .cg-wayout{margin-top:clamp(22px,3vh,34px)}
/* Problem → Frontier: ~150px between The way out and the Frontier eyebrow
   (James, 6 Oct 2026). */
#problem{padding-bottom:clamp(20px,3vh,32px)}
#problem + #frontier{padding-top:clamp(28px,4vh,44px)}

/* The vessel walkthrough fills the picture slot the way the photo did. */
.srow-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The solution → The vessel: the section's bottom padding plus the row's
   top margin left ~120px (James, 6 Oct 2026). */
#frontier{padding-bottom:clamp(20px,3vh,36px)}


/* The solution (#frontier): heading and lede across the page; the list,
   The gap and the picture share the row beneath (James, 6 Oct 2026). */
#frontier .sechead{max-width:none}
#frontier .sechead h2{max-width:none}
#frontier .sechead .lede{max-width:none}
@media(min-width:981px){
  #frontier .psplit{grid-template-areas:"head head" "body pic"}
  #frontier .cg-pic{min-height:320px}
}
/* One line from tablet width up (James, 6 Oct 2026); the type steps down
   with the viewport below ~950px so the line still fits. Phones wrap. */
@media(min-width:700px){
  #frontier .sechead h2{white-space:nowrap;font-size:min(clamp(2rem,4.6vw,3.6rem),4.4vw)}
}

/* 03 · The production line, restacked so it doesn't read like the rows
   around it (James, 6 Oct 2026): heading and lede across the page, the
   three points as three columns, the two cost curves full width beneath. */
.cg-line .sechead{max-width:none;margin-bottom:0}
.cg-line .sechead h2,.cg-line .sechead .lede{max-width:none}
.cg-line .sechead .lede{max-width:92ch}
#line .cg-line .sechead .spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px clamp(20px,3vw,40px);margin-top:clamp(20px,3vh,30px)}
.cg-line .psplit-body{margin-top:clamp(22px,3vh,34px)}
.cg-line .cg-vs{grid-template-columns:1fr 1fr}
.cg-line .cg-spark{height:84px;width:min(100%,320px)}
@media(max-width:760px){ #line .cg-line .sechead .spec{grid-template-columns:1fr} }
@media(max-width:560px){ .cg-line .cg-vs{grid-template-columns:1fr} }

/* The solution: the copy column was shorter than the picture beside it
   (James, 6 Oct 2026: "improve the copy to fill the space"). The three
   premises become a ruled list at a larger size that takes up the free
   height, and The gap sits on the column's foot, level with the picture. */
@media(min-width:981px){
  #frontier .psplit{align-items:stretch}
  #frontier .psplit-body{display:flex;flex-direction:column}
  #frontier .psplit-body .spec{flex:1;display:flex;flex-direction:column;gap:0;margin:0}
  #frontier .psplit-body .spec li{flex:1;display:flex;align-items:center;padding:12px 0 12px 22px;
    font-size:1.02rem;line-height:1.45;border-top:1px solid var(--line)}
  #frontier .psplit-body .spec li:last-child{border-bottom:1px solid var(--line)}
  #frontier .psplit-body .spec li::before{top:50%}
  #frontier .psplit-body .sowhat{margin-top:clamp(16px,2.4vh,24px)}
}
/* The fleet → 03 · The production line: ~125px (James, 6 Oct 2026). */
#fleet + #line{padding-top:clamp(24px,3.4vh,40px)}
/* The production line → The pillars: ~150px (James, 6 Oct 2026). */
#line{padding-bottom:clamp(20px,3vh,32px)}
#line + #pillars{padding-top:clamp(28px,4vh,44px)}

/* The vessel as a film module, like the other videos on the site (James,
   7 Oct 2026): centred head, the walkthrough in the shared player with
   four chapters, then the spec list and Design targets side by side. */
#vessel.sec{padding-block:clamp(36px,5vh,60px)}
.cg-vfilm .eyebrow.center{text-align:center;margin-bottom:12px}
.cg-vspecs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);
  align-items:start;margin:clamp(26px,3.6vh,40px) auto 0;width:min(100%,calc(min(60vh,100vh - 380px) * 16 / 9))}
.cg-vspecs .spec{margin-top:0}
.cg-vspecs .sowhat{margin-top:0;max-width:none}
@media(max-width:760px){ .cg-vspecs{grid-template-columns:1fr} }

/* Hardware foot (James, 7 Oct 2026): the particulars note runs across the
   page instead of three narrow lines, and the section hands over to what
   follows with less space. */
#hardware .note{max-width:none}
#hardware.hardsec{padding-bottom:clamp(28px,3.6vh,40px)}
#hardware + .sec{padding-top:clamp(28px,4vh,44px)}
/* Order changed (James, 7 Oct 2026): vessel → pillars → fleet → line →
   hardware. Seams for the new neighbours. */
#vessel + #pillars{padding-top:clamp(20px,3vh,32px)}
#pillars:has(+ #fleet){padding-bottom:clamp(20px,3vh,32px)}
#line + #hardware{padding-top:clamp(28px,4vh,44px)}
/* The vessel (James, 7 Oct 2026): label, heading and lede left-aligned and
   full width; the film, its chapters, caption and the spec row stay centred
   beneath. */
.cg-vfilm .eyebrow,.cg-vfilm h3,.cg-vfilm .lede{text-align:left}
.cg-vfilm .lede{max-width:none;margin-inline:0}
/* Hero render eases in with the copy: a fade and a slight settle, no slide */
.js-reveal .xhero-pic img[data-reveal]{transition:opacity 1.4s var(--ease-out),transform 1.8s var(--ease-out)}
.js-reveal .xhero-pic img[data-reveal]:not(.is-in){transform:scale(1.04)}
/* Figures strip: each figure centred in its tile */
.xtop .factbar>div{align-items:center;text-align:center}
.xtop .factbar .l{margin-inline:auto}
@media(min-width:901px) and (max-height:800px){
  .xtop .xhero-copy .lede{margin-top:18px}
  .xtop .xhero-cta{margin-top:clamp(14px,2.4vh,24px)}
  .xtop .factbar>div{padding-block:14px}
}
/* Hero heading: "Fuelled and cooled" holds one line at every desktop width */
@media(min-width:901px){
  .xtop .xhero-copy .d1{font-size:min(5.5vw,68px)}
}

/* ── SCALE (#scale) — the three ships, growing, over the roadmap ──────── */
.cg-ships{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);
  align-items:end;margin:clamp(20px,3vh,36px) 0 clamp(10px,1.6vh,18px)}
.cg-ship{margin:0;padding-inline:clamp(18px,1.8vw,26px);display:flex;align-items:flex-end}
.cg-ship img{display:block;width:auto;max-width:100%}
.cg-ship.s1 img{height:clamp(80px,8vw,120px)}
.cg-ship.s2 img{height:clamp(120px,12vw,180px)}
.cg-ship.s3{padding-inline:0;justify-content:flex-end}
.cg-ship.s3 img{width:118%;height:auto;max-width:none;margin-left:-18%}
/* Phones: each ship sits at the top of its own card, stacked down the timeline */
.cg-ship-m{display:none}
@media(max-width:780px){
  .cg-ships{display:none}
  .cg-ship-m{display:flex;align-items:flex-end;justify-content:center;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .cg-ship-m img{display:block;width:auto;max-width:100%}
  .cg-ship-m.s1 img{height:70px}
  .cg-ship-m.s2 img{height:104px}
  .cg-ship-m.s3 img{width:100%;height:auto}
}
/* NVIDIA Inception badge on the hero render */
.xtop .xhero-pic img.xhero-badge{position:absolute;z-index:2;inset:auto auto clamp(16px,2.4vh,28px) clamp(16px,2vw,28px);
  width:clamp(130px,11vw,180px);height:auto;background:#fff;border-radius:var(--r-sm);
  box-shadow:0 10px 28px -12px rgba(0,0,0,.55)}
.js-reveal .xtop .xhero-pic img.xhero-badge[data-reveal]{transform:none}
@media(max-width:900px){ .xtop .xhero-pic img.xhero-badge{width:96px;inset:auto auto 12px 12px} }
/* Closing Reserve capacity button, centred under the scale section */
#scale p.cg-endcta{margin:clamp(32px,5vh,56px) 0 0;max-width:none;display:flex;justify-content:center}

/* #scale cards, from the investor briefing's deployment slide */
.cg-stages--slide li{padding-top:26px}
.cg-name{align-self:flex-start;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--white)}
.cg-stages--slide li:nth-child(2) .cg-name{background:var(--current)}
.cg-stages--slide li:nth-child(3) .cg-name{background:#6b4fd8}
.cg-stages--slide .cg-when{margin-top:16px}
.cg-fig{margin-top:10px;font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:500;letter-spacing:-.01em}
.cg-fig sup{font-size:.55em;margin-left:2px;color:var(--fog)}
.cg-tick{margin-top:12px;display:flex;align-items:center;gap:9px;color:var(--mist);font-size:.92rem}
.cg-tick::before{content:"\2713";flex:none;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;
  background:var(--charge);color:var(--abyss);font-size:.7rem;font-weight:700;line-height:1}
.cg-stages--slide .cg-scale{color:var(--white);opacity:.85}
.cg-notes{margin-top:18px;color:var(--fog);font-size:.74rem;line-height:1.55}
.cg-notes p{margin:0;max-width:none}
.cg-notes p+p{margin-top:4px}
@media(max-width:900px){ .xtop .xhero-pic img.xhero-badge{inset:84px 16px auto auto} }