/*
Theme Name: Sauti Hub
Theme URI: https://sautihub.org
Author: Sauti Hub
Description: A one-page theme for Sauti Hub - a youth growth accelerator turning voices into opportunity, talent into income and young people into leaders. Editorial setting in Bodoni Moda and Jost, with the sound bloom as the signature mark. Photography, copy, impact figures and contact details are editable under Appearance > Customize > Sauti Hub.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sauti-hub
Tags: one-page, custom-colors, custom-logo, custom-menu, editor-style, translation-ready
*/

/* ==========================================================
   SAUTI HUB — an atelier for the voice
   Palette: aubergine ink, emerald, champagne gilt, dusty rose,
   on a pale shell paper. Type: Bodoni Moda / Jost.
   ========================================================== */
:root{
  --ink:#20111D;
  --plum:#2A1626;
  --plum-2:#3B2035;
  --emerald:#14453A;
  --emerald-2:#0F362D;
  --rose:#C56E88;
  --rose-deep:#A24B67;
  --gilt:#C9A063;
  --champagne:#E7CFA6;
  --shell:#F6EDEA;
  --shell-2:#FCF7F5;
  --body-c:#4A3543;
  --muted:#7C6474;

  --hair:rgba(32,17,29,.16);
  --hair-gilt:rgba(201,160,99,.38);
  --hair-light:rgba(231,207,166,.24);

  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --text:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  --wrap:1200px;
  --gut:clamp(22px,5.5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--shell);color:var(--body-c);
  font-family:var(--text);font-weight:300;font-size:17px;
  line-height:1.78;letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);font-weight:400;color:var(--ink);
  line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance;
  font-variation-settings:"opsz" 72;
}
h1{font-size:clamp(3rem,8.6vw,6.4rem);line-height:.98}
h2{font-size:clamp(2.2rem,5.4vw,4rem)}
h3{font-size:clamp(1.4rem,2.6vw,1.9rem);font-variation-settings:"opsz" 28}
.it{font-style:italic;font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(84px,11vw,168px)}

/* Tracked-out label, in place of an eyebrow rule */
.label{
  font-family:var(--text);font-weight:500;font-size:.65rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--rose-deep);
  margin:0 0 22px;display:block;
}
.on-dark .label{color:var(--champagne)}

.lede{
  font-size:clamp(1.08rem,2vw,1.34rem);line-height:1.68;
  font-weight:300;color:var(--body-c);max-width:54ch;
}
.on-dark{color:rgba(246,237,234,.76)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--shell-2)}
.on-dark .lede{color:rgba(246,237,234,.76)}

.rule{height:1px;background:var(--hair-gilt);border:0;margin:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--plum);color:var(--champagne);padding:14px 20px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.on-dark :focus-visible,.hero :focus-visible{outline-color:var(--champagne)}

