/* DO.HOUSE V19 — editorial authority, case-study structure, and quieter UI. */
:root{
  --v19-paper:#f2f0ea;
  --v19-ink:#102338;
  --v19-navy:#071c31;
  --v19-accent:#f5a400;
  --v19-line:rgba(16,35,56,.20);
}

.case-study-mark-v19{
  display:inline-block;
  margin:0 0 15px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

.case-logic-v19{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--v19-paper);
  color:var(--v19-ink);
  border-bottom:1px solid var(--v19-line);
}
.case-logic-v19 article{
  min-height:260px;
  padding:48px clamp(24px,3.2vw,60px) 52px;
  border-right:1px solid var(--v19-line);
}
.case-logic-v19 article:last-child{border-right:0}
.case-logic-v19 span,
.studio-proof-note-v19 span,
.experience-card-v19 .eyebrow{
  display:block;
  margin-bottom:28px;
  color:#6e7883;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}
.case-logic-v19 p{
  max-width:37ch;
  margin:0;
  font-size:clamp(18px,1.5vw,25px);
  line-height:1.38;
  letter-spacing:-.018em;
}

.studio-proof-v19{
  padding:105px 4vw;
  color:#fff;
  background:#0b2945;
}
.studio-proof-intro-v19{
  display:grid;
  grid-template-columns:minmax(120px,.45fr) 1.55fr;
  gap:4vw;
  align-items:start;
  padding-bottom:70px;
}
.studio-proof-intro-v19 h2{
  margin:0;
  font-size:clamp(42px,6vw,94px);
  font-weight:450;
  line-height:.98;
  letter-spacing:-.055em;
}
.studio-proof-stats-v19{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(255,255,255,.24);
}
.studio-proof-stats-v19 article{
  min-height:245px;
  padding:34px 3vw 38px 0;
  border-right:1px solid rgba(255,255,255,.24);
}
.studio-proof-stats-v19 article:not(:first-child){padding-left:3vw}
.studio-proof-stats-v19 article:last-child{border-right:0}
.studio-proof-stats-v19 strong{
  display:block;
  margin-bottom:50px;
  color:var(--v19-accent);
  font-size:clamp(68px,8vw,132px);
  font-weight:400;
  line-height:.8;
  letter-spacing:-.07em;
}
.studio-proof-stats-v19 span{
  display:block;
  max-width:30ch;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.12em;
}
.studio-proof-note-v19{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  padding-top:34px;
}
.studio-proof-note-v19 p{
  margin:0;
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.5;
}
.studio-proof-note-v19 span{margin-bottom:9px;color:rgba(255,255,255,.55)}
.studio-proof-note-v19 a{
  flex:none;
  padding-bottom:7px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.55);
  font-size:11px;
  letter-spacing:.11em;
}

