/* Monetra Club — original logo and disciplined interface. Display-only release. */
:root {
  color-scheme: dark;
  --background: #080809;
  --surface: #121214;
  --surface-accent: #171719;
  --border: #2b2a27;
  --white: #f6f5f3;
  --text: #e9e7e3;
  --muted: #9a9894;
  --brand-gold: #ffb600; /* reference logo gold */
  --brand-orange: #ffb600; /* harmonized with original logo color */
  --radius: 17px;
  font-family: 'Inter', 'Inter Display', Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; min-height: 100dvh; color: var(--text); background: radial-gradient(ellipse 46% 56% at 101% 52%, rgba(255,149,0,.055), transparent 88%), #080809; -webkit-font-smoothing: antialiased; }
button,input,select { font: inherit; }
.shell { margin: 0 auto; min-height: 100dvh; max-width: 1140px; display: flex; flex-direction: column; padding: max(24px,env(safe-area-inset-top)) 48px max(18px,env(safe-area-inset-bottom)); }
.header { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 139px; border-bottom: 1px solid #262526; }
.identity { display: flex; gap: 15px; align-items: center; }
.logo-frame { width: 192px; height: auto; flex: none; overflow: hidden; position: relative; }
.official-logo { width: 100%; height: auto; object-fit: contain; mix-blend-mode: screen; display: block; }
.identity-copy { border-left: 1px solid #37332a; padding-left: 20px; }
.club-name { font-size: 23px; font-weight: 760; line-height: 1; letter-spacing: .15em; color: #fff; }
.club-point { color: var(--brand-gold); }
.tagline { margin: 10px 0 0; line-height: 1.35; font-size: 11.5px; font-weight: 430; color: #bbb5ab; white-space: nowrap; }
.header-right { font-size: 10px; font-weight: 690; letter-spacing: .15em; color: #96918a; display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.header-led,.signal-dot { width: 6px; height: 6px; background: var(--brand-gold); flex: none; border-radius: 100%; box-shadow: 0 0 10px #ffb60050; }
.main { width: 100%; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,420px); align-items: start; column-gap: clamp(45px, 6vw, 110px); padding-top: clamp(76px, 10vh, 124px); }
.intro { max-width: 510px; padding-top: 11px; }
.overline { font-size: 11px; font-weight: 690; color: var(--brand-gold); display: flex; align-items: center; gap: 10px; letter-spacing: .12em; margin: 0 0 30px; }
.overline-bar { display: inline-block; width: 25px; height: 1px; background: var(--brand-gold); }
.separator { color: #67625a; padding: 0 4px; }
h1 { margin: 0; font-size: clamp(31px, 3.6vw, 43px); font-weight: 690; letter-spacing: -.047em; line-height: 1.19; color: var(--white); }
h1 em { font: inherit; font-weight: 690; color: var(--brand-gold); }
.description { margin: 24px 0 0; max-width: 390px; color: #aaa6a0; font-weight: 420; font-size: 15px; line-height: 1.76; }
.thin-divider { height: 1px; background: #2b2928; max-width: 425px; margin-top: 46px; }
.intro-caption { padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; font-size: 11px; color: #8b8680; }
.caption-index { color: var(--brand-gold); letter-spacing: .08em; font-weight: 650; }
.aside { min-width: 0; }
.access-card,.panel { background: linear-gradient(154deg, #171719 0%, #111113 100%); border: 1px solid #35302a; border-radius: var(--radius); padding: 29px 28px 26px; box-shadow: 0 32px 75px #00000030; }
.access-card { position: relative; overflow: hidden; }
.access-card::before { content: ''; position: absolute; top: 0; right: 0; width: 105px; height: 1px; background: linear-gradient(to left, var(--brand-gold), transparent); }
.access-head,.panel-top { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.card-kicker { color: var(--brand-gold); font-size: 10px; font-weight: 720; letter-spacing: .155em; }
.shield { color: #9f9282; }
.access-title { margin: 28px 0 12px; color: var(--white); font-size: 22px; font-weight: 620; line-height: 1.33; letter-spacing: -.035em; }
.access-description { margin: 0; font-size: 13px; line-height: 1.72; color: var(--muted); }
.notice { margin: 26px 0 0; padding: 14px 15px; border-radius: 10px; border: 1px solid #554632; background: #242019; color: #d8c7ac; font-size: 12.5px; line-height: 1.65; }
.notice.error { color: #e2d2b9; border-color: #57442b; }
.notice.hidden,.hidden { display:none !important; }
.access-foot { padding-top: 22px; margin-top: 27px; border-top: 1px solid #36312b; display: flex; align-items: center; gap: 10px; color: #938d84; font-size: 11px; line-height: 1.45; }
.access-foot .signal-dot { width: 5px; height: 5px; }
.panel { margin-top: 15px; padding: 25px 26px; }
h2 { color: var(--white); font-size: 22px; font-weight: 650; letter-spacing: -.035em; line-height: 1.3; margin: 17px 0; }
.field-caption { color: var(--muted); font-size: 12px; margin: 19px 0 6px; }
.profile-text { color: var(--white); font-size: 16px; font-weight: 610; margin: 0; overflow-wrap: anywhere; }
.tier-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid #34302a; margin-top: 25px; color: var(--muted); font-size: 12px; }
.tier-line strong { font-size: 16px; color: var(--brand-gold); }
.footnote { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 18px 0 0; }
[hidden] { display: none !important; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #211f20; padding-top: 21px; margin-top: 64px; color: #7e7871; font-size: 10px; letter-spacing: .13em; font-weight: 600; }
.footer-note { letter-spacing: .01em; font-weight: 430; color: #8d8881; }
@media (max-width: 760px) {
  .shell { max-width: 530px; padding: max(16px,env(safe-area-inset-top)) 23px max(18px,env(safe-area-inset-bottom)); }
  .header { min-height: 113px; }
  .logo-frame { width: 139px; height: auto; }
  .official-logo { width: 100%; height: auto; }
  .identity { gap: 10px; width: 100%; min-width: 0; }
  .identity-copy { padding-left: 13px; min-width: 0; }
  .club-name { font-size: 18px; }
  .tagline { font-size: 10px; line-height: 1.45; margin-top: 7px; letter-spacing: -.02em; }
  .header-right { display:none; }
  .main { display: block; padding-top: 56px; }
  .intro { padding: 0; }
  .overline { font-size: 10px; gap: 8px; margin-bottom: 21px; }
  .overline-bar { width: 18px; }
  h1 { font-size: clamp(30px,8vw,38px); line-height: 1.24; letter-spacing: -.05em; }
  .description { font-size: 13.5px; max-width: 350px; margin-top: 17px; line-height: 1.68; }
  .thin-divider { margin-top: 25px; }
  .intro-caption { padding-top: 14px; font-size: 10px; gap: 11px; }
  .aside { margin-top: 38px; }
  .access-card { padding: 23px 20px 21px; }
  .access-title { margin: 23px 0 11px; font-size: 20px; }
  .notice { margin-top: 21px; }
  .access-foot { margin-top: 22px; padding-top: 17px; }
  .footer { margin-top: 49px; padding-top: 20px; display: block; }
  .footer-note { display:none; }
}
@media (max-width: 370px) {
  .shell { padding-left: 17px; padding-right: 17px; }
  .logo-frame { width: 108px; height: auto; }
  .official-logo { width: 100%; height: auto; }
  .club-name { font-size: 17px; }
  .identity-copy { padding-left: 9px; }
  .tagline { font-size: 9px; letter-spacing: -.03em; }
}
@media (prefers-reduced-motion: no-preference) { .access-card { animation: reveal .22s ease-out both; } @keyframes reveal { from {opacity:.7;transform:translateY(5px);} to {opacity:1;transform:none;} } }

/* v6: complete, uncut logo and single-line club promise */
.logo-frame { overflow: visible; }
.official-logo { transform: none; max-width: 100%; }
.tagline { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 940px) {
  .logo-frame { width: 166px; }
  .identity-copy { padding-left: 14px; }
  .tagline { font-size: 10px; }
  .header-right { font-size: 9px; }
}
@media (max-width: 760px) {
  .identity-copy { flex: 1; }
  .header { padding: 8px 0 15px; }
}


/* v7 - focused headline typography refresh only.
   All other components, layout, brand colors and logos are unchanged. */
h1, h1 em {
  font-family: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-synthesis: none;
  text-transform: none;
}
h1 {
  font-size: clamp(34px, 3.35vw, 42px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.30;
}
h1 em {
  font-weight: 500;
  letter-spacing: -0.032em;
}
@media (max-width: 760px) {
  h1 { font-size: clamp(31px, 8.0vw, 36px); line-height: 1.32; letter-spacing: -.028em; }
  h1 em { letter-spacing: -.034em; }
}
@media (max-width: 370px) {
  h1 { font-size: 30px; }
}

/* v8: reference-styled athletic slashed headline; only this element changed. */
.visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.razor-headline { width:100%; max-width:510px; margin:0; line-height:0; }
.razor-image { display:block; width:100%; max-width:510px; height:auto; object-fit:contain; }
@media (max-width:760px) {
  .razor-headline {max-width:480px;}
  .description {margin-top:21px;}
}

/* v9: the complete headline is a single #FFB600 hue taken from the original MONETRA mark; no terminal periods.
   Title graphic is displayed uncropped, has a semantic accessible label in HTML. */
.razor-image {filter: none;}

/* v10 — only the CLUB wordmark: modest size reduction, reference-orange letter outline. */
.club-name {
  font-size: 20px;
  -webkit-text-stroke: 1.5px var(--brand-gold);
  paint-order: stroke fill;
  text-shadow: 0 0 7px rgba(255, 182, 0, .22), 0 2px 3px #000;
}
@media (max-width: 760px) { .club-name { font-size: 16px; } }
@media (max-width: 370px) { .club-name { font-size: 15px; } }