/* ==========================================================
   BUTTONS — a filled pill and a gilt-underlined text link
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--text);font-weight:400;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;
  padding:17px 34px;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--plum);color:var(--champagne)}
.btn-solid:hover{background:var(--ink)}
.btn-gilt{background:var(--champagne);color:var(--ink)}
.btn-gilt:hover{background:#f2e0c1}
.btn-line{border-color:var(--hair-gilt);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--gilt);background:rgba(201,160,99,.1)}
.on-dark .btn-line,.hero .btn-line{color:var(--shell-2);border-color:var(--hair-light)}
.on-dark .btn-line:hover,.hero .btn-line:hover{border-color:var(--champagne);background:rgba(231,207,166,.1)}

.tlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  color:var(--rose-deep);padding-bottom:6px;
  border-bottom:1px solid var(--hair-gilt);transition:border-color .3s ease,color .3s ease,gap .3s ease;
}
.tlink:hover{border-color:var(--rose);gap:16px}
.on-dark .tlink{color:var(--champagne);border-color:var(--hair-light)}
.on-dark .tlink:hover{border-color:var(--champagne)}
.arw{font-family:var(--display);font-size:1.1em;line-height:1}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(42,22,38,.9);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(231,207,166,.18);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.brand-name{
  font-family:var(--display);font-weight:400;color:var(--shell-2);
  font-size:1rem;letter-spacing:.34em;line-height:1;text-transform:uppercase;
  font-variation-settings:"opsz" 16;
}
.nav{display:none;gap:34px;align-items:center}
.nav a{
  text-decoration:none;color:rgba(246,237,234,.7);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;padding-block:8px;position:relative;
  transition:color .3s ease;
}
.nav a:hover{color:var(--champagne)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--champagne);transition:right .4s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after{right:0}
.header-cta{display:none}

.menu-btn{
  display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:46px;height:42px;padding:0 11px;background:transparent;
  border:1px solid rgba(231,207,166,.24);border-radius:100px;cursor:pointer;
}
.menu-btn i{height:1px;background:var(--champagne);display:block;transition:transform .35s ease,opacity .25s ease}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;padding:6px var(--gut) 32px;border-top:1px solid rgba(231,207,166,.14)}
.mobile-nav.open{display:flex}
.mobile-nav a{
  text-decoration:none;color:var(--shell-2);font-family:var(--display);
  font-size:1.7rem;padding:13px 0;border-bottom:1px solid rgba(231,207,166,.1);
  font-variation-settings:"opsz" 28;
}
.mobile-nav .btn{margin-top:24px;justify-content:center}
@media(min-width:1000px){
  .nav{display:flex}.header-cta{display:inline-flex}.menu-btn{display:none}
  .mobile-nav{display:none !important}
}

/* ==========================================================
   HERO — the sound bloom: a waveform drawn in the round
   ========================================================== */
.hero{
  position:relative;background:var(--plum);overflow:hidden;
  padding-block:clamp(64px,9vw,120px) clamp(72px,10vw,132px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 78% 22%,rgba(197,110,136,.28),transparent 62%),
    radial-gradient(50% 50% at 12% 88%,rgba(20,69,58,.5),transparent 65%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(231,207,166,.09) .5px,transparent .5px);
  background-size:3px 3px;
}
.hero-inner{position:relative;z-index:3}
.hero-grid{display:grid;gap:clamp(48px,7vw,72px);align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.hero h1{color:var(--shell-2);margin-bottom:26px}
.hero h1 .it{color:var(--champagne)}
.hero .lede{margin-bottom:40px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}

.bloom-stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:560px;margin-inline:auto;width:100%}
.bloom{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bloom line{stroke:var(--champagne);stroke-linecap:round;opacity:.5}
.bloom .ring{fill:none;stroke:var(--hair-light);stroke-width:.6}
.bloom-spin{transform-origin:50% 50%;animation:spin 84s linear infinite}
.bloom-spin-r{transform-origin:50% 50%;animation:spin 128s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.bloom-core{
  position:relative;z-index:4;text-align:center;
  display:grid;place-items:center;gap:14px;
  width:min(64%,320px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(42,22,38,.9),rgba(42,22,38,.55) 70%,transparent);
}
.bloom-core .label{margin:0;color:var(--champagne);font-size:.58rem}
.bloom-core .ep{
  font-family:var(--display);font-style:italic;color:var(--shell-2);
  font-size:clamp(1rem,1.9vw,1.22rem);line-height:1.4;max-width:20ch;margin:0;
  font-variation-settings:"opsz" 18;
}
.play-btn{
  width:66px;height:66px;border-radius:50%;cursor:pointer;
  border:1px solid var(--hair-gilt);background:rgba(231,207,166,.08);
  color:var(--champagne);display:grid;place-items:center;
  transition:background .35s ease,transform .35s ease,border-color .35s ease;
}
.play-btn:hover{background:rgba(231,207,166,.2);transform:scale(1.06);border-color:var(--champagne)}
.play-btn svg{width:15px;height:15px;fill:currentColor;margin-left:3px}
.play-btn.playing svg{margin-left:0}
.bloom-time{font-size:.68rem;letter-spacing:.24em;color:rgba(246,237,234,.6)}

/* ==========================================================
   MARQUEE — the three promises, set in italic
   ========================================================== */
.promise{background:var(--emerald);color:var(--champagne);overflow:hidden;padding-block:20px}
.promise-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.promise span{
  font-family:var(--display);font-style:italic;font-size:clamp(1rem,1.9vw,1.3rem);
  padding-inline:26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px;
  font-variation-settings:"opsz" 24;
}
.promise span::after{content:"❦";font-style:normal;font-size:.72em;opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================
   PHOTOGRAPHY — arched frames, plum-and-champagne duotone
   ========================================================== */
.photo{position:relative;overflow:hidden;background:var(--plum-2);isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.05);transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(42,22,38,.66),rgba(162,75,103,.34) 55%,rgba(231,207,166,.24));
  mix-blend-mode:multiply;
}
.photo:hover img{transform:scale(1.05)}
.arch{border-radius:1000px 1000px 10px 10px}
.arch-sm{border-radius:600px 600px 8px 8px}
.photo-cap{
  position:absolute;left:0;right:0;bottom:18px;z-index:3;text-align:center;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--shell-2);
}
.framed{position:relative;padding:14px}
.framed::before{
  content:"";position:absolute;inset:0;border:1px solid var(--hair-gilt);
  border-radius:1000px 1000px 12px 12px;pointer-events:none;
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about{background:var(--shell-2)}
.about-grid{display:grid;gap:clamp(44px,6vw,80px);align-items:center}
@media(min-width:940px){.about-grid{grid-template-columns:.86fr 1.14fr}}
.about-photo{aspect-ratio:3/4}
.dropcap::first-letter{
  font-family:var(--display);font-size:4.1em;line-height:.82;float:left;
  padding:.06em .12em 0 0;color:var(--rose-deep);font-variation-settings:"opsz" 88;
}
.mv{margin-top:44px;border-top:1px solid var(--hair-gilt)}
.mv-item{display:grid;gap:6px 28px;padding-block:22px;border-bottom:1px solid var(--hair)}
@media(min-width:640px){.mv-item{grid-template-columns:150px 1fr;align-items:baseline}}
.mv-item h3{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--text);font-weight:500;color:var(--rose-deep);
}
.mv-item p{font-size:1.02rem;margin:0}