.leadership-v19{
  padding:105px 4vw 120px;
  color:var(--v19-ink);
  background:var(--v19-paper);
}
.leadership-grid-v19{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:7vw;
  padding-top:68px;
}
.founder-card-v19 h2{
  margin:0 0 32px;
  font-size:clamp(54px,7vw,112px);
  font-weight:450;
  line-height:.92;
  letter-spacing:-.06em;
}
.founder-card-v19>p:last-child{
  max-width:39ch;
  margin:0;
  font-size:clamp(20px,1.8vw,29px);
  line-height:1.42;
}
.experience-card-v19 ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--v19-line)}
.experience-card-v19 li{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--v19-line);
  font-size:clamp(18px,1.5vw,25px);
}
.experience-card-v19 li span{color:#7c848d;font-size:11px;letter-spacing:.1em}
.experience-note-v19{max-width:43ch;margin:25px 0 0;color:#68727d;font-size:13px;line-height:1.55}

.project-card-v16 figure{position:relative}
.project-state-v19{
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  padding:8px 10px 7px;
  color:#fff;
  background:rgba(7,28,49,.86);
  backdrop-filter:blur(8px);
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
}
.project-state-v19.state-design{background:rgba(90,78,59,.88)}
.project-state-v19.state-in-progress{background:rgba(191,113,0,.9)}

/* One calm contact control. The two social destinations remain available inside it. */
.social-dock-v15{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
.social-dock-v15 .social-desktop{display:none!important}
.social-dock-v15 .social-launcher{
  display:block;
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  background:rgba(7,28,49,.94);
  box-shadow:0 14px 34px rgba(0,0,0,.2);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.social-dock-v15 .social-mobile-menu{
  position:absolute;
  right:0;
  bottom:58px;
  min-width:230px;
  padding:10px;
  color:#fff;
  background:var(--v19-navy);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.social-dock-v15 .social-mobile-menu:not([hidden]){display:flex;flex-direction:column}
.social-dock-v15 .social-mobile-menu a{
  padding:13px 10px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.17);
  font-size:11px;
  letter-spacing:.08em;
}
.social-dock-v15 .social-mobile-menu a:last-child{border-bottom:0}

/* Hero navigation stays functional but yields priority to the work itself. */
.home-page .hero-options{opacity:.72}
.home-page .hero-options:hover,
.home-page .hero-options:focus-within{opacity:1}
.home-page .hero-copy h1{max-width:8ch}

/* Tam Ky uses a square architectural cover. Keep the complete building visible
   instead of forcing the image through the global full-bleed cover crop. The
   previous version repeated the image as a CSS background, which created a
   duplicate roof band on narrow screens. */
body[data-project-slug="biet-thu-tam-ky"] .detail-hero-v16{
  background:var(--v19-navy);
}
body[data-project-slug="biet-thu-tam-ky"] .detail-hero-v16>img{
  object-fit:contain;
  object-position:center center;
  transform:none;
}

/* Tam Ky case-study sequence */
.case-stage-v20{
  padding:clamp(82px,8vw,132px) clamp(20px,4vw,72px);
  color:var(--v19-navy);
  background:#f4f1eb;
  border-top:1px solid rgba(7,28,49,.18);
}
.case-stage-v20.drawings-v20{background:#ebe7df}
.case-stage-head-v20{
  display:grid;
  grid-template-columns:minmax(170px,.38fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);
  align-items:start;
  margin:0 0 clamp(42px,6vw,86px);
}
.case-stage-index-v20{
  margin:5px 0 0;
  color:#b26f1c;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.case-stage-head-v20 h2{
  max-width:980px;
  margin:0 0 24px;
  font-size:clamp(39px,5.6vw,78px);
  line-height:.98;
  letter-spacing:-.052em;
}
.case-stage-head-v20 div>p{
  max-width:790px;
  margin:0;
  color:rgba(7,28,49,.78);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.62;
}
.case-stage-group-v20+.case-stage-group-v20{margin-top:clamp(64px,8vw,112px)}
.case-stage-subhead-v20{
  display:grid;
  grid-template-columns:minmax(170px,.28fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
  max-width:1600px;
  margin:0 auto 30px;
  padding-top:20px;
  border-top:1px solid rgba(7,28,49,.18);
}
.case-stage-subhead-v20 p{
  margin:0;
  color:var(--v19-gold);
  font-size:11px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.17em;
}
.case-stage-subhead-v20 h3{
  max-width:900px;
  margin:0;
  font-size:clamp(27px,3.4vw,48px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
}
.case-stage-grid-v20{
  columns:3 300px;
  column-gap:14px;
}
.case-stage-grid-v20.two-column-v20{columns:2 430px}
.case-stage-grid-v20.drawing-sequence-v20{
  max-width:1600px;
  margin-inline:auto;
  columns:1;
}
.case-stage-grid-v20.drawing-sequence-v20 figure{margin-bottom:24px}
.case-stage-grid-v20.sketch-sequence-v20{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:1600px;
  margin-inline:auto;
  columns:auto;
}
.case-stage-grid-v20.sketch-sequence-v20 figure{margin:0}
.case-stage-grid-v20 figure{
  display:inline-block;
  width:100%;
  margin:0 0 14px;
  break-inside:avoid;
  background:#fff;
  vertical-align:top;
}
.case-stage-grid-v20 img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
}
.case-stage-grid-v20 figcaption{
  padding:13px 14px 15px;
  color:rgba(7,28,49,.68);
  border-top:1px solid rgba(7,28,49,.1);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.case-stage-v20.drawings-v20 .case-stage-grid-v20 figure{
  border:1px solid rgba(7,28,49,.12);
}
.case-stage-v20.drawings-v20 .case-stage-grid-v20 img{
  object-fit:contain;
}
.case-stage-v20.construction-v20{
  color:#fff;
  background:var(--v19-navy);
  border-color:rgba(255,255,255,.16);
}
.case-stage-v20.construction-v20 .case-stage-head-v20 div>p{
  color:rgba(255,255,255,.72);
}
.case-stage-v20.construction-v20 .case-stage-grid-v20 figure{
  background:#0d2941;
}
.case-stage-v20.construction-v20 .case-stage-grid-v20 figcaption{
  color:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.14);
}
.case-stage-v20.completed-supplement-v20{
  padding-top:0;
  border-top:0;
}

@media(max-width:900px){
  .case-logic-v19{grid-template-columns:1fr}
  .case-logic-v19 article{min-height:0;border-right:0;border-bottom:1px solid var(--v19-line)}
  .case-logic-v19 article:last-child{border-bottom:0}
  .studio-proof-v19,.leadership-v19{padding:78px 20px 86px}
  .studio-proof-intro-v19,.leadership-grid-v19{grid-template-columns:1fr;gap:48px}
  .studio-proof-stats-v19{grid-template-columns:1fr}
  .studio-proof-stats-v19 article,
  .studio-proof-stats-v19 article:not(:first-child){
    min-height:0;
    padding:30px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.24);
  }
  .studio-proof-stats-v19 article:last-child{border-bottom:0}
  .studio-proof-stats-v19 strong{margin-bottom:20px;font-size:72px}
  .studio-proof-note-v19{display:block}
  .studio-proof-note-v19 a{display:inline-block;margin-top:28px}
  .project-state-v19{top:10px;left:10px}
  .case-stage-head-v20{grid-template-columns:1fr;gap:22px}
  .case-stage-subhead-v20{grid-template-columns:1fr;gap:12px}
  .case-stage-grid-v20,
  .case-stage-grid-v20.two-column-v20{columns:2 280px}
  .case-stage-grid-v20.drawing-sequence-v20{columns:1}
  .case-stage-grid-v20.sketch-sequence-v20{grid-template-columns:1fr;columns:auto}
}

@media(max-width:540px){
  .case-logic-v19 article{padding:34px 18px 38px}
  .case-logic-v19 span{margin-bottom:18px}
  .case-logic-v19 p{font-size:18px}
  .studio-proof-intro-v19{padding-bottom:50px}
  .leadership-grid-v19{padding-top:48px}
  .social-dock-v15{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
  .case-stage-v20{padding:68px 18px 74px}
  .case-stage-head-v20{margin-bottom:36px}
  .case-stage-head-v20 h2{font-size:clamp(36px,10.7vw,48px)}
  .case-stage-head-v20 div>p{font-size:16px}
  .case-stage-grid-v20,
  .case-stage-grid-v20.two-column-v20{columns:1}
  .case-stage-grid-v20.drawing-sequence-v20{columns:1}
  .case-stage-grid-v20.sketch-sequence-v20{grid-template-columns:1fr;columns:auto}
  .case-stage-grid-v20 figure{margin-bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  .home-page .hero-options{opacity:1}
}