/* Home options and blog article. Same tokens as site.css, so every colour theme applies. */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.sc{display:block;position:relative}.sc:nth-child(3n+2){margin-top:64px}
.sc .im{aspect-ratio:4/5;overflow:hidden;border-radius:0 90px 0 90px;position:relative}.sc:nth-child(even) .im{border-radius:90px 0 90px 0}
.sc .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}.sc:hover .im img{transform:scale(1.07)}
.sc .no{position:absolute;left:18px;top:14px;color:#F5F1E8;font:500 22px var(--serif);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.sc h3{margin-top:18px}.sc p{margin-top:6px}.sc .meta{display:flex;justify-content:space-between;margin-top:12px;color:var(--gold-d);font-weight:400;border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding-top:12px}
.sc:hover h3{color:var(--gold-d)}.sc h3{transition:color .25s}
@media(max-width:860px){.sgrid{grid-template-columns:1fr 1fr}.sc:nth-child(3n+2){margin-top:0}}@media(max-width:560px){.sgrid{grid-template-columns:1fr}}

/* option 2: index list with a photo that follows the cursor */
.rows a{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:20px;padding:clamp(20px,2.6vw,34px) 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);transition:padding .45s cubic-bezier(.2,.8,.2,1),color .25s}
.rows a:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.rows a:hover,.rows a:focus-visible{padding-left:clamp(10px,2vw,28px);color:var(--gold-d)}
.rows .n{font:500 22px var(--serif);color:var(--gold-d)}.rows h3{font-size:clamp(36px,6.4vw,104px)}.rows .s{font-size:17px;margin-top:6px;max-width:34em}
.rows .pr{text-align:right;font-size:17px;line-height:1.4;white-space:nowrap}.rows .pr b{display:block;font:500 28px var(--serif)}.rows .th{display:none}
.peek{position:fixed;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/5;border-radius:0 80px 0 80px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;box-shadow:0 30px 70px rgba(12,22,48,.3)}.peek img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.rows a{grid-template-columns:34px 1fr 64px}.rows .pr{display:none}.rows .th{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover}.rows .n{font-size:18px}.peek{display:none}}
.arch{border-radius:999px 999px 0 0;overflow:hidden}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);margin-top:clamp(40px,6vw,80px)}.facts div{padding:22px 24px 22px 0;font:500 clamp(22px,2.4vw,34px)/1.1 var(--serif)}.facts small{display:block;font:300 15px var(--sans);margin-top:6px;opacity:.8}
@media(max-width:760px){.facts{grid-template-columns:1fr}}

