/* ==============================================================
   MOUNT OLYMPAWS — mtolympaws.co
   Shared stylesheet for index.html and partners/index.html.
   Brand tokens live at the top; nothing below them is page-specific
   until the clearly marked sections.
   ============================================================== */

:root{
  color-scheme: light;

  --marble:      #EFEAE0;
  --marble-warm: #E7E1D4;
  --marble-deep: #DBD3C2;
  --aegean:      #0F3646;
  --aegean-dark: #0A2733;
  --olive:       #6D7A52;
  --gold:        #B8922A;
  --gold-light:  #D8B655;
  --ink:         #1B1A16;
  --ink-soft:    rgba(27,26,22,.66);
  --ink-faint:   rgba(27,26,22,.44);
  --hairline:    rgba(27,26,22,.14);

  /* Bodoni Moda carries the display sizes only — its hairlines vanish below
     ~14px, so every small label uses the geometric sans instead. */
  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --ui: "Jost", Futura, "Century Gothic", "Helvetica Neue", sans-serif;
  --body: var(--ui);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 60ch;
  --pad: clamp(20px, 5vw, 56px);
  --head-h: 50px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--marble);
  background-image:
    radial-gradient(ellipse 140% 70% at 50% -10%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(ellipse 90% 50% at 85% 100%, rgba(109,122,82,.07), transparent 70%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:500; text-wrap:balance; line-height:1.16;}
p{margin:0;}
a{color:inherit;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
:focus-visible{outline:2px solid var(--aegean); outline-offset:3px;}
section[id]{scroll-margin-top:calc(var(--head-h) + 16px);}

.shell{max-width:1120px; margin:0 auto; padding-inline:var(--pad);}
.shell.narrow{max-width:900px;}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--aegean); color:var(--marble); padding:12px 18px;
  font-family:var(--ui); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none;
}
.skip:focus{left:12px; top:12px;}

.eyebrow{
  font-family:var(--ui); font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}

/* ---------- anthemion rule ----------
   A generated ornament, used as a mask so one file tints to gold on the
   marble sections and to a lighter gold on the dark bands. */
.ornament{
  display:block; width:100%; aspect-ratio:1200/187;
  background-color:var(--gold); opacity:.72;
  -webkit-mask:url(ornament.png) center/contain no-repeat;
  mask:url(ornament.png) center/contain no-repeat;
}
.ornament.on-dark{background-color:var(--gold-light); opacity:.8;}
.rule-center{max-width:330px; margin:22px auto 0;}

/* ---------- header ---------- */
.site-head{
  position:sticky; z-index:50;
  top:env(safe-area-inset-top, 0px);
  background:rgba(239,234,224,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--hairline);
}
.site-head .shell{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:13px;
}
.wordmark{
  display:flex; align-items:center; gap:9px;
  font-family:var(--ui); font-weight:700; font-size:12px;
  letter-spacing:.2em; color:var(--aegean); text-decoration:none; white-space:nowrap;
}
.wordmark svg{width:18px; height:18px; color:var(--gold); flex:none;}
.site-nav{display:flex; gap:clamp(13px,2.6vw,26px); align-items:center;}
.site-nav a{
  font-family:var(--ui); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--aegean); border-bottom-color:var(--gold);}
