/* HDC Surface Lab — Visual Match v3
   Approved reference implementation.
   No new process-suitability claims are introduced by presentation styles. */

.sl-page{
  --sl-ink:#0B1013;
  --sl-panel:#171D21;
  --sl-panel-2:#10171A;
  --sl-paper:#F0EFED;
  --sl-paper-2:#F7F5F1;
  --sl-white:#FFFFFF;
  --sl-muted:#A9B3B7;
  --sl-teal:#036F86;
  --sl-cyan:#47C1C7;
  --sl-copper:#D89A63;
  --sl-line:rgba(11,16,19,.18);
  --sl-line-dark:rgba(255,255,255,.20);
  --sl-fast:180ms;
  --sl-base:320ms;
  --sl-ease:cubic-bezier(.2,.65,.22,1);
  background:var(--sl-paper);
  color:var(--sl-ink);
}

.sl-page .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.sl-page .shell{
  width:min(100%,1440px);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,5rem);
}

.sl-page .sl-section{
  padding-block:clamp(4.5rem,7.5vw,7.5rem);
}

.sl-page .section-index{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 clamp(2.2rem,4vw,3.4rem);
  padding:0 0 1rem;
  border-bottom:1px solid currentColor;
  opacity:.78;
  font-family:var(--mono);
  font-size:.61rem;
  letter-spacing:.13em;
  line-height:1.3;
  text-transform:uppercase;
}

