/* ============ SECTIONS — hero, premise, holdings (disks), experiments, instruments ============ */

/* ---- skip link ---- */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--amber);color:var(--void);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7rem 1rem;border-radius:6px;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

/* ================= HERO — copy left, the cabinet of tools right ================= */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero h1{font-size:clamp(2.3rem,4.9vw,4.7rem);max-width:17ch}
.hero .sub{max-width:50ch}
.hero-vis{margin:0;justify-self:end;width:min(100%,470px);aspect-ratio:3/4;position:relative}
/* all four edges dissolve into the page, so the cabinet has no frame */
.hero-vis video,.hero-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 90%,transparent 100%);
  mask-composite:intersect}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-vis{justify-self:start;width:min(100%,380px);margin-top:1rem}
}

/* ================= THE PREMISE — belief left, the rack right, principles beneath ================= */
.premise-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.rack-wrap{border:1px solid var(--hairline);border-radius:10px;padding:clamp(.9rem,2vw,1.5rem);
  background:rgba(13,12,8,.6);position:relative}
.rack-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;border-radius:10px;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#EDE7D6 2px 3px)}
.rack{width:100%;height:auto;display:block;aspect-ratio:16/9}
.rack-cap{margin-top:.9rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--cream-faint);
  text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rack-cap span:last-child{color:var(--amber)}
.tenets{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--hairline)}
.tenets li{min-width:0}
.tenets .tn-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:.7rem}
.tenets p{color:var(--cream-dim);font-size:.98rem;max-width:36ch}
@media(max-width:900px){.premise-grid{grid-template-columns:1fr}.tenets{grid-template-columns:1fr}}

