/* ============================================================
   OK ARCHITECTE — Design Tokens v2 (editorial / cinematic)
   ============================================================ */

:root{
  color-scheme: light only;

  --ivory:        #F2ECDC;
  --ivory-deep:   #E6DBBF;
  --ink:          #0E0C08;
  --ink-soft:     rgba(14,12,8,0.58);
  --clay:         #A63A2E;
  --clay-deep:    #7E2B22;
  --sand:         #CBAD7A;
  --bronze:       #8A6D3B;
  --line:         rgba(14,12,8,0.13);
  --line-strong:  rgba(14,12,8,0.26);
  --paper:        #FBF8F0;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Editorial scale — much larger */
  --fs-mega:      clamp(3.4rem, 12vw, 12rem);
  --fs-hero:      clamp(3rem, 9.5vw, 9.5rem);
  --fs-h1:        clamp(2.6rem, 6.5vw, 6rem);
  --fs-h2:        clamp(2rem, 4.2vw, 3.8rem);
  --fs-h3:        clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-body:      clamp(1rem, 1.15vw, 1.15rem);
  --fs-small:     0.85rem;
  --fs-micro:     0.68rem;

  /* Generous rhythm */
  --gutter:  clamp(1.4rem, 5vw, 5rem);
  --sect:    clamp(7rem, 17vw, 16rem);   /* vertical section spacing */
  --sect-sm: clamp(5rem, 10vw, 9rem);
  --maxw: 1600px;
  --ease: cubic-bezier(.16,.84,.24,1);
  --ease-cine: cubic-bezier(.76,0,.24,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html, body{ background:var(--ivory); color:var(--ink); }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .reveal, .mask-reveal img, .lines .line-inner{ opacity:1 !important; transform:none !important; }
}

:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
::selection{ background:var(--clay); color:var(--paper); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* Typographic atoms */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:0.2em; text-transform:uppercase; color:var(--bronze);
  display:flex; align-items:center; gap:0.8em;
}
.eyebrow::before{ content:""; width:38px; height:1px; background:var(--clay); flex:none; }
.coord{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:0.05em; color:var(--ink-soft); }
.display{ font-family:var(--font-display); font-weight:420; letter-spacing:-0.015em; line-height:1.02; }
.display em{ font-style:italic; font-weight:380; color:var(--clay); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:0.7rem;
  padding:1.05rem 2.1rem; border-radius:999px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease-cine), border-color .5s var(--ease-cine);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:translateY(101%); border-radius:inherit;
  transition:transform .5s var(--ease-cine);
}
.btn:hover{ color:var(--ivory); }
.btn:hover::after{ transform:translateY(0); }
.btn-solid{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.btn-solid::after{ background:var(--ink); }
.btn-solid:hover{ border-color:var(--ink); }
.btn-ghost{ border-color:rgba(255,255,255,.45); color:var(--ivory); }
.btn-ghost::after{ background:var(--ivory); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--ivory); }
.btn .arr{ transition:transform .5s var(--ease-cine); }
.btn:hover .arr{ transform:translateX(5px); }

/* ---------------- Navigation ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem var(--gutter);
  color:var(--ivory);
  transition:color .5s var(--ease), padding .5s var(--ease), background .5s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(244,240,230,0.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .5s var(--ease);
}
.nav.scrolled{ color:var(--ink); padding:0.95rem var(--gutter); }
.nav.scrolled::before{ opacity:1; }
.nav.nav-dark-page{ color:var(--ink); }  /* pages with light hero */

.nav-logo{
  font-family:var(--font-display); font-size:1.2rem; font-weight:560;
  letter-spacing:0.01em; display:flex; flex-direction:column; line-height:1.05;
}
.nav-logo small{
  font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.22em;
  text-transform:uppercase; font-weight:400; margin-top:0.3rem; opacity:0.65;
}
.nav-links{ display:flex; gap:2.4rem; align-items:center; }
.nav-links a{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-cine);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-lang{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em;
  display:flex; gap:0.45rem; align-items:center; border:1px solid currentColor;
  border-radius:999px; padding:0.4rem 0.9rem;
}
.nav-lang button{ background:none; border:none; color:inherit; font-family:inherit; font-size:inherit; opacity:0.45; transition:opacity .3s; }
.nav-lang button.active{ opacity:1; }
.nav-burger{ display:none; }