/* ==========================================================
   PROCESS — five movements, in roman numerals
   ========================================================== */
.how{background:var(--shell)}
.how-head{max-width:58ch;margin-bottom:clamp(48px,7vw,80px)}
.steps{border-top:1px solid var(--hair-gilt)}
.step{
  display:grid;gap:8px 40px;padding-block:34px;
  border-bottom:1px solid var(--hair);position:relative;
  transition:padding-left .5s cubic-bezier(.2,.7,.3,1);
}
@media(min-width:820px){
  .step{grid-template-columns:96px 240px 1fr;align-items:baseline}
  .step:hover{padding-left:18px}
}
.step-n{
  font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--gilt);
  font-variation-settings:"opsz" 24;line-height:1;
}
.step h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.step p{margin:0;color:var(--muted);font-size:1rem;max-width:46ch}
.step::after{
  content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--rose);
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.step:hover::after{width:100%}

/* ==========================================================
   PROGRAMS
   ========================================================== */
.programs{background:var(--plum);position:relative}
.programs::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 8%,rgba(20,69,58,.55),transparent 62%);
}
.programs .wrap{position:relative;z-index:2}
.prog-grid{display:grid;gap:clamp(28px,4vw,44px);margin-top:clamp(44px,6vw,72px)}
@media(min-width:880px){
  .prog-grid{grid-template-columns:repeat(6,1fr)}
  .prog-major{grid-column:span 3}
  .prog-minor{grid-column:span 2}
}
.prog-major .prog-photo{aspect-ratio:5/4;margin-bottom:30px}
.prog{display:flex;flex-direction:column}
.prog-tag{
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--champagne);margin:0 0 14px;
}
.prog h3{color:var(--shell-2);margin-bottom:14px}
.prog p{color:rgba(246,237,234,.72);font-size:1rem}
.prog ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.prog li{
  font-size:.94rem;color:rgba(246,237,234,.66);padding-left:26px;position:relative;line-height:1.6;
}
.prog li::before{content:"—";position:absolute;left:0;color:var(--rose);font-family:var(--display)}
.prog .tlink{margin-top:auto;padding-top:28px}
.prog-minor{padding-top:28px;border-top:1px solid var(--hair-light)}