.site-nav a[aria-current="page"]{color:var(--aegean); border-bottom-color:var(--gold);}
@media (max-width:640px){ .site-nav a.opt{display:none;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:12px 20px; border:1px solid var(--aegean); color:var(--aegean);
  background:transparent; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{background:var(--aegean); color:var(--marble);}
.btn.solid{background:var(--aegean); color:var(--marble);}
.btn.solid:hover{background:var(--aegean-dark);}
.btn.gold{border-color:var(--gold); color:var(--gold); background:transparent;}
.btn.gold:hover{background:var(--gold); color:var(--aegean-dark);}
.btn.ghost-light{border-color:rgba(239,234,224,.45); color:var(--marble);}
.btn.ghost-light:hover{background:rgba(239,234,224,.12); border-color:var(--marble);}
.btn svg{width:14px; height:14px; flex:none;}

/* ---------- section frame ---------- */
.section{padding-block:clamp(52px,8vw,92px);}
.section.tight{padding-block:clamp(38px,5.5vw,62px);}
.section-head{text-align:center; margin-bottom:clamp(28px,4vw,44px);}
.section-head h2{
  font-size:clamp(25px,4.6vw,43px); letter-spacing:.05em; text-transform:uppercase;
  color:var(--aegean); margin-top:10px;
}
.section-head .sub{
  font-size:16.5px; font-style:italic; color:var(--ink-soft); margin-top:10px;
  max-width:52ch; margin-inline:auto;
}

/* ==============================================================
   HOME — hero
   ============================================================== */
.hero{
  position:relative; isolation:isolate; text-align:center;
  padding-block:clamp(46px,9vw,86px) clamp(30px,5vw,44px);
}
/* The backdrop runs the full width of the viewport; only the text inside
   is held to the shell's measure. */
.hero > .shell{position:relative;}
.hero-bg{
  position:absolute; inset:-1px 0 0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center bottom; background-repeat:no-repeat;
  opacity:0;
}
/* A light scrim. The backdrop is high-key already, so this mostly lifts a halo
   behind the wordmark. The long tail at the bottom matters: the columns have to
   dissolve into the page over a good 30% of the height, or the bottom edge of
   the photograph reads as the image having failed to load. */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(239,234,224,.08) 0%,
      rgba(239,234,224,.20) 38%,
      rgba(239,234,224,.44) 62%,
      rgba(239,234,224,.78) 82%,
      rgba(239,234,224,.96) 94%,
      var(--marble) 100%),
    radial-gradient(ellipse 54% 56% at 50% 40%, rgba(239,234,224,.58), transparent 70%);
}
.hero[data-backdrop="on"] .hero-bg{opacity:1;}
.hero[data-backdrop="on"]{padding-block:clamp(64px,12vw,124px) clamp(52px,8vw,88px);}
.hero[data-backdrop="on"] h1{text-shadow:0 1px 2px rgba(239,234,224,.85);}
.hero[data-backdrop="on"] .thesis{text-shadow:0 1px 2px rgba(239,234,224,.8);}

.hero .crest{margin:0 auto 18px; display:block; width:min(116px,27vw); height:auto;}
.hero h1{
  font-size:clamp(36px,8vw,74px); font-weight:500; letter-spacing:.045em;
  color:var(--aegean); text-transform:uppercase;
}
.hero .thesis{
  font-family:var(--display); font-size:clamp(23px,3.6vw,34px); font-style:italic;
  font-weight:400; color:var(--ink-soft); margin-top:12px;
}
.hero .blurb{max-width:48ch; margin:20px auto 0; font-size:16.5px; color:var(--ink-soft);}
.hero .handles{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px;}

/* ---------- disclosure ---------- */
.disclosure{border-block:1px solid var(--hairline); background:rgba(255,255,255,.4);}
.disclosure .shell{
  display:flex; gap:12px; align-items:baseline; justify-content:center;
  padding-block:13px; text-align:center; flex-wrap:wrap;
}
.disclosure p{font-size:14px; color:var(--ink-faint); max-width:70ch; font-style:italic;}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(26px,4vw,38px);}
.filters button{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ui); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--hairline); color:var(--ink-soft);
  background:rgba(255,255,255,.5); transition:all .18s ease;
}
.filters button svg{
  width:17px; height:17px; flex:none; color:var(--olive);
  transition:color .18s ease;
}
.filters button[aria-pressed="true"] svg{color:var(--gold-light);}
.filters button:hover{border-color:var(--gold); color:var(--ink);}
.filters button[aria-pressed="true"]{background:var(--aegean); border-color:var(--aegean); color:var(--marble);}

/* ---------- the colonnade of offerings ---------- */
.colonnade{
  display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fill, minmax(262px, 1fr));
  align-items:start;
}
.offering{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.58);
  border:1px solid var(--hairline);
  border-top:3px solid var(--gold);
  padding:0 0 20px;
  transition:transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
}
@media (prefers-reduced-motion:no-preference){
  .offering:hover{transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(15,54,70,.6); border-top-color:var(--aegean);}
}
.offering .photo{
  position:relative;
  aspect-ratio:4/3; width:100%;
  background:linear-gradient(165deg, var(--marble-warm), var(--marble-deep));
  background-size:cover; background-position:center;
  display:grid; place-items:center;
  border-bottom:1px solid var(--hairline);
}

/* An empty slot gets a ruled inner frame and a label, so a page with no
   photography yet still looks finished rather than half-loaded. */
/* the saving, stated before anyone clicks through */
.offering .badge{
  position:absolute; top:0; right:0;
  background:var(--gold); color:var(--marble);
  font-family:var(--ui); font-size:10px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  padding:7px 11px; z-index:1;
}