/* Hero */
.sl-hero{
  padding:clamp(5.5rem,8vw,8rem) 0 0;
  background:linear-gradient(105deg,#081014 0%,#0B1013 48%,#10191D 100%);
  color:var(--sl-white);
  overflow:hidden;
}
.sl-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(24rem,1.22fr);
  min-height:580px;
  gap:clamp(2rem,5vw,5rem);
  align-items:stretch;
}
.sl-hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2rem,3vw,3rem) 0 clamp(3rem,5vw,5rem);
  z-index:2;
}
.sl-hero__copy .eyebrow{
  margin:0 0 1.7rem;
  color:var(--sl-muted);
  font-family:var(--mono);
  font-size:.61rem;
  letter-spacing:.13em;
}
.sl-page .sl-hero h1{
  margin:0;
  max-width:5ch;
  font-family:var(--serif);
  font-size:clamp(4.7rem,7.7vw,8.2rem);
  font-weight:400;
  letter-spacing:-.072em;
  line-height:.84;
}
.sl-intro{
  margin:1.8rem 0 0;
  max-width:30rem;
  color:#F1F1EE;
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.8vw,1.85rem);
  line-height:1.16;
}
.sl-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.6rem;
  margin-top:2rem;
}
.sl-hero__actions .button{
  min-height:48px;
  padding-inline:1.1rem;
  gap:.85rem;
}
.sl-text-link{
  color:var(--sl-paper);
  font-size:.8rem;
  text-underline-offset:.3em;
}
.sl-hero__caption{
  margin:auto 0 0;
  padding-top:2.4rem;
  color:var(--sl-muted);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sl-hero__visual{
  position:relative;
  min-width:0;
  margin:0;
}
.sl-hero__visual::before{
  position:absolute;
  inset:0 auto 0 0;
  z-index:1;
  width:22%;
  background:linear-gradient(90deg,#0B1013,rgba(11,16,19,0));
  content:"";
  pointer-events:none;
}
.sl-hero__visual img{
  display:block;
  width:100%;
  height:100%;
  min-height:580px;
  object-fit:cover;
  object-position:58% center;
  filter:brightness(.95) saturate(.88) contrast(1.06);
}

/* Decision logic */
.sl-decision-section{
  background:var(--sl-paper-2);
}
.sl-decision-heading{
  display:grid;
  grid-template-columns:minmax(16rem,.65fr) minmax(20rem,1.35fr);
  gap:clamp(3rem,8vw,9rem);
  align-items:start;
  margin-bottom:clamp(2.5rem,4vw,4rem);
}
.sl-decision-heading h2{
  margin:0;
  max-width:7.5ch;
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.5vw,5.9rem);
  font-weight:400;
  letter-spacing:-.065em;
  line-height:.88;
}
.sl-decision-heading > p{
  margin:.7rem 0 0;
  max-width:38rem;
  font-size:clamp(1.08rem,1.5vw,1.35rem);
  line-height:1.52;
}
.sl-decision-rail{
  position:relative;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}
.sl-decision-rail::before{
  position:absolute;
  top:2.82rem;
  right:4.3%;
  left:4.3%;
  height:1px;
  background:rgba(11,16,19,.24);
  content:"";
}
.sl-decision-rail li{
  position:relative;
  min-width:0;
}
.sl-decision-rail button{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto 1.2rem auto auto;
  width:100%;
  min-height:7.6rem;
  padding:0 .45rem;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
}
.sl-decision-rail button span{
  color:var(--sl-teal);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
}
.sl-decision-rail button i{
  position:relative;
  display:block;
  width:.78rem;
  height:.78rem;
  margin-top:.6rem;
  border:1px solid rgba(11,16,19,.34);
  border-radius:50%;
  background:var(--sl-paper-2);
  transition:background-color var(--sl-fast) ease,border-color var(--sl-fast) ease,transform var(--sl-fast) var(--sl-ease);
}
.sl-decision-rail button[aria-pressed="true"] i{
  border-color:var(--sl-teal);
  background:var(--sl-teal);
  transform:scale(1.08);
}
.sl-decision-rail button[aria-pressed="true"]::after{
  position:absolute;
  top:2.78rem;
  left:.45rem;
  width:calc(100% - .45rem);
  height:2px;
  background:var(--sl-teal);
  content:"";
  transform:translateY(-50%);
}
.sl-decision-rail button strong{
  margin-top:.72rem;
  font-size:.76rem;
  font-weight:600;
  line-height:1.2;
}
.sl-decision-rail button small{
  margin-top:.45rem;
  color:#5F686C;
  font-size:.64rem;
  line-height:1.35;
}
.sl-decision-readout{
  margin:1rem 0 0;
  color:#606A6E;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Materials */
.sl-section--dark{
  background:linear-gradient(110deg,#0B1013,#121A1E);
  color:var(--sl-white);
}
.sl-materials-section .section-index{
  border-color:var(--sl-line-dark);
}
.sl-materials-layout{
  display:grid;
  grid-template-columns:minmax(16rem,.28fr) minmax(0,.72fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:end;
}
.sl-materials-intro h2{
  margin:0;
  max-width:8ch;
  font-family:var(--serif);
  font-size:clamp(3.2rem,4.7vw,5.3rem);
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.9;
}
.sl-materials-intro > p{
  max-width:21rem;
  margin:1.2rem 0 0;
  color:#D4DADB;
  font-size:.86rem;
  line-height:1.55;
}
.sl-search-field{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.55rem;
  margin-top:1.35rem;
  padding:0 .8rem;
  min-height:44px;
  border:1px solid rgba(255,255,255,.36);
}
.sl-search-field > span{
  color:var(--sl-muted);
  font-size:1.05rem;
}
.sl-search-field input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--sl-white);
  font:inherit;
  font-size:.72rem;
}
.sl-search-field input::placeholder{color:#8A9599;}
.sl-tool-status{
  margin:.45rem 0 0;
  color:var(--sl-muted);
  font-size:.66rem;
}
.sl-material-strip{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.45rem;
  min-width:0;
}
.sl-material-card{
  display:grid;
  grid-template-rows:8.5rem auto 1fr auto;
  min-width:0;
  min-height:20rem;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.015);
  color:var(--sl-white);
  text-align:left;
  overflow:hidden;
  transition:border-color var(--sl-fast) ease,background-color var(--sl-fast) ease,transform var(--sl-fast) var(--sl-ease);
}
.sl-material-card[aria-pressed="true"]{
  border-color:var(--sl-cyan);
  box-shadow:inset 0 0 0 1px var(--sl-cyan);
}
.sl-material-card__media{
  position:relative;
  overflow:hidden;
  background:#202A2F;
}
.sl-material-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.04);
  transition:transform var(--sl-base) var(--sl-ease);
}
.sl-material-card__index{
  padding:.65rem .65rem 0;
  color:var(--sl-cyan);
  font-family:var(--mono);
  font-size:.57rem;
  letter-spacing:.08em;
}
.sl-material-card__copy{
  display:grid;
  align-content:start;
  gap:.5rem;
  padding:.5rem .65rem .8rem;
}
.sl-material-card__copy strong{
  font-size:.76rem;
  line-height:1.22;
}
.sl-material-card__copy span{
  color:#BCC5C7;
  font-size:.61rem;
  line-height:1.38;
}
.sl-material-card__arrow{
  justify-self:end;
  align-self:end;
  padding:.5rem .65rem .75rem;
  font-size:1.05rem;
}
@media (hover:hover) and (pointer:fine){
  .sl-material-card:hover{
    border-color:rgba(255,255,255,.45);
    transform:translateY(-2px);
  }
  .sl-material-card:hover img{transform:scale(1.025);}
}

