/* ============================================================
   keyquest.tech · KQ-01 — case-study pages (D6/M3) and the
   plain index (D7/M4). Values verbatim from the wireframe source.
   ============================================================ */

/* ============ D6 · projector / case study ============ */

body.page-case{
  background-color:var(--paper);
  background-image:var(--paper-sweep);
  background-attachment:fixed;
}

.sheet{
  margin:36px 44px 0;
  background:var(--card);
  box-shadow:var(--shadow-sheet);
  padding:48px 72px 60px;
}

.case-top{display:flex;justify-content:space-between;align-items:center}
.case-back{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:10px;font-weight:500;letter-spacing:0.12em;
  color:var(--grey-1);text-decoration:none;
}
/* arrow ink centre sits 1px below the caps' centre on a shared baseline — lift it */
.case-back span:first-child{font-size:12px;line-height:1;position:relative;top:-1px}
@media (hover:hover){.case-back:hover{color:var(--ink);text-decoration:none}}
.case-chip{
  display:none;   /* mobile only (M3) — desktop has no counter since the remote was removed */
  font-size:12px;color:var(--grey-1);font-variant-numeric:tabular-nums;
}

.case-eyebrow{
  margin-top:34px;
  font-size:11px;font-weight:500;letter-spacing:0.14em;color:var(--grey-2);
}
.case-title{
  margin-top:10px;
  /* 92px at full width, scales down so long names never overflow narrow windows */
  font-size:clamp(44px, 9.5vw, 92px);
  font-weight:700;letter-spacing:-0.02em;line-height:1.02;
  color:var(--ink);
  overflow-wrap:break-word;
}
.case-meta-line{
  margin-top:14px;
  font-size:13px;font-weight:500;letter-spacing:0.1em;color:var(--accent-text);
}

.case-meta-row{
  margin-top:30px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;
}
.case-meta-cell{border-top:1px solid var(--hair);padding-top:12px}
.case-meta-cell dt{
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;color:var(--grey-2);
}
.case-meta-cell dd{
  margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink);
}

.case-hero{margin-top:36px;border:1px solid var(--hair)}
.case-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
figure{margin:0}
figcaption{
  margin-top:6px;
  font-size:9px;font-weight:500;letter-spacing:0.1em;color:var(--grey-2);
  text-transform:uppercase;
}

.case-cols{
  margin-top:44px;
  display:grid;grid-template-columns:5fr 6fr;gap:52px;
  align-items:start;
}
.case-cols > div{min-width:0}   /* columns may shrink below content min-width */

/* 3D viewer block — hairline plinth; photo fallback when no model */
.viewer-block{
  height:400px;background:var(--body-step);border:1px solid var(--hair);
  position:relative;overflow:hidden;
}
.viewer-block > img,
.viewer-block canvas,
.viewer-block .viewer-mount{position:absolute;inset:0;width:100%;height:100%}
.viewer-block > img{object-fit:cover}
.viewer-mount{cursor:grab}
.viewer-mount:active{cursor:grabbing}
.viewer-plinth{
  position:absolute;left:40px;right:40px;bottom:70px;height:1px;
  background:rgba(var(--ink-rgb),0.25);pointer-events:none;
}
.viewer-ascii-btn{
  position:absolute;top:14px;right:14px;z-index:2;
  font-size:10px;font-weight:500;letter-spacing:0.12em;color:var(--grey-1);
}
@media (hover:hover){.viewer-ascii-btn:hover{color:var(--ink)}}
.viewer-step{
  position:absolute;left:16px;bottom:16px;z-index:2;
  border:1px solid rgba(var(--ink-rgb),0.35);
  padding:8px 12px;
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;color:var(--ink);
  background:var(--paper);text-decoration:none;
}
@media (hover:hover){.viewer-step:hover{text-decoration:none;background:var(--card)}}
/* ASCII effect output (graphic render, not typography) */
.viewer-block table,.viewer-block pre{color:var(--ink)!important;background:transparent!important}

/* numbered sections — 01 Problem · 02 Process · 03 Outcome */
.case-sec{border-top:1px solid var(--hair);padding-top:14px;margin-top:26px}
.case-sec:first-child{margin-top:0}
.case-sec-head{display:flex;align-items:baseline;gap:14px}
.case-sec-num{font-size:12px;font-weight:500;color:var(--accent-text)}
.case-sec-dash{
  display:inline-block;width:28px;height:1px;
  background:rgba(var(--ink-rgb),0.35);align-self:center;
}
.case-sec-head h2{
  font-size:21px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
}
.case-sec p{
  margin:14px 0 0;
  font-size:13.5px;line-height:1.65;color:var(--grey-1);
  text-wrap:pretty;
}
.case-sec p + p{margin-top:12px}
.case-sec strong{font-weight:700;color:var(--ink)}

