/* 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}
}


/* v27 — Lab004 / Lab005 footer alignment */
.lab004-page .lab-detail-footer,
.lab005-page .lab-detail-footer{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  width:100%;
  margin-top:52px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.12);
  box-sizing:border-box;
}
.lab004-page .lab-detail-footer .lab-detail-back,
.lab005-page .lab-detail-footer .lab-detail-back{
  justify-self:start;
}
.lab004-page .lab-detail-footer .lab-detail-next,
.lab005-page .lab-detail-footer .lab-detail-next{
  justify-self:end;
}

/* r22 candidate — mobile Lab 001 template */
.lab001-mobile-template-page{overflow:auto;background:#f7f7f5;}
.lab001-mobile-template-page .lab-detail-shell{width:100%;height:auto;min-height:100vh;display:block;overflow:visible;padding:34px 24px 46px;}
.lab001-mobile-template-page .lab-detail-header{width:min(680px,100%);margin:0 auto 86px;align-items:flex-start;}
.lab001-mobile-template-page .lab-detail-content{width:min(680px,100%);height:auto;display:block;overflow:visible;padding:0;margin:0 auto;}
.lab001-mobile-template-page .lab001-hero{padding-bottom:76px;border-bottom:1px solid rgba(17,17,17,.12);}
.lab001-mobile-template-page .lab-detail-kicker{margin:0 0 22px;font-size:9px;letter-spacing:.12em;}
.lab001-mobile-template-page .lab-detail-title{max-width:560px;margin:0 0 18px;font-size:clamp(34px,8vw,62px);line-height:.98;letter-spacing:-.035em;}
.lab001-mobile-template-page .lab001-deck{max-width:470px;margin:0 0 58px;font-size:11px;line-height:1.75;opacity:.56;}
.lab001-mobile-template-page .lab-detail-meta{max-width:520px;margin:0;}
.lab001-mobile-template-page .lab-detail-row{grid-template-columns:84px 1fr;gap:18px;padding:0 0 13px;}
.lab001-mobile-template-page .lab-detail-row dt,.lab001-mobile-template-page .lab-detail-row dd{font-size:10px;line-height:1.55;}
.lab001-mobile-template-page .lab001-section{padding:74px 0;border-bottom:1px solid rgba(17,17,17,.12);}
.lab001-mobile-template-page .lab001-index{margin:0 0 38px;font-size:8px;letter-spacing:.16em;opacity:.43;}
.lab001-mobile-template-page .lab001-section h2{max-width:570px;margin:0 0 28px;font-size:clamp(22px,5.8vw,38px);font-weight:400;line-height:1.12;letter-spacing:-.025em;}
.lab001-mobile-template-page .lab001-section>div[data-lang] p{max-width:570px;margin:0;font-size:11px;line-height:1.9;}
.lab001-mobile-template-page .lab001-figure{margin:0 0 52px;}
.lab001-mobile-template-page .lab001-figure:last-child{margin-bottom:0;}
.lab001-mobile-template-page .lab001-figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%);border:1px solid rgba(17,17,17,.12);background:#eee;}
.lab001-mobile-template-page .lab001-figure--wide img{aspect-ratio:16/10;}
.lab001-mobile-template-page .lab001-figure figcaption{display:grid;grid-template-columns:78px 1fr;gap:16px;padding-top:13px;font-size:8px;line-height:1.6;letter-spacing:.04em;}
.lab001-mobile-template-page .lab001-figure figcaption span:first-child{opacity:.38;}
.lab001-mobile-template-page .lab001-note{display:grid;grid-template-columns:94px 1fr;gap:20px;padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid rgba(17,17,17,.08);}
.lab001-mobile-template-page .lab001-note:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.lab001-mobile-template-page .lab001-note time{font-size:8px;opacity:.42;letter-spacing:.08em;}
.lab001-mobile-template-page .lab001-note p{margin:0;font-size:10px;line-height:1.8;}
.lab001-mobile-template-page .lab001-code pre{margin:0;padding:28px 24px;background:#111;color:#efefeb;overflow-x:auto;font:9px/1.85 ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,monospace;letter-spacing:.03em;}
.lab001-mobile-template-page .lab001-observation blockquote{max-width:610px;margin:0 0 48px;font-size:clamp(20px,5.2vw,34px);line-height:1.35;font-weight:400;letter-spacing:-.018em;}
.lab001-mobile-template-page .lab001-status{display:flex;align-items:center;gap:10px;margin:0;font-size:8px;letter-spacing:.13em;opacity:.55;}
.lab001-mobile-template-page .lab001-pulse{width:5px;height:5px;border-radius:50%;background:#111;animation:lab001Pulse 2.2s ease-in-out infinite;}
@keyframes lab001Pulse{0%,100%{opacity:.2}50%{opacity:1}}
.lab001-mobile-template-page .lab-detail-footer{margin-top:74px;padding-top:18px;}
@media (min-width:760px){
 .lab001-mobile-template-page .lab-detail-shell{padding:48px 6vw 64px;}
 .lab001-mobile-template-page .lab-detail-header,.lab001-mobile-template-page .lab-detail-content{width:min(680px,100%);}
}
@media (max-width:520px){
 .lab001-mobile-template-page .lab-detail-shell{padding:28px 20px 40px;}
 .lab001-mobile-template-page .lab-detail-header{margin-bottom:72px;}
 .lab001-mobile-template-page .lab-language{font-size:8px;gap:6px;}
 .lab001-mobile-template-page .lab001-hero{padding-bottom:64px;}
 .lab001-mobile-template-page .lab-detail-title{font-size:39px;}
 .lab001-mobile-template-page .lab001-section{padding:64px 0;}
 .lab001-mobile-template-page .lab001-note{grid-template-columns:76px 1fr;gap:14px;}
}


/* r22 LAB001 candidate — black-base process document */
.lab001-mobile-template-page {
  background:#030505;
  color:#d7dddc;
  color-scheme:dark;
}
.lab001-mobile-template-page .lab-detail-shell { background:#030505; }
.lab001-mobile-template-page .lab-language button,
.lab001-mobile-template-page .desktop-hub-link { color:inherit; }
.lab001-mobile-template-page .lab001-index,
.lab001-mobile-template-page .lab-detail-row dt,
.lab001-mobile-template-page .lab001-figure figcaption,
.lab001-mobile-template-page .lab001-note time,
.lab001-mobile-template-page .lab001-status { color:#74807e; }
.lab001-mobile-template-page .lab-detail-row,
.lab001-mobile-template-page .lab001-section,
.lab001-mobile-template-page .lab-detail-footer { border-color:#1b2423; }
.lab001-mobile-template-page .lab001-figure img {
  border-color:#1b2423;
  background:#070a0a;
  filter:grayscale(1) brightness(.72) contrast(1.08);
}
.lab001-mobile-template-page .lab001-code pre {
  background:#070a0a;
  border-color:#1b2423;
  color:#aeb9b7;
}
.lab001-mobile-template-page .lab001-pulse { background:#81918e; box-shadow:0 0 8px rgba(129,145,142,.5); }
.lab001-mobile-template-page a:focus-visible,
.lab001-mobile-template-page button:focus-visible { outline-color:#aeb9b7; }