/* ============================================================================
   VILLIZ — INTERIOR PAGE LAYER
   Extends assets/site.css for the four editorial pages: studio, creative,
   intelligence, technology. Same tokens, same type, same rhythm — no new
   colours, no new fonts. No hero video on interior pages: the hero is
   typographic and keeps the front door's 860px floor.
   Every stroke here is a hairline (1px). Nothing is an image that claims to be
   a screenshot or a client photograph.
   ========================================================================== */

/* current page in the shared nav */
.nav-links a.nav-current{
  color:var(--bone);
  border-bottom:1px solid var(--ember);
  padding-bottom:3px;
}

/* ---------- typographic hero (interior) ---------- */
.hero--page .hero-inner{
  padding-top:clamp(74px, 9vw, 128px);
  padding-bottom:clamp(74px, 9vw, 128px);
}
.hero--page h1{
  max-width:20ch;
  font-size:clamp(52px, 7vw, 102px);
  line-height:1.0;
  margin-top:clamp(26px, 3vw, 38px);
}
.hero-lead{
  max-width:54ch;
  margin-top:clamp(24px, 2.6vw, 34px);
  font-size:clamp(16px, 1.18vw, 18px);
  font-weight:300;
  line-height:1.72;
  color:var(--muted);
}
.hero-ghost{
  position:absolute;
  right:clamp(-6px, 1vw, 34px);
  bottom:clamp(0px, 1.2vw, 24px);
  z-index:1;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(150px, 26vw, 400px);
  line-height:0.68;
  letter-spacing:-0.05em;
  color:rgba(242,239,233,0.05);
  pointer-events:none;
  user-select:none;
}
@media (max-width:640px){
  .hero--page h1{font-size:clamp(36px, 10.2vw, 50px);}
  .hero-lead{font-size:16px;}
  .hero-ghost{font-size:clamp(104px, 32vw, 170px);bottom:6px;}
}

/* ---------- section sheet: ember hairline above, cropped ghost numeral, then the head ---------- */
.section--sheet{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(194,87,29,0.22);
}
.section--sheet > .wrap{position:relative;z-index:1;}
.sheet-mark{
  position:absolute;
  top:0;
  left:calc(var(--pad) - 0.05em);
  transform:translateY(-44%);
  z-index:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(150px, 19vw, 280px);
  line-height:0.7;
  letter-spacing:-0.04em;
  color:rgba(242,239,233,0.055);
  pointer-events:none;
  user-select:none;
}
@media (max-width:860px){
  .sheet-mark{font-size:clamp(120px, 30vw, 190px);transform:translateY(-46%);}
}
.section--sheet .section-head{padding-bottom:24px;}

/* ---------- prose ---------- */
.sec-body{margin-top:clamp(28px, 3.2vw, 46px);}
.prose{max-width:72ch;}
.prose p{
  font-size:clamp(16px, 1.1vw, 18px);
  font-weight:300;
  line-height:1.76;
  color:var(--muted);
  overflow-wrap:break-word;
}
.prose p + p{margin-top:1.05em;}
.prose .lede{
  font-size:clamp(19px, 1.5vw, 23px);
  line-height:1.62;
  color:rgba(242,239,233,0.84);
}
.sub{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(21px, 1.85vw, 28px);
  line-height:1.2;
  letter-spacing:-0.005em;
  margin-top:clamp(30px, 3.2vw, 44px);
  margin-bottom:12px;
}

/* ---------- two-column layouts ---------- */
.split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px, 3.4vw, 64px);
  align-items:start;
  margin-top:clamp(28px, 3.2vw, 46px);
}
.split--shop{grid-template-columns:minmax(0, 390px) minmax(0, 1fr);}
.split--card{grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);}
@media (max-width:1040px){
  .split, .split--shop, .split--card{grid-template-columns:1fr;}
}

/* ---------- three panels (the forces) ---------- */
.panels{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 20px);
  margin-top:clamp(28px, 3.4vw, 44px);
}
.panel{
  display:flex;
  flex-direction:column;
  min-height:clamp(230px, 23vw, 310px);
  padding:clamp(22px, 2.6vw, 36px);
  background:var(--ink-2);
  border:1px solid var(--hair);
}
.panel-num{
  font-family:var(--serif);
  font-weight:400;
  font-size:96px;
  line-height:0.78;
  letter-spacing:-0.03em;
  color:rgba(242,239,233,0.14);
}
.panel-label{
  margin-top:auto;
  padding-top:clamp(28px, 3.4vw, 48px);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--bone);
}
.panel-def{
  margin-top:12px;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
  max-width:34ch;
}
@media (max-width:860px){
  .panels{grid-template-columns:1fr;}
  .panel{min-height:0;}
  .panel-num{font-size:72px;}
}