.photo.is-empty{
  box-shadow:inset 0 0 0 1px rgba(27,26,22,.06);
  background-image:url(marble.jpg);
  background-size:cover; background-position:center;
}
.ph-inner{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:10px 14px;
}
.ph-inner svg{width:38px; height:38px; color:rgba(15,54,70,.26);}
.ph-label{
  font-family:var(--ui); font-size:8.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(15,54,70,.3);
}
.offering .body{padding:17px 20px 0; display:flex; flex-direction:column; gap:7px; flex:1;}
.offering .cat{
  font-family:var(--ui); font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--olive);
}
.offering h3{font-size:19px; letter-spacing:.07em; text-transform:uppercase; color:var(--aegean);}
.offering .why{font-size:15.5px; color:var(--ink-soft); line-height:1.45;}
.offering .perk{
  font-size:15px; color:var(--ink); padding-top:9px; margin-top:auto;
  border-top:1px solid var(--hairline);
}
.offering .perk b{font-weight:600; color:var(--olive);}
.codeline{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.code{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  border:1px dashed var(--gold); color:var(--aegean);
  padding:5px 9px; background:rgba(216,182,85,.13);
}
.copy{
  font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--hairline);
  padding-bottom:1px;
}
.copy:hover{color:var(--aegean); border-bottom-color:var(--gold);}
.copy[data-state="copied"]{color:var(--olive); border-bottom-color:var(--olive);}
.offering .go{margin:14px 20px 0; width:calc(100% - 40px);}
.empty{grid-column:1/-1; text-align:center; padding-block:40px; font-style:italic; color:var(--ink-faint);}

/* ---------- the pantheon (cats) ---------- */
.band-light{background:rgba(255,255,255,.42); border-block:1px solid var(--hairline);}
.gods{display:grid; gap:clamp(22px,4vw,44px); grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.god{text-align:center; margin:0;}
.god .photo{
  aspect-ratio:4/5; width:100%; max-width:290px; margin:0 auto;
  background:linear-gradient(165deg, var(--marble-warm), var(--marble-deep));
  background-size:cover; background-position:center;
  border:1px solid var(--hairline);
  display:grid; place-items:center;
}
.god .photo .ph-inner svg{width:48px; height:48px;}
.god h3{
  font-size:clamp(19px,2.6vw,25px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--aegean); margin-top:18px;
}
.god .domain{
  font-family:var(--ui); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-top:7px;
}
.god p.tale{font-size:16px; color:var(--ink-soft); margin-top:11px; max-width:34ch; margin-inline:auto;}

/* ==============================================================
   DARK AEGEAN BANDS (used on both pages)
   ============================================================== */
.aegean-band{
  background:var(--aegean); color:var(--marble);
  background-image:radial-gradient(ellipse 100% 60% at 50% 0%, rgba(216,182,85,.13), transparent 65%);
}
.aegean-band .section-head h2{color:var(--marble);}
.aegean-band .section-head .sub{color:rgba(239,234,224,.68);}
.aegean-band .eyebrow{color:var(--gold-light);}
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:rgba(239,234,224,.18);
  border:1px solid rgba(239,234,224,.18);
  max-width:760px; margin:0 auto;
}
.stats div{background:var(--aegean); padding:22px 16px; text-align:center;}
.stats .n{
  font-family:var(--display); font-weight:500; font-size:clamp(25px,4vw,34px);
  color:var(--gold-light); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.stats .t{
  font-family:var(--ui); font-size:9.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(239,234,224,.6); margin-top:8px;
}
.aegean-band .pitch{
  max-width:var(--measure); margin:clamp(26px,4vw,38px) auto 0; text-align:center;
  font-size:16.5px; color:rgba(239,234,224,.82);
}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px;}
.chips span{
  font-family:var(--ui); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(239,234,224,.72);
  border:1px solid rgba(239,234,224,.24); padding:7px 12px;
}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px;}

/* ==============================================================
   PARTNERS PAGE
   ============================================================== */
.kit-hero{text-align:center; padding-block:clamp(40px,7vw,72px) clamp(26px,4vw,38px);}
.kit-coin{
  display:block; width:min(128px,30vw); height:auto; margin:0 auto 20px;
  filter:drop-shadow(0 10px 20px rgba(27,26,22,.18));
}
.kit-hero h1{
  font-size:clamp(29px,5.8vw,53px); font-weight:500; letter-spacing:.045em;
  color:var(--aegean); text-transform:uppercase; margin-top:12px;
}
.kit-hero .thesis{
  font-family:var(--display); font-size:clamp(20px,3.2vw,29px); font-style:italic;
  font-weight:400; color:var(--ink-soft); margin-top:12px;
}
.kit-hero .blurb{max-width:56ch; margin:18px auto 0; color:var(--ink-soft);}
.kit-hero .cta-row{margin-top:26px;}
.kit-hero .cta-row .btn{border-color:var(--aegean); color:var(--aegean);}
.kit-hero .cta-row .btn.solid{color:var(--marble);}
.kit-hero .cta-row .btn:hover{color:var(--marble);}