/* Thin animated scroll-progress indicator */
.progress-bar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:110;
  background:var(--clay); transform-origin:left; transform:scaleX(0);
  will-change:transform;
}

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0; z-index:99; pointer-events:none;
    background:var(--ink); color:var(--ivory);
    clip-path:circle(2% at calc(100% - 2.6rem) 2.4rem);
    transition:clip-path .85s var(--ease-cine);
  }
  .nav-links.open{ clip-path:circle(150% at calc(100% - 2.6rem) 2.4rem); pointer-events:auto; }
  .nav-links-inner{
    height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding-left:var(--gutter); gap:1.5rem;
  }
  .nav-links a{ font-family:var(--font-display); font-size:clamp(2.1rem,9vw,3.4rem); text-transform:none; letter-spacing:-0.015em; display:inline-block; }
  .nav-links a::after{ height:2px; }
  .nav-burger{ display:flex; flex-direction:column; gap:6px; background:none; border:none; z-index:101; color:inherit; padding:0.4rem; }
  .nav-burger span{ width:26px; height:1.5px; background:currentColor; display:block; transition:transform .4s var(--ease), opacity .3s; }
  .nav-burger.open{ color:var(--ivory); }
  .nav-burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* ---------------- Page transition veil ---------------- */
.veil{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  transform:translateY(100%); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.veil .veil-mark{
  font-family:var(--font-display); color:var(--ivory); font-size:1.4rem;
  opacity:0; letter-spacing:0.02em;
}

/* ---------------- Image reveal + parallax ---------------- */
.mask-reveal{ overflow:clip; position:relative; }
.mask-reveal img{ transform:scale(1.18); will-change:transform; }
.plx-wrap{ overflow:clip; position:relative; }
.plx-wrap img{ width:100%; height:118%; object-fit:cover; will-change:transform; position:relative; }

/* Split-line text reveal */
.lines .line{ overflow:clip; display:block; }
.lines .line-inner{ display:block; transform:translateY(110%); }

.reveal{ opacity:0; transform:translateY(34px); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:var(--ivory); padding:var(--sect-sm) var(--gutter) 2.5rem; }
.footer-cta{
  font-family:var(--font-display); font-weight:420; letter-spacing:-0.015em;
  font-size:clamp(2.4rem,6vw,5.5rem); line-height:1.02; max-width:16ch;
  padding-bottom:clamp(3rem,6vw,5rem); margin-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.footer-cta a{ color:var(--sand); font-style:italic; position:relative; }
.footer-cta a::after{ content:""; position:absolute; left:0; bottom:0.05em; height:1px; width:100%; background:var(--sand); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease-cine); }
.footer-cta a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; }
.footer-brand{ font-family:var(--font-display); font-size:1.6rem; }
.footer-tag{ margin-top:1rem; color:rgba(255,255,255,0.55); max-width:32ch; font-size:0.95rem; }
.footer-col h4{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sand); margin-bottom:1.2rem; }
.footer-col a, .footer-col p{ display:block; color:rgba(255,255,255,0.75); margin-bottom:0.65rem; font-size:0.92rem; }
.footer-col a:hover{ color:var(--sand); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,0.14);
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
  color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:1rem;
}
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:2.4rem; } }

/* Section head */
section{ position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom:clamp(3rem,6vw,5rem); flex-wrap:wrap;
}
.section-head h2{ font-family:var(--font-display); font-weight:420; letter-spacing:-0.015em; font-size:var(--fs-h2); line-height:1.05; max-width:15ch; }

/* Index counter label for editorial sections */
.sect-index{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:0.14em;
  color:var(--ink-soft); text-transform:uppercase;
}

/* Lang visibility */
[data-lang="en"]{ display:none; }
[data-lang="en"].lb{ display:none; }
html.lang-en [data-lang="fr"]{ display:none; }
html.lang-en [data-lang="en"]{ display:inline; }
html.lang-en [data-lang="en"].lb{ display:block; }