/* SoulCraft v10 — Lab detail template */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.lab-detail-page { min-height:100vh; margin:0; background:#fff; color:#111; font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,"Courier New",monospace; letter-spacing:.018em; }
.lab-detail-shell { min-height:100vh; padding:clamp(42px,6vh,76px) clamp(54px,8.55vw,132px) 10vh; }
.lab-detail-header { width:min(680px,100%); display:flex; justify-content:space-between; align-items:center; margin:0 0 clamp(72px,11vh,128px); }
.lab-detail-site,.lab-detail-back,.lab-detail-top { color:inherit; font-size:clamp(8px,.56vw,10px); line-height:1; letter-spacing:.04em; text-decoration:none; }
.lab-detail-site:hover,.lab-detail-back:hover,.lab-detail-top:hover { text-decoration:underline; text-underline-offset:4px; }
.lab-language { display:flex; align-items:center; gap:8px; font-size:9px; }
.lab-language span { opacity:.28; }
.lab-language button { border:0; padding:0; background:transparent; color:#111; font:inherit; opacity:.3; cursor:pointer; }
.lab-language button.is-active { opacity:1; text-decoration:underline; text-underline-offset:4px; }
.lab-detail-content { width:min(680px,100%); }
.lab-detail-kicker { margin:0 0 18px; font-size:clamp(8px,.56vw,10px); line-height:1; font-weight:600; }
.lab-detail-title { margin:0 0 58px; font-size:clamp(18px,1.65vw,28px); font-weight:400; line-height:1.15; letter-spacing:.025em; }
.lab-detail-meta { margin:0 0 76px; }
.lab-detail-row { display:grid; grid-template-columns:112px minmax(0,1fr); gap:22px; padding:0 0 15px; }
.lab-detail-row dt,.lab-detail-row dd,.lab-detail-section p,.lab-timeline li,.lab-next-list li,.lab-action-copy h3,.lab-image-card figcaption { margin:0; font-size:clamp(9px,.64vw,11px); line-height:1.75; letter-spacing:.018em; }
.lab-detail-row dt { opacity:.45; }
.lab-detail-section { margin:0 0 78px; }
.lab-detail-section + .lab-detail-section { padding-top:2px; }
.lab-detail-section h2 { margin:0 0 25px; font-size:clamp(9px,.64vw,11px); line-height:1; font-weight:600; letter-spacing:.035em; }
.lab-timeline,.lab-next-list { list-style:none; margin:0; padding:0; }
.lab-timeline li { display:grid; grid-template-columns:112px minmax(0,1fr); gap:22px; padding:0 0 18px; }
.lab-timeline span { opacity:.45; }
.lab-next-list li { padding:0 0 7px; }
.lab-image-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lab-image-card { margin:0; }
.lab-image-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(100%); border:1px solid rgba(17,17,17,.13); }
.lab-image-card figcaption { padding-top:10px; opacity:.6; }
.lab-action-list { display:grid; gap:30px; }
.lab-action-card { display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; align-items:start; }
.lab-action-preview { min-height:126px; border:1px solid rgba(17,17,17,.13); padding:16px; position:relative; overflow:hidden; background:#fff; font-size:8px; }
.lab-action-preview--contact span { display:block; margin-bottom:18px; font-size:10px; }
.lab-action-preview--contact i { display:block; width:100%; height:1px; background:rgba(17,17,17,.2); margin:14px 0; }
.lab-action-preview--contact b { display:inline-block; margin-top:4px; padding:5px 14px; background:#111; color:#fff; font-weight:400; }
.lab-action-preview--about span { display:block; font-size:10px; margin-bottom:13px; }
.lab-action-preview--about em { position:absolute; right:-18px; top:10px; width:100px; height:100px; border:1px solid rgba(17,17,17,.18); border-radius:50%; }
.lab-action-preview--about em::before,.lab-action-preview--about em::after { content:""; position:absolute; inset:18px; border:1px solid rgba(17,17,17,.12); border-radius:50%; }
.lab-action-preview--about small { font-size:7px; line-height:1.6; opacity:.55; }
.lab-action-number { opacity:.38; margin-bottom:5px!important; }
.lab-action-copy h3 { font-weight:600; margin-bottom:10px; }
.lab-action-copy > p:last-child { opacity:.72; }
.lab-detail-footer { margin-top:96px; padding-top:18px; border-top:1px solid rgba(17,17,17,.12); display:flex; justify-content:space-between; }
[hidden] { display:none!important; }
@media (max-width:760px) {
 .lab-detail-shell { padding:45px 8vw 10vh; }
 .lab-detail-header { margin-bottom:75px; }
 .lab-detail-row,.lab-timeline li { grid-template-columns:78px minmax(0,1fr); gap:14px; }
 .lab-detail-section { margin-bottom:62px; }
 .lab-image-grid { grid-template-columns:1fr; }
 .lab-action-card { grid-template-columns:1fr; gap:16px; }
 .lab-action-preview { min-height:150px; }
}

/* Lab 001 v3 — About language object + single-screen scroll frame */
html,
body.lab-detail-page {
  height: 100%;
  overflow: hidden;
}

.lab-detail-shell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: clamp(28px, 4vh, 48px);
  overflow: hidden;
}

.lab-detail-header {
  flex: 0 0 auto;
  margin-bottom: clamp(42px, 6vh, 70px);
}

.lab-detail-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.22) transparent;
  padding-right: clamp(12px, 1.5vw, 24px);
  scroll-behavior: smooth;
}

.lab-detail-content::-webkit-scrollbar {
  width: 4px;
}

.lab-detail-content::-webkit-scrollbar-track {
  background: transparent;
}

.lab-detail-content::-webkit-scrollbar-thumb {
  background: rgba(17,17,17,.22);
  border-radius: 999px;
}