/* Record */
.sl-record-section{
  background:var(--sl-paper-2);
}
.sl-record-stage{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,.34fr) minmax(15rem,.24fr);
  border-top:1px solid var(--sl-line);
  min-height:32rem;
}
.sl-record-gallery{
  min-width:0;
  padding:1rem 1.2rem 0 0;
  border-right:1px solid var(--sl-line);
}
.sl-record-main{
  position:relative;
  aspect-ratio:1.22/1;
  overflow:hidden;
  background:#D9DEDE;
}
.sl-record-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.sl-record-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg,rgba(3,111,134,.12),transparent 45%),
    repeating-linear-gradient(135deg,#D9DEDE 0 1px,#ECEBE7 1px 22px);
  color:#5B676C;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.sl-record-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.45rem;
  margin-top:.55rem;
}
.sl-record-thumb{
  aspect-ratio:1.45/1;
  padding:0;
  border:1px solid var(--sl-line);
  background:#D7DCDD;
  overflow:hidden;
}
.sl-record-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.sl-record-thumb[aria-pressed="true"]{border-color:var(--sl-ink);}
.sl-record-info{
  min-width:0;
  padding:1.25rem 1.6rem;
  border-right:1px solid var(--sl-line);
}
.sl-record-kicker{
  margin:0 0 .8rem;
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.sl-record-info h2{
  margin:0;
  max-width:10ch;
  font-family:var(--serif);
  font-size:clamp(2.5rem,3.7vw,4.2rem);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.92;
}
.sl-record-subtitle{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-size:1.02rem;
}
.sl-record-summary{
  margin:1.35rem 0 0;
  color:#4F5A5F;
  font-size:.78rem;
  line-height:1.62;
}
.sl-record-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--sl-line);
}
.sl-record-facts b{
  display:block;
  margin-bottom:.7rem;
  font-family:var(--mono);
  font-size:.55rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.sl-record-facts ul{
  display:grid;
  gap:.32rem;
  margin:0;
  padding-left:1rem;
}
.sl-record-facts li{
  color:#4D575C;
  font-size:.68rem;
  line-height:1.35;
}
.sl-record-process{
  min-width:0;
  padding:1.25rem 0 0 1.5rem;
}
.sl-record-process > b{
  display:block;
  margin-bottom:.8rem;
  font-family:var(--mono);
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.sl-process-list{
  border-top:1px solid var(--sl-line);
}
.sl-process-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  align-items:center;
  min-height:48px;
  border-bottom:1px solid var(--sl-line);
  font-size:.72rem;
}
.sl-process-state{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#525D62;
  font-size:.66rem;
}
.sl-process-state::before{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#D9A441;
  content:"";
}
.sl-record-notes{
  margin-top:1.3rem;
}
.sl-record-notes summary{
  cursor:pointer;
  font-size:.68rem;
  text-decoration:underline;
  text-underline-offset:.3em;
}
.sl-record-notes ul{
  margin:.7rem 0 0;
  padding-left:1rem;
  color:#596469;
  font-size:.66rem;
  line-height:1.5;
}
.sl-record-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  margin-top:1.6rem;
}
.sl-record-actions .button{
  min-height:43px;
  padding-inline:.9rem;
  font-size:.58rem;
}
.sl-record-actions .sl-text-action{
  color:var(--sl-ink);
  font-size:.67rem;
  text-decoration:underline;
  text-underline-offset:.3em;
}
.sl-compare-toggle{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  margin-top:.4rem;
  color:#4D585D;
  font-size:.68rem;
}
.sl-compare-toggle input{
  width:1rem;
  height:1rem;
  accent-color:var(--sl-teal);
}

