@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700;800&family=Frank+Ruhl+Libre:wght@500;700;900&display=swap');

:root{
  --ground:#f7f1e7; --white:#fffaf2; --tone:#eee3d2; --warm:#ede6d8; --gold-text:#8a6118;
  --ink:#16393d; --ink-soft:#3f5559;
  --deep:#16393d; --deeper:#112e32; --on-deep:#f4f3ef; --on-deep-soft:#c9d8d6;
  --gold:#c9973f; --gold-press:#b5852f;
  --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Assistant',Arial,sans-serif;
  --wrap:1200px; --gut:clamp(20px,4vw,48px); --r:3px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:var(--sans);font-size:19px;line-height:1.6;color:var(--ink);background:var(--ground);direction:rtl;text-align:right;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:inherit;text-wrap:balance}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* buttons: flat, square, one fill */
.btn{display:inline-block;background:var(--gold);color:var(--ink);font-family:var(--sans);font-weight:800;font-size:19px;text-decoration:none;padding:15px 30px;border-radius:var(--r);border:0;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--gold-press)}
.btn:active{transform:translateY(1px)}
.link{display:inline-block;padding-block:8px;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.link:hover{text-decoration-color:currentColor}

/* top bar */
.top{background:var(--deep);color:var(--on-deep)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:46px}
.brand b{font-family:var(--serif);font-size:26px;font-weight:900;line-height:1.1}
.social{display:flex;gap:8px;margin-inline-start:auto}
.soc{width:44px;height:44px;display:grid;place-items:center;background:var(--deeper);color:var(--on-deep);border-radius:var(--r);text-decoration:none;transition:background .15s}
.soc:hover{background:var(--gold);color:var(--ink)}
.soc svg{width:21px;height:21px}
.soc img{width:28px;height:28px;object-fit:contain}
.soc.logo{background:var(--white)}
.soc.logo:hover{background:var(--gold)}

/* tabs */
.tabs{position:sticky;top:0;z-index:30;background:var(--tone)}
.tabs .wrap{display:flex;flex-wrap:nowrap;gap:0 2px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:none;text-decoration:none;font-weight:700;font-size:16px;padding:15px 13px;color:var(--ink-soft);transition:background .15s,color .15s}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--deep);color:var(--on-deep)}

/* hero */
.hero{background:var(--warm);color:var(--ink);position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;min-height:clamp(480px,64vh,660px)}
.hero .txt{position:relative;z-index:1;align-self:center;padding:clamp(48px,7vw,96px) clamp(24px,4vw,64px) clamp(48px,7vw,96px) var(--gut);padding-inline-start:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero .photo{position:relative;z-index:1;background:var(--ground);display:flex;align-items:flex-end;justify-content:center}
.hero .photo img{width:100%;height:auto;mix-blend-mode:multiply}
.hero h1{font-size:clamp(44px,5.6vw,80px);letter-spacing:-.02em;line-height:1.05}
.hero .who{margin-top:16px;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:500;color:var(--gold-text);line-height:1.25}
.hero .lead{margin-top:18px;font-size:clamp(19px,1.8vw,22px);max-width:34ch;color:var(--ink-soft)}
.hero .cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.leaves{position:absolute;inset:0;pointer-events:none;z-index:0}
.leaf{position:absolute;bottom:-40px;width:var(--s,26px);height:var(--s,26px);color:var(--gold);opacity:0;animation:rise var(--d,22s) linear var(--dl,0s) infinite}
.leaf svg{width:100%;height:100%;display:block}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.7}85%{opacity:.5}100%{transform:translateY(-640px) rotate(var(--rt,40deg));opacity:0}}

/* sections */
.sec{padding:clamp(72px,9vw,140px) 0}
.welcome{padding:clamp(56px,7vw,96px) 0 clamp(16px,2vw,28px)}
.welcome p{font-family:var(--serif);font-size:clamp(24px,2.8vw,38px);font-weight:500;line-height:1.4;max-width:32ch;margin-inline:auto;text-align:center;text-wrap:balance}
.sec h2{font-size:clamp(32px,4.2vw,56px);margin-bottom:clamp(28px,4vw,52px);max-width:20ch}
.sec h2.wide{max-width:none}

/* list of areas */
.areas .item{display:grid;grid-template-columns:.9fr 1.3fr auto;gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(28px,4vw,48px) var(--gut)}
.areas .item:nth-child(odd){background:var(--white)}
.areas .item:nth-child(even){background:var(--tone)}
.areas h3{font-size:clamp(26px,3vw,38px)}
.areas p{color:var(--ink-soft);max-width:48ch}
.areas .pics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.areas .pics img{width:100%;aspect-ratio:620/877;object-fit:cover}
.areas .go{white-space:nowrap}
.listwrap{max-width:var(--wrap);margin:0 auto}

