/* =================================================================
   MAPHRODITE — Editorial design system
   White, quiet, cinematic. Serif headlines, minimal sans labels.
   Shared by the homepage and all sub-pages.
   ================================================================= */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---- Tokens ---- */
:root{
  --paper:#FAF8F4;        /* warm white */
  --paper-2:#F2EEE7;      /* faint panel */
  --ink:#17150F;          /* warm near-black */
  --ink-soft:#6A6356;     /* muted secondary */
  --ink-faint:#9A9384;    /* captions */
  --line:#E4DFD4;         /* hairline */
  --line-strong:#D6CFC1;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(22px,5vw,72px);
  --maxw:1280px;
  --measure:62ch;

  --t-slow:1.4s cubic-bezier(.19,1,.22,1);
}

/* ---- Base ---- */
html,body{background:var(--paper);color:var(--ink)}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper)}

/* ---- Typography ---- */
.serif{font-family:var(--serif)}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(2.8rem,8.5vw,7.2rem);
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.display{text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:500}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.7vw,2.15rem);
  line-height:1.4;font-weight:400;color:var(--ink);
  max-width:32ch;text-wrap:balance;
}
.body{font-size:1.0625rem;line-height:1.75;color:var(--ink-soft);max-width:var(--measure)}
.body.serif{font-family:var(--serif);font-size:1.4rem;line-height:1.6;color:var(--ink)}

/* eyebrow / minimal sans label */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* text link with quiet underline */
.text-link{
  position:relative;font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding-bottom:3px;display:inline-block;
}
.text-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.19,1,.22,1);
}
.text-link:hover::after{transform:scaleX(1)}
.text-link--lined::after{transform:scaleX(1);opacity:.35}
.text-link--lined:hover::after{opacity:1}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:880px}
hr.rule{border:none;border-top:1px solid var(--line);margin:0}

/* ---- Navigation ---- */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) var(--gutter);
  color:#fff;                                   /* legible white over the cover photo */
  text-shadow:0 1px 1px rgba(0,0,0,.42), 0 2px 22px rgba(0,0,0,.5);
}
.site-nav a,.site-nav button{color:#fff}
/* solid mode (used on white sub-pages or after scroll) */
.site-nav.is-solid{
  color:var(--ink);text-shadow:none;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav.is-solid a,.site-nav.is-solid button{color:var(--ink)}
.wordmark{
  font-family:var(--serif);font-weight:500;
  font-size:1.05rem;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;white-space:nowrap;
}
.nav-links{display:flex;align-items:baseline;gap:clamp(18px,2.4vw,34px)}
.nav-links .text-link{color:inherit}
@media(max-width:600px){
  .wordmark{font-size:.82rem;letter-spacing:.3em;text-indent:.3em}
  .nav-links{gap:16px}
  .nav-links .text-link,.lang__btn{font-size:.68rem;letter-spacing:.1em}
}

/* language switcher (whisper-quiet) */
.lang{position:relative}
.lang__btn{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.lang__btn:hover{opacity:.7}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 12px);min-width:140px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s,transform .25s,visibility .25s;
  box-shadow:0 24px 60px -28px rgba(20,18,15,.4);
}
.lang__menu.open{opacity:1;visibility:visible;transform:none}
.lang__menu button{
  display:block;width:100%;text-align:left;padding:9px 12px;
  font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);
}
.lang__menu button:hover{background:var(--paper-2);color:var(--ink)}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid var(--line);
  padding:clamp(56px,8vw,110px) 0 48px;
  background:var(--paper);
}
.footer-grid{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;align-items:flex-start}
.footer-brand .wordmark{color:var(--ink);font-size:1rem}
.footer-press{margin-top:18px;max-width:34ch;color:var(--ink-faint);
  font-size:.78rem;letter-spacing:.04em;line-height:1.7}