/* Compare tray */
.sl-compare-section{
  padding-top:clamp(2.8rem,4.5vw,4.5rem)!important;
  padding-bottom:clamp(3rem,5vw,5rem)!important;
  background:#FBFAF7;
}
.sl-compare-section .section-index{
  margin-bottom:1.4rem;
}
.sl-compare-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.3rem;
  align-items:center;
}
.sl-compare-shell{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
}
.sl-compare-chip,
.sl-compare-add{
  min-height:72px;
  border:1px solid var(--sl-line);
  background:var(--sl-white);
}
.sl-compare-chip{
  display:grid;
  grid-template-columns:3.2rem 1fr auto;
  gap:.7rem;
  align-items:center;
  padding:.55rem;
}
.sl-compare-chip img{
  width:3.2rem;
  height:3.2rem;
  object-fit:cover;
}
.sl-compare-chip strong{
  min-width:0;
  font-family:var(--serif);
  font-size:.92rem;
  font-weight:400;
  line-height:1.1;
}
.sl-compare-chip button{
  align-self:start;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  font-size:1rem;
}
.sl-compare-add{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  color:#4D585D;
  font-size:.72rem;
  border-style:dashed;
}
.sl-compare-add span{
  font-size:1.15rem;
}
.sl-compare-action{
  min-width:180px;
  gap:1rem;
}
.sl-compare-detail{
  margin-top:1rem;
  border-top:1px solid var(--sl-line);
}
.sl-compare-detail[hidden]{display:none;}
.sl-compare-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.sl-compare-detail article{
  padding:1rem;
  border-right:1px solid var(--sl-line);
  border-bottom:1px solid var(--sl-line);
}
.sl-compare-detail h3{
  margin:0 0 .8rem;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:400;
}
.sl-compare-detail p{
  margin:0;
  color:#596469;
  font-size:.72rem;
  line-height:1.5;
}

/* Compact fallback review */
.sl-review-strip{
  padding:2rem 0;
  border-top:1px solid var(--sl-line);
  background:#E9E6E0;
}
.sl-review-strip .shell{
  display:grid;
  grid-template-columns:.7fr 1.3fr auto;
  gap:2rem;
  align-items:center;
}
.sl-review-strip .eyebrow{
  margin:0 0 .35rem;
}
.sl-review-strip strong{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:400;
}
.sl-review-strip p{
  margin:0;
  color:#566166;
  font-size:.78rem;
  line-height:1.5;
}
.sl-review-strip .text-link{
  margin:0;
}

.sl-page :is(a,button,input,summary):focus-visible{
  outline:2px solid var(--sl-cyan);
  outline-offset:3px;
}
.sl-record-loading{
  grid-column:1/-1;
  padding:2rem;
  color:#667176;
}