/* workshops */
.workshops{background:var(--deep);color:var(--on-deep)}
.workshops h2{color:var(--on-deep)}
.workshops .intro{font-size:21px;color:var(--on-deep-soft);max-width:46ch;margin-top:-24px;margin-bottom:clamp(32px,4vw,56px)}
.ws{display:grid;grid-template-columns:1fr 1.3fr auto;gap:clamp(18px,3vw,56px);align-items:center;padding:clamp(26px,3.4vw,40px) var(--gut)}
.ws:nth-of-type(odd){background:var(--deeper)}
.ws h3{font-size:clamp(24px,2.8vw,34px)}
.ws p{color:var(--on-deep-soft)}
.ws small{display:block;margin-top:8px;font-size:16px;color:var(--gold);font-weight:700}
.workshops .after{margin-top:clamp(32px,4vw,56px)}

/* voices */
.vgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:6px}
.vbig{background:var(--white);padding:clamp(32px,4.5vw,64px)}
.vbig blockquote p{font-size:20px;line-height:1.6;margin-bottom:16px;color:var(--ink-soft)}
.vbig blockquote p:first-child{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.3;color:var(--ink);margin-bottom:22px}
.vside{display:grid;grid-template-rows:1fr 1fr;gap:6px}
.vsmall{background:var(--tone);padding:clamp(28px,3.4vw,44px)}
.vsmall blockquote p{font-size:20px;line-height:1.55}
figcaption{margin-top:14px;font-size:16px;font-weight:700;color:var(--ink-soft)}

/* channel band: one flat field of gold */
.channel{background:var(--gold);color:var(--ink)}
.channel .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,4vw,64px);align-items:center}
.channel h2{font-size:clamp(34px,4.6vw,62px);margin-bottom:18px;max-width:14ch}
.channel p{font-size:21px;max-width:40ch}
.channel .btn{background:var(--deep);color:var(--on-deep)}
.channel .btn:hover{background:var(--deeper)}
.channel .side{text-align:left}

/* faq: separated by tone, not lines */
.faq .box{max-width:none}
details{background:var(--white);margin-bottom:6px}
details:nth-of-type(even){background:var(--tone)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:21px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:30px;line-height:1;color:var(--ink);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 26px 24px;color:var(--ink-soft);max-width:60ch}
details ol{margin:0;padding:0 26px 18px;padding-inline-start:50px;color:var(--ink-soft);max-width:60ch}
details li{margin-bottom:8px}
details li b{color:var(--ink)}

/* blog + sources */
.reads .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.read{background:var(--white);padding:clamp(32px,4vw,56px)}
.read:nth-child(2){background:var(--tone)}
.read h3{font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.read p{color:var(--ink-soft);margin-bottom:18px;max-width:34ch}
.read .soon{font-weight:800}

/* footer: the name returns large */
.foot{background:var(--deeper);color:var(--on-deep);padding:clamp(56px,7vw,100px) 0 36px}
.foot .big{font-family:var(--serif);font-weight:700;font-size:clamp(40px,6.5vw,92px);line-height:1;letter-spacing:-.02em}
.foot .row{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;margin-top:clamp(32px,4vw,56px);color:var(--on-deep-soft);font-size:16px}

/* text pages */
.doc{padding:clamp(56px,7vw,110px) 0}
.doc h1{font-size:clamp(44px,6vw,84px);margin-bottom:12px}
.doc .meta{color:var(--ink-soft);margin-bottom:clamp(28px,4vw,48px)}
.doc h2{font-size:clamp(28px,3vw,38px);margin:clamp(32px,4vw,52px) 0 14px}
.doc p,.doc li{max-width:64ch;color:var(--ink)}
.doc p{margin-bottom:14px}
.doc ul{padding-inline-start:1.3em;margin-bottom:14px}
.doc li{margin-bottom:8px}
.notfound{padding:clamp(72px,10vw,150px) 0;min-height:60vh}
.notfound h1{font-size:clamp(52px,8vw,116px);margin-bottom:22px}
.notfound .lead{font-size:clamp(19px,2vw,23px);max-width:34ch;color:var(--ink-soft);margin-bottom:30px}
.notfound .paths{list-style:none;display:flex;flex-wrap:wrap;gap:0 28px;margin-top:36px}
.fill{background:var(--gold);color:var(--ink);font-weight:800;padding:0 8px}
.foot .link,.doc .link{padding-block:10px}
.foot .link{color:var(--on-deep)}

/* motion: one calm entrance */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .txt{padding:44px var(--gut) 36px}
  .hero .photo img{max-width:560px}
  .vgrid{grid-template-columns:1fr}
  .areas .item,.ws{grid-template-columns:1fr;gap:12px}
  .areas .pics{grid-template-columns:repeat(2,1fr)}
  .tabs a{padding:12px 14px;font-size:16px}
}
@media (max-width:700px){
  .channel .wrap,.reads .grid{grid-template-columns:1fr}
  .channel .side{text-align:right}
  .channel .btn{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .leaves{display:none}
  .js .rv{opacity:1;transform:none}
}