/* ---------- typographic plates (used instead of photography we do not hold) ---------- */
.plate{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  margin:0;
  padding:clamp(14px, 1.6vw, 22px);
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--hair);
  background:
    radial-gradient(ellipse 70% 62% at 26% 16%, rgba(194,87,29,0.11), transparent 66%),
    var(--ink-2);
}
.plate--wide{aspect-ratio:16 / 9;}
.plate--square{aspect-ratio:1 / 1;}
.plate--film{aspect-ratio:2.39 / 1;}
.plate-tag{
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.4;
}
.plate-tag.live{color:var(--ember);}
.plate-tag.chosen{color:var(--ember);}
.plate-name{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(20px, 1.9vw, 27px);
  line-height:1.1;
  letter-spacing:-0.005em;
  color:var(--bone);
}
.plate-note{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(242,239,233,0.42);
  line-height:1.5;
}
.plate--film .plate-name{font-size:clamp(15px, 1.35vw, 19px);}
.plate--film .plate-note{font-size:10px;}
.plate.is-chosen{border-color:rgba(194,87,29,0.5);}
.plate--empty{
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  border:1px solid var(--hair);
  background:transparent;
  aspect-ratio:1 / 1;
}
.plate--empty span{
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1.9;
  color:rgba(242,239,233,0.40);
  max-width:16ch;
}

/* frame pair, boards, gallery, film strip */
.frames{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(12px, 1.6vw, 22px);margin-top:clamp(28px, 3.2vw, 44px);}
.boards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(12px, 1.5vw, 22px);margin-bottom:clamp(30px, 3.4vw, 46px);}
.gallery{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(10px, 1.3vw, 18px);margin-top:clamp(28px, 3.2vw, 44px);}
.strip{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(10px, 1.3vw, 18px);margin-top:clamp(28px, 3.2vw, 44px);}
@media (max-width:860px){
  .frames{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2, minmax(0,1fr));}
  .strip{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .boards{grid-template-columns:1fr;}
  .strip{grid-template-columns:1fr;}
  .gallery{gap:10px;}
  .plate--film{aspect-ratio:2.1 / 1;}
}

/* inline link row */
.page-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 30px;
  margin-top:clamp(22px, 2.6vw, 34px);
}

/* scrubber motif under the film strip */
.scrubber{position:relative;height:20px;margin-top:14px;border-top:1px solid var(--hair);}
.scrubber::before{content:"";position:absolute;left:0;top:-1px;width:34%;height:1px;background:var(--ember);}
.scrubber::after{
  content:"";
  position:absolute;
  left:34%;
  top:50%;
  width:9px;
  height:9px;
  transform:translate(-50%, -50%);
  border:1px solid var(--ember);
  background:var(--ink);
}

/* ---------- the client shop phone mock (390) ---------- */
.shop-standard{margin-top:clamp(30px, 3.6vw, 48px);}
.phone{
  width:100%;
  max-width:390px;
  margin:0 auto;
  padding:12px;
  border:1px solid rgba(242,239,233,0.22);
  border-radius:26px;
  background:var(--ink-2);
}
.phone-screen{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--ink);}
.phone-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid var(--hair-soft);
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.4;
}
.phone-body{padding:13px;}
.phone-goods{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;}
.phone-good{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  aspect-ratio:1 / 1;
  padding:8px;
  border:1px solid var(--hair-soft);
  background:rgba(242,239,233,0.022);
}
.phone-good span{
  font-size:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(242,239,233,0.34);
  line-height:1.5;
  overflow-wrap:break-word;
}
.phone-good b{
  font-weight:400;
  font-size:11px;
  letter-spacing:0.04em;
  color:rgba(242,239,233,0.66);
}
.wa-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  margin-top:10px;
  background:var(--ember);
  color:var(--ink);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:1px;
}
.wa-btn::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(10,10,11,0.75);flex-shrink:0;}
.slot-row{display:flex;gap:8px;margin-top:8px;}
.slot{
  flex:1 1 0;
  min-width:0;
  padding:9px 4px;
  border:1px solid var(--hair-soft);
  text-align:center;
  font-size:8px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.powered{
  padding:10px 13px;
  border-top:1px solid var(--hair-soft);
  text-align:center;
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(242,239,233,0.60);
}
.shop-caption{
  margin-top:16px;
  text-align:center;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- hairline row lists ---------- */
.rows{margin-top:clamp(24px, 2.8vw, 38px);border-top:1px solid var(--hair-soft);}
.row{
  display:grid;
  grid-template-columns:clamp(96px, 11vw, 148px) minmax(0,1fr);
  gap:clamp(12px, 2vw, 34px);
  align-items:baseline;
  padding:clamp(15px, 1.7vw, 22px) 0;
  border-bottom:1px solid var(--hair-soft);
}
.row-k{
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ember);
  line-height:1.6;
}
.row-v{font-size:15px;line-height:1.62;color:var(--muted);}
@media (max-width:640px){
  .row{grid-template-columns:1fr;row-gap:7px;}
}

/* ---------- hairline node diagrams ---------- */
.nodes{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(10px, 1.4vw, 22px);
  margin-top:clamp(28px, 3.2vw, 44px);
}
.nodes--3{grid-template-columns:repeat(3, minmax(0,1fr));}
.node{
  position:relative;
  padding:clamp(14px, 1.5vw, 20px);
  border:1px solid var(--hair);
  text-align:center;
}
.node::after{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  width:clamp(10px, 1.4vw, 22px);
  height:1px;
  background:var(--hair);
}
.node:last-child::after{display:none;}
.node-k{
  display:block;
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.6;
}
.node-v{
  display:block;
  margin-top:8px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(15px, 1.35vw, 19px);
  line-height:1.25;
  color:var(--bone);
}
.node.hot{border-color:rgba(194,87,29,0.55);}
.node.hot .node-k{color:var(--ember);}
@media (max-width:860px){
  .nodes, .nodes--3{grid-template-columns:1fr;}
  .node{text-align:left;}
  .node::after{top:100%;left:50%;width:1px;height:14px;transform:translateX(-50%);}
}

/* rollback arrow under the hosting path */
.backline{position:relative;margin-top:16px;padding-bottom:28px;}
.backline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  height:1px;
  background:linear-gradient(90deg, rgba(194,87,29,0.8), rgba(194,87,29,0.06));
}
.backline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:21px;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  border-left:1px solid rgba(194,87,29,0.8);
  border-bottom:1px solid rgba(194,87,29,0.8);
}
.backline-label{
  display:block;
  padding-top:4px;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(194,87,29,0.85);
}

