/* ============================================================
   BELLAMIRA ATELIER — shared stylesheet (cream arm)
   Tokens locked: parchment bg · antique gold mark · sage accent
   Wordmark Bodoni Moda 700 (cream) · body Montserrat 300/400/500
   ============================================================ */
:root{
  --gold:#C9A961; --gold-light:#E4C978; --antique:#B89456;
  --onyx:#070707; --ink:#0A0908; --ivory:#F8F3EA; --muted:#9A9088;
  --line:rgba(184,148,86,.35); --line-faint:rgba(184,148,86,.16);
  --parchment:#EEE5D0; --sage:#3F4A35;
  /* PER-ARM OVERRIDE (Atelier — cream) */
  --bg:var(--parchment); --mark:var(--antique); --accent:var(--sage);
  --paper-2:#E7DCC2; --sage-soft:rgba(63,74,53,.10); --text:#2C2A24; --text-soft:#5C564A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Montserrat',sans-serif; font-weight:300; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 18% 12%, rgba(255,255,255,.5), transparent 42%),
                   radial-gradient(circle at 85% 90%, rgba(184,148,86,.06), transparent 50%);
}
::selection{background:var(--sage-soft); color:var(--sage)}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px}

/* type */
.bod{font-family:'Bodoni Moda',serif}
.wm-name{font-family:'Bodoni Moda',serif; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mark)}
.wm-desc{font-family:'Bodoni Moda',serif; font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--accent)}
h1,h2,h3{font-family:'Bodoni Moda',serif; font-weight:700; color:var(--text); letter-spacing:.02em; line-height:1.12}
.eyebrow{font-family:'Bodoni Moda',serif; font-weight:500; font-style:italic; color:var(--accent); letter-spacing:.06em; font-size:.95rem}
.kicker{text-transform:uppercase; letter-spacing:.4em; font-size:.66rem; color:var(--sage); font-weight:500}
.rule{width:54px; height:1px; background:var(--accent); opacity:.7; margin:22px 0}
.rule.center{margin:22px auto}

/* nav */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(7px);
  background:rgba(238,229,208,.82); border-bottom:1px solid var(--line-faint)}
.nav-in{max-width:1080px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between}
.nav-lockup{display:flex; align-items:center; gap:12px; text-decoration:none}
.nav-lockup img{height:34px; width:auto; display:block}
.nav-lockup .nm{font-family:'Bodoni Moda',serif; font-weight:700; letter-spacing:.16em; color:var(--mark); font-size:.92rem}
.nav-lockup .ds{font-family:'Bodoni Moda',serif; font-weight:400; letter-spacing:.34em; color:var(--accent); font-size:.62rem; display:block; margin-top:1px}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{color:var(--text-soft); text-decoration:none; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; transition:color .25s}
.nav-links a:hover{color:var(--sage)}
.nav-cta{border:1px solid var(--mark); padding:9px 18px; color:var(--mark)!important; border-radius:1px}
.nav-cta:hover{background:var(--mark); color:var(--bg)!important}
@media(max-width:720px){.nav-links a:not(.nav-cta){display:none}}

/* hero */
.hero{padding:118px 0 96px; text-align:center; position:relative; overflow:hidden}
.hero .crest{height:120px; width:auto; margin:0 auto 30px; display:block; opacity:0; animation:rise .9s .05s forwards}
.hero h1{font-size:clamp(2.9rem,8vw,5.6rem); font-weight:700; opacity:0; animation:rise .9s .18s forwards}
.hero h1 .of{display:block; font-size:.34em; letter-spacing:.5em; color:var(--accent); font-weight:400; margin-bottom:.7em; text-transform:uppercase}
.hero .lede{max-width:600px; margin:30px auto 0; font-size:1.07rem; color:var(--text-soft); opacity:0; animation:rise .9s .34s forwards}
.hero .scroll{margin-top:46px; font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); opacity:0; animation:fade 1s 1s forwards}
@keyframes rise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes fade{to{opacity:1}}

/* sections */
section{padding:84px 0}
.section-head{text-align:center; max-width:660px; margin:0 auto 56px}
.section-head h2{font-size:clamp(1.9rem,4.5vw,2.9rem)}
.section-head p{color:var(--text-soft); margin-top:18px}

/* triptych */
.triptych{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pillar{padding:46px 30px; text-align:center; border-right:1px solid var(--line-faint)}
.pillar:last-child{border-right:none}
.pillar .num{font-family:'Bodoni Moda',serif; font-style:italic; color:var(--accent); font-size:1.1rem; opacity:.8}
.pillar h3{font-size:1.5rem; margin:14px 0 12px}
.pillar p{font-size:.92rem; color:var(--text-soft)}
@media(max-width:720px){.triptych{grid-template-columns:1fr} .pillar{border-right:none; border-bottom:1px solid var(--line-faint)} .pillar:last-child{border-bottom:none}}

/* manifesto */
.manifesto{background:var(--paper-2); border-top:1px solid var(--line-faint); border-bottom:1px solid var(--line-faint)}
.manifesto .wrap{max-width:760px; text-align:center}
.manifesto p{font-family:'Bodoni Moda',serif; font-weight:400; font-style:italic; font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.5; color:var(--text)}
.manifesto p .drop{font-style:normal; font-weight:700}
.manifesto .by{margin-top:26px; font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--sage)}

