/* ===========================================================
   ENCYCLYKA — fashion media & creative community
   Design tokens. Fonts live in css/fonts.css (loaded first, preconnected).
   =========================================================== */

:root{
  /* palette */
  --bg:        #EDEAE2;
  --bg-alt:    #E3DFD3;
  --paper:     #F8F6F1;
  --ink:       #17161a;
  --ink-soft:  #55534c;
  --ink-faint: #6d6961;
  --line:      #c8c1af;
  --line-soft: #d9d4c6;
  --dark:      #15130f;
  --dark-alt:  #1d1a15;
  --accent:    #6e2a34;      /* oxblood — used sparingly */
  --accent-soft: #8a4650;
  --cream:     #efece5;

  /* type */
  --f-display: 'Playfair Display', 'Times New Roman', serif;
  --f-accent:  'Cormorant Garamond', Georgia, serif;
  --f-body:    'Lora', Georgia, serif;
  --f-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  --container: 1520px;
  --edge: clamp(24px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
 
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,p{ margin:0; }

/* Long Russian words in display type must break, not widen the page. */
h1,h2,h3,.section-head__title{ hyphens:auto; overflow-wrap:break-word; }
button{ font-family:inherit; cursor:pointer; }
h5,h6{ font-size:inherit; font-weight:inherit; margin:0; }
summary{ cursor:pointer; }
[hidden]{ display:none !important; }

::selection{ background:var(--accent); color:var(--cream); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

/* accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:var(--edge);
  z-index:999;
  font-family:var(--f-ui); font-size:13px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  background:var(--ink); color:var(--bg);
  padding:14px 22px;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

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

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.eyebrow{
  font-family:var(--f-ui);
  font-size:12px;
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--accent);
  display:inline-block;
}

.btn{
  font-family:var(--f-ui);
  font-size:12px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  padding:16px 30px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn:hover{ background:transparent; color:var(--ink); transform:translateY(-2px); }

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }

.btn--line{
  border:none;
  background:none;
  padding:8px 0;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  border-radius:0;
}
.btn--line:hover{ color:var(--accent); border-color:var(--accent); }

.btn--dark{
  border-color:var(--cream);
  background:var(--cream);
  color:var(--dark);
}
.btn--dark:hover{ background:transparent; color:var(--cream); }

.tag{
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--accent);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
}
.section-head h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.05;
  letter-spacing:-0.01em;
}
.section-head__title{ margin-top:16px; }

/* The heading and its description sat side by side at every width, with a 40px
   gap and space-between. On a 360px phone the title's own line breaks plus the
   gap pushed the paragraph past the viewport, and that is what set the 401px
   minimum the whole page had - every other section inherited it. */
@media (max-width: 780px){
  .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    margin-bottom:36px;
  }
}
.section-head .desc{
  max-width:min(360px, 100%);
  color:var(--ink-soft);
  font-size:15.5px;
}

/* one-off spacing used to be style="" attributes, which forced the CSP to
   allow 'unsafe-inline' for styles. Classes keep the policy strict. */
.about-grid--tight{ margin-top:28px; }
.btn--line--fit{ width:max-content; }
.btn--ghost--on-dark{ border-color:#c9c4b6; color:#efece5; }

section{ position:relative; }
.section-pad{ padding:120px 0; }
@media (max-width: 780px){ .section-pad{ padding:76px 0; } }

/* ===========================================================
   TOP UTILITY BAR
   =========================================================== */
.topbar{
  background:var(--ink-faint);
  background:#b6b0a0;
  color:var(--dark);
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}
.topbar .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:34px;
}
.topbar .social{ display:flex; gap:14px; }
.topbar .social a,.topbar .social-pending{ opacity:.85; transition:opacity .25s; }
.topbar .social a:hover{ opacity:1; }
/* a social address we were not given yet: shown, not pretending to be a link */
.social-pending{ cursor:default; }
.pending{ color:#a39d8e; }
.topbar .locale{ display:flex; gap:10px; align-items:center; }
.topbar .locale button{
  /* the inactive state used to be `opacity:.65` on the ink colour, which
     computed to #4d4a42 on the #b6b0a0 bar = 4.08:1, below the 4.5 needed.
     An explicit colour passes at 8.6:1 and keeps the same visual weight. */
  background:none; border:none; color:#15130f; font:inherit;
  letter-spacing:inherit; text-transform:inherit;
  padding:6px 2px; min-height:24px;
  transition:color .25s ease;
}
.topbar .locale button:hover{ color:#000; }
.topbar .locale button.active{ color:#000; font-weight:600; }

/* ===========================================================
   HEADER
   =========================================================== */
.masthead{ position:relative; z-index:100; }
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:96px;
}
.logo{
  font-family:var(--f-display);
  font-weight:600;
  font-size:26px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.main-nav{ display:flex; gap:44px; }
.main-nav a{
  font-family:var(--f-ui);
  font-size:12.5px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:28px; }
.header-actions .login{
  font-family:var(--f-ui);
  font-size:12.5px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.header-actions .login:hover{ border-color:var(--ink); }
.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none;
  width:26px; padding:8px 0;
  margin:-8px 0;
}
.burger span{
  height:1px; background:var(--ink); width:100%; display:block;
  transform-origin:center;
  transition:transform .3s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile drawer — driven by .open on .main-nav (no inline styles) */
.main-nav.open{
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--bg);
  padding:26px var(--edge) 32px;
  border-bottom:1px solid var(--line-soft);
  gap:0;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
}
.main-nav.open a{
  font-size:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  min-height:48px;                 /* touch target */
  display:flex; align-items:center;
}
.main-nav.open a:last-child{ border-bottom:none; }
.main-nav.open a::after{ display:none; }
/* body scroll lock while drawer is open */
body.nav-open{ overflow:hidden; }

@media (max-width: 980px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .header-actions .login{ display:none; }
}
@media (max-width: 560px){
  .site-header .wrap{ height:76px; }
  .main-nav.open{ max-height:calc(100vh - 76px); }
  .logo{ font-size:21px; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px;
  background:var(--bg);
  overflow:hidden;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px var(--edge) 64px calc(var(--edge));
  gap:28px;
}
.hero-copy h1{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(52px, 7vw, 92px);
  line-height:0.96;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.hero-sub{
  display:flex;
  align-items:center;
  gap:22px;
  font-family:var(--f-ui);
  font-size:13.5px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hero-sub .divider{ width:1px; height:34px; background:var(--line); }
.hero-sub .est{ color:var(--ink-faint); letter-spacing:var(--tracking-wide); }
.hero-desc{
  max-width:420px;
  font-family:var(--f-body);
  font-size:16.5px;
  color:var(--ink-soft);
}
.hero-cta{ display:flex; align-items:center; gap:32px; margin-top:8px; }

.hero-visual{
  position:relative;
  background:linear-gradient(180deg,#dcd8cd,#c9c3b3);
  overflow:hidden;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }

/* quick links strip */
.quick-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-soft);
}
.quick-links a{
  position:relative;
  aspect-ratio:16/13;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:26px;
  color:#f2efe8;
  border-right:1px solid rgba(255,255,255,.12);
}
.quick-links a:last-child{ border-right:none; }
.quick-links .ql-bg{
  position:absolute; inset:0; z-index:0;
}
.quick-links .ql-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.quick-links .ql-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.78) 100%);
  z-index:1;
}
.quick-links .ql-content{ position:relative; z-index:2; }
.quick-links .ql-tag{
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  opacity:.8;
  margin-bottom:8px;
  display:block;
}
.quick-links .ql-title{
  font-family:var(--f-accent);
  font-style:italic;
  font-size:22px;
  line-height:1.2;
}
.quick-links a{ transition:transform .5s ease; }
.quick-links a .ql-bg img{ transition:transform .6s ease; }
.quick-links a:hover .ql-bg img{ transform:scale(1.06); }

/* ticker */
.ticker{
  background:var(--dark);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  padding:20px 0;
  font-family:var(--f-ui);
  font-size:13px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,.08);
}
.ticker .ticker-track{
  display:inline-flex;
  animation:ticker 28s linear infinite;
}
.ticker span{ padding:0 26px; opacity:.9; }
.ticker .dot{ color:var(--accent-soft); }
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
  .hero-visual{ min-height:420px; order:-1; }
  .quick-links{ grid-template-columns:repeat(2,1fr); }
}

/* ===========================================================
   ABOUT
   =========================================================== */
.about{ background:var(--bg); }
.about-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:80px;
  align-items:start;
}
.about-statement{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.18;
  letter-spacing:-0.01em;
}
.about-statement em{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  color:var(--accent);
}
.about-right{ display:flex; flex-direction:column; gap:36px; }
.about-right p{ color:var(--ink-soft); font-size:16px; }
.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.about-stats div{
  padding:22px 20px 22px 0;
  border-right:1px solid var(--line);
}
.about-stats div:last-child{ border-right:none; padding-right:0; }
.about-stats .num{
  font-family:var(--f-display);
  font-size:34px;
  font-weight:600;
}
.about-stats .lbl{
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:6px;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .about-stats{ grid-template-columns:1fr 1fr; }
}

/* ===========================================================
   ROLES MARQUEE
   =========================================================== */
.roles-strip{
  background:var(--paper);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:26px 0;
  overflow:hidden;
  white-space:nowrap;
}
.roles-strip .roles-track{
  display:inline-flex;
  animation:ticker 40s linear infinite;
}
.roles-strip span{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(20px,2.6vw,32px);
  padding:0 30px;
  color:var(--ink-faint);
}
.roles-strip span.on{ color:var(--ink); font-style:normal; font-weight:600; }
.roles-strip span.sep{ color:var(--accent); font-style:normal; }

/* ===========================================================
   JOURNAL
   =========================================================== */
.journal{ background:var(--bg); }
.journal-feature{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  /* without min-width:0 a grid item is sized by its content, and the
     1100px cover widened the track until the page scrolled sideways */
  gap:0;
  border:1px solid var(--line);
  margin-bottom:64px;
}
.jf-visual{ position:relative; overflow:hidden; min-height:420px; background:#d9d4c6; }
.jf-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.jf-body{
  padding:clamp(24px, 5vw, 52px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.jf-body .issue-no{
  font-family:var(--f-ui);
  font-size:12px;
  letter-spacing:var(--tracking-wide);
  color:var(--accent);
  text-transform:uppercase;
}
.jf-body h3{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(28px,3vw,40px);
  line-height:1.1;
}
.jf-body p{ color:var(--ink-soft); font-size:15.5px; }
.jf-meta{
  display:flex; gap:24px;
  font-family:var(--f-ui);
  font-size:11.5px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:6px;
  border-top:1px solid var(--line-soft);
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
}
.article-card{ display:flex; flex-direction:column; gap:16px; }
/* the whole card is a link to the material page; the anchor is a plain
   wrapper so the existing flex layout is untouched */
.article-card__link{ display:flex; flex-direction:column; gap:16px; }
.article-card__link h4{ transition:color .25s ease; }
.article-card__link:hover h4{ color:var(--accent); }
.article-card__link:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.article-card .ac-visual{
  aspect-ratio:4/5;
  overflow:hidden;
  background:#dcd8cd;
  position:relative;
}
.article-card .ac-visual img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.article-card:hover .ac-visual img{ transform:scale(1.05); }
.article-card .ac-tag{
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--accent);
}
.article-card h4{
  font-family:var(--f-display);
  font-weight:600;
  font-size:22px;
  line-height:1.25;
}
.article-card .ac-meta{
  font-family:var(--f-ui);
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:.04em;
}

@media (max-width: 980px){
  .journal-feature{ grid-template-columns:1fr; }
  .journal-feature > *{ min-width:0; }
  .article-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 620px){
  .article-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   PROJECTS
   =========================================================== */
.projects{ background:var(--dark); color:var(--cream); }
.projects .section-head h2{ color:var(--cream); }
.projects .section-head .desc{ color:#b7b2a5; }
.projects .eyebrow{ color:#a39d8e; }
.projects .eyebrow::before{ background:var(--accent-soft); }

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(255,255,255,.08);
}
.project-card{
  background:var(--dark);
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.project-card:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.project-card .pc-bg{ position:absolute; inset:0; }
.project-card .pc-bg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }
.project-card:hover .pc-bg img{ transform:scale(1.06); }
.project-card .pc-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,7,0) 40%, rgba(10,9,7,.85) 100%);
}
.project-card .pc-content{
  position:relative; z-index:2; padding:30px;
  display:flex; flex-direction:column; gap:8px;
}
.project-card .pc-tag{
  font-family:var(--f-ui); font-size:11px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:#d8d2c2;
}
.project-card .pc-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2vw,30px); color:#f5f2ea; line-height:1.15;
}
.project-card .pc-credit{
  font-family:var(--f-ui); font-size:11px; color:#b9b3a6; letter-spacing:.03em;
}