/* Local horizontal navigation only; never page-level overflow. */
@media (max-width:1180px){
  .sl-materials-layout{
    grid-template-columns:15rem minmax(0,1fr);
  }
  .sl-material-strip{
    grid-template-columns:repeat(8,8.7rem);
    overflow-x:auto;
    padding-bottom:.35rem;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  .sl-record-stage{
    grid-template-columns:minmax(0,.42fr) minmax(0,.36fr) minmax(13rem,.22fr);
  }
}

@media (max-width:900px){
  .sl-hero{
    padding-top:4rem;
  }
  .sl-hero__grid{
    grid-template-columns:1fr;
    min-height:0;
    gap:0;
  }
  .sl-hero__copy{
    padding-bottom:2rem;
  }
  .sl-hero__caption{margin-top:2rem;}
  .sl-hero__visual img{
    min-height:0;
    aspect-ratio:16/10;
  }
  .sl-hero__visual::before{display:none;}
  .sl-decision-heading{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .sl-decision-rail{
    grid-template-columns:repeat(9,7.8rem);
    overflow-x:auto;
    padding-bottom:.5rem;
  }
  .sl-decision-rail::before{
    right:3.9rem;
    left:3.9rem;
  }
  .sl-materials-layout{
    grid-template-columns:1fr;
  }
  .sl-materials-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem 2rem;
    align-items:end;
  }
  .sl-materials-intro h2{grid-row:1/4;}
  .sl-search-field{margin-top:0;}
  .sl-material-strip{
    grid-template-columns:repeat(8,10rem);
  }
  .sl-record-stage{
    grid-template-columns:1fr;
  }
  .sl-record-gallery,
  .sl-record-info{
    border-right:0;
    border-bottom:1px solid var(--sl-line);
  }
  .sl-record-gallery{padding-right:0;padding-bottom:1rem;}
  .sl-record-process{padding-left:0;padding-top:1.3rem;}
  .sl-compare-layout{
    grid-template-columns:1fr;
  }
  .sl-compare-shell{
    grid-template-columns:repeat(4,minmax(9rem,1fr));
    overflow-x:auto;
  }
  .sl-compare-action{justify-self:start;}
  .sl-review-strip .shell{
    grid-template-columns:1fr;
    gap:1rem;
  }
}

@media (max-width:600px){
  .sl-page .shell{padding-inline:1rem;}
  .sl-page .section-index{
    align-items:flex-start;
    font-size:.55rem;
  }
  .sl-page .sl-hero h1{
    font-size:clamp(4rem,20vw,6rem);
  }
  .sl-intro br{display:none;}
  .sl-hero__actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .sl-decision-heading h2{
    font-size:clamp(3.1rem,15vw,4.8rem);
  }
  .sl-materials-intro{
    grid-template-columns:1fr;
  }
  .sl-materials-intro h2{grid-row:auto;}
  .sl-record-facts{
    grid-template-columns:1fr;
  }
  .sl-compare-shell{
    grid-template-columns:repeat(4,12rem);
  }
}

@media (prefers-reduced-motion:reduce){
  .sl-material-card,
  .sl-material-card img,
  .sl-decision-rail button i{
    transition:none!important;
    transform:none!important;
  }
}


/* ORVIA_SURFACE_LAB_VISUAL_REDESIGN_V4
   Editorial reconstruction: stronger hierarchy, larger material proof,
   calmer rhythm, and explicit technical/gallery zoning. */

.sl-page{
  --sl-shell-max: 1520px;
  --sl-rule: rgba(11,16,19,.14);
  --sl-rule-light: rgba(255,255,255,.16);
}

.sl-page .shell{
  width:min(100%,var(--sl-shell-max));
  padding-inline:clamp(1.25rem,4.2vw,4.75rem);
}

.sl-page .sl-section{
  padding-block:clamp(6rem,9vw,10rem);
}

/* HERO — monumental editorial cover */
.sl-hero{
  padding:0;
  min-height:min(860px,88vh);
  background:#090f12;
  border-bottom:1px solid var(--sl-rule-light);
}
.sl-hero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:0;
  min-height:min(860px,88vh);
  padding-right:0!important;
  max-width:none!important;
}
.sl-hero__copy{
  position:relative;
  justify-content:flex-end;
  padding:clamp(8rem,11vw,11rem) clamp(2.5rem,5vw,6rem) clamp(4rem,6vw,6rem) clamp(1.25rem,4.2vw,4.75rem);
}
.sl-hero__copy::after{
  position:absolute;
  right:0;
  bottom:0;
  width:1px;
  height:78%;
  background:rgba(255,255,255,.14);
  content:"";
}
.sl-hero__copy .eyebrow{
  order:-1;
  margin:0 0 clamp(2rem,4vw,4rem);
  color:var(--sl-copper);
}
.sl-page .sl-hero h1{
  max-width:5ch;
  font-size:clamp(5.25rem,8.8vw,10rem);
  line-height:.81;
  letter-spacing:-.078em;
}
.sl-intro{
  max-width:28rem;
  margin:2.2rem 0 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(1.45rem,1.8vw,2rem);
  line-height:1.12;
}
.sl-hero__actions{
  margin-top:2.6rem;
}
.sl-hero__actions .button{
  min-height:52px;
  border-color:rgba(255,255,255,.36);
  background:transparent;
  color:#fff;
}
.sl-hero__actions .button:hover{
  background:#fff;
  color:var(--sl-ink);
}
.sl-text-link{
  color:rgba(255,255,255,.74);
}
.sl-hero__caption{
  margin-top:clamp(4rem,7vw,7rem);
  padding-top:0;
}
.sl-hero__visual{
  min-height:min(860px,88vh);
}
.sl-hero__visual::before{
  width:18%;
  background:linear-gradient(90deg,rgba(9,15,18,.72),rgba(9,15,18,0));
}
.sl-hero__visual::after{
  position:absolute;
  inset:clamp(2rem,4vw,4rem) clamp(2rem,4vw,4rem) auto auto;
  z-index:2;
  padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.26);
  color:rgba(255,255,255,.78);
  font-family:var(--mono);
  font-size:.54rem;
  letter-spacing:.12em;
  content:"SURFACE / MATERIAL / PROCESS";
}
.sl-hero__visual img{
  min-height:min(860px,88vh);
  object-position:58% center;
  filter:brightness(.78) saturate(.78) contrast(1.08);
}