/* option 3: bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(240px,23vw);gap:16px;grid-auto-flow:dense}
.bt{position:relative;border-radius:30px;overflow:hidden;padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;justify-content:flex-end;color:#F5F1E8;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.bt:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(12,22,48,.22)}.bt:active{transform:scale(.98)}
.bt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s}.bt:hover>img{transform:scale(1.06)}.bt.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,22,48,.78),rgba(12,22,48,.05) 60%);z-index:1}
.bt>*:not(img){position:relative;z-index:2}.bt h3{font-size:clamp(28px,3vw,46px)}.bt p{font-size:16px;margin-top:6px;max-width:22em}.bt .m{display:flex;justify-content:space-between;margin-top:12px;font-weight:400;font-size:15px}
.bt.big{grid-column:span 2;grid-row:span 2}.bt.tall{grid-row:span 2}.bt.wide{grid-column:span 2}
.bt.sol-ink{background:var(--ink);color:var(--bone)}.bt.sol-gold{background:var(--gold-l);color:var(--deep)}.bt.sol-sand{background:var(--sand);color:var(--ink)}
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:240px}.bt.big,.bt.wide{grid-column:span 2}.bt.big{grid-row:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.big,.bt.wide,.bt.tall{grid-column:auto;grid-row:auto}}
.qb{background:var(--white);border-radius:26px;padding:22px;display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:end;box-shadow:0 18px 50px rgba(12,22,48,.12);max-width:760px}
.qb label{font-size:14px;display:block;font-weight:400}.qb select,.qb input{display:block;width:100%;margin-top:6px;padding:14px 16px;border:2px solid transparent;border-radius:14px;background:var(--bone);font:300 17px var(--sans);color:var(--ink)}.qb select:focus,.qb input:focus{border-color:var(--ink);outline:0}
@media(max-width:760px){.qb{grid-template-columns:1fr}}
.collage{position:relative;min-height:min(70vh,640px)}.collage>div{position:absolute;overflow:hidden}.collage img{width:100%;height:100%;object-fit:cover}

/* option 4: tabbed showcase */
.hero4{position:relative;min-height:100svh;color:#F5F1E8;display:flex;align-items:flex-end;overflow:hidden;background:#0C1630}
.hero4 .bg{position:absolute;inset:-6% 0}.hero4 .bg img{width:100%;height:100%;object-fit:cover}.hero4::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,22,48,.85),rgba(12,22,48,.15) 60%,rgba(12,22,48,.45))}
.hero4 .in{position:relative;z-index:2;padding:0 var(--m) clamp(40px,6vw,90px);width:100%}.hero4 h1{font-size:clamp(50px,9vw,150px)}
.btn.light{background:#F5F1E8;color:#14234A}.btn.light:hover{background:var(--gold-l);color:#0C1630}
.tabs{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:start}
.tablist{display:grid;gap:0}.tablist button{display:grid;grid-template-columns:48px 1fr auto;align-items:center;text-align:left;background:none;border:0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);padding:clamp(14px,1.8vw,24px) 0;cursor:pointer;color:var(--ink);opacity:.5;transition:opacity .3s,padding .4s cubic-bezier(.2,.8,.2,1),color .3s}
.tablist button:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.tablist button span{font:500 20px var(--serif)}.tablist button h3{font-size:clamp(28px,3.8vw,60px)}.tablist button i{font-style:normal;font-size:28px;opacity:0;transition:opacity .3s,transform .3s;transform:translateX(-10px)}
.tablist button:hover{opacity:.9}.tablist button[aria-selected=true]{opacity:1;padding-left:16px;color:var(--gold-d)}.tablist button[aria-selected=true] i{opacity:1;transform:none}
.panels{display:grid;position:sticky;top:100px}.panel{grid-area:1/1;opacity:0;visibility:hidden}.panel.on{opacity:1;visibility:visible}
.panel .pic{aspect-ratio:5/4;border-radius:0 110px 0 110px;overflow:hidden}.panel .pic img{width:100%;height:100%;object-fit:cover}.panel .txt{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:22px;flex-wrap:wrap}.panel .txt p{max-width:20em}.panel .txt b{display:block;font:500 34px var(--serif)}
@media(max-width:860px){.tabs{grid-template-columns:1fr}.tablist{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}.tablist button{display:block;flex:none;border:0!important;background:var(--sand);border-radius:99px;padding:12px 20px;opacity:1;color:var(--ink)}.tablist button span,.tablist button i{display:none}.tablist button h3{font:400 17px var(--sans)}.tablist button[aria-selected=true]{background:var(--ink);color:var(--bone);padding-left:20px}.panels{position:static}}