.footer-col h4{font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.footer-col a{display:block;color:var(--ink-soft);font-size:.92rem;padding:5px 0;
  font-family:var(--serif);transition:color .3s}
.footer-col a:hover{color:var(--ink)}
.footer-base{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  align-items:center;margin-top:clamp(48px,7vw,90px);padding-top:26px;
  border-top:1px solid var(--line);color:var(--ink-faint);font-size:.74rem;letter-spacing:.03em}
.colophon{margin-top:30px;color:var(--ink-faint);font-size:.72rem;line-height:1.85;letter-spacing:.02em}
.colophon a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
.colophon a:hover{text-decoration-color:var(--ink-soft)}
.dro1d{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);padding:7px 12px;transition:.3s}
.dro1d:hover{border-color:var(--ink-soft);color:var(--ink-soft)}

/* ---- Prose (legal / article sub-pages) ---- */
.prose{max-width:72ch;margin-inline:auto}
.prose h2{margin:2.2em 0 .5em;font-size:clamp(1.5rem,3vw,2.1rem)}
.prose h3{margin:1.8em 0 .4em}
.prose p{margin:0 0 1.15em;color:var(--ink-soft);line-height:1.8;font-size:1.05rem}
.prose ul,.prose ol{margin:0 0 1.3em 1.2em;color:var(--ink-soft);line-height:1.8}
.prose li{margin-bottom:.5em}
.prose a{text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:3px;transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose pre{background:var(--paper-2);border:1px solid var(--line);padding:18px 20px;overflow:auto;
  font-size:.84rem;line-height:1.65;margin:0 0 1.4em;border-radius:2px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--paper-2);padding:.12em .42em;border-radius:2px}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.prose blockquote{margin:0 0 1.4em;padding-left:22px;border-left:2px solid var(--line-strong);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.prose .eyebrow{display:block;margin:2.4em 0 1em}
.prose img{margin:1.5em 0;border-radius:2px}

/* ---- Sub-pages ---- */
.subpage{padding-top:clamp(120px,15vh,176px);padding-bottom:clamp(72px,12vw,150px)}
.subhead{margin-bottom:clamp(44px,6vw,78px)}
.subhead .eyebrow{display:block;margin-bottom:24px}
.subhead h1{margin-bottom:.24em}
.subhead__meta{color:var(--ink-faint);font-size:.82rem;letter-spacing:.05em}
.subhead .lede{margin-top:.5em}
.langbar{display:flex;gap:20px;margin-top:34px}
.langbar button{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);padding-bottom:4px;border-bottom:1px solid transparent;transition:.3s}
.langbar button.active,.langbar button:hover{color:var(--ink);border-color:var(--ink)}
.lang-content{display:none}.lang-content.active{display:block}

/* feature line items (no cards) — for app sub-pages */
.feature-list{border-top:1px solid var(--line);margin-top:10px}
.feature-list .item{padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:clamp(20px,5vw,64px);align-items:baseline}
.feature-list .item h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500}
.feature-list .item p{color:var(--ink-soft);line-height:1.75;max-width:52ch}
@media(max-width:680px){.feature-list .item{grid-template-columns:1fr;gap:10px}}

/* quiet full-width image band for sub-pages */
.band{position:relative;height:54vh;min-height:340px;overflow:hidden;background:var(--paper-2);margin:clamp(50px,8vw,96px) 0}
.band img{width:100%;height:100%;object-fit:cover}

/* ---- Motion ---- */
/* Content is visible by default (no-JS / sub-pages without an observer).
   Only pages that opt in via html.reveal-ready get the fade-up animation. */
.reveal{opacity:1;transform:none}
html.reveal-ready .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow),transform var(--t-slow)}
html.reveal-ready .reveal.in{opacity:1;transform:none}
html.reveal-ready .reveal[data-d="1"]{transition-delay:.12s}
html.reveal-ready .reveal[data-d="2"]{transition-delay:.24s}
html.reveal-ready .reveal[data-d="3"]{transition-delay:.36s}

@keyframes kenburns{0%{transform:scale(1.015) translate3d(0,0,0)}
  100%{transform:scale(1.09) translate3d(0,-1.4%,0)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}