/* Shared index system */
.sl-page .section-index{
  margin-bottom:clamp(3rem,5vw,5.5rem);
  padding-bottom:1.15rem;
  font-size:.58rem;
  letter-spacing:.16em;
  border-bottom-color:currentColor;
}

/* DECISION LOGIC — 3×3 operating matrix */
.sl-decision-section{
  position:relative;
  background:#f3f0ea;
}
.sl-decision-section::before{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(11,16,19,.035) 50%,transparent calc(50% + .5px));
  content:"";
  pointer-events:none;
}
.sl-decision-heading{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(3rem,9vw,10rem);
  margin-bottom:clamp(4rem,7vw,7rem);
}
.sl-decision-heading h2{
  max-width:6ch;
  font-size:clamp(4rem,6.4vw,7.25rem);
  line-height:.83;
}
.sl-decision-heading > p{
  max-width:34rem;
  margin-top:.3rem;
  font-size:clamp(1.2rem,1.65vw,1.6rem);
  line-height:1.42;
}
.sl-decision-rail{
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--sl-rule);
  border-left:1px solid var(--sl-rule);
}
.sl-decision-rail::before{
  display:none;
}
.sl-decision-rail li{
  border-right:1px solid var(--sl-rule);
  border-bottom:1px solid var(--sl-rule);
}
.sl-decision-rail button{
  display:block;
  min-height:13.5rem;
  padding:1.5rem;
  transition:background-color var(--sl-fast) ease,color var(--sl-fast) ease;
}
.sl-decision-rail button span{
  display:block;
  margin-bottom:3.5rem;
  font-size:.62rem;
}
.sl-decision-rail button i{
  display:none;
}
.sl-decision-rail button strong{
  display:block;
  max-width:14ch;
  margin:0 0 .65rem;
  font-family:var(--serif);
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
}
.sl-decision-rail button small{
  display:block;
  max-width:24ch;
  margin:0;
  color:#626a6d;
  font-size:.72rem;
  line-height:1.45;
}
.sl-decision-rail button[aria-pressed="true"]{
  background:var(--sl-ink);
  color:#fff;
}
.sl-decision-rail button[aria-pressed="true"]::after{
  display:none;
}
.sl-decision-rail button[aria-pressed="true"] small{
  color:rgba(255,255,255,.66);
}
.sl-decision-rail button[aria-pressed="true"] span{
  color:var(--sl-cyan);
}
.sl-decision-readout{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px solid var(--sl-rule);
  font-size:.62rem;
  color:#4f595d;
}

/* MATERIAL NAVIGATOR — image-led atlas, not narrow technical strips */
.sl-materials-section{
  background:#0b1114;
}
.sl-materials-section .section-index{
  color:rgba(255,255,255,.74);
}
.sl-materials-layout{
  grid-template-columns:minmax(16rem,.34fr) minmax(0,.66fr);
  gap:clamp(3rem,6vw,7rem);
  align-items:start;
}
.sl-materials-intro{
  position:sticky;
  top:7rem;
}
.sl-materials-intro h2{
  max-width:7ch;
  font-size:clamp(4rem,5.8vw,6.7rem);
  line-height:.84;
}
.sl-materials-intro > p{
  max-width:24rem;
  margin-top:1.5rem;
  color:rgba(255,255,255,.68);
  font-size:.9rem;
  line-height:1.7;
}
.sl-search-field{
  min-height:52px;
  margin-top:2rem;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.025);
}
.sl-material-strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.sl-material-card{
  position:relative;
  display:grid;
  grid-template-rows:minmax(15rem,22vw) auto auto;
  min-height:0;
  border:1px solid rgba(255,255,255,.15);
  background:#11181c;
  overflow:hidden;
}
.sl-material-card:nth-child(3n+1){
  transform:translateY(1.5rem);
}
.sl-material-card[aria-pressed="true"]{
  border-color:var(--sl-cyan);
  box-shadow:0 0 0 1px var(--sl-cyan);
}
.sl-material-card__media{
  grid-row:1;
  min-height:0;
}
.sl-material-card__media::after{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,16,19,.55));
  content:"";
}
.sl-material-card__media img{
  filter:saturate(.78) brightness(.88) contrast(1.08);
}
.sl-material-card__index{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:2;
  padding:.35rem .45rem;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(11,16,19,.45);
  color:var(--sl-cyan);
  backdrop-filter:blur(8px);
}
.sl-material-card__copy{
  gap:.65rem;
  padding:1.15rem 1.2rem 1.35rem;
}
.sl-material-card__copy strong{
  font-family:var(--serif);
  font-size:clamp(1.6rem,2.3vw,2.45rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.035em;
}
.sl-material-card__copy span{
  max-width:34ch;
  color:rgba(255,255,255,.58);
  font-size:.72rem;
  line-height:1.5;
}
.sl-material-card__arrow{
  position:absolute;
  right:1.1rem;
  bottom:1.05rem;
  padding:0;
  font-size:1.35rem;
}
@media (hover:hover) and (pointer:fine){
  .sl-material-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.38);
  }
  .sl-material-card:nth-child(3n+1):hover{
    transform:translateY(calc(1.5rem - 4px));
  }
}