/* shared small blocks */
.jt{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.jt a{display:block}.jt .petal{aspect-ratio:4/3;border-radius:0 60px 0 60px}.jt a:nth-child(2) .petal{border-radius:60px 0 60px 0}.jt p{color:var(--gold-d);font-weight:400;margin-top:14px}.jt h3{margin-top:4px;font-size:clamp(26px,2.4vw,36px)}.jt a:hover h3{color:var(--gold-d)}.jt h3{transition:color .25s}
@media(max-width:760px){.jt{grid-template-columns:1fr}}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:860px){.steps3{grid-template-columns:1fr}}
.hd{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(30px,4vw,56px);flex-wrap:wrap}
.hero-sub{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin:36px 0 56px}@media(max-width:860px){.hero-sub{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}@media(max-width:860px){.split{grid-template-columns:1fr}}

/* blog article */
.rp{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:70}
.art-head{padding:clamp(120px,14vw,190px) var(--m) 0;max-width:1180px;margin:0 auto}
.crumb{font-size:16px;color:var(--gold-d);font-weight:400}.crumb a:hover{text-decoration:underline}
.art-head h1{font-size:clamp(46px,7.4vw,118px);margin:20px 0 28px;max-width:11em}.art-head .dek{font:400 clamp(22px,2.2vw,30px)/1.4 var(--serif);max-width:30em}
.by{display:flex;gap:14px;align-items:center;margin-top:30px;font-size:16px}.av{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--gold-l);display:grid;place-items:center;flex:none}.by small{display:block;opacity:.75;font-size:14px}
.art-hero{margin:clamp(30px,4vw,56px) var(--m) 0}.art-hero .petal{height:min(70vh,640px);border-radius:0 clamp(60px,10vw,160px) 0 clamp(60px,10vw,160px)}
.art-body{display:grid;grid-template-columns:230px minmax(0,700px);gap:clamp(30px,6vw,100px);justify-content:center;padding:clamp(50px,7vw,100px) var(--m) var(--gap)}
.toc{position:sticky;top:100px;align-self:start;font-size:16px}.toc h4{font:500 15px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px}.toc a{display:block;padding:8px 0 8px 14px;border-left:2px solid color-mix(in srgb,var(--ink) 18%,transparent);opacity:.65;transition:opacity .2s,border-color .2s,padding .3s}.toc a:hover{opacity:1}.toc a.on{opacity:1;border-color:var(--gold);padding-left:20px}
.share{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}.share button,.share a{background:var(--sand);color:var(--ink);border:0;border-radius:99px;padding:9px 16px;font:400 15px var(--sans);cursor:pointer;transition:transform .12s,background .2s}.share button:hover,.share a:hover{background:var(--gold-l)}.share button:active{transform:scale(.95)}
.prose{font-size:clamp(18px,1.5vw,21px);line-height:1.8}.prose p{margin-bottom:1.4em}.prose h2{font-size:clamp(34px,3.6vw,52px);line-height:1;margin:1.6em 0 .55em;scroll-margin-top:100px}
.prose>p:first-of-type::first-letter{font:500 5.6em/.8 var(--serif);float:left;padding:.08em .12em 0 0;color:var(--gold-d)}
.prose figure{margin:2em 0}.prose figure .petal{aspect-ratio:3/2;border-radius:0 80px 0 80px}.prose figcaption{font-size:15px;opacity:.75;margin-top:10px}
.prose blockquote{margin:1.8em 0;padding:0 0 0 28px;border-left:3px solid var(--gold);font:500 clamp(30px,3.2vw,46px)/1.15 var(--serif);letter-spacing:-.01em}
.take{background:var(--sand);border-radius:28px;padding:clamp(24px,3vw,40px);margin:2em 0}.take h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:14px}.take ul{padding-left:1.2em}.take li{margin-bottom:.5em}
.inbook{background:var(--ink);color:var(--bone);border-radius:30px;padding:clamp(26px,3.4vw,46px);margin:2.2em 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.inbook h3{font-size:clamp(30px,3vw,44px)}.inbook p{margin:8px 0 0!important;font-size:17px}.inbook .btn{background:var(--gold-l);color:var(--deep)}
.author{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);padding-top:30px;margin-top:2.4em;font-size:17px}.author .av{width:72px;height:72px}
@media(max-width:900px){.art-body{grid-template-columns:minmax(0,1fr)}.toc{position:static;order:2;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);padding-top:20px}.toc a{display:none}.toc .share{margin-top:0}.inbook{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sc .im img,.bt>img{transition:none}}