@font-face{font-family:'Playfair Display';src:url(playfair-display-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(playfair-display-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(archivo-latin-standard-normal.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(jetbrains-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Colors — DESIGN.md */
  --color-ink-black:#1e1e1e;
  --color-paper-white:#ffffff;
  --color-warm-cream:#fbf9f3;
  --color-pure-black:#000000;
  --color-flame:#c9532f; /* Delonix regia bloom: logo tree, button hover, hero name */

  /* Typography — families (licensed face first, substitute second) */
  --font-cardinal-fruit:'Cardinal Fruit','Playfair Display',Georgia,'Times New Roman',serif;
  --font-soehne-breit-buch:'Soehne Breit Buch','Archivo',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-soehne-mono-buch:'Soehne Mono Buch','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Typography — scale */
  --text-caption:10px;--leading-caption:1.5;--tracking-caption:1px;
  --text-body:14px;--leading-body:1.6;
  /* Serif sizes scale together: full size from 1440px wide, 2/3 size on a 390px phone */
  --text-subheading:clamp(24px, 19.54px + 1.143vw, 36px);--leading-subheading:1.1;--tracking-subheading:-0.02em;
  --text-heading-sm:clamp(32px, 26.06px + 1.524vw, 48px);--leading-heading-sm:1.05;--tracking-heading-sm:-0.025em;
  --text-heading:clamp(48px, 39.09px + 2.286vw, 72px);--leading-heading:1;--tracking-heading:-0.02em;
  --text-display:clamp(64px, 20.91px + 11.05vw, 180px);--leading-display:1;--tracking-display:-0.05em;
  --text-lead:clamp(18px, 15.77px + 0.571vw, 24px);
  --text-menu:clamp(54px, 38.39px + 4.0vw, 96px);
  --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;

  /* Spacing */
  --spacing-4:4px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-20:20px;
  --spacing-24:24px;--spacing-40:40px;--spacing-60:60px;--spacing-80:80px;--spacing-100:100px;

  /* Layout */
  --page-max-width:1440px;--section-gap:100px;--card-padding:24px;--element-gap:20px;

  /* Radius */
  --radius-cards:0px;--radius-images:0px;--radius-inputs:0px;--radius-buttons:20px;

  /* Surfaces */
  --surface-paper-white:#ffffff;--surface-warm-cream:#fbf9f3;--surface-ink-black:#1e1e1e;

  --gutter:var(--spacing-40);
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-paper-white);color:var(--color-ink-black);
  font-family:var(--font-soehne-breit-buch);font-stretch:125%;font-weight:400;
  font-size:var(--text-body);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto;border-radius:var(--radius-images)}
figure,h1,h2,h3,h4,p,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type roles ---------- */
.kicker{font-family:var(--font-soehne-breit-buch);font-stretch:125%;font-size:var(--text-caption);
  line-height:var(--leading-caption);letter-spacing:var(--tracking-caption);font-weight:400;
  text-transform:uppercase;margin-bottom:var(--spacing-12)}
.display{font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-medium);
  font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.h-section{font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-medium);
  font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm)}
.h-sub{font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-regular);
  font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading)}
.meta{font-family:var(--font-soehne-mono-buch);font-size:12px;line-height:1.6;letter-spacing:0.3px;text-transform:uppercase}
.body{margin-top:var(--element-gap)}
.body p+p{margin-top:1em}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--font-soehne-mono-buch);font-size:12px;line-height:1.4;
  letter-spacing:0.3px;text-transform:uppercase;text-decoration:none;
  padding:7px 16px 8px;border-radius:var(--radius-buttons);
  background:var(--color-ink-black);color:var(--color-paper-white);border:0}
.btn--ghost{background:transparent;color:var(--color-ink-black);border:1px solid var(--color-ink-black);padding:6px 15px 7px}
.btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.btn:hover,.btn:focus-visible{background:var(--color-flame);color:var(--color-paper-white)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--color-ink-black);color:var(--color-paper-white)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);background:transparent;pointer-events:none}
.site-header>*{pointer-events:auto}
.logo{display:block;line-height:0}
.logo__img{display:block;height:44px;width:auto;max-width:none}
.icon-btn{appearance:none;background:none;border:0;padding:8px;margin:-8px;cursor:pointer;
  color:var(--color-ink-black);line-height:0;transition:color .2s}