/* ==========================================================
   IMPACT
   ========================================================== */
.impact{background:var(--emerald)}
.impact-head{max-width:60ch}
.metrics{display:grid;gap:0;margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--hair-light)}
@media(min-width:700px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{padding:34px 30px 38px;border-bottom:1px solid var(--hair-light);position:relative}
@media(min-width:700px){.metric{border-right:1px solid var(--hair-light)}.metric:nth-child(2n){border-right:0}}
@media(min-width:1020px){.metric{border-right:1px solid var(--hair-light)}.metric:nth-child(2n){border-right:1px solid var(--hair-light)}.metric:last-child{border-right:0}}
.metric b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(3.2rem,6vw,4.6rem);color:var(--champagne);line-height:1;
  letter-spacing:-.03em;margin-bottom:16px;font-variation-settings:"opsz" 96;
}
.metric span{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--shell-2);margin-bottom:12px}
.metric small{display:block;font-size:.9rem;color:rgba(246,237,234,.68);line-height:1.6}
.impact-note{margin-top:28px;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(231,207,166,.75)}

/* ==========================================================
   TALENT GALLERY
   ========================================================== */
.gallery{background:var(--shell-2)}
.gal-head{display:grid;gap:26px;margin-bottom:clamp(40px,5vw,64px)}
@media(min-width:900px){.gal-head{grid-template-columns:1.25fr 1fr;align-items:end}}
.gal-grid{display:grid;gap:clamp(16px,2.4vw,30px);grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gal-grid{grid-template-columns:repeat(4,1fr)}}
.gal-item{position:relative}
.gal-item .photo{aspect-ratio:3/4}
@media(min-width:820px){
  .gal-item:nth-child(2n) .photo{aspect-ratio:3/4;transform:translateY(38px)}
  .gal-item:nth-child(2n){align-self:start}
}
.gal-name{
  margin-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid var(--hair);padding-top:12px;
}
.gal-name strong{font-family:var(--display);font-weight:400;font-size:1.08rem;color:var(--ink);font-variation-settings:"opsz" 18}
.gal-name em{font-style:normal;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-deep)}
.gal-add{
  display:grid;place-content:center;text-align:center;gap:16px;padding:32px 24px;
  aspect-ratio:3/4;border:1px solid var(--hair-gilt);border-radius:600px 600px 8px 8px;
  background:linear-gradient(180deg,rgba(231,207,166,.14),transparent);
}
@media(min-width:820px){.gal-add{transform:translateY(38px)}}
.gal-add strong{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--ink);font-variation-settings:"opsz" 24}
.gal-add span{font-size:.88rem;color:var(--muted);line-height:1.6}

/* ==========================================================
   GET INVOLVED
   ========================================================== */
.involve{background:var(--shell)}
.inv-grid{display:grid;gap:clamp(48px,6vw,84px)}
@media(min-width:1000px){.inv-grid{grid-template-columns:.92fr 1.08fr;align-items:start}}
.paths{margin-top:38px;border-top:1px solid var(--hair-gilt)}
.path{padding-block:26px;border-bottom:1px solid var(--hair)}
.path .label{margin-bottom:10px;font-size:.6rem}
.path h3{font-size:1.35rem;margin-bottom:8px}
.path p{margin:0;font-size:.98rem;color:var(--muted)}

.form-card{background:var(--shell-2);border:1px solid var(--hair-gilt);padding:clamp(28px,4.5vw,52px)}
.form-card h3{margin-bottom:12px;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.form-card > p{color:var(--muted);font-size:.98rem;margin-bottom:34px}
.field{margin-bottom:26px}
.field label{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;padding:10px 2px;font-family:var(--text);font-weight:300;font-size:1.02rem;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);
  border-radius:0;transition:border-color .35s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(124,100,116,.55)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--rose);outline:none}
