/* ============================================================
   CENTONE — l'omaggio incompleto · single-page
   Exhibition microsite system — pink chrome + slate-blue content
   (faithful to the KHM Canaletto & Bellotto reference)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

:root{
  --pink:       #EFDCB0;   /* accent — cream (was KHM pink; brand is blue) */
  --pink-soft:  #EFE4CE;   /* light buttons — cream                   */
  --head:       #16263C;   /* deep-blue header band                   */
  --slate:      #2B4768;   /* content background                     */
  --slate-2:    #3C547B;   /* raised card panel                      */
  --slate-foot: #54698C;   /* footer band                            */
  --slate-foot2:#5E7396;   /* lower footer band                      */
  --cream:      #EFDCB0;   /* warm cream — serif headings & accents  */
  --plus:       #EFE4CE;   /* cream "+" circle                       */
  --ink:        #16263B;   /* dark text on cream / pink              */
  --white:      #FFFFFF;
  --mute:       rgba(255,255,255,.66);
  --line-dash:  rgba(239,228,206,.5);   /* cream dashed rule */
  --line:       rgba(255,255,255,.16);
  --line-2:     rgba(255,255,255,.30);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --reading: 60ch;
  --pad-x: clamp(20px, 5vw, 80px);
  --head-h: 52px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head-h); }

body{
  margin: 0;
  background: var(--slate);
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.04; color: var(--cream); }
.display{ font-family: var(--font-display); font-weight: 600; font-size: clamp(58px, 11vw, 168px); line-height: .92; letter-spacing: -.01em; }
.tagline{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 4.2vw, 50px); color: var(--cream); line-height: 1.06; }
.h-lg{ font-family: var(--font-display); font-size: clamp(38px, 6vw, 86px); font-weight: 600; letter-spacing: -.01em; line-height: 1.02; color: var(--cream); }
.h-md{ font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 60px); font-weight: 600; line-height: 1.05; color: var(--cream); }
.h-sm{ font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 600; color: var(--cream); }

p{ margin: 0 0 1.05em; }
.lede{ font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--white); font-weight: 500; text-wrap: pretty; }
.reading{ max-width: var(--reading); }
.mute{ color: var(--mute); }
em{ font-style: italic; }
strong{ font-weight: 700; }
.subhead{ font-family: var(--font-body); font-weight: 700; font-size: clamp(18px,1.4vw,21px); color: var(--white); line-height: 1.2; margin: 0 0 .6em; }

.label{
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(11px, .78vw, 12.5px); font-weight: 700; color: var(--cream);
}
.num{ font-family: var(--font-display); }

/* ---------- layout ---------- */
.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.ph{ display:block; width:100%; height:auto; }
section{ position: relative; scroll-margin-top: var(--head-h); }
.section-pad{ padding-block: clamp(64px, 9vw, 130px); }

/* exhibition-style section heading: cream serif + dashed rule */
.sec-head{ margin-bottom: clamp(34px,5vw,60px); }
.sec-head h2{ margin: 0; }
.sec-head .rule{ height: 3px; border: 0; margin-top: clamp(16px,2vw,24px);
  background-image: radial-gradient(circle, rgba(239,228,206,.72) 1.4px, transparent 1.7px);
  background-size: 11px 3px; background-position: 0 50%; background-repeat: repeat-x; }
.sec-head .kick{ display:block; margin-bottom: 14px; }

/* =========================================================
   HEADER — pink chrome, centered logo, sticky anchored nav
   ========================================================= */
.site-head{ position: relative; z-index: 100; }
.head-bar{
  background: var(--head); color: var(--white);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  padding: 14px var(--pad-x);
}
.head-left{ display:flex; align-items:center; gap: 20px; }
.head-right{ display:flex; align-items:center; justify-content:flex-end; gap: 16px; }
.brand{ justify-self:center; text-align:center; text-decoration:none; color: var(--white);
        display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1; }
.brand .word{ font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.7vw,38px); letter-spacing: .04em; }
.brand .sub{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(12px,1.05vw,15px); letter-spacing:.02em; opacity:.95; }

.lang{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-body);
       font-size: 13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.8); user-select:none; }
.lang button{ background:none; border:0; cursor:pointer; padding:2px 1px; font:inherit; letter-spacing:inherit; color: rgba(255,255,255,.8); transition: color .2s; }
.lang button.on{ color: var(--white); }
.lang .sep{ opacity:.5; }

.head-pill{
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px;
  text-decoration:none; color: var(--ink); background: var(--white);
  padding: 11px 22px; display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  transition: background .2s, transform .2s;
}
.head-pill .arr{ transition: transform .3s; }
.head-pill:hover{ background: var(--pink-soft); }
.head-pill:hover .arr{ transform: translate(2px,-2px); }

