/* GEODOMAS Resort · polish v2 · editorial / destination-system layer · 2026-09-23 */
:root{
  --chapter-line:rgba(16,37,30,.16);
  --chapter-line-dark:rgba(255,255,255,.15);
}

/* A quieter editorial rhythm */
.section{position:relative}
.section[data-chapter]:after{
  content:"";position:absolute;left:50%;top:0;width:min(var(--max),calc(100% - 48px));height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--chapter-line) 12%,var(--chapter-line) 88%,transparent);
}
.section.dark[data-chapter]:after,.predraw[data-chapter]:after{background:linear-gradient(90deg,transparent,var(--chapter-line-dark) 12%,var(--chapter-line-dark) 88%,transparent)}
.section[data-chapter]>.wrap{isolation:isolate}
.section[data-chapter]>.wrap:before{
  content:attr(data-chapter);position:absolute;top:-54px;right:0;z-index:-1;
  color:rgba(16,37,30,.045);font:500 clamp(5rem,9vw,9rem)/.8 var(--serif);letter-spacing:-.08em;pointer-events:none;
}
.dark[data-chapter]>.wrap:before,.predraw[data-chapter]>.wrap:before{color:rgba(255,255,255,.035)}

/* Desktop chapter rail */
.chapter-rail{
  position:fixed;z-index:22;left:22px;top:50%;transform:translateY(-50%);display:grid;gap:13px;
  color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:.88;
}
.chapter-rail:before{content:"";position:absolute;left:6px;top:38px;bottom:7px;width:1px;background:currentColor;opacity:.22}
.chapter-current{display:grid;gap:2px;padding-left:0}
.chapter-current b{font-size:.62rem;letter-spacing:.18em}
.chapter-current span{max-width:88px;font-size:.57rem;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.chapter-dots{display:grid;gap:10px;padding-left:2px}
.chapter-dot{width:9px;height:9px;border:1px solid currentColor;border-radius:50%;opacity:.32;transition:opacity .25s,transform .25s,background .25s}
.chapter-dot.is-active{opacity:1;background:currentColor;transform:scale(1.18)}

/* Hero: make the opening feel like a cover, not a banner */
.hero .wrap{padding-bottom:16px}
.hero h1{max-width:8.9ch}
.hero p{max-width:610px}
.hero-scroll{
  position:absolute;z-index:3;left:50%;bottom:25px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  color:#f1eee7;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.74;
  transition:opacity .2s,transform .2s;
}
.hero-scroll:after{content:"↓";display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff55;border-radius:50%;font-size:.82rem}
.hero-scroll:hover{opacity:1;transform:translateX(-50%) translateY(2px)}

/* The opening statement should read like a manifesto */
.section-manifesto{background:linear-gradient(180deg,#fbf8f2 0%,#f7f4ed 100%)}
.section-manifesto .split{align-items:center}
.section-manifesto h2{position:relative;max-width:9.8ch}
.section-manifesto h2:after{content:"";display:block;width:70px;height:2px;margin-top:28px;background:var(--gold)}
.section-manifesto .lead{font-size:clamp(1.16rem,1.6vw,1.36rem);line-height:1.72}
.section-manifesto .facts{margin-top:48px}

/* Families: editorial asymmetry rather than four equal tiles */
.family-grid{grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:18px}
.family{grid-column:span 6;min-height:500px}
.family:nth-child(1){grid-column:span 7;min-height:560px}
.family:nth-child(2){grid-column:span 5;min-height:560px}
.family:nth-child(3){grid-column:span 5;min-height:470px}
.family:nth-child(4){grid-column:span 7;min-height:470px}
.family[data-card-index]:before,.archetype[data-card-index]:before{
  content:attr(data-card-index);position:absolute;z-index:3;top:20px;left:20px;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid #ffffff42;border-radius:50%;background:#07130f52;backdrop-filter:blur(8px);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.06em;
}
.family-content p{max-width:520px}

/* Archetype imagery gets a calmer cinematic crop */
.archetype.feature img{object-position:center 53%}
.archetype.feature-alt img{object-position:center 45%}
.archetype-note{padding:20px 2px 0}

/* Component system: make proven reference visually distinct */
.component-card{min-height:400px}
.component-card.is-realized{border-color:#caa469a8;box-shadow:0 0 0 1px #caa46926,0 30px 80px #0004}
.component-card.is-realized:before{
  content:"REALIZED REFERENCE";position:absolute;z-index:4;top:18px;right:18px;padding:7px 10px;border-radius:999px;
  background:#caa469;color:#07130f;font-size:.58rem;font-weight:950;letter-spacing:.12em;
}
.component-card.is-realized .component-copy .type{color:#ffe0a8}
.component-legend{position:relative}
.component-legend:after{content:"SYSTEM COMPOSITION";position:absolute;right:0;top:-24px;color:#81928a;font-size:.55rem;font-weight:900;letter-spacing:.16em}
.component-logic{background:radial-gradient(circle at 82% 16%,#caa46917,transparent 28%),linear-gradient(145deg,#1c4034,#0a1813)}

/* Flow: a system route, not three loose cards */
.flow{position:relative}
.flow:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,#caa46900,#caa46966 12%,#caa46966 88%,#caa46900)}
.flow-card{backdrop-filter:blur(10px)}
.flow-card h3{position:relative}

/* Infrastructure gets a proper continuous network spine */
.infra-map{position:relative;overflow:hidden}
.infra-map:before{content:"";position:absolute;left:68px;top:62px;bottom:62px;width:1px;background:linear-gradient(#caa469,#315a49 25%,#315a49 75%,#caa46933)}
.infra-row{position:relative;z-index:1}
.node{position:relative}
.node:after{content:"";position:absolute;inset:-5px;border:1px solid #315a4930;border-radius:50%}
.node.gold:after{border-color:#caa46955}

/* Scenarios: stronger primary/secondary hierarchy */
.scenario:first-child .scenario-copy{max-width:620px}
.scenario:first-child h3{font-size:clamp(2.2rem,3.5vw,3.5rem)}
.scenario:nth-child(n+2) .scenario-copy p{max-width:34ch}

/* Documents as an editorial checklist rather than one long list */
@media(min-width:1050px){
  .doclist{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start}
  .doc{grid-template-columns:42px 1fr;min-height:126px;padding:20px 0}
  .doc:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
  .doc:nth-child(even){padding-left:4px}
}

/* Process: visually mark the irreversible transition into engineering */
.step:nth-child(4){border-color:#caa46966;background:linear-gradient(145deg,#ffffff0d,#caa4690b)}
.step:nth-child(4):after{content:"ENGINEERING GATE";display:inline-flex;margin-top:18px;color:#e7c891;font-size:.55rem;font-weight:900;letter-spacing:.13em}

/* PRE-DRAW becomes the closing editorial statement */
.predraw .split{align-items:center}
.predraw h2{max-width:10.5ch}
.predraw .deliverables{gap:8px}
.predraw .deliverable{position:relative;padding-left:34px}
.predraw .deliverable:before{content:"✓";position:absolute;left:14px;color:#e7c891;font-weight:900}

/* Form: slightly calmer, more architectural */
.leadsec .head{position:sticky;top:120px;align-self:start}
.form{box-shadow:0 40px 110px #07131120,inset 0 1px 0 #fff}
.form .fields{row-gap:17px}

/* Footer receives a final gold datum */
.foot{position:relative}
.foot:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#caa46977,transparent)}

@media(max-width:1180px){.chapter-rail{display:none}}
@media(max-width:1000px){
  .family,.family:nth-child(n){grid-column:span 6;min-height:450px}
  .leadsec .head{position:static}
}
@media(max-width:760px){
  .section{padding:68px 0}
  .section[data-chapter]:after{width:calc(100% - 28px)}
  .section[data-chapter]>.wrap:before{top:-39px;font-size:4.7rem}
  .hero-scroll{display:none}
  .section-manifesto h2:after{margin-top:20px}
  .section-manifesto .facts{margin-top:34px}
  .family-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .family,.family:nth-child(n){grid-column:auto;min-height:390px}
  .family[data-card-index]:before,.archetype[data-card-index]:before{top:14px;left:14px;width:30px;height:30px}
  .archetype,.archetype.feature,.archetype.feature-alt,.archetype.half{min-height:390px}
  .component-card,.component-card.wide{min-height:370px}
  .component-card.is-realized:before{top:13px;right:13px;font-size:.52rem}
  .component-legend:after{display:none}
  .flow:before{display:none}
  .infra-map:before{left:49px;top:56px;bottom:56px}
  .infra-row{grid-template-columns:64px 1fr;gap:14px}
  .node{width:54px;height:54px}
  .scenario,.scenario:first-child{min-height:350px}
  .doc{min-height:auto}
  .leadsec .head{position:static}
}