.site-header.is-on-dark .icon-btn{color:var(--color-warm-cream)}

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:calc(-1 * var(--header-h));height:85vh;min-height:640px;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 2s ease-in-out}
.hero__img.is-current{opacity:1}
.hero__content{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:var(--header-h) var(--gutter) 160px;
  color:var(--hero-ink)}
.hero__sub{margin-bottom:var(--spacing-12);font-size:14px;line-height:1.5;letter-spacing:1.4px;text-transform:uppercase}
.scroll{position:absolute;left:50%;bottom:var(--spacing-24);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;color:var(--indicator-ink,var(--hero-ink));text-decoration:none}
.scroll__line{display:block;width:1px;height:120px;background:currentColor}
.scroll svg{display:block;margin-top:-1px}
.tone-light{--hero-ink:var(--color-ink-black)}
.tone-dark{--hero-ink:var(--color-warm-cream)}
.indicator-light{--indicator-ink:var(--color-ink-black)}
.indicator-dark{--indicator-ink:var(--color-warm-cream)}

/* ---------- Sections ---------- */
.band{padding:var(--section-gap) 0}
.band--white{background:var(--surface-paper-white)}
.band--cream{background:var(--surface-warm-cream)}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--gutter)}
.block+.block{margin-top:var(--section-gap)}

.split{display:grid;grid-template-columns:35fr 65fr;column-gap:var(--spacing-80);align-items:start}
.split+.split{margin-top:var(--section-gap)}
.split__text{max-width:480px}
.split__text > .body:first-child{margin-top:-4px}
.split__text .btn{margin-top:var(--spacing-40)}
.split__media img{width:100%}
.statement{margin-top:var(--spacing-40)}

.lead{font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-regular);
  font-size:var(--text-lead);line-height:1.35;letter-spacing:-0.01em;max-width:720px}
.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--spacing-40);row-gap:var(--spacing-60)}
.grid2 .h-sub{margin-top:var(--spacing-12)}
.sequence{font-family:var(--font-soehne-mono-buch);font-size:14px;line-height:1.6;letter-spacing:0.7px;text-transform:uppercase}
.after-media{margin-top:var(--section-gap)}

/* ---------- Contact ---------- */
.contact{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:flex-end}
.contact__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.contact__content{position:relative;width:100%;max-width:var(--page-max-width);margin:0 auto;
  padding:var(--section-gap) var(--gutter);color:var(--hero-ink)}
.contact .kicker{margin-bottom:var(--spacing-12)}
.contact__list{margin-top:var(--spacing-40);display:grid;gap:var(--spacing-4)}
.contact__list a{text-decoration:none}
.contact__list a:hover{text-decoration:underline;text-underline-offset:3px}
.contact .btn{margin-top:var(--spacing-40)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-warm-cream)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:var(--spacing-20);
  padding-top:var(--spacing-24);padding-bottom:32px;
  font-family:var(--font-soehne-mono-buch);font-size:12px;line-height:1.6;letter-spacing:0.6px;text-transform:uppercase}
.site-footer a{text-decoration:none}

/* ---------- Menu ---------- */
.menu{position:fixed;inset:0;z-index:100;background:var(--surface-warm-cream);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
.menu__bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter)}
.menu__body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  max-width:var(--page-max-width);width:100%;margin:0 auto;padding:var(--spacing-60) var(--gutter) 32px}
.menu__links{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:var(--spacing-12);
  padding:var(--header-h) var(--gutter);text-align:center;pointer-events:none}
.menu__links a{pointer-events:auto;font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-medium);
  font-size:var(--text-menu);line-height:1.05;letter-spacing:var(--tracking-heading-sm);text-decoration:none}
.menu__links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- Multi-page additions ---------- */
[id]{scroll-margin-top:var(--header-h)}

/* Inner page title */
.page-head{margin-top:calc(-1 * var(--header-h));padding:calc(var(--header-h) + var(--spacing-60)) 0 0}
.page-head.band--white{background:var(--surface-paper-white)}
.page-head.band--cream{background:var(--surface-warm-cream)}
.page-head .kicker{margin-bottom:var(--spacing-16)}
.intro{font-family:var(--font-cardinal-fruit);font-weight:var(--font-weight-regular);
  font-size:var(--text-subheading);line-height:1.15;letter-spacing:var(--tracking-subheading);
  text-wrap:balance}