/* the premise's tenets: one at a time, sliding over every few seconds */
.tenet-slider{display:grid;overflow-x:clip;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--hairline);max-width:48ch}
.tenet .tn-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:.6rem}
.tenet p{color:var(--cream-dim);font-size:.98rem}
.tenet + .tenet{margin-top:1.2rem}
.tenet-slider.live .tenet{grid-area:1/1;margin:0;opacity:0;transform:translateX(26px);pointer-events:none}
.tenet-slider.ready .tenet{transition:opacity .38s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.tenet-slider.live .tenet.is-on{opacity:1;transform:none;pointer-events:auto}
.tenet-slider.live .tenet.is-out{opacity:0;transform:translateX(-26px)}

/* ================= DISKS — a 3.5-inch floppy, drawn to its real proportions ================= */
.disk{position:relative;display:block;aspect-ratio:90/94;width:100%;text-decoration:none;color:inherit;
  font:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s}
.disk:hover,.disk:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.disk-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.disk-shape path{fill:#1e1c14;stroke:rgba(237,231,214,.18);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke .4s}
.disk:hover .disk-shape path{stroke:rgba(224,122,40,.55)}
/* the sliding metal shutter and its window */
.disk-shutter{position:absolute;left:21%;top:0;width:52%;height:30%;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,var(--metal-1) 0%,var(--metal-2) 45%,var(--metal-3) 55%,var(--metal-4) 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4)}
.disk-shutter::after{content:"";position:absolute;left:13%;top:14%;width:25%;height:70%;border-radius:2px;background:#14120c}
/* insertion arrow, top left */
.disk-arrow{position:absolute;left:7%;top:6%;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid rgba(237,231,214,.22)}
/* write-protect tab, bottom right */
.disk-tab{position:absolute;right:4.5%;bottom:3.5%;width:5%;aspect-ratio:1;border-radius:1px;background:#0f0e09;
  box-shadow:inset 0 0 0 1px rgba(237,231,214,.12)}
/* the paper label */
.disk-label{position:absolute;left:8%;right:8%;top:36%;bottom:9%;border-radius:2px;
  background:
    repeating-linear-gradient(0deg,transparent 0 19px,rgba(120,90,40,.09) 19px 20px),
    linear-gradient(180deg,var(--paper),var(--paper-lo));
  color:var(--ink);padding:5.5% 6.5%;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}
.disk-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.disk-logo{height:22px;width:auto;filter:brightness(.3) sepia(.2)}
.disk-role{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep)}
.disk-desc{font-family:var(--mono);font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.8;color:var(--ink-soft)}
.disk-foot{margin-top:auto;display:flex;justify-content:space-between;gap:.6rem;align-items:center;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.disk-foot .go{color:var(--amber-deep)}
.disk-name{font-family:var(--serif);font-size:1rem;color:var(--ink);line-height:1.15}

/* stage chip (on paper) */
.stage{font-family:var(--mono);font-size:.44rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(26,24,19,.25);border-radius:3px;padding:2px 6px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.stage .lamp{width:.32rem;height:.32rem;box-shadow:none;color:rgba(26,24,19,.35)}
[data-stage="live"] .stage{color:#1F7A4D;border-color:rgba(31,122,77,.4)}
[data-stage="live"] .stage .lamp{color:#2E9C63;box-shadow:0 0 5px rgba(46,156,99,.7)}
[data-stage="beta"] .stage,[data-stage="build"] .stage{color:var(--amber-deep);border-color:rgba(184,95,24,.4)}
[data-stage="beta"] .stage .lamp{color:var(--amber);box-shadow:0 0 5px rgba(224,122,40,.7)}
[data-stage="build"] .stage .lamp{color:var(--amber);opacity:.6}

/* Align Works stencil mark (typographic, monochrome) */
.align-text{font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.22em;line-height:1.2;color:var(--ink)}
.align-text b{display:inline-block;width:1.15em;height:.62em;background:var(--ink);vertical-align:baseline;margin-left:.25em}
.align-text b.pre{margin-left:0;margin-right:.25em}

/* ================= EXPEDITIONS — two disks side by side, the experiments beneath ================= */
.hold-grid{display:grid;grid-template-columns:repeat(4,minmax(0,250px));gap:clamp(1.2rem,2.6vw,2.4rem);margin-top:3rem}
.hold-grid .disk:nth-child(1){transform:rotate(-1.2deg)}
.hold-grid .disk:nth-child(2){transform:rotate(1deg)}
.hold-grid .disk:nth-child(3){transform:rotate(-.5deg)}
.hold-grid .disk:nth-child(4){transform:rotate(1.3deg)}
.hold-grid .disk-label{padding:6% 7%;gap:.42rem}
.hold-grid .disk-desc{font-size:.5rem;line-height:1.7}
.hold-grid .disk-name{font-size:.98rem}
.hold-grid .exp{display:grid;gap:.22rem;margin-top:.15rem}
.hold-grid .exp-row{display:flex;justify-content:space-between;gap:.5rem;font-family:var(--mono);font-size:.48rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px dashed rgba(26,24,19,.1);padding-bottom:.18rem}
.hold-grid .exp-row span:last-child{color:var(--ink-soft)}
.hold-grid .disk:hover,.hold-grid .disk:focus-visible{transform:rotate(0) translateY(-6px)}
@media(max-width:700px){
  /* phones: the two companies side by side, smaller, the essentials only */
  .hold-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:2rem}
  .hold-grid .disk-label{padding:7% 8%;gap:.35rem}
  .hold-grid .disk-top{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hold-grid .disk-logo{height:15px}
  .hold-grid .align-text{font-size:.56rem;white-space:nowrap}
  .hold-grid .stage{font-size:.38rem;padding:1px 5px}
  .hold-grid .disk-role{font-size:.42rem;letter-spacing:.14em}
  .hold-grid .disk-desc,.hold-grid .disk-foot{display:none}
  .hold-grid .desk-only{display:none}
}

.disk.still{cursor:default}
.disk.still:hover{transform:none;filter:none}
.disk.still:hover .disk-shape path{stroke:rgba(237,231,214,.18)}

/* quieter headings where the copy carries the section */
#premise h2{font-size:clamp(1.6rem,2.75vw,2.3rem);line-height:1.2;max-width:none}
#premise .sub{margin-top:1.5rem}
@media(max-width:700px){.frame.hero{padding-bottom:1rem}#premise{padding-top:1.8rem}.tenet-slider{border-top:0;padding-top:.4rem}}
#holdings h2{font-size:clamp(2rem,4.6vw,3.9rem);max-width:none}
#holdings .sub{margin-top:1.5rem;max-width:none}

/* ================= THE INSTRUMENTS — two, side by side, kept small; each card opens its page ================= */
#instruments{min-height:0;padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
#instruments h2{font-size:clamp(1.5rem,2.6vw,2.2rem);max-width:none}
.inst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4.5vw,4.5rem);margin-top:2.2rem;align-items:start}
.inst{display:flex;flex-direction:column;min-width:0;position:relative;cursor:pointer}
.inst-fig{margin:0 0 1.4rem;height:var(--fig-h,200px);display:flex;align-items:flex-end}
#intel-station .inst-fig > *{zoom:.6}
#player-station .inst-fig > *{zoom:var(--rig-zoom,.86)}
.inst-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.inst h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:300;letter-spacing:-.01em}
.inst-link{color:inherit;text-decoration:none;transition:color .3s}
.inst-link::after{content:"";position:absolute;inset:0;z-index:1}
.inst:hover .inst-link{color:var(--amber)}
.inst-link:focus-visible{outline:none}
.inst:has(.inst-link:focus-visible){outline:2px solid var(--amber);outline-offset:10px;border-radius:6px}
.inst p{color:var(--cream-dim);max-width:46ch;font-size:.98rem}
.inst-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;position:relative;z-index:2}
.btn.sm{padding:.6rem 1rem;font-size:.6rem}
.inst-note{margin-top:1.8rem;color:var(--cream-dim);font-size:.95rem}
.inst-note a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--cream-faint)}
.inst-note a:hover{color:var(--amber);border-color:var(--amber)}
#player-station .rig{grid-template-columns:1.35fr 1fr}
@media(max-width:900px){
  .inst-grid{display:flex;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:1.4rem;margin-right:-1.4rem;padding:0 1.4rem .6rem 0;
    scrollbar-width:none}
  .inst-grid::-webkit-scrollbar{display:none}
  .inst{flex:0 0 min(86%,420px);scroll-snap-align:start}
  .inst-fig{height:auto}
  #player-station .inst-fig > *{zoom:.6}
}
/* phones: both instruments at the Player's height, cards narrow enough that the next one peeks in */
@media(max-width:700px){
  .inst-grid{gap:1.1rem}
  .inst{flex:0 0 76%}
  .inst-fig{height:128px;margin-bottom:1.1rem}
  #intel-station .inst-fig > *{zoom:.38}
  #player-station .inst-fig > *{zoom:.54}
  .inst-head{gap:.6rem}
  .inst p{font-size:.94rem}
}