/* journal */
.journal-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:0 56px; align-items:stretch}
.feature{border-top:2px solid var(--accent); padding-top:26px}
.feature .cat{display:block; margin-bottom:14px}
.feature h3{font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:16px}
.feature p{color:var(--text-soft)}
.feature .read{display:inline-block; margin-top:22px; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mark); text-decoration:none; border-bottom:1px solid var(--line)}
.feature .read:hover{color:var(--sage)}
.feature .firstpara{font-size:1.02rem}
.feature .firstpara::first-letter{font-family:'Bodoni Moda',serif; font-weight:700; font-size:3.6em; line-height:.72; float:left; padding:6px 12px 0 0; color:var(--accent)}
.teasers{display:flex; flex-direction:column}
.teaser{padding:22px 0; border-bottom:1px solid var(--line-faint)}
.teaser:first-child{padding-top:0; border-top:none}
.teaser .cat{display:block; margin-bottom:8px}
.teaser h4{font-family:'Bodoni Moda',serif; font-weight:600; font-size:1.22rem; line-height:1.2; color:var(--text); margin-bottom:6px}
.teaser p{font-size:.84rem; color:var(--text-soft); line-height:1.55}
@media(max-width:820px){.journal-grid{grid-template-columns:1fr; gap:48px}}

/* privé */
.prive{text-align:center}
.prive .wrap{max-width:680px}
.prive .seal{font-size:.62rem; letter-spacing:.5em; text-transform:uppercase; color:var(--sage); margin-bottom:18px}
.prive h2{font-size:clamp(1.7rem,4vw,2.5rem)}
.prive p{color:var(--text-soft); margin:20px auto 0}
.prive a.link{display:inline-block; margin-top:26px; font-family:'Bodoni Moda',serif; font-style:italic; font-size:1.05rem; color:var(--mark); text-decoration:none; border-bottom:1px solid var(--mark); padding-bottom:2px}
.prive a.link:hover{color:var(--sage); border-color:var(--sage)}

