/* ============================================================
   OTIUMSPORT — Shared design system
   Black & gold luxury minimalism · antiquity as a fine accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* Palette ------------------------------------------------ */
  --black:        #0a0a0b;     /* page base */
  --ink:          #0f0f10;     /* raised surfaces */
  --ink-2:        #15151700;   /* unused alpha base */
  --surface:      #141416;     /* cards */
  --surface-2:    #1b1b1e;     /* hover / inset */
  --line:         rgba(205,166,101,.16);   /* gold hairline */
  --line-soft:    rgba(255,255,255,.08);
  --gold:         #cda665;
  --gold-bright:  #e6cf99;
  --gold-deep:    #a9844a;
  --cream:        #f4efe6;     /* warm white text */
  --muted:        #9a958c;     /* muted body */
  --muted-2:      #6f6b64;     /* faint */

  /* Light sections (rare) */
  --paper:        #f4efe6;
  --paper-ink:    #1a1916;

  /* Type --------------------------------------------------- */
  --serif: 'Marcellus', 'Times New Roman', serif;
  --sans:  'Jost', system-ui, sans-serif;

  /* Metrics ------------------------------------------------ */
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#0a0a0b; }

/* Scrollbar */
*{ scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; }

/* ---- Typography ---------------------------------------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.04; letter-spacing:.005em; }
.display{
  font-size:clamp(2.6rem, 7vw, 6.2rem);
  line-height:.98;
}
.h2{ font-size:clamp(2rem, 4.2vw, 3.6rem); line-height:1.02; }
.h3{ font-size:clamp(1.4rem, 2.4vw, 2rem); }
p{ margin:0 0 1.1em; color:var(--muted); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:#cfc9bf; line-height:1.6; font-weight:300; }

/* Eyebrow / spaced caps label */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--gold); opacity:.6;
}
.eyebrow.no-rule::before{ display:none; }
.eyebrow.center{ justify-content:center; }

.gold-text{ color:var(--gold); }
.serif-accent{ font-family:var(--serif); font-style:normal; }

/* Section index numerals */
.idx{ font-family:var(--serif); color:var(--gold-deep); font-size:.95rem; letter-spacing:.1em; }

/* ---- Layout utilities --------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,11vw,160px); position:relative; }
.section.tight{ padding-block:clamp(56px,7vw,96px); }
.center{ text-align:center; }
.muted{ color:var(--muted); }

/* Greek-key (meander) hairline divider — subtle antiquity nod */
.meander{
  height:14px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M1 13V4h9V1h17v3h9v9' fill='none' stroke='%23cda665' stroke-width='1' stroke-opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center;
  opacity:.7;
}
.hairline{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- Buttons ------------------------------------------ */
.btn{
  --bg:transparent;
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:500; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--gold);
  color:var(--gold); background:var(--bg);
  cursor:pointer; transition:all .45s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arr{ transition:transform .45s var(--ease); }
.btn:hover{ background:var(--gold); color:#0a0a0b; }
.btn:hover .arr{ transform:translateX(4px); }
.btn.solid{ background:var(--gold); color:#0a0a0b; }
.btn.solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn.ghost{ border-color:var(--line-soft); color:var(--cream); }
.btn.ghost:hover{ border-color:var(--gold); background:transparent; color:var(--gold); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:500; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); transition:gap .4s var(--ease);
}
.link-arrow .arr{ transition:transform .4s var(--ease); }
.link-arrow:hover{ gap:.9em; }
.link-arrow:hover .arr{ transform:translateX(3px); }

/* ============ HEADER ============ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
  padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ height:42px; width:auto; transition:height .5s var(--ease); }
.hdr.scrolled .brand img{ height:36px; }
.brand .bt{ display:flex; flex-direction:column; line-height:1; }
.brand .bt b{ font-family:var(--serif); font-weight:400; font-size:1.18rem; letter-spacing:.14em; color:var(--cream); }
.brand .bt span{ font-size:.55rem; letter-spacing:.42em; color:var(--gold); margin-top:5px; text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  color:var(--cream); opacity:.8; position:relative; padding:6px 0; transition:opacity .3s, color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .4s var(--ease);
}
.nav a:hover{ opacity:1; color:var(--gold); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav a.active{ color:var(--gold); opacity:1; }
.nav .cta{
  border:1px solid var(--gold); color:var(--gold); padding:.75em 1.4em; opacity:1;
}
.nav .cta::after{ display:none; }
.nav .cta:hover{ background:var(--gold); color:#0a0a0b; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:1.5px; background:var(--cream); transition:.3s; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:rgba(8,8,9,.97);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer a{ font-family:var(--serif); font-size:2rem; color:var(--cream); }
.drawer a:hover{ color:var(--gold); }

/* ============ FOOTER ============ */
.ftr{ background:#070708; border-top:1px solid var(--line); padding-top:clamp(60px,8vw,110px); }
.ftr-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:64px; }
.ftr-brand img{ height:64px; margin-bottom:22px; }
.ftr-brand p{ max-width:30ch; font-size:.95rem; }
.ftr h4{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.ftr-col a{ display:block; color:var(--muted); font-size:.95rem; padding:7px 0; transition:color .3s, padding-left .3s; }
.ftr-col a:hover{ color:var(--gold); padding-left:6px; }
.ftr-bottom{ border-top:1px solid var(--line-soft); padding-block:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.ftr-bottom span{ font-size:.78rem; letter-spacing:.08em; color:var(--muted-2); }
.socials{ display:flex; gap:14px; }
.socials a{
  width:38px; height:38px; border:1px solid var(--line-soft); border-radius:50%;
  display:grid; place-items:center; color:var(--muted); transition:.35s var(--ease);
}
.socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.socials svg{ width:16px; height:16px; }

/* ============ Reveal on scroll ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============ Image placeholder ============ */
.ph{
  position:relative; overflow:hidden; background:#161616;
  background-image:
    repeating-linear-gradient(135deg, rgba(205,166,101,.05) 0 2px, transparent 2px 11px);
}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(205,166,101,.5);
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .ftr-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .ftr-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .ftr-top{ grid-template-columns:1fr; }
  .brand .bt b{ font-size:1rem; }
}