.about-language-control.lab-language {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: .04em;
}

.about-language-label {
  opacity: .42;
}

.about-language-separator {
  opacity: .22;
}

.about-language-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: #111;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .lab-detail-shell {
    height: 100dvh;
    padding-bottom: 28px;
  }

  .lab-detail-header {
    margin-bottom: 44px;
  }

  .lab-detail-content {
    padding-right: 10px;
  }
}

/* Lab 001 v4 — full-screen, full-width project dashboard */
html, body.lab-detail-page { width:100%; height:100%; overflow:hidden; }
.lab-detail-shell {
  width:100vw;
  height:100vh;
  min-height:0;
  padding:clamp(26px,4vh,48px) clamp(34px,5vw,78px) clamp(22px,3vh,38px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.lab-detail-header {
  width:100%;
  margin:0 0 clamp(24px,3.5vh,42px);
}
.lab-detail-content {
  width:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 clamp(8px,1vw,16px) 0 0;
  display:grid;
  grid-template-columns:minmax(300px,.86fr) minmax(380px,1.14fr);
  grid-template-areas:
    "hero images"
    "timeline actions"
    "timeline notes"
    "timeline next"
    "footer footer";
  column-gap:clamp(42px,6vw,110px);
  row-gap:clamp(20px,2.8vh,34px);
  align-content:start;
}
.lab-hero-panel { grid-area:hero; }
.lab-timeline-panel { grid-area:timeline; }
.lab-images-panel { grid-area:images; }
.lab-actions-panel { grid-area:actions; }
.lab-notes-panel { grid-area:notes; }
.lab-next-panel { grid-area:next; }
.lab-detail-footer { grid-area:footer; }
.lab-detail-kicker { margin:0 0 14px; }
.lab-detail-title { margin:0 0 clamp(24px,3.5vh,42px); font-size:clamp(20px,1.7vw,30px); }
.lab-detail-meta { margin:0 0 clamp(24px,3.5vh,40px); }
.lab-detail-row { grid-template-columns:88px minmax(0,1fr); gap:18px; padding-bottom:10px; }
.lab-compact-section { margin:0; padding:0; }
.lab-compact-section h2 { margin:0 0 16px; font-size:clamp(9px,.62vw,11px); }
.lab-compact-section p,
.lab-detail-row dt,.lab-detail-row dd,
.lab-timeline li,.lab-next-list li,
.lab-action-copy h3,.lab-image-card figcaption {
  font-size:clamp(8px,.58vw,10px);
  line-height:1.62;
}
.lab-timeline li { grid-template-columns:76px minmax(0,1fr); gap:18px; padding-bottom:12px; }
.lab-image-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.lab-image-card img { aspect-ratio:16/8.7; }
.lab-image-card figcaption { padding-top:7px; }
.lab-action-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lab-action-card { grid-template-columns:minmax(110px,.85fr) minmax(120px,1fr); gap:15px; }
.lab-action-preview { min-height:100px; padding:12px; }
.lab-action-preview--contact span,.lab-action-preview--about span { font-size:8px; margin-bottom:10px; }
.lab-action-preview--contact i { margin:9px 0; }
.lab-action-preview--contact b { padding:4px 10px; font-size:7px; }
.lab-action-preview--about em { width:74px; height:74px; }
.lab-action-copy h3 { margin-bottom:5px; }
.lab-action-number { margin-bottom:2px!important; }
.lab-next-list { display:flex; gap:18px; flex-wrap:wrap; }
.lab-next-list li { padding:0; }
.lab-detail-footer { margin-top:2px; padding-top:14px; }

@media (min-width:1100px) and (min-height:720px) {
  .lab-detail-content { overflow-y:hidden; }
}
@media (max-width:980px) {
  html, body.lab-detail-page { overflow:auto; }
  .lab-detail-shell { height:auto; min-height:100vh; overflow:visible; }
  .lab-detail-content {
    overflow:visible;
    grid-template-columns:1fr;
    grid-template-areas:"hero" "images" "actions" "timeline" "notes" "next" "footer";
  }
  .lab-action-list { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .lab-detail-shell { padding:34px 8vw; }
  .lab-image-grid { grid-template-columns:1fr; }
  .lab-action-card { grid-template-columns:1fr; }
}


/* Future Lab navigation slot. Activated when 002 is created. */
.lab-detail-next {
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
.lab-detail-next.is-disabled {
  opacity: .22;
  cursor: default;
  user-select: none;
}

/* Lab 002 — From Words to Voice */
.lab-002-page .lab-image-grid { grid-template-columns:1fr; }
.lab-002-page .lab-image-card--single img {
  width:100%;
  aspect-ratio:16/8.7;
  object-fit:cover;
  object-position:center;
  filter:none;
  border:1px solid rgba(17,17,17,.1);
}
.lab-002-page .lab-process-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lab-002-page .lab-process-card { display:block; padding-top:11px; border-top:1px solid rgba(17,17,17,.12); }
.lab-002-page .lab-related-link { display:flex; flex-direction:column; gap:5px; color:inherit; text-decoration:none; font-size:clamp(8px,.58vw,10px); line-height:1.6; }
.lab-002-page .lab-related-link span { opacity:.45; }
.lab-002-page .lab-related-link strong { font-weight:400; }
.lab-002-page .lab-related-link:hover strong { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:980px) {
  .lab-002-page .lab-process-list { grid-template-columns:1fr; }
}

/* r7 — rebalance Lab 001 and anchor navigation nearer the lower edge */
@media (min-width:1100px) and (min-height:720px){
  .lab-detail-content{height:100%;align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto auto auto}
  .lab-detail-footer{align-self:end;margin-top:0}
  .lab-next-panel{align-self:end}
  .lab-notes-panel{align-self:end}
}