/* MATERIAL RECORD — museum object + technical dossier */
.sl-record-section{
  background:#f4f1eb;
}
.sl-record-stage{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0;
  min-height:0;
  border-top:1px solid var(--sl-rule);
  border-bottom:1px solid var(--sl-rule);
}
.sl-record-gallery{
  grid-column:1 / span 6;
  padding:1.25rem 1.25rem 1.25rem 0;
  border-right:1px solid var(--sl-rule);
}
.sl-record-main{
  aspect-ratio:1/1;
  background:#11181c;
}
.sl-record-main img{
  object-fit:cover;
  filter:saturate(.82) contrast(1.05);
}
.sl-record-thumbs{
  gap:.55rem;
  margin-top:.65rem;
}
.sl-record-thumb{
  aspect-ratio:1.6/1;
}
.sl-record-info{
  grid-column:7 / span 3;
  padding:clamp(1.5rem,2.5vw,2.5rem);
  border-right:1px solid var(--sl-rule);
}
.sl-record-info h2{
  max-width:8ch;
  font-size:clamp(3.25rem,4.7vw,5.4rem);
  line-height:.88;
}
.sl-record-subtitle{
  margin-top:1rem;
  font-size:1.18rem;
  line-height:1.25;
}
.sl-record-summary{
  margin-top:2rem;
  font-size:.84rem;
  line-height:1.7;
}
.sl-record-facts{
  grid-template-columns:1fr;
  gap:1.6rem;
  margin-top:2rem;
  padding-top:1.5rem;
}
.sl-record-process{
  grid-column:10 / -1;
  padding:clamp(1.5rem,2.5vw,2.5rem);
  background:#0e1518;
  color:#fff;
}
.sl-record-process > b{
  color:rgba(255,255,255,.72);
}
.sl-process-list{
  border-top-color:var(--sl-rule-light);
}
.sl-process-row{
  min-height:64px;
  border-bottom-color:var(--sl-rule-light);
  font-size:.78rem;
}
.sl-process-state{
  color:rgba(255,255,255,.58);
}
.sl-record-notes summary{
  color:rgba(255,255,255,.78);
}
.sl-record-notes ul{
  color:rgba(255,255,255,.58);
}
.sl-record-actions{
  margin-top:2rem;
}
.sl-record-actions .button{
  background:#fff;
  color:var(--sl-ink);
}
.sl-record-actions .sl-text-action,
.sl-compare-toggle{
  color:rgba(255,255,255,.7);
}

/* COMPARE — clean technical tray */
.sl-compare-section{
  background:#11181c;
  color:#fff;
  padding-block:clamp(4.5rem,7vw,7rem)!important;
}
.sl-compare-section .section-index{
  border-bottom-color:var(--sl-rule-light);
}
.sl-compare-layout{
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
}
.sl-compare-shell{
  gap:.75rem;
}
.sl-compare-chip,
.sl-compare-add{
  min-height:92px;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.025);
  color:#fff;
}
.sl-compare-chip strong{
  font-size:1.1rem;
}
.sl-compare-add{
  color:rgba(255,255,255,.62);
}
.sl-compare-action{
  min-height:52px;
  background:#fff!important;
  color:var(--sl-ink)!important;
}
.sl-compare-detail{
  border-top-color:var(--sl-rule-light);
}
.sl-compare-detail article{
  border-color:var(--sl-rule-light);
}
.sl-compare-detail p{
  color:rgba(255,255,255,.62);
}

