/* ============================================================
   STORYLINE — Soprano Properties · Paris desk
   Base tokens, design directions, nav, hero
   ============================================================ */

:root{
  /* Core palette — dark + gold, refined */
  --bg:#0b0b0c;
  --bg-deep:#070708;
  --panel:#0f0f10;
  --ink:#f3ede2;
  --ink-soft:rgba(243,237,226,.72);
  --muted:rgba(243,237,226,.50);
  --faint:rgba(243,237,226,.34);
  --rule:rgba(243,237,226,.14);
  --rule-soft:rgba(243,237,226,.08);

  /* Accent — tweakable (set --accent; tints derive automatically) */
  --accent:#c7972f;          /* classic gold */
  --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 30%, transparent);

  /* Type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'IBM Plex Sans Arabic','Jost',system-ui,sans-serif;
  --head:var(--serif);       /* heading family — swapped by direction */

  /* Rhythm — tweakable density */
  --section-y:148px;
  --gutter:clamp(22px,5vw,64px);
  --maxw:1240px;

  /* Tracking system — deliberate, not uniform */
  --track-eyebrow:.34em;
  --track-label:.2em;
  --track-cta:.26em;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-dist:34px;
}

/* ---- DENSITY ---- */
html[data-density="compact"]{ --section-y:108px; }
html[data-density="spacious"]{ --section-y:188px; }

/* ---- ACCENT now driven by inline --accent (see tweaks-app) ---- */

/* ---- DESIGN DIRECTIONS ---- */
/* Editorial (default): serif heads, generous, magazine */
html[data-dir="editorial"]{ --head:var(--serif); }

/* Architectural: sans heads, tighter, grid-driven, structural */
html[data-dir="architectural"]{
  --head:var(--sans);
  --track-eyebrow:.42em;
}
html[data-dir="architectural"] .act-title,
html[data-dir="architectural"] .hero h1{
  font-weight:200;
  letter-spacing:-.01em;
}
html[data-dir="architectural"] .act-title em,
html[data-dir="architectural"] .chapter h3,
html[data-dir="architectural"] .intro p,
html[data-dir="architectural"] .bridge p,
html[data-dir="architectural"] .soprano blockquote,
html[data-dir="architectural"] .booking h2,
html[data-dir="architectural"] .intro .sign span,
html[data-dir="architectural"] .soprano cite span{
  font-family:var(--sans);
}
html[data-dir="architectural"] .act-title em{ font-style:normal; font-size:.34em; }
html[data-dir="architectural"] .chapter h3{ font-weight:300; letter-spacing:-.005em; }

/* Quiet: serif heads but minimal accent, hairline restraint */
html[data-dir="quiet"]{ --head:var(--serif); --accent-line:var(--rule); }
html[data-dir="quiet"] .eyebrow::before,
html[data-dir="quiet"] .eyebrow::after{ color:var(--faint); }
html[data-dir="quiet"] .act-title em{ color:var(--ink-soft); }

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Kill browser autofill background tint */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink)!important;
  -webkit-box-shadow:0 0 0 1000px transparent inset!important;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:var(--ink);
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}

/* ---- NAV ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--gutter);
  transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:14px var(--gutter);
  background:rgba(8,8,9,.78);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--rule-soft);
}
.nav .brand{display:flex;flex-direction:column;gap:5px}
.brandlogo{height:32px;width:auto;max-width:none;display:block;object-fit:contain;flex-shrink:0;filter:brightness(1.12)}
.nav .brand small{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border:1px solid var(--ink);
  font-size:10.5px;letter-spacing:var(--track-cta);text-transform:uppercase;
  font-weight:400;transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:hover .ar{transform:translateX(4px)}

/* ---- HERO ---- */
.hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
}
.hero video,.hero .heroimg{position:absolute;inset:0;width:100%;height:108%;object-fit:cover;z-index:0;will-change:transform}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 18%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.82) 100%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.80) 100%);
}
.hero .inner{position:relative;z-index:2;padding:0 24px;max-width:940px}
.hero .kicker{
  font-size:10.5px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--accent);margin-bottom:30px;
}
.hero h1{
  font-family:var(--head);font-weight:300;
  font-size:clamp(46px,8vw,116px);line-height:.98;letter-spacing:.01em;margin-bottom:30px;
}
.hero h1 span{display:block}
.hero h1 .amp{color:var(--accent);font-style:italic}
.hero p{
  font-size:16.5px;line-height:1.85;color:var(--ink-soft);
  max-width:540px;margin:0 auto 42px;font-weight:300;
}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scrollhint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scrollhint .ln{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:hintpulse 2.6s var(--ease) infinite}
@keyframes hintpulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

@media(max-width:880px){
  .nav{padding:14px 18px}
  .nav.scrolled{padding:11px 18px}
  .brandlogo{height:24px}
  .nav .brand small{font-size:8px;letter-spacing:.24em}
  .btn{padding:11px 16px;font-size:9.5px;letter-spacing:.18em}
  .hero{min-height:540px}
  .hero h1{font-size:clamp(40px,12vw,68px)}
  .hero p{font-size:14.5px;padding:0 6px}
  .hero .kicker{margin-bottom:22px}
}
@media(max-width:480px){
  .nav{padding:12px 15px}
  .nav .brand small{font-size:7.5px;letter-spacing:.2em}
  .btn{padding:10px 13px;font-size:9px;gap:6px}
  .hero h1{font-size:clamp(36px,13vw,58px);margin-bottom:24px}
  .hero p{font-size:14px;line-height:1.75;margin-bottom:34px}
  .hero .kicker{font-size:9.5px;letter-spacing:.26em;margin-bottom:18px}
  .scrollhint{bottom:26px}
}