.field textarea{resize:vertical;min-height:96px}
.field-row{display:grid;gap:26px}
@media(min-width:580px){.field-row{grid-template-columns:1fr 1fr}}
.form-card .btn{width:100%;justify-content:center;margin-top:10px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:20px;line-height:1.6}

/* ==========================================================
   PARTNER
   ========================================================== */
.partner{background:var(--plum-2)}
.partner-grid{display:grid;gap:clamp(44px,6vw,80px);align-items:center}
@media(min-width:940px){.partner-grid{grid-template-columns:1.05fr .95fr}}
.partner-photo{aspect-ratio:4/5}
.partner-list{list-style:none;margin:32px 0 38px;padding:0;border-top:1px solid var(--hair-light)}
.partner-list li{
  padding:16px 0 16px 30px;position:relative;color:rgba(246,237,234,.76);
  font-size:1rem;border-bottom:1px solid var(--hair-light);
}
.partner-list li::before{content:"❦";position:absolute;left:0;top:16px;color:var(--rose);font-size:.8em}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{background:var(--plum);color:rgba(246,237,234,.66);padding-top:clamp(72px,9vw,120px)}
.foot-cta{text-align:center;padding-bottom:clamp(56px,7vw,92px);border-bottom:1px solid var(--hair-light)}
.foot-cta h2{color:var(--shell-2);max-width:18ch;margin-inline:auto}
.foot-cta p{margin:20px auto 34px;max-width:46ch;color:rgba(246,237,234,.7)}
.foot-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.foot-grid{display:grid;gap:40px;padding-block:clamp(48px,6vw,72px)}
@media(min-width:780px){.foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot-brand p{font-size:.95rem;color:rgba(246,237,234,.6);max-width:32ch;margin-top:20px}
.foot-col h4{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);margin:0 0 20px;font-weight:500}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.foot-col a{color:rgba(246,237,234,.68);text-decoration:none;font-size:.94rem;transition:color .3s ease}
.foot-col a:hover{color:var(--champagne)}
.foot-bottom{
  border-top:1px solid var(--hair-light);padding-block:26px 36px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,237,234,.45);
}

/* ==========================================================
   REVEAL
   ========================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================
   BLOG, PAGES AND WORDPRESS ADMIN BITS
   Only applies away from the one-page front page.
   ========================================================== */
.page-shell{background:var(--shell-2);padding-block:clamp(60px,8vw,110px);min-height:60vh}
.page-shell .wrap{max-width:800px}
.page-title{margin-bottom:16px}
.page-meta{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:38px}
.entry{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--hair)}
.entry:last-child{border-bottom:0}
.entry h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:12px}
.entry h2 a{text-decoration:none}
.entry h2 a:hover{color:var(--rose-deep)}
.entry-content{font-size:1.05rem;line-height:1.8}
.entry-content h2,.entry-content h3{margin:1.6em 0 .5em}
.entry-content a{color:var(--rose-deep)}
.entry-content img{border-radius:6px;margin-block:1.7em}
.entry-content blockquote{
  margin:1.9em 0;padding-left:26px;border-left:1px solid var(--gilt);
  font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--ink);
  font-variation-settings:"opsz" 28;
}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.5em}
.entry-thumb{margin-bottom:26px;border-radius:6px;overflow:hidden}
.pagination{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pagination .page-numbers{
  padding:10px 18px;border:1px solid var(--hair-gilt);border-radius:100px;
  text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.pagination .current{background:var(--plum);color:var(--champagne);border-color:var(--plum)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){.admin-bar .site-header{top:46px}}
.alignwide,.alignfull{max-width:100%}
.wp-caption-text,.entry-content figcaption{font-size:.78rem;letter-spacing:.1em;color:var(--muted);text-align:center;margin-top:10px}