/* anchored section nav — slate bar */
.section-nav{
  position: sticky; top: 0; z-index: 100;
  background: var(--slate); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content:center; gap: clamp(14px,2vw,34px);
  padding: 13px var(--pad-x); overflow-x:auto; scrollbar-width:none;
}
.section-nav::-webkit-scrollbar{ display:none; }
.section-nav a{
  font-family: var(--font-body); font-weight: 600; text-decoration:none; color: rgba(255,255,255,.74);
  font-size: 14px; letter-spacing:.01em; white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
  transition: color .2s;
}
.section-nav a .ar{ color: var(--cream); font-weight:700; }
.section-nav a:hover{ color: var(--white); }
.section-nav a.is-active{ color: var(--cream); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--white); margin:5px 0; transition:.3s; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 11px;
  font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size: 13px;
  color: var(--ink); background: var(--pink-soft); border: 1px solid var(--pink-soft);
  text-decoration:none; cursor:pointer; padding: 14px 26px; transition: background .25s, border-color .25s, transform .25s;
}
.btn .arr{ display:inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover{ background: var(--white); border-color: var(--white); }
.btn:hover .arr{ transform: translateX(5px); }
.btn-solid{ background: var(--pink); border-color: var(--pink); color: var(--ink); }
.btn-solid:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-ghost{ background: transparent; color: var(--white); border-color: var(--line-2); }
.btn-ghost:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }

.link-arrow{
  font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size: 13px;
  color: var(--cream); text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  border-bottom: 2px solid var(--line-dash); padding-bottom: 4px; transition: gap .25s, color .25s, border-color .25s;
}
.link-arrow:hover{ gap: 15px; color: var(--white); border-color: var(--white); }
.link-arrow .arr{ transition: transform .3s; }
.link-arrow:hover .arr{ transform: translateX(4px); }

/* =========================================================
   HERO — full-bleed image, big serif title, info card
   ========================================================= */
.hero{ position: relative; }
.hero-media{ position: relative; width: 100%; min-height: clamp(560px, 88vh, 920px); overflow: hidden; display:flex;
  background: #1a2c44; }
.hero-media .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.hero-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(100deg, rgba(20,32,52,.58) 0%, rgba(20,32,52,.26) 40%, rgba(20,32,52,.02) 66%),
              linear-gradient(0deg, rgba(20,32,52,.34) 0%, rgba(20,32,52,0) 22%); }
.hero-inner{ position: absolute; inset:0; z-index: 2; width:100%; max-width: var(--maxw); margin-inline:auto;
  padding: clamp(40px,5.5vw,92px) var(--pad-x) clamp(34px,4.5vw,64px); display:grid;
  grid-template-columns: 1.3fr .78fr; grid-template-rows: auto 1fr; column-gap: clamp(28px,4vw,56px);
  /* let drops/clicks reach the hero image-slot underneath; keep the card + links clickable */
  pointer-events: none; }