/* REVIEW — clear terminal CTA */
.sl-review-strip{
  padding:clamp(3rem,5vw,5rem) 0;
  border-top:0;
  background:#d99a63;
  color:#0b1013;
}
.sl-review-strip .shell{
  grid-template-columns:minmax(15rem,.7fr) minmax(0,1.15fr) auto;
  gap:clamp(2rem,5vw,6rem);
}
.sl-review-strip .eyebrow{
  color:#0b1013;
}
.sl-review-strip strong{
  font-size:clamp(1.6rem,2.3vw,2.4rem);
}
.sl-review-strip p{
  max-width:44rem;
  color:rgba(11,16,19,.72);
  font-size:.9rem;
}
.sl-review-strip .text-link{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Responsive reconstruction */
@media (max-width:1180px){
  .sl-materials-layout{
    grid-template-columns:minmax(14rem,.32fr) minmax(0,.68fr);
  }
  .sl-material-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
  }
  .sl-record-stage{
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .sl-record-gallery{grid-column:1 / span 4;}
  .sl-record-info{grid-column:5 / span 4;border-right:0;}
  .sl-record-process{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2rem;
    border-top:1px solid var(--sl-rule-light);
  }
  .sl-record-process > b,
  .sl-process-list{grid-column:1;}
  .sl-record-notes,
  .sl-record-actions{grid-column:2;}
}

@media (max-width:900px){
  .sl-hero{
    min-height:0;
  }
  .sl-hero__grid{
    grid-template-columns:1fr;
    min-height:0;
    padding-inline:0!important;
  }
  .sl-hero__copy{
    padding:7rem 1.25rem 3rem;
  }
  .sl-hero__copy::after{display:none;}
  .sl-hero__caption{margin-top:3rem;}
  .sl-hero__visual{
    min-height:0;
  }
  .sl-hero__visual img{
    min-height:0;
    aspect-ratio:4/3;
  }
  .sl-decision-heading{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .sl-decision-rail{
    grid-template-columns:repeat(3,minmax(13rem,1fr));
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .sl-materials-layout{
    grid-template-columns:1fr;
  }
  .sl-materials-intro{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem 2rem;
  }
  .sl-materials-intro h2{grid-row:1/4;}
  .sl-material-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sl-material-card:nth-child(3n+1){transform:none;}
  .sl-record-stage{
    grid-template-columns:1fr;
  }
  .sl-record-gallery,
  .sl-record-info,
  .sl-record-process{
    grid-column:1;
    border-right:0;
  }
  .sl-record-gallery{
    border-bottom:1px solid var(--sl-rule);
  }
  .sl-record-info{
    border-bottom:1px solid var(--sl-rule);
  }
  .sl-record-process{
    display:block;
  }
  .sl-review-strip .shell{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .sl-page .sl-section{
    padding-block:4.5rem;
  }
  .sl-page .sl-hero h1{
    font-size:clamp(4.2rem,22vw,6.2rem);
  }
  .sl-decision-heading h2{
    font-size:clamp(3.6rem,17vw,5rem);
  }
  .sl-decision-rail{
    grid-template-columns:repeat(9,15rem);
  }
  .sl-decision-rail button{
    min-height:12rem;
  }
  .sl-materials-intro{
    grid-template-columns:1fr;
  }
  .sl-materials-intro h2{grid-row:auto;}
  .sl-material-strip{
    grid-template-columns:1fr;
  }
  .sl-material-card{
    grid-template-rows:minmax(18rem,86vw) auto auto;
  }
  .sl-record-gallery{
    padding-right:0;
  }
  .sl-compare-shell{
    grid-template-columns:repeat(4,14rem);
  }
}

/* ORVIA: readable editorial measures, shared outer rails. */
.sl-page { --sl-shell-max:1320px; }
.sl-page .shell:not(.sl-hero__grid) { padding-inline:var(--hdc-site-gutter); }
.sl-page .sl-decision-heading h2, .sl-page #sl-materials-title { max-width:16ch; font-size:clamp(2.5rem,4.4vw,4.5rem); line-height:1.04; }