/* join */
.join{background:var(--onyx); color:var(--ivory); border-top:1px solid rgba(201,169,97,.25)}
.join .wrap{max-width:620px; text-align:center}
.join .crest{height:54px; margin:0 auto 26px; display:block}
.join .kicker{color:var(--gold)}
.join h2{color:var(--ivory); font-size:clamp(1.9rem,4.5vw,2.8rem); margin-top:16px}
.join p{color:#cfc6b8; margin:18px auto 0; max-width:480px; font-size:.96rem}
.join form{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.join input{flex:1; min-width:240px; background:transparent; border:1px solid rgba(201,169,97,.4); color:var(--ivory);
  padding:15px 18px; font-family:'Montserrat',sans-serif; font-size:.9rem; letter-spacing:.02em; border-radius:1px; outline:none; transition:border-color .25s}
.join input::placeholder{color:#8d857a}
.join input:focus{border-color:var(--gold)}
.join button{background:var(--gold); color:var(--onyx); border:none; padding:15px 30px; font-family:'Bodoni Moda',serif;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; cursor:pointer; border-radius:1px; transition:background .25s}
.join button:hover{background:var(--gold-light)}
.join button:disabled{opacity:.6; cursor:wait}
.join .fineprint{margin-top:18px; font-size:.68rem; color:var(--muted); letter-spacing:.04em}
.join .msg{margin-top:18px; min-height:1.2em; font-size:.82rem; letter-spacing:.04em}
.join .msg.err{color:#E1A0A0} .join .msg.ok{color:var(--gold-light)}
.consent{display:flex; gap:10px; align-items:flex-start; justify-content:center; margin-top:16px; max-width:430px; margin-left:auto; margin-right:auto; flex-basis:100%}
.consent input{flex:none; min-width:0; width:16px; height:16px; margin-top:3px; accent-color:var(--gold)}
.consent label{font-size:.68rem; color:var(--muted); text-align:left; line-height:1.5; letter-spacing:.02em}

/* simple page (privacy / thank-you / 404) */
.page{min-height:60vh; padding:120px 0 100px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:8px}
.page .sub{color:var(--text-soft); font-style:italic; font-family:'Bodoni Moda',serif; margin-bottom:40px}
.page h2{font-size:1.3rem; margin:38px 0 12px; color:var(--sage)}
.page p,.page li{color:var(--text-soft); font-size:.96rem; margin-bottom:14px}
.page ul{padding-left:20px} .page li{margin-bottom:8px}
.page a{color:var(--mark); text-decoration:none; border-bottom:1px solid var(--line)}
.page a:hover{color:var(--sage)}
.page .updated{font-size:.74rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:6px}

/* centered hero for thank-you / 404 */
.center-hero{min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 0}
.center-hero .crest{height:96px; margin:0 auto 28px; display:block}
.center-hero h1{font-size:clamp(2.4rem,6vw,4rem)}
.center-hero .of{display:block; font-size:.3em; letter-spacing:.5em; color:var(--accent); font-weight:400; margin-bottom:.8em; text-transform:uppercase}
.center-hero p{color:var(--text-soft); max-width:520px; margin:24px auto 0; font-size:1.02rem}
.center-hero .actions{margin-top:38px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.btn{font-family:'Bodoni Moda',serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem;
  padding:13px 26px; border-radius:1px; text-decoration:none; transition:all .25s; border:1px solid var(--mark)}
.btn.solid{background:var(--mark); color:var(--bg)} .btn.solid:hover{background:var(--sage); border-color:var(--sage)}
.btn.ghost{color:var(--mark)} .btn.ghost:hover{background:var(--mark); color:var(--bg)}

/* footer */
footer.house{background:var(--bg); border-top:1px solid var(--line); padding:64px 0 40px; text-align:center}
footer .fcrest{height:46px; margin:0 auto 20px; display:block}
footer .signoff .nm{font-family:'Bodoni Moda',serif; font-weight:700; letter-spacing:.2em; color:var(--mark); font-size:1rem}
footer .signoff .tag{font-family:'Bodoni Moda',serif; font-style:italic; color:var(--text-soft); font-size:.92rem; margin-top:8px}
footer .arms{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin:34px auto 30px; padding:24px 0;
  border-top:1px solid var(--line-faint); border-bottom:1px solid var(--line-faint); max-width:760px}
footer .arms a{color:var(--text-soft); text-decoration:none; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; transition:color .25s}
footer .arms a:hover{color:var(--sage)}
footer .arms a.current{color:var(--mark); font-weight:500}
footer .endorser{display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:26px}
footer .endorser img{height:24px}
footer .endorser span{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
footer .endorser:hover span{color:var(--sage)}
footer .legal{font-size:.66rem; color:var(--muted); letter-spacing:.04em; line-height:1.9}
footer .legal a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-faint)}
footer .legal a:hover{color:var(--sage)}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero .crest,.hero h1,.hero .lede,.hero .scroll{animation:none; opacity:1}
}

/* ============================================================
   JOURNAL ARTICLE (single essay) — editorial reading layout
   ============================================================ */
.article{padding:96px 0 80px}
.article .wrap{max-width:680px}
.article .back{display:inline-block; margin-bottom:34px; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--mark); text-decoration:none}
.article .back:hover{color:var(--sage)}
.article .cat{margin-bottom:18px}
.article h1{font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.1; margin-bottom:24px}
.article .byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:30px; margin-bottom:14px; border-bottom:1px solid var(--line-faint)}
.article .byline .who{font-family:'Bodoni Moda',serif; font-style:italic; color:var(--text); font-size:1rem}
.article .byline .meta{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.article .byline .dot{color:var(--line); }
.article .lede{font-family:'Bodoni Moda',serif; font-weight:400; font-style:italic; font-size:1.3rem; line-height:1.55; color:var(--text); margin:30px 0 34px}
.article .body p{font-size:1.06rem; line-height:1.85; color:var(--text); margin-bottom:24px}
.article .body p.first::first-letter{font-family:'Bodoni Moda',serif; font-weight:700; font-size:4em; line-height:.7; float:left; padding:8px 14px 0 0; color:var(--accent)}
.article .body h2{font-family:'Bodoni Moda',serif; font-weight:600; font-size:1.5rem; color:var(--text); margin:44px 0 16px; letter-spacing:.01em}
.article blockquote{margin:40px 0; padding:6px 0 6px 28px; border-left:2px solid var(--accent);
  font-family:'Bodoni Moda',serif; font-style:italic; font-size:1.4rem; line-height:1.5; color:var(--sage)}
.article .signoff-note{margin-top:48px; padding-top:28px; border-top:1px solid var(--line-faint); text-align:center}
.article .signoff-note .sig{font-family:'Bodoni Moda',serif; font-style:italic; font-size:1.6rem; color:var(--mark); display:block; margin-bottom:10px}
.article .signoff-note p{font-size:.86rem; color:var(--text-soft); max-width:440px; margin:0 auto}
.article .next{margin-top:48px; text-align:center}
.article .next a{font-family:'Bodoni Moda',serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.76rem;
  border:1px solid var(--mark); color:var(--mark); padding:13px 26px; text-decoration:none; border-radius:1px; transition:all .25s}
.article .next a:hover{background:var(--mark); color:var(--bg)}