/* KAWEN — Session M2, the Objects index.
   Loaded only by objects.html; css/main.css is left byte-identical so the
   Session 1.1 pixel baseline for index.html still holds. */

.page-objects{
  --coral:#FF684F;
  --gutter:clamp(20px,5vw,72px);
  --hair:rgba(9,10,12,.16);
  background:var(--paper);
  color:var(--ink);
}
.page-objects .skip{background:var(--ink);color:var(--paper)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- nav (ink on paper, in flow rather than over the hero) ---------- */
.nav-static{position:static;padding:calc(22px + env(safe-area-inset-top)) var(--gutter) 0}
.page-objects .nav-links a{opacity:.6}
.page-objects .nav-links a:hover{opacity:1}
.page-objects .nav-links a[aria-current="page"]{opacity:1;
  border-bottom:2px solid var(--acid);padding-bottom:3px}
@media (max-width:740px){.page-objects .nav-links a{display:inline}}

/* ---------- masthead ---------- */
.masthead{padding:clamp(56px,9vh,104px) var(--gutter) clamp(28px,5vh,52px)}
.masthead h1{font-weight:700;font-size:clamp(42px,6.2vw,96px);line-height:.95;
  letter-spacing:-.022em}
.ar-display{margin-top:20px;font-family:var(--sans-ar);font-weight:500;
  font-size:clamp(20px,2vw,30px);color:rgba(9,10,12,.72)}
.lede{margin-top:30px;max-width:60ch;font-size:clamp(16px,1.25vw,18px);
  line-height:1.55;color:rgba(9,10,12,.74)}

/* ---------- live store readout ---------- */
.readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(40px,6vh,64px);border-top:1px solid rgba(9,10,12,.28)}
.readout-cell{padding:16px 18px 4px 0;border-right:1px solid var(--hair)}
.readout-cell:last-child{border-right:0}
.readout dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(9,10,12,.5)}
.readout dd{font-family:var(--mono);font-size:clamp(13px,1.05vw,15px);
  margin-top:9px;display:flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;flex:none;border:1px solid var(--ink);
  background:transparent}
.readout[data-state="up"] .dot{background:var(--acid)}
.readout[data-state="down"] .dot{background:var(--coral);border-color:var(--coral)}

/* ---------- dimension rule ---------- */
.rule-dim{display:block;width:calc(100% - 2 * var(--gutter));height:12px;
  margin:clamp(24px,4vh,44px) var(--gutter) 0;
  stroke:rgba(9,10,12,.34);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}

/* ---------- the index ---------- */
.index{padding:clamp(20px,3vh,34px) var(--gutter) clamp(56px,9vh,100px)}
.families{list-style:none}
.fam{position:relative;display:grid;align-items:start;
  grid-template-columns:64px minmax(190px,1fr) minmax(0,1.35fr) 240px;
  gap:clamp(20px,3vw,40px);padding:38px 0 34px}
.fam::before,.fam::after{content:"";position:absolute;top:0;left:0;height:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fam::before{right:0;background:rgba(9,10,12,.22)}
.fam::after{width:64px;background:var(--acid);height:3px;top:-1px;
  transition-duration:.4s}
.fam.in::before,.fam.in::after{transform:scaleX(1)}
.fam-i{font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  color:rgba(9,10,12,.55);padding-top:6px}
.fam-id h3{font-weight:700;font-size:clamp(25px,2.6vw,38px);letter-spacing:-.015em;
  line-height:1.04}
.fam-ar{margin-top:8px;font-family:var(--sans-ar);font-size:17px;
  color:rgba(9,10,12,.6);text-align:left}
.fam-desc{font-size:16px;line-height:1.5;color:rgba(9,10,12,.72);max-width:36ch;
  padding-top:5px}
.fam-spec{display:grid;gap:9px;padding-top:6px}
.fam-spec > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;border-bottom:1px solid var(--hair);padding-bottom:7px}
.fam-spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(9,10,12,.5)}
.fam-spec dd{font-family:var(--mono);font-size:13px;text-align:right}
.fam-spec .is-pending{color:rgba(9,10,12,.55)}
.fam-spec .is-live{font-weight:500}

.families-state{margin-top:34px;font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;color:rgba(9,10,12,.6);max-width:64ch;line-height:1.7}
.retry{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  background:none;color:var(--ink);border:1px solid var(--ink);
  padding:8px 14px;margin-left:6px;cursor:pointer;transition:background .15s}
.retry:hover{background:var(--acid)}

/* ---------- what turns this into a shop ---------- */
.path{background:var(--ink);color:var(--paper);border-top:3px solid var(--acid);
  padding:clamp(64px,10vh,120px) var(--gutter) clamp(72px,11vh,132px)}
.chapter-on-ink{color:rgba(244,240,231,.55)}
.path-steps{list-style:none;display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.path-steps li{border-top:1px solid rgba(244,240,231,.22);padding-top:20px}
.p-index{font-family:var(--mono);font-size:13px;letter-spacing:.18em;
  color:var(--acid)}
.path-steps h3{margin-top:16px;font-weight:700;
  font-size:clamp(20px,1.9vw,27px);letter-spacing:-.01em}
.path-steps li p:last-child{margin-top:12px;font-size:15px;line-height:1.55;
  color:rgba(244,240,231,.7);max-width:36ch}
.path-back{margin-top:clamp(48px,7vh,80px);font-weight:600;font-size:17px}
.path-back a{border-bottom:2px solid var(--paper);padding-bottom:5px;
  display:inline-flex;gap:8px;transition:border-color .15s}
.path-back a:hover{border-color:var(--acid)}
/* geometry lives on .arrow in main.css — one arrow object site-wide */
.path-back .arrow{margin-left:2px}
.path-back a:hover .arrow{transform:translateX(4px)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .fam{grid-template-columns:52px minmax(0,1fr) 210px;
    grid-template-areas:"i id spec" ". desc spec"}
  .fam-i{grid-area:i}
  .fam-id{grid-area:id}
  .fam-desc{grid-area:desc;margin-top:14px;max-width:44ch}
  .fam-spec{grid-area:spec}
  .path-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mobile ---------- */
@media (max-width:740px){
  .readout{grid-template-columns:repeat(2,minmax(0,1fr));
    border-bottom:1px solid var(--hair)}
  .readout-cell{padding:14px 14px 10px 0;border-bottom:1px solid var(--hair)}
  .readout-cell:nth-child(2n){border-right:0}
  .readout-cell:nth-last-child(-n+2){border-bottom:0}
  .fam{grid-template-columns:40px minmax(0,1fr);
    grid-template-areas:"i id" ". desc" ". spec";padding:30px 0 28px}
  .fam::after{width:40px}
  .fam-desc{max-width:none}
  .fam-spec{margin-top:20px;padding-top:0}
  .path-steps{grid-template-columns:minmax(0,1fr)}
  .path-steps li p:last-child{max-width:none}
}

/* ---------- landscape phones ---------- */
@media (min-width:741px) and (max-height:480px){
  .masthead{padding-top:clamp(40px,7vh,72px)}
}

/* ---------- reduced motion: rules are already drawn, nothing animates ------ */
@media (prefers-reduced-motion:reduce){
  .fam::before,.fam::after{transform:scaleX(1)}
}