/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle · copy: verbatim
 * paper: reference light · accent: source blue and gold · display: Playfair Display · body: Montserrat · hero: kept · nav: kept · footer: kept · signature: Ky Hoa aerial perspective
 * posture: Committed · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, reference layout retained at user request */
/* Hallmark · waive 59 · dense Long Document, section surfaces separate factual project content · Kỳ Hòa source layout is explicitly requested */
/* Hallmark · waive 78 · Long Document, small inline section heads match project reference · Kỳ Hòa reference uses small headings for its planning document */
@import url('./fonts.css');
@import url('./tokens.css');
@import url('./base.css');
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px}
body{overflow-x:clip;margin:0;font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--color-ink);background:var(--color-paper);padding-bottom:var(--space-2xl)}
*{box-sizing:border-box}
a{color:var(--color-accent);text-decoration:none;text-underline-offset:4px}
a:hover{text-decoration:underline}
button,input,select{font:inherit}
button,a,input,select,summary{touch-action:manipulation}
:is(a,button,input,select,summary):focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
:is(a,button):active{opacity:.78}
::selection{background:var(--color-gold);color:var(--color-navy)}
html{scrollbar-color:var(--color-muted) var(--color-paper-2)}
input{caret-color:var(--color-accent)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:860px}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.3;overflow-wrap:break-word;min-width:0;text-wrap:balance;color:var(--color-ink)}
h1{font-size:36px;margin:0 0 var(--space-sm)}
h2{font-size:30px;margin:0 0 var(--space-lg)}
h3{font-size:19px;margin:0 0 var(--space-md);font-weight:500}
p{margin:0 0 var(--space-md);text-wrap:pretty}
.section{padding-block:var(--space-2xl);scroll-margin-top:var(--space-lg)}
.section-alt{background:var(--color-paper-2)}
.section p{max-width:75ch}
.site-header{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--color-navy);border-bottom:3px solid var(--color-gold)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:80px}
.logo{display:flex;flex-direction:column;gap:var(--space-2xs);color:var(--color-paper);flex-shrink:0}
.logo:hover{text-decoration:none}
.logo-name{font-family:var(--font-display);font-size:29px;font-weight:700;line-height:1.1;color:var(--color-gold)}
.logo-domain{font-size:12px;color:var(--color-paper)}
#mainNav{display:flex;align-items:center;gap:var(--space-lg)}
#mainNav a{font-size:14px;font-weight:500;color:var(--color-paper);white-space:nowrap}
#mainNav a:hover{color:var(--color-gold)}
.site-header :is(a,button):focus-visible,.site-footer a:focus-visible,.magnet-box :is(a,button,input,select):focus-visible{outline-color:var(--color-focus-dark)}
.nav-toggle{display:none;background:transparent;color:var(--color-paper);border:1px solid var(--color-light-rule);padding:var(--space-xs) var(--space-sm);border-radius:6px;font-size:24px;line-height:1;cursor:pointer}
.project-hero{padding:var(--space-lg) 0 var(--space-xl);background:var(--color-paper-2)}
.breadcrumb{font-size:13px;color:var(--color-muted);margin-bottom:var(--space-lg)}
.project-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-lg);align-items:stretch}
.project-cover{margin:0;position:relative;border-radius:14px;overflow:clip;min-height:390px;background:var(--color-navy)}
.project-cover img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.project-cover figcaption{position:absolute;bottom:0;left:0;right:0;color:var(--color-paper);background:var(--color-overlay);font-size:12px;line-height:1.5;padding:var(--space-sm) var(--space-md)}
.project-summary{padding:var(--space-xs) 0}
.project-summary>p{font-size:15px;line-height:1.6}
.spec-list{margin:var(--space-lg) 0}
.spec-list>div{display:flex;gap:var(--space-md);padding:var(--space-xs) 0;border-bottom:1px dashed var(--color-rule)}
.spec-list dt{flex:0 0 104px;font-size:13px;color:var(--color-muted)}
.spec-list dd{margin:0;font-size:14px;min-width:0;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--color-accent);color:var(--color-accent-ink);border:1px solid var(--color-accent);border-radius:10px;font-size:15px;font-weight:500;padding:var(--space-sm) var(--space-lg);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-micro) ease,transform var(--dur-micro) ease}
.btn:hover{background:var(--color-navy);border-color:var(--color-navy);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress}
.secondary-link{display:inline-block;font-size:14px;margin-left:var(--space-md);white-space:nowrap}
.contact-strip{background:var(--color-navy);color:var(--color-paper)}
.strip-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-md)}
.strip-inner p{margin:0;font-size:14px}
.strip-inner a{color:var(--color-gold);font-weight:500;font-size:14px;white-space:nowrap}
.note,.source{font-size:13px;color:var(--color-muted)}
.table-wrap{overflow-x:auto;margin-block:var(--space-lg);border:1px solid var(--color-rule);border-radius:10px}
table{width:100%;border-collapse:collapse;text-align:left}
caption{text-align:left;font-size:13px;color:var(--color-muted);padding:var(--space-md);background:var(--color-paper-2)}
th,td{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--color-rule);font-size:14px}
th{font-weight:500;width:50%}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-lg)}
.gallery-grid figure{margin:0;min-width:0}
.gallery-grid figure:first-child{grid-column:span 2}
.gallery-open{display:block;border-radius:10px;overflow:clip}
.gallery-grid img{display:block;width:100%;height:230px;object-fit:cover;background:var(--color-paper-3)}
.gallery-grid figure:first-child img{object-fit:cover}
.gallery-grid figure:nth-child(2) img,.gallery-grid figure:nth-child(3) img{object-fit:contain}
figcaption{font-size:13px;color:var(--color-muted);line-height:1.5;margin-top:var(--space-xs)}
.location-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl);align-items:center}
.location-grid>img{width:100%;height:auto;border-radius:10px}
.location-grid ul{padding-left:var(--space-lg);font-size:14px;margin-block:var(--space-md)}
.location-grid li+li{margin-top:var(--space-xs)}
.text-link{font-size:14px;text-decoration:underline}
.timeline{margin-top:var(--space-lg)}
.timeline>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--space-lg);border-top:1px solid var(--color-rule);padding-block:var(--space-lg)}
.timeline strong{font-size:14px;color:var(--color-accent)}
.timeline p{font-size:14px;margin:0}
details{border-bottom:1px solid var(--color-rule);padding-block:var(--space-md)}
summary{font-size:15px;font-weight:500;cursor:pointer;padding:var(--space-xs) 0}
details p{font-size:14px;margin:var(--space-sm) 0 var(--space-xs)}
.plan-image{width:100%;height:auto;display:block;margin-top:var(--space-md)}
.magnet-box{background:var(--color-accent);color:var(--color-paper);border:3px solid var(--color-gold);border-radius:18px;padding:var(--space-xl)}
.magnet-box h2,.magnet-box h3,.magnet-box a{color:var(--color-paper)}
.magnet-box>p{text-align:center;max-width:none;overflow-wrap:anywhere}
.magnet-box h2{text-align:center}
.contact-number{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4}
.contact-actions{display:flex;justify-content:center;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-lg)}
.magnet-box .btn{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-accent)}
.magnet-box .btn:hover{background:var(--color-paper-3)}
.email-link{font-size:14px;text-decoration:underline}
form{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-light-rule)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:14px;margin-bottom:var(--space-md)}
input,select{width:100%;min-width:0;min-height:48px;border:1px solid var(--color-rule);border-radius:8px;background:var(--color-paper);color:var(--color-ink);padding:var(--space-sm);font-size:15px}
input[aria-invalid=true]{outline:2px solid var(--color-error)}
.form-note{font-size:12px;line-height:1.5;margin:var(--space-md) 0 0;min-height:3em}
.site-footer{background:var(--color-navy);color:var(--color-paper);padding:var(--space-xl) 0 var(--space-lg)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.3fr);gap:var(--space-lg);margin-bottom:var(--space-lg)}
.footer-title{font-family:var(--font-display);font-size:30px;color:var(--color-gold);margin-bottom:var(--space-xs)}
.site-footer h3{font-family:var(--font-body);font-size:16px;color:var(--color-paper);margin:0 0 var(--space-sm)}
.site-footer a{color:var(--color-paper);overflow-wrap:anywhere}
.footer-grid a{display:block;font-size:14px;margin-block:var(--space-xs)}
.footer-grid p{font-size:14px}
.footer-grid .footer-title{font-size:30px}
.disclaimer{padding-top:var(--space-lg);border-top:1px solid var(--color-light-rule);font-size:12px;line-height:1.7}
.credits,.copyright{font-size:12px;line-height:1.7}
.credits a{text-decoration:underline}
.quick-contact{display:flex;position:fixed;bottom:var(--space-md);right:var(--space-md);z-index:var(--z-sticky);border:1px solid var(--color-gold);border-radius:10px;overflow:clip;background:var(--color-navy)}
.quick-contact a{color:var(--color-paper);padding:var(--space-sm) var(--space-md);font-size:13px;font-weight:500;white-space:nowrap}
.quick-contact a+a{border-left:1px solid var(--color-light-rule)}
.quick-contact a:focus-visible{outline-offset:-4px;outline-color:var(--color-gold)}
.skip{position:absolute;left:var(--space-sm);top:-100px;z-index:var(--z-toast);background:var(--color-paper);padding:var(--space-sm);color:var(--color-accent)}
.skip:focus-visible{top:var(--space-sm)}
dialog{max-width:min(1200px,96%);max-height:94dvh;border:0;background:var(--color-paper);padding:var(--space-xl) var(--space-md) var(--space-md);border-radius:10px;color:var(--color-ink)}
dialog::backdrop{background:var(--color-overlay)}
dialog img{display:block;max-width:100%;max-height:75dvh;object-fit:contain;margin-inline:auto}
dialog p{font-size:13px;margin:var(--space-sm) 0 0}
.dialog-close{position:absolute;right:var(--space-xs);top:var(--space-2xs);width:40px;min-height:36px;border:0;background:transparent;color:var(--color-ink);font-size:28px;cursor:pointer}
@media(max-width:820px){
 .header-inner{min-height:72px}.nav-toggle{display:block}#mainNav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-navy);padding:var(--space-md) var(--space-lg);flex-direction:column;align-items:stretch;gap:0}#mainNav.open{display:flex}#mainNav a{padding:var(--space-sm) 0}
 .project-hero-grid{grid-template-columns:minmax(0,1fr)}.project-cover{min-height:0;aspect-ratio:16/10}.project-summary{padding:var(--space-xs) 0}h1{font-size:32px}h2{font-size:27px}
 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-grid figure:first-child{grid-column:span 2}.gallery-grid figure:last-child{grid-column:span 2}.gallery-grid img{height:220px}.gallery-grid figure:first-child img,.gallery-grid figure:last-child img{height:auto;aspect-ratio:16/9}
 .location-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.footer-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.strip-inner{flex-direction:column;gap:var(--space-xs);align-items:flex-start}.section{padding-block:var(--space-xl)}
 .magnet-box{padding:var(--space-lg)}.contact-number{font-size:30px}.magnet-box>p>a{font-size:14px}.magnet-box>.contact-number>a{font-size:30px;font-variant-numeric:tabular-nums}.timeline>div{grid-template-columns:110px minmax(0,1fr);gap:var(--space-md)}
}
@media(max-width:420px){.form-row{grid-template-columns:minmax(0,1fr);gap:0}.secondary-link{margin:var(--space-md) 0 0 var(--space-sm)}.gallery-grid{grid-template-columns:minmax(0,1fr)}.gallery-grid figure:first-child,.gallery-grid figure:last-child{grid-column:auto}.gallery-grid img{height:auto;max-height:280px;object-fit:contain}.contact-actions{flex-direction:column;gap:var(--space-md)}.quick-contact{left:var(--space-sm);right:var(--space-sm);bottom:var(--space-xs)}.quick-contact a{flex:1;text-align:center;padding:var(--space-sm) var(--space-xs)}th,td{padding:var(--space-sm);font-size:13px}.timeline>div{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.contact-number a{font-variant-numeric:tabular-nums}

.contact-strip a:focus-visible{outline-color:var(--color-focus-dark)}