/* hairline spec rows */
.case-specs{margin-top:22px}
.case-specs .spec-row{
  display:grid;grid-template-columns:130px 1fr;
  border-top:1px solid var(--hair);padding:9px 0;
}
.spec-row dt{font-size:9px;font-weight:500;letter-spacing:0.12em;color:var(--grey-2);align-self:center}
.spec-row dd{margin:0;font-size:13px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.spec-row dd a{color:var(--accent-text)}

/* left column: photo stack running beside the text */
.case-stack figure{margin:16px 0 0}
.case-stack figure:first-child{margin-top:0}
.case-video{aspect-ratio:16/9}
.case-video iframe{
  width:100%;height:100%;display:block;border:1px solid var(--hair);
  background:var(--body-step);
}
.case-stack img{
  width:100%;height:auto;display:block;
  border:1px solid var(--hair);background:var(--body-step);
}

/* photos: two-column masonry — uniform 16px gutters, columns pack tight,
   portraits stay portrait (no cropping, no holes) */
.case-proc{margin-top:24px}
.case-proc,
.case-gallery{columns:2;column-gap:16px}
.case-gallery{margin-top:16px}
.case-proc figure,
.case-gallery figure{break-inside:avoid;margin:0 0 16px}
.case-proc img,
.case-gallery img{
  width:100%;height:auto;display:block;
  border:1px solid var(--hair);background:var(--body-step);
}

/* footer: NEXT PROJECT → · ALL WORK (INDEX) · the static-site brag */
.case-foot{
  margin-top:64px;border-top:1px solid var(--hair);padding-top:18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.case-foot a{
  font-size:11px;font-weight:500;letter-spacing:0.12em;
  color:var(--accent-text);text-decoration:none;
}
.case-foot a:hover{text-decoration:underline}
.case-brag{
  padding:40px 0 24px;text-align:center;
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;color:var(--grey-2);
}
.case-brag a{color:var(--accent-text)}

/* scroll progress (shown when arriving via the device) */
.kq-progress{
  position:fixed;right:0;top:0;z-index:3;
  width:3px;height:0;background:var(--accent);
  display:none;
}
body.via-device .kq-progress{display:block}

/* ============ D7 · index (plain listing) ============ */

body.page-index{background:var(--card)}
.index-wrap{max-width:820px;margin:0 auto;padding:96px 24px 64px}
/* same control as the project pages' back button (.case-back) — spacing only */
.index-back{margin-bottom:34px}
.index-head{
  font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--ink);
}
.index-list{margin-top:36px}
/* section heads dividing the listing — PROJECTS / EXPERIMENTS */
.index-sec{
  margin-top:40px;
  font-size:10px;font-weight:500;letter-spacing:0.12em;color:var(--grey-2);
}
.index-sec + .index-list{margin-top:12px}
.index-row{
  display:grid;grid-template-columns:1fr 120px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--hair);
}
.index-row:first-child{border-top:1px solid var(--hair)}
.index-row a{font-size:17px;font-weight:500}
.index-year{font-size:14px;color:var(--grey-1)}
.index-foot{
  margin-top:64px;
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;color:var(--grey-2);
}
.index-foot a{color:var(--accent-text)}

/* ============ narrow desktop windows (snapped / half-screen) ============ */

@media (max-width:1080px) and (min-width:701px){
  .sheet{padding:40px 44px 52px}
  .case-meta-row{gap:24px}
  .case-cols{grid-template-columns:1fr;gap:32px}
  .viewer-block{height:320px}
}

/* ============ M3 / M4 · mobile ============ */

@media (max-width:700px){
  /* M3 — full-screen white sheet, plain vertical scroll */
  .sheet{margin:0;box-shadow:none;padding:0 18px 40px}
  .case-top{
    height:48px;margin:0 -18px;padding:0 16px;
    border-bottom:1px solid var(--hair);
    position:sticky;top:0;background:var(--card);z-index:2;
  }
  .case-chip{display:block}
  /* the back control fills the bar height — ≥44px tap target */
  .case-top .case-back{padding:17px 12px;margin-left:-12px}
  .case-eyebrow{margin-top:22px;font-size:9.5px}
  .case-meta-line,.case-brag{overflow-wrap:anywhere}
  .case-title{font-size:38px;line-height:1.05}
  .case-meta-line{margin-top:8px;font-size:10px}
  .case-meta-row{margin-top:22px;grid-template-columns:1fr;gap:0}
  .case-meta-cell{padding:9px 0}
  .case-meta-cell dd{margin-top:2px;font-size:14px}
  .case-hero{margin-top:18px}
  .case-hero img{aspect-ratio:16/10}
  .case-cols{margin-top:24px;grid-template-columns:1fr;gap:24px}
  .viewer-block{height:190px}
  .viewer-plinth{left:20px;right:20px;bottom:40px}
  .viewer-step{left:12px;bottom:12px;padding:7px 10px;font-size:9px}
  .case-sec p{font-size:14px;line-height:1.6}
  .case-specs .spec-row{grid-template-columns:110px 1fr}
  .case-proc,.case-gallery{columns:1}
  .case-foot{align-items:center;gap:16px}   /* index left · next right, same row */
  .case-foot a{display:flex;min-height:44px;align-items:center}
  .case-foot a[rel="next"]{justify-content:flex-end;text-align:right}

  /* M4 — index rows exactly 44px */
  .index-wrap{max-width:none;padding:0 0 8px}
  .index-back{margin:0;padding:16px}   /* 44px tap target via padding; alignment from .case-back */
  .index-head{padding:20px 16px 12px;border-bottom:1px solid var(--hair)}
  .index-list{margin-top:0}
  .index-sec{margin-top:0;padding:18px 16px 10px;border-bottom:1px solid var(--hair)}
  .index-sec + .index-list{margin-top:0}
  .index-row{
    grid-template-columns:1fr auto;gap:12px;align-items:center;
    min-height:44px;padding:0 16px;
  }
  .index-row:first-child{border-top:0}
  .index-row a{font-size:15px;display:flex;align-items:center;min-height:44px}
  .index-year{font-size:13px}
  .index-foot{margin-top:0;padding:18px 16px;font-size:8.5px}
}