.hero-inner .info-card, .hero-inner a, .hero-inner button{ pointer-events: auto; }
.hero-copy .display, .hero-copy .tagline, .hero-copy .lede{ pointer-events: auto; }
.hero-copy{ grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; }
.hero-copy .display{ color: #F7ECD9; text-shadow: 0 2px 36px rgba(10,18,34,.5); margin:0; }
.hero-copy .tagline{ color: #F7ECD9; text-shadow: 0 2px 26px rgba(10,18,34,.55); margin-top:.02em; }
.hero-copy .lede{ margin-top: clamp(26px,4vw,52px); max-width: 42ch; text-shadow: 0 1px 18px rgba(10,18,34,.5); }

/* info card — translucent, borderless, lower-right */
.info-card{ grid-column:2; grid-row:2; align-self:end; background: rgba(13,23,40,.44); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 0; padding: clamp(24px,2.6vw,34px); }
.info-card .ic-h{ font-family: var(--font-display); font-weight:600; font-size: clamp(22px,2vw,28px); color: var(--cream); margin: 0 0 18px; }
.info-card .ic-row{ display:flex; align-items:flex-start; gap: 13px; padding: 9px 0; }
.info-card .ic-row .gl{ width:18px; flex:none; text-align:center; color: var(--cream); }
.info-card .ic-row .gl::before{ font-size: 15px; }
.info-card .ic-row.r-date .gl::before{ content:"◴"; }
.info-card .ic-row.r-loc .gl::before{ content:"◈"; }
.info-card .ic-row.r-price .gl::before{ content:"❏"; }
.info-card .ic-row .t{ font-size: 15px; color: var(--white); }
.info-card .ic-cta{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items:start; }
.about-grid p{ color: var(--white); margin-bottom: 1.1em; }
.about-grid p:last-child{ margin-bottom:0; }
.about-grid .lead-col p{ font-size: clamp(18px,1.45vw,21px); }
.about-grid strong{ color: var(--cream); font-weight: 700; }

/* merged closing block — name + studio inside Il progetto */
.proj-extra{ margin-top: clamp(54px,7vw,96px); padding-top: clamp(34px,5vw,56px); border-top: 1px solid var(--line); }
.proj-extra .kick{ display:block; margin-bottom: 12px; }
.proj-extra em{ color: var(--cream); font-style: italic; }
.proj-extra .link-arrow{ margin-top: 16px; }

/* =========================================================
   PLUS-ROWS — expandable detail (cream "+" circle)
   ========================================================= */
.pr{ border-top: 1px solid var(--line); }
.pr:last-of-type{ border-bottom: 1px solid var(--line); }
.pr > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: clamp(18px,3vw,32px); padding: clamp(20px,2.8vw,30px) 0; }
.pr > summary::-webkit-details-marker{ display:none; }
.pr .circ{ width: 52px; height: 52px; border-radius:50%; background: var(--plus); flex:none; position:relative;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .2s; }
.pr .circ::before, .pr .circ::after{ content:""; position:absolute; left:50%; top:50%; background: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s; }
.pr .circ::before{ width:17px; height:2px; transform: translate(-50%,-50%); }
.pr .circ::after{ width:2px; height:17px; transform: translate(-50%,-50%); }
.pr[open] .circ::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.pr > summary:hover .circ{ transform: scale(1.06); }
.pr .pr-title{ font-family: var(--font-display); font-weight:600; font-size: clamp(24px,2.8vw,40px); color: var(--cream); line-height:1.04; }
.pr .pr-min{ font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color: var(--mute); white-space:nowrap; }
.pr .pr-body{ overflow:hidden; transition: height .44s cubic-bezier(.2,.7,.2,1); }
.pr:not([open]) .pr-body{ height: 0; }
.pr .pr-inner{ display:grid; grid-template-columns: 190px 1fr; gap: clamp(28px,5vw,60px); align-items:start; padding: 0 0 clamp(28px,4vw,40px); max-width: 1000px; }
.pr .pr-cover{ position:relative; width:100%; max-width:190px; aspect-ratio:1/1.414; background: var(--slate-2); border:1px solid var(--cream); box-shadow: 9px 9px 0 rgba(0,0,0,.18); }
.pr .pr-detail p{ color: var(--white); margin-bottom:1em; }
.pr .pr-detail p:last-child{ margin-bottom:0; }
.pr .pr-detail strong{ color: var(--cream); }
.pr .pr-feats{ list-style:none; padding:0; margin:0; }
.pr .pr-feats li{ display:flex; gap:13px; padding:10px 0; border-top:1px solid var(--line); color: var(--white); font-size: 15.5px; }
.pr .pr-feats li::before{ content:"—"; color: var(--cream); }

/* cover motifs (reuse, recoloured) */
.cover-standard::before{ content:""; position:absolute; left:12px; top:14px; bottom:14px; border-left:2px dashed var(--pink); }
.cover-lux{ background:#16263B; border-color:var(--cream); }
.cover-lux::after{ content:""; position:absolute; right:-5px; top:9px; bottom:9px; width:5px; background: repeating-linear-gradient(var(--cream) 0 1.5px, #8a9bb5 1.5px 3px); }
.cover-lux .inner{ position:absolute; left:16px; right:16px; bottom:16px; height:38%; background-image: radial-gradient(rgba(239,228,206,.5) .9px, transparent 1px); background-size:9px 9px; }
.cover-speciale{ background:#16263B; border-color:var(--cream); }
.cover-speciale::after{ content:""; position:absolute; right:14px; top:-4px; bottom:-4px; width:7px; background:#0d1726; border-inline:1px solid rgba(255,255,255,.12); }
.cover-speciale .foil{ position:absolute; left:18px; top:20px; width:40px; height:40px; background: linear-gradient(135deg, var(--cream), #fff7e6 45%, #c9a24b); }

/* =========================================================
   HOTSPOTS over images (cream "+" markers, detail reveal)
   ========================================================= */
.detail-fig{ position: relative; margin:0; }
.detail-img{ position: relative; }
.hot{ position:absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius:50%; cursor:pointer; z-index:3; padding:0; display:grid; place-items:center;
  background: var(--plus); border: 0; box-shadow: 0 4px 18px rgba(8,16,34,.34); transition: transform .3s, background .2s; }
.hot::before, .hot::after{ content:""; position:absolute; left:50%; top:50%; background: var(--ink); transition: transform .35s, opacity .25s; }
.hot::before{ width:16px; height:2px; transform: translate(-50%,-50%); }
.hot::after{ width:2px; height:16px; transform: translate(-50%,-50%); }
.hot .pulse{ position:absolute; inset:-7px; border:2px solid var(--plus); border-radius:50%; opacity:.5; animation: hotPulse 2.6s ease-out infinite; }
@keyframes hotPulse{ 0%{ transform:scale(.7); opacity:.55; } 70%{ transform:scale(1.3); opacity:0; } 100%{ opacity:0; } }
.hot:hover{ background:#fff; }
.hot.is-active{ background: var(--ink); }
.hot.is-active::before, .hot.is-active::after{ background:#fff; }
.hot.is-active::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.hot.is-active .pulse{ display:none; }
.detail-legend{ margin-top: 18px; min-height: 1px; }
.dl{ display:none; font-size: clamp(15px,1.1vw,17px); color: var(--white); margin:0; }
.dl.is-active{ display:block; }
.dl .dl-no{ font-family: var(--font-display); color: var(--cream); margin-right: 11px; font-size:1.15em; }
.dl strong{ color: var(--cream); }
.detail-hint{ font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.13em; font-size:11.5px; color: var(--mute); margin-top: 14px; }

/* =========================================================
   STEPS
   ========================================================= */
.step{ display:flex; flex-direction:column; }
.steps-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,3vw,56px); }
.step-no{ font-family: var(--font-display); font-size: clamp(46px,5vw,84px); font-weight:600; line-height:.8; color: var(--cream); display:block; margin-bottom:.12em; }
.step .subhead{ margin-bottom:.4em; }
.step-copy p{ color: var(--white); margin:0; }
.step-media{ margin-top:auto; padding-top: clamp(20px,2.4vw,30px); }
.step-media image-slot{ display:block; width:100%; height:auto; aspect-ratio:4/5; }

/* =========================================================
   MODES
   ========================================================= */
.mode{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items:center;
  padding-block: clamp(46px,6vw,96px); border-top:1px solid var(--line); }
.mode:first-of-type{ border-top:0; }
.mode:nth-child(even) .mode-media{ order:2; }
.mode-copy{ max-width: 34em; }
.mode-name{ font-family: var(--font-display); font-weight:600; font-size: clamp(44px,6.5vw,96px); line-height:.92; color: var(--cream); margin:.1em 0 .35em; }
.mode-copy p{ color: var(--white); font-size: clamp(16.5px,1.15vw,19px); }

.word-split{ display:flex; flex-direction:column; gap:10px; }
.word-strip{ background: var(--slate-2); border:1px solid var(--line-2); padding:14px 22px; display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.word-strip .ws-text{ font-family: var(--font-display); font-style:italic; font-size: clamp(20px,2.4vw,30px); color: var(--cream); }
.word-strip .ws-no{ font-family: var(--font-body); font-weight:700; font-size:12px; letter-spacing:.12em; color: var(--mute); }
.word-strip:nth-child(1){ transform: rotate(-.5deg); }
.word-strip:nth-child(3){ transform: rotate(.4deg); }
.word-strip:nth-child(4){ margin-left:8%; }

.mosaic{ overflow: hidden; }
.mosaic .recompose{ --opera: linear-gradient(120deg, #2b4a55 0%, #3f7a78 28%, #c9a24b 55%, #b9543e 80%, #6d2a22 100%); grid-template-columns: repeat(5,1fr); gap:3px; }
.mosaic .frag .fno{ color: rgba(255,255,255,.7); font-size:11px; }

.mapwrap{ position:relative; }
.mapwrap image-slot{ display:block; width:100%; height:auto; aspect-ratio:5/4; }
.map-grid{ position:absolute; inset:0; pointer-events:none; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); }
.map-grid > span{ border-right:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4); font-family: var(--font-body); font-weight:700; font-size:11px; letter-spacing:.1em; color: rgba(255,255,255,.75); padding:6px 8px; }
.map-grid > span:nth-child(3n){ border-right:0; }
.map-grid > span:nth-child(n+7){ border-bottom:0; }

/* =========================================================
   OBJECT
   ========================================================= */
.obj-hero{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px,6vw,80px); align-items:center; }
.obj-hero .lede{ margin-top: clamp(18px,2.6vw,30px); max-width: 34em; }
.obj-hero .lede strong{ color: var(--cream); }
.obj-hero image-slot{ display:block; width:100%; height:auto; aspect-ratio:5/4; }
.a5-tag{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:13px; color: var(--cream); }
.a5-tag::before{ content:""; width:22px; height:31px; border:1px solid var(--cream); display:inline-block; }
.fmt-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; margin-top:24px; }
.fmt-tags .a5-tag{ margin-top:0; }
.a5-tag.a6{ color: var(--mute); }
.a5-tag.a6::before{ width:16px; height:22px; border-color: var(--mute); }

.subsec{ margin-top: clamp(54px,7vw,96px); }
.subsec .sh{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(8px,2vw,18px); }
.subsec .sh p{ color: var(--white); max-width: 42ch; margin:0; }

.cfg-row{ display:flex; flex-wrap:wrap; gap: clamp(40px,6vw,90px); align-items:end; margin-top: clamp(32px,4vw,52px); }
.config{ display:flex; flex-direction:column; gap:18px; }
/* every A5 sheet renders at one shared size in both configs, so 50 vs 100 compare honestly */
.config-grid{ display:grid; gap:2px; width:max-content; --a5w: clamp(16px,2.3vw,28px); --a5h: calc(var(--a5w) * 210 / 148);
  --a6w: calc(var(--a5w) * 105 / 148); --a6h: calc(var(--a6w) * 148 / 105);
  --cw: var(--a5w); --ch: var(--a5h);
  grid-auto-rows: var(--ch); background: var(--line-2); border:1px solid var(--cream); --opera: linear-gradient(133deg, #9a3b27 0%, #c98a3f 30%, #d8c79a 50%, #7e8a5b 72%, #2f3a2c 100%); }
.config-grid.cfg-a6{ --cw: var(--a6w); --ch: var(--a6h); }
.cfg-cell{ background-image: var(--opera); background-repeat:no-repeat; }
.cfg-meta{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.cfg-meta .cfg-grid-label{ font-family: var(--font-display); font-weight:600; font-size: clamp(24px,2.4vw,32px); color: var(--cream); }
.cfg-meta .cfg-dim{ color: var(--white); font-size:15px; }
.cfg-meta .cfg-ppl{ font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12px; color: var(--cream); }
.cfg-note{ margin-top: clamp(30px,4vw,48px); font-style:italic; color: var(--mute); max-width:52ch; }

.det-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); margin-top: clamp(28px,3.5vw,44px); }
.det image-slot{ display:block; width:100%; height:auto; aspect-ratio:3/4; }
.gcase image-slot{ display:block; width:100%; height:auto; aspect-ratio:3/2; }
.mode-media > image-slot{ display:block; width:100%; height:auto; aspect-ratio:3/2; }
.det .slot-cap{ display:flex; justify-content:space-between; font-family: var(--font-body); font-weight:700; font-size:13px; color: var(--mute); letter-spacing:.04em; margin-top:12px; }
.det .slot-cap .num{ color: var(--cream); }

/* =========================================================
   CASES — staggered two-column gallery (offset columns)
   ========================================================= */
.cases-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,4vw,64px); align-items:start; }
.cases-grid .col{ display:flex; flex-direction:column; gap: clamp(44px,6vw,104px); }
.cases-grid .col-offset{ margin-top: clamp(56px,10vw,172px); }
.gcase .ph{ width:100%; height:auto; }
.gcase .gcap{ margin-top: 16px; }
.case-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.case-no{ font-family: var(--font-display); font-size: clamp(34px,4vw,56px); font-weight:600; line-height:.8; color: var(--cream); }
.case-tags{ display:flex; gap:12px; }
.case-line{ font-family: var(--font-display); font-size: clamp(21px,2.2vw,32px); font-weight:500; line-height:1.16; max-width:26ch; color: var(--cream); }

/* =========================================================
   PULL-QUOTE + NAME essay
   ========================================================= */
.pullquote{ text-align:center; margin: 0 auto; }
.pullquote .q{ font-family: var(--font-display); font-weight:500; font-size: clamp(30px,4.6vw,64px); line-height:1.16; color: var(--cream); display:inline-block; text-align:left; }
.pullquote .q .l1{ display:block; }
.pullquote .q .l2{ display:block; padding-left: 1.9em; }
.pullquote .q .qm{ color: var(--cream); }
.pullquote .cite{ display:block; margin-top: clamp(20px,3vw,32px); font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color: var(--mute); }

.name-hero{ text-align:center; }
.name-hero .display{ font-size: clamp(70px,14vw,200px); }
.essay{ max-width: 42rem; margin-inline:auto; margin-top: clamp(34px,5vw,60px); }
.essay p{ font-family: var(--font-display); font-size: clamp(20px,1.7vw,27px); line-height:1.5; color: var(--white); margin:0 0 .7em; text-wrap:pretty; }
.essay .lead{ position:relative; padding-left: clamp(58px,9vw,86px); min-height: clamp(56px,9vw,80px); }
.essay .lead .cap{ position:absolute; left:0; top:-.06em; font-family: var(--font-display); font-weight:600; font-size: clamp(64px,10vw,100px); line-height:.8; color: var(--cream); }
.essay .second{ color: var(--cream); font-style:italic; max-width:34ch; margin-inline:auto; }
.name-rule{ width:60px; height:2px; background: var(--pink); margin: clamp(24px,3.5vw,40px) auto; }

/* =========================================================
   FEATURE CARD (artist-style) — Tipografia Gotica
   ========================================================= */
.feature{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items:center; }
.fcard{ background: var(--slate-2); border:1px solid var(--line); padding: clamp(26px,3vw,40px); display:grid; grid-template-columns: auto 1fr; gap: clamp(20px,2.5vw,32px); align-items:center; }
.fcard .badge-wrap{ position:relative; width: clamp(120px,14vw,170px); aspect-ratio:1; }
.fcard .logo-slot{ display:block; width:100%; height:100%; background: var(--slate); }
.fcard .badge-dot{ position:absolute; right:-4px; top:8px; width: clamp(20px,2.2vw,28px); aspect-ratio:1; border-radius:50%; background: var(--cream); }
.fcard .ftag{ display:inline-block; background: var(--white); color: var(--ink); font-family: var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:11px; padding:5px 11px; margin-bottom:12px; }
.fcard .fname{ font-family: var(--font-display); font-weight:700; font-size: clamp(22px,2vw,28px); color: var(--white); line-height:1.1; }
.fcard .frole{ font-family: var(--font-body); font-weight:600; color: var(--cream); margin:6px 0 16px; }
.feature .f-copy .h-md{ margin-bottom:.3em; }
.feature .f-copy p{ color: var(--white); max-width: 38ch; }
.feature .f-copy p strong{ color: var(--cream); }

/* IDEA band */
.idea{ background: var(--slate-2); }
.idea-inner{ max-width: 50rem; margin-inline:auto; text-align:center; }
.idea .sig{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size: clamp(28px,3.4vw,48px); color: var(--cream); line-height:1.2; text-wrap:pretty; }
.idea .by{ display:block; margin-top: clamp(22px,3vw,38px); }
.idea .by .name{ font-family: var(--font-display); font-weight:700; font-size: clamp(22px,2vw,30px); color: var(--white); }

/* =========================================================
   FORM
   ========================================================= */
.req{ display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px,6vw,100px); align-items:start; }
.req-intro .h-lg{ max-width:13ch; }
.req-intro .lede{ margin-top: clamp(18px,2.6vw,28px); max-width:26em; }
.req-list{ list-style:none; padding:0; margin: clamp(28px,3.5vw,40px) 0 0; max-width:30em; }
.req-list li{ display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.req-list li:last-child{ border-bottom:1px solid var(--line); }
.req-list .ql{ font-family: var(--font-display); color: var(--cream); font-size:18px; }
.req-list .qt{ font-size:16px; color: var(--white); }

.form-card{ background: var(--slate-2); border:1px solid var(--line); padding: clamp(26px,3.6vw,48px); }
.field{ margin-bottom: clamp(22px,3vw,34px); }
.field-label{ display:block; margin-bottom:13px; }
.field-label .req-star{ color: var(--pink); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:block; padding:11px 20px; border:1px solid var(--line-2); white-space:nowrap; font-family: var(--font-display); font-weight:500; font-size: clamp(17px,1.5vw,21px); color: var(--white); transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.chip input:focus-visible + span{ outline:2px solid var(--pink); outline-offset:2px; }
.ctrl{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2); font-family: var(--font-body); font-weight:500; font-size: clamp(16px,1.2vw,19px); color: var(--white); padding:11px 2px; }
.ctrl::placeholder{ color: var(--mute); font-style:italic; }
.ctrl:focus{ outline:none; border-color: var(--cream); }
.ctrl[type="date"]{ color-scheme: dark; }
textarea.ctrl{ border:1px solid var(--line-2); padding:14px; min-height:108px; resize:vertical; font-size: clamp(15px,1.1vw,17px); line-height:1.5; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,38px); }
.people-hint{ font-style:italic; color: var(--mute); font-size:14px; margin-top:8px; }
.form-submit{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:8px; }
.form-foot{ font-style:italic; color: var(--mute); font-size:15px; max-width:26ch; margin:0; }
.confirm{ display:none; text-align:center; padding: clamp(40px,7vw,84px) clamp(20px,4vw,40px); }
.confirm.show{ display:block; }
.confirm .mark{ font-family: var(--font-display); font-size: clamp(54px,8vw,100px); color: var(--cream); line-height:1; }
.confirm h3{ margin:14px auto 12px; max-width:16ch; }
.confirm p{ color: var(--white); max-width:30ch; margin-inline:auto; }

/* =========================================================
   FOOTER (lighter slate bands, dashed rules)
   ========================================================= */
.site-foot{ background: var(--slate-foot); margin-top: 0; }
.foot-dash{ height:3px; border:0; margin:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.42) 1.3px, transparent 1.6px);
  background-size: 11px 3px; background-position: 0 50%; background-repeat: repeat-x; }
.hero-band{ background: var(--pink); height: clamp(54px,8vw,120px); }
.foot-top{ max-width: var(--maxw); margin-inline:auto; padding: clamp(40px,5vw,64px) var(--pad-x); display:grid; grid-template-columns: auto 1fr auto; gap: clamp(28px,4vw,56px); align-items:center; }
.foot-top .fbrand{ font-family: var(--font-display); font-weight:700; font-size: clamp(28px,3vw,42px); color: var(--cream); line-height:1; }
.foot-top .fbrand em{ font-style:italic; display:block; font-size:.5em; color: var(--white); margin-top:6px; }
.foot-top .ftext{ color: var(--white); max-width: 46ch; font-size:15px; }
.foot-mid{ max-width: var(--maxw); margin-inline:auto; padding: clamp(36px,4.5vw,56px) var(--pad-x); display:flex; flex-wrap:wrap; gap: clamp(32px,5vw,72px); }
.foot-col h4{ font-family: var(--font-body); font-weight:800; font-size:16px; color: var(--white); margin:0 0 16px; }
.foot-col a{ display:block; color: var(--white); text-decoration:underline; text-underline-offset:3px; text-decoration-color: rgba(255,255,255,.4); font-size:15px; margin-bottom:10px; }
.foot-col a:hover{ text-decoration-color: var(--cream); color: var(--cream); }
.foot-bottom{ background: var(--slate-foot2); }
.foot-bottom-in{ max-width: var(--maxw); margin-inline:auto; padding: 22px var(--pad-x); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13.5px; color: var(--white); }
.foot-bottom-in a{ color: var(--white); text-decoration:underline; text-underline-offset:3px; }
.foot-bottom-in a:hover{ color: var(--cream); }

/* ---------- recompose motif ---------- */
.recompose{ display:grid; gap:4px; aspect-ratio:1/1; width:100%; }
.frag{ position:relative; background: var(--slate-2); display:flex; align-items:flex-end; padding:8px;
  opacity:0; transform: translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg)) scale(.9);
  transition: transform 1.1s cubic-bezier(.16,.84,.3,1), opacity .9s ease; }
.frag .fno{ font-family: var(--font-display); font-size:12px; color: var(--mute); }
.recompose.is-together .frag{ opacity:1; transform: translate(0,0) rotate(0) scale(1); }

/* reveal */
[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,.84,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .frag{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
  .hot .pulse{ animation:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){ :root{ --head-h: 50px; } }
@media (max-width: 860px){
  :root{ --head-h: 60px; }
  .site-head{ position: sticky; top: 0; }
  .head-bar{ grid-template-columns: auto 1fr auto; padding-block:12px; }
  .brand{ align-items:flex-start; }
  .head-left .lang{ display:none; }
  .nav-toggle{ display:block; }
  .section-nav{ position:fixed; inset:0 0 0 auto; width:min(82vw,360px); z-index:130; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px; padding:40px 44px; background: var(--slate); border-left:1px solid var(--line-2); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); overflow:auto; }
  .section-nav.open{ transform:none; }
  .section-nav a{ font-size:20px; }
  .site-head.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .site-head.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-head.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero-media{ min-height: clamp(340px, 48vh, 460px); }
  .hero-inner{ position: static; background: var(--slate); grid-template-columns: 1fr; gap:28px; align-items:start; }
  .about-grid, .step, .mode, .obj-hero, .cfg-row, .feature, .req{ grid-template-columns:1fr; gap:30px; }
  .step:nth-child(even) .step-media, .mode:nth-child(even) .mode-media{ order:0; }
  .cases-grid{ grid-template-columns:1fr; gap:0; }
  .cases-grid .col{ gap: clamp(44px,9vw,72px); }
  .cases-grid .col-offset{ margin-top: clamp(44px,9vw,72px); }
  .obj-hero .detail-fig{ order:-1; }
  .steps-row{ grid-template-columns:1fr; gap: clamp(40px,8vw,64px); }
  .step-media{ margin-top: clamp(18px,4vw,26px); }
  .det-grid{ grid-template-columns:1fr; max-width:380px; }
  .pr .pr-inner{ grid-template-columns:1fr; gap:24px; }
  .pr .pr-cover{ max-width:150px; }
  .pr > summary{ grid-template-columns:auto 1fr auto; }
  .pr .pr-min{ display:none; }
  .field-row{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; gap:24px; }
  .fcard{ grid-template-columns:1fr; text-align:left; }
}
@media (max-width: 480px){
  .info-card .ic-cta{ width:100%; }
  .hero-copy .display{ font-size: clamp(52px,16vw,82px); }
}

/* ============================================================
   KHM-STYLE INTERACTIONS
   rotating nav arrows · zoom-into-detail hotspots · hover-zoom
   ============================================================ */

/* ---------- rotating arrows (nav + links) ---------- */
.section-nav a .ar{
  display:inline-flex; align-items:center; justify-content:center;
  transform-origin:50% 50%;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .2s;
}
.section-nav a:hover .ar{ transform: rotate(90deg); }
.section-nav a.is-active .ar{ transform: rotate(90deg); color: var(--cream); }

/* diagonal link arrows (↗) spin to point straight on hover */
.head-pill .arr,
.link-arrow .arr{ display:inline-block; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.head-pill:hover .arr{ transform: rotate(45deg); }
.link-arrow:hover .arr{ transform: rotate(45deg) translateX(2px); }

/* the read-more "+" circles get a touch of rotation on hover too */
.pr > summary:hover .circ{ transform: scale(1.06) rotate(90deg); }
.pr[open] > summary .circ{ background:#fff; }

/* ---------- zoom-into-detail hotspots ---------- */
.detail-img{ overflow:hidden; }
.detail-img image-slot{
  transform-origin: var(--zx,50%) var(--zy,50%);
  transition: transform .8s cubic-bezier(.45,.05,.15,1), filter .6s ease;
  will-change: transform;
}
.detail-img.is-zoomed image-slot{ transform: scale(var(--zoom,2.5)); }

/* dim/recede the other markers while one detail is open */
.hot{ transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s, opacity .35s; }
.detail-img.is-zoomed .hot:not(.is-active){
  opacity:0; pointer-events:none; transform: translate(-50%,-50%) scale(.45);
}
.detail-img.is-zoomed .hot:not(.is-active) .pulse{ display:none; }

/* active marker becomes a close (×) and stops pulsing */
.hot.is-active{ background: var(--ink); box-shadow: 0 6px 26px rgba(8,16,34,.5); }
.hot.is-active::before{ transform: translate(-50%,-50%) rotate(45deg); opacity:1; }
.hot.is-active::after{ transform: translate(-50%,-50%) rotate(-45deg); opacity:1; }
.hot.is-active .pulse{ display:none; }
.detail-img.is-zoomed{ cursor: zoom-out; }
.hot{ cursor: zoom-in; }
.hot.is-active{ cursor: zoom-out; }

/* caption swaps with a soft cross-fade */
.dl{ transition: opacity .4s ease; }
.dl.is-active{ animation: dlIn .5s ease both; }
@keyframes dlIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* zoom badge that floats while a detail is open */
.detail-img::after{
  content:"";
  position:absolute; left:18px; top:18px; z-index:4;
  width:42px; height:42px; border-radius:50%;
  background: rgba(22,38,59,.72); backdrop-filter: blur(4px);
  background-image:
    linear-gradient(var(--cream),var(--cream)),
    linear-gradient(var(--cream),var(--cream));
  background-size: 14px 2px, 2px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity:0; transform: scale(.7); pointer-events:none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.detail-img.is-zoomed::after{ opacity:1; transform: scale(1); }
.detail-hint{ transition: opacity .35s ease; }
.detail-hint.is-hidden{ opacity:0; }

/* ---------- slow hover-zoom on imagery (KHM "Ken-Burns") ---------- */
.gcase image-slot::part(image),
.det image-slot::part(image),
.mode-media > image-slot::part(image){
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.gcase:hover image-slot::part(image),
.det:hover image-slot::part(image),
.mode:hover .mode-media > image-slot::part(image){
  transform: translate(-50%,-50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce){
  .detail-img image-slot{ transition:none; }
  .section-nav a .ar, .head-pill .arr, .link-arrow .arr{ transition:none; }
}