@media (max-width: 900px){
  .project-grid{ grid-template-columns:1fr 1fr; }
  .project-card:first-child{ grid-column:span 2; }
}
@media (max-width: 600px){
  .project-grid{ grid-template-columns:1fr; }
  .project-card:first-child{ grid-column:span 1; }
}

/* ===========================================================
   PROCESS / HOW IT WORKS
   =========================================================== */
.process{ background:var(--bg); }
.process-list{
  border-top:1px solid var(--ink);
}
.process-item{
  display:grid;
  grid-template-columns:110px 1fr 1.3fr;
  gap:40px;
  padding:40px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.process-item .pi-num{
  font-family:var(--f-display);
  font-size:20px;
  color:var(--ink-faint);
}
.process-item h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  margin:0;
}
.process-item p{ color:var(--ink-soft); font-size:15.5px; max-width:520px; }

@media (max-width: 780px){
  .process-item{ grid-template-columns:50px 1fr; }
  .process-item p{ grid-column:2/3; }
}

/* ===========================================================
   COMMUNITY
   =========================================================== */
.community{ background:var(--paper); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.role-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:64px;
}
a.role-card{
  min-width:0;
  background:var(--paper);
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  gap:34px;
  min-height:200px;
  transition:background .3s ease;
  position:relative;
}
a.role-card:hover{ background:var(--cream); }
a.role-card:hover .rc-name{ color:var(--accent); }
a.role-card:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.role-card .rc-go{
  position:absolute; right:26px; bottom:26px;
  font-family:var(--f-ui); font-size:14px; color:var(--accent);
  opacity:0; transform:translateX(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
a.role-card:hover .rc-go,
a.role-card:focus-visible .rc-go{ opacity:1; transform:translateX(0); }
.role-card:hover{ background:var(--cream); }
.role-card .rc-index{
  font-family:var(--f-ui); font-size:11px; color:var(--ink-faint); letter-spacing:.05em;
}
.role-card .rc-name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:21px;
  line-height:1.2;
}
.community-lower{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
}
.benefits-list{ display:flex; flex-direction:column; }
.benefit-row{
  display:flex; gap:20px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.benefit-row:last-child{ border-bottom:1px solid var(--line); }
.benefit-row .b-mark{ color:var(--accent); font-family:var(--f-display); font-style:italic; font-size:20px; }
.benefit-row h3{ font-family:var(--f-ui); font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
.benefit-row p{ color:var(--ink-soft); font-size:14.5px; }

.join-panel{
  background:var(--ink);
  color:var(--cream);
  padding:48px;
  display:flex;
  flex-direction:column;
  gap:22px;
  justify-content:center;
}
.join-panel .eyebrow{ color:#c9c4b6; }
.join-panel .eyebrow::before{ background:var(--accent-soft); }
.join-panel h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.18;
}
.join-panel p{ color:#c9c4b6; font-size:15px; }
.join-form{
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  gap:14px;
  align-items:center;
  border-bottom:1px solid #c9c4b6;
  padding-bottom:14px;
  margin-top:10px;
}
.join-form input{
  background:none; border:none; color:var(--cream);
  font-family:var(--f-ui); font-size:14px; letter-spacing:.02em;
  outline:none; min-width:0;
  min-height:44px;                 /* touch target */
}
.join-form input::placeholder{ color:#9a9487; }
.join-form button{
  background:none; border:none; color:var(--cream);
  font-family:var(--f-ui); font-size:12px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  min-height:44px; padding:0 4px;
  transition:color .25s ease;
}
.join-form button:hover{ color:#fff; }
.join-form button:disabled{ opacity:.6; cursor:progress; }
.join-note{ font-family:var(--f-ui); font-size:11px; color:#9a9487; }
.join-note.is-error{ color:#e0a0a0; }
.join-note.is-ok{ color:#a8d3a8; }

/* honeypot: off-screen rather than display:none, so naive bots still fill it */
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

@media (max-width: 980px){
  .role-grid{ grid-template-columns:1fr 1fr; }
  .community-lower{ grid-template-columns:1fr; gap:40px; }
}

/* ===========================================================
   FOR BRANDS / PARTNERS
   =========================================================== */
.partners{ background:var(--paper); border-top:1px solid var(--line-soft); }
.partner-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.partner-card{
  background:var(--paper);
  padding:38px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.partner-card .pn-num{
  font-family:var(--f-display);
  font-style:italic;
  color:var(--accent);
  font-size:22px;
}
.partner-card h3{ font-family:var(--f-display); font-weight:600; font-size:22px; }
.partner-card p{ color:var(--ink-soft); font-size:14.5px; }
.partner-card .pn-range{
  margin-top:auto;
  font-family:var(--f-ui);
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border-top:1px solid var(--line);
  padding-top:14px;
}
@media (max-width: 900px){ .partner-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ background:var(--bg); border-top:1px solid var(--line-soft); }
.faq-list{ border-top:1px solid var(--ink); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:26px 0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(19px,2vw,25px);
  line-height:1.3;
  list-style:none;
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  flex:none;
  font-family:var(--f-display);
  font-style:italic;
  font-size:26px;
  line-height:1;
  color:var(--accent);
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--accent); }
.faq-item p{
  padding:0 60px 28px 0;
  max-width:760px;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.65;
}

/* ===========================================================
   CTA / NEWSLETTER
   =========================================================== */
.cta-band{
  background:var(--dark);
  color:var(--cream);
  padding:110px 0;
  text-align:center;
}
.cta-band h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(36px, 5.4vw, 72px);
  line-height:1.05;
  max-width:900px;
  margin:0 auto 26px;
}
.cta-band h2 em{
  font-family:var(--f-accent);
  font-style:italic;
  color:#c8a2a8;
  font-weight:500;
}
.cta-band p{ color:#b7b2a5; max-width:520px; margin:0 auto 40px; font-size:16px; }
.cta-actions{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--ink); color:#c9c4b6; }
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:50px;
  padding:90px 0 70px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .logo{ color:#f2efe8; margin-bottom:20px; display:block; }
.footer-brand p{ font-size:14.5px; max-width:280px; color:#a39d8e; margin-bottom:26px; }
.footer-social{ display:flex; gap:16px; }
.footer-social a,.footer-social .social-pending{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-ui); font-size:11px; letter-spacing:.03em;
  transition:background .3s ease, border-color .3s ease;
}
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.footer-col h2{
  font-family:var(--f-ui); font-size:11.5px; font-weight:400; line-height:1.4;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:#f2efe8; margin-bottom:22px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:14.5px; color:#a39d8e; transition:color .25s ease; }
.footer-col a:hover{ color:#f2efe8; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap;
  padding:26px 0;
  font-family:var(--f-ui); font-size:11.5px; letter-spacing:.03em;
  color:#948e80;
}
.footer-legal{ display:flex; align-items:center; }
.footer-legal a{ color:#948e80; transition:color .25s ease; }
.footer-legal a:hover{ color:#f2efe8; }
.footer-bottom .to-top{ display:flex; align-items:center; gap:8px; color:#a39d8e; }
.footer-bottom .to-top:hover{ color:#f2efe8; }

@media (max-width: 980px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  .faq-item summary{ gap:16px; }
  .faq-item p{ padding-right:0; }
  .join-form{ grid-template-columns:1fr; gap:6px; }
  .join-form button{ justify-self:start; }
}

/* reveal animation */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
/* no-JS fallback: never leave the page invisible */
.no-js .reveal{ opacity:1; transform:none; }

/* locale switch affordance */
.topbar .locale button{
  background:none; border:none; color:#15130f; font:inherit;
  letter-spacing:inherit; text-transform:inherit;
  padding:6px 2px; min-height:24px;
  transition:color .25s ease;
}
.topbar .locale button:hover{ color:var(--dark); }
.topbar .locale button.active{ color:var(--dark); font-weight:600; }
.topbar .locale button::after{
  content:''; display:block; height:1px; width:0; background:currentColor;
  transition:width .25s ease;
}
.topbar .locale button.active::after{ width:100%; }

/* touch targets */
@media (pointer:coarse){
  .main-nav a{ padding:8px 0; }
  .quick-links a{ padding:22px; }
  .footer-col a{ padding:4px 0; display:inline-block; }
  .benefit-row, .footer-social a{ min-height:44px; }
}

/* ===========================================================
   APPLY CTA — the page's main conversion action
   Desktop: a full-width button as the last item of the mobile drawer
   (hidden on desktop, where the hero already has the buttons).
   Mobile: the same button pinned to the bottom of the viewport, hidden
   again once the join form is actually on screen so it never covers the
   thing it points at.
   =========================================================== */
.nav-cta{ display:none; }

.sticky-cta{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:140;
  padding:12px var(--edge);
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:rgba(237, 234, 226, .96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateY(110%);
  transition:transform .32s ease;
}
.sticky-cta.in{ transform:translateY(0); }
.sticky-cta__btn{
  display:block;
  width:100%;
  text-align:center;
  font-family:var(--f-ui);
  font-size:12.5px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  padding:17px 24px;                 /* touch target */
  background:var(--ink);
  color:var(--bg);
  transition:background .25s ease, color .25s ease;
}
.sticky-cta__btn:hover{ background:var(--accent); color:var(--cream); }
/* the footer already ends with the same links - no need to nag down there */
.sticky-cta.foot{ opacity:0; pointer-events:none; }


@media (max-width: 980px){
  /* room for the pinned bar, so it never covers content. This must live INSIDE
     the same query: on a wide screen the bar is display:none, and reserving
     space for it there left 76px of dead padding under the footer. */
  body.has-sticky-cta{ padding-bottom:76px; }
  /* the apply action goes INSIDE the drawer, not behind the burger */
  .main-nav.open .nav-cta{
    display:block;
    margin-top:26px;
    padding:17px 24px;
    background:var(--ink);
    color:var(--bg);
    border-bottom:none;
    min-height:auto;
    text-align:center;
  }
  .main-nav.open .nav-cta:hover{ background:var(--accent); color:var(--cream); }
  .sticky-cta{ display:block; }
  .sticky-cta[hidden]{ display:none; }
}
@media (max-width: 560px){
  .sticky-cta{ padding-left:16px; padding-right:16px; }
}

/* print */
@media print{
  .topbar, .site-header, .ticker, .roles-strip, .skip-link, .join-panel, .footer-social{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section-pad{ padding:24px 0; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:11px; color:#555; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================ header at width
   Seven menu items need about 1016px. The burger used to appear at 980px, so
   between 981 and 1024px the logo and the first item were literally touching
   (measured gap: 0px). The apply button was also hidden at every desktop width,
   leaving no way to apply from the header at all. */
@media (max-width: 1100px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .main-nav.open{ max-height:calc(100vh - 76px); }
  .nav-cta{ display:none; }
}

@media (min-width: 1101px){
  .site-header .wrap{ gap:28px; }
  .nav-cta{
    display:inline-block;
    padding:11px 20px;
    border:1px solid var(--ink);
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
  }
  .nav-cta:hover{ background:var(--ink); color:var(--bg); }
  .nav-cta::after{ display:none; }
}