/* audience bars */
.audience{display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:920px; margin:0 auto;}
.audience h3{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--olive); padding-bottom:9px; border-bottom:1px solid var(--hairline); margin-bottom:14px;
}
.bars{display:flex; flex-direction:column; gap:11px;}
.bar{display:grid; grid-template-columns:minmax(88px,auto) 1fr 44px; gap:12px; align-items:center; font-size:15px;}
.bar .track{height:7px; background:var(--marble-deep);}
.bar .fill{height:7px; background:var(--aegean); display:block;}
.bar em{
  font-family:var(--mono); font-style:normal; font-size:12px; text-align:right;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.source-note{
  text-align:center; font-size:14px; font-style:italic; color:var(--ink-faint);
  margin:26px auto 0; max-width:62ch; line-height:1.55;
}
.source-note b{font-style:normal; font-weight:600; color:var(--ink-soft);}

/* per-platform breakdown */
.platforms{
  margin-top:clamp(-14px,-1vw,0px);
  display:grid; gap:clamp(18px,3vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  max-width:920px; margin:0 auto;
}
.platform{
  background:rgba(255,255,255,.55); border:1px solid var(--hairline);
  border-top:3px solid var(--olive); padding:22px 24px 14px;
}
.platform h3{font-size:19px; letter-spacing:.11em; text-transform:uppercase; color:var(--aegean);}
.platform .handle{
  font-family:var(--ui); font-size:9.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold); margin-top:6px;
}
.platform .rows{margin-top:16px;}
.platform .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--hairline);
}
.platform .row:last-child{border-bottom:none;}
.platform .k{font-size:15px; color:var(--ink-soft);}
.platform .v{
  font-family:var(--display); font-weight:500; font-size:19px; color:var(--aegean);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.platform .v.muted{color:var(--ink-faint); font-size:16px;}

/* rates */
.rates{max-width:820px; margin:0 auto; border:1px solid var(--hairline); background:rgba(255,255,255,.5);}
.rate{
  display:grid; grid-template-columns:1fr auto; gap:14px 20px; align-items:baseline;
  padding:18px 22px; border-bottom:1px solid var(--hairline);
}
.rate:last-child{border-bottom:none;}
.rate h3{font-size:17px; letter-spacing:.09em; text-transform:uppercase; color:var(--aegean);}
.rate p{font-size:15.5px; color:var(--ink-soft); margin-top:4px;}
.rate .price{
  font-family:var(--display); font-weight:500; font-size:20px; color:var(--gold);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.rate .price small{display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:2px;}

/* process */
.process{counter-reset:step; display:grid; gap:clamp(14px,2vw,18px); grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.step{position:relative; padding-top:18px; border-top:1px solid var(--hairline);}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--ui); font-weight:600; font-size:11px; letter-spacing:.14em;
  color:var(--gold); display:block; margin-bottom:8px;
}
.step h3{font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--aegean); margin-bottom:6px;}
.step p{font-size:15px; color:var(--ink-soft); line-height:1.45;}

/* ==============================================================
   404
   ============================================================== */
.lost{text-align:center; padding-block:clamp(70px,14vw,140px);}
.lost .mosaic{
  display:block; width:min(280px,62vw); height:auto; margin:0 auto 30px;
  border:1px solid var(--hairline);
}
.lost h1{font-size:clamp(30px,6.4vw,56px); letter-spacing:.045em; text-transform:uppercase; color:var(--aegean);}
.lost p{font-size:18px; font-style:italic; color:var(--ink-soft); margin-top:16px; max-width:40ch; margin-inline:auto;}
.lost .cta-row{margin-top:30px;}

/* ==============================================================
   FOOTER
   ============================================================== */
.site-foot{padding-block:clamp(38px,6vw,58px) clamp(30px,5vw,44px); text-align:center;}
.foot-mark{margin:0 auto 16px; display:block; width:74px; height:auto;}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin-bottom:20px;}
.foot-links a{
  font-family:var(--ui); font-size:10px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  border-bottom:1px solid var(--hairline); padding-bottom:2px;
}
.foot-links a:hover{color:var(--aegean); border-bottom-color:var(--gold);}
.fine{font-size:13.5px; font-style:italic; color:var(--ink-faint); max-width:64ch; margin:0 auto;}
.fine + .fine{margin-top:9px;}

/* ---------- entrance (completes on its own; no scroll trigger) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both;}
  .rise:nth-of-type(2){animation-delay:.08s;}
  @keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
}