.page-head + .band{padding-top:var(--section-gap)}

/* Image dividers */
.bleed{margin:var(--section-gap) 0}
.offset{display:grid;grid-template-columns:35fr 65fr;column-gap:var(--spacing-80)}
.offset__media{grid-column:2}
.offset__media img{width:100%}

/* "Know more" links on the main page */
.more{margin-top:var(--spacing-60)}
.split__text .more{margin-top:var(--spacing-40)}
.item > .h-sub:first-child{margin-top:0}
.stack{display:grid;row-gap:var(--spacing-40);margin-top:var(--spacing-60)}
.stack .body{max-width:560px}

/* Closing invitation at the end of each page */
.closing__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.closing__line{display:block;width:1px;height:80px;background:currentColor;margin-bottom:var(--spacing-40)}
.closing .btn{margin-top:var(--spacing-40)}

/* Get in Touch page: contact photo opens the page */
.contact--page{margin-top:calc(-1 * var(--header-h))}

/* Hero: name appears in cream, then settles into ink; photo slowly settles */
@keyframes hero-name{
  0%{opacity:0;color:var(--color-ink-black)}
  25%{opacity:1;color:var(--color-ink-black)}
  45%{opacity:1;color:var(--color-ink-black)}
  100%{opacity:1;color:var(--color-flame)}
}
@keyframes hero-sub{from{opacity:0}}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .display{color:var(--color-flame);animation:hero-name 4s ease-in-out both}
.hero__sub{animation:hero-sub 1.2s ease-out .15s both}
.hero__img:first-of-type{animation:hero-zoom 6s cubic-bezier(.2,.6,.3,1) both;transform-origin:50% 60%}

/* Edge-to-edge images drift slightly slower than the page */
.bleed{position:relative;overflow:hidden;height:clamp(420px,78vh,820px)}
.bleed img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;will-change:transform}

/* Gentle reveal as content scrolls into view (only when JS motion is active) */
.js-motion .reveal{opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .8s cubic-bezier(.25,.6,.3,1),transform .8s cubic-bezier(.25,.6,.3,1);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal.is-in{opacity:1;transform:none}
.js-motion .reveal-img{overflow:hidden}
.js-motion .reveal-img img{opacity:0;transform:scale(1.02);
  transition:opacity 1.1s ease-out,transform 1.1s cubic-bezier(.25,.6,.3,1);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal-img.is-in img{opacity:1;transform:none}

/* Soft fade between pages */
@keyframes page-in{from{opacity:0}}
body{animation:page-in .45s ease-out backwards}
html.is-leaving body{opacity:0;transition:opacity .3s ease-in}

/* Current page in the menu */
.menu__links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

@media (max-width:900px){
  .page-head{padding-top:calc(var(--header-h) + var(--spacing-40))}
  .page-head + .band{padding-top:var(--section-gap)}
  .offset{grid-template-columns:1fr}
  .offset__media{grid-column:1}
  .more{margin-top:var(--spacing-40)}
}
@media (max-width:767px){
  .bleed{height:clamp(320px,60vh,520px)}
  .closing__line{height:60px;margin-bottom:var(--spacing-24)}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--gutter:var(--spacing-20);--section-gap:var(--spacing-60);--header-h:68px}
  .logo__img{height:32px}
  .split{grid-template-columns:1fr;row-gap:var(--spacing-40)}
  .split__text{max-width:none}
  .grid2{grid-template-columns:1fr;row-gap:var(--spacing-40)}
}
@media (max-width:767px){
  .hero{min-height:560px}
  .hero__sub{font-size:12px;letter-spacing:1.2px}
  .scroll__line{height:80px}
  .site-footer .wrap{flex-direction:column;gap:var(--spacing-4)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .menu,.menu.is-open,.icon-btn,.btn{transition:none}
  .hero .display,.hero__sub,.hero__img,body{animation:none}
  .hero__img{transition:none}
  .bleed img{transform:none!important}
}