/* ---------- pull quote on bone ---------- */
.pull{
  background:var(--bone);
  color:var(--ink);
  padding-top:clamp(56px, 7vw, 104px);
  padding-bottom:clamp(56px, 7vw, 104px);
}
.pull p{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(25px, 3.3vw, 44px);
  line-height:1.22;
  letter-spacing:-0.012em;
  max-width:32ch;
}

/* ---------- sample alert (format example) ---------- */
.alert{
  margin-top:clamp(24px, 2.8vw, 36px);
  padding:clamp(16px, 1.8vw, 24px);
  border:1px solid var(--hair);
  background:var(--ink-2);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.9;
  overflow-wrap:break-word;
}
.alert-note{
  display:block;
  margin-top:10px;
  font-size:9px;
  letter-spacing:0.2em;
  color:rgba(242,239,233,0.38);
}

/* ---------- bone inversion (the honesty beat) ---------- */
.section--bone{background:var(--bone);color:var(--ink);}
.section--bone .section-head{border-bottom-color:rgba(10,10,11,0.16);}
.section--bone .section-title h2{color:var(--ink);}
.section--bone .section-num{color:var(--ember);}
.section--bone .section-aside{color:rgba(10,10,11,0.5);}
.section--bone .sheet-mark{color:rgba(10,10,11,0.11);}
.section--bone .prose p{color:rgba(10,10,11,0.76);}
.section--bone .prose .lede{color:rgba(10,10,11,0.86);}
.section--bone .prose{max-width:64ch;}
.section--bone .prose p{line-height:1.85;}
.section--bone .sub{color:var(--ink);}

/* ---------- system cards ---------- */
.sys-card{
  padding:clamp(22px, 2.6vw, 36px);
  border:1px solid var(--hair);
  background:var(--ink-2);
}
.sys-kicker{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ember);}
.sys-name{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px, 2.6vw, 38px);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-top:10px;
}
.sys-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--bone);
}
.sys-status::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex-shrink:0;}
.sys-rows{list-style:none;margin:clamp(18px, 2.2vw, 28px) 0 0;padding:0;}
.sys-rows li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding:10px 0;
  border-top:1px solid var(--hair-soft);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.sys-rows li span:first-child{
  flex:0 0 auto;
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--faint);
}
.sys-rows li span:last-child{min-width:0;text-align:right;}

/* ---------- closing CTA band ---------- */
.contact h2 em{font-style:italic;color:var(--ember);}
.cta-quiet{
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--faint);
  border-bottom:1px solid rgba(242,239,233,0.28);
  padding-bottom:4px;
  transition:color .4s ease, border-color .4s ease;
}
.cta-quiet:hover{color:var(--bone);border-bottom-color:var(--ember);}

/* ---------- footer sitemap current page ---------- */
.sitemap-current{color:var(--bone);}