/* St John follows the portfolio's editorial rhythm with its own stone accent. */
body.sj-editorial{--bg:#faf9f6;--surface:#eeede7;--ink:#202620;--muted:#656c61;--sj-accent:#796653;--sj-rule:color-mix(in srgb,var(--ink) 22%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-lights="on"]) body.sj-editorial{--bg:#141612;--surface:#1d201a;--ink:#ecebe1;--muted:#a3a89c;--sj-accent:#cfb79e}}
:root[data-theme="dark"]:not([data-lights="on"]) body.sj-editorial,:root[data-lights="off"] body.sj-editorial{--bg:#141612;--surface:#1d201a;--ink:#ecebe1;--muted:#a3a89c;--sj-accent:#cfb79e}

.sj-editorial #top{--olive:var(--sj-accent);--lime:var(--sj-accent);padding:0 clamp(22px,4.6vw,76px) 34px;margin-top:24px}
.sj-editorial #top section,.sj-editorial #top .chapter{scroll-margin-top:130px}
.sj-editorial #top .cs-hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:7%;align-items:center;min-height:670px;margin:0 calc(clamp(22px,4.6vw,76px)*-1);padding:clamp(35px,4.6vw,76px);border-radius:10px;--hero-bg:#e4e1dc;--hero-ink:#2a2622;--hero-muted:#6f6a63;--hero-accent:#8c7b6b}
.sj-editorial #top .cs-hero h1{font-size:clamp(65px,8.8vw,132px);line-height:.96;letter-spacing:-.06em;margin:22px 0}
.sj-editorial #top .sj-logo{width:145px;margin-bottom:30px}
.sj-editorial #top .cs-hero .label{font-size:9px;color:var(--hero-muted)}
.sj-editorial #top .cs-hero .label::before{content:"";display:inline-block;width:8px;height:8px;background:var(--hero-accent);margin-right:9px;border-radius:1px}
.sj-editorial #top .cs-sub{font:400 clamp(22px,2.3vw,31px)/1.3 var(--serif)!important;letter-spacing:-.025em;max-width:22ch;margin-bottom:22px}
.sj-editorial #top .cs-intro{font:400 13px/1.85 var(--body);max-width:47ch;margin-bottom:30px}
.sj-editorial #top .meta-grid{font-size:11px;gap:14px 24px}
.sj-editorial #top .meta-grid dt{font-size:9px;letter-spacing:.1em}
.sj-editorial #top .cs-hero>figure{width:100%;max-width:560px;justify-self:end;background:transparent;border-radius:0;min-height:0;aspect-ratio:auto;align-self:center;margin-top:30px}
.sj-editorial #top .cs-hero>figure img{height:auto;object-fit:contain;border-radius:4px}
.sj-editorial #top .chapter{margin:70px 0 0;font-size:10px;font-weight:500;letter-spacing:.12em;gap:22px}
.sj-editorial #top .chapter b{font-size:10px;font-weight:500;color:var(--sj-accent)}
.sj-editorial #top .chapter::after{background:var(--sj-rule)}
.sj-editorial #top .label{font-size:10px;font-weight:500;letter-spacing:.12em}
.sj-editorial #top .big-q,.sj-editorial #top .disc,.sj-editorial #top h3{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.035em}
.sj-editorial #top .big-q,.sj-editorial #top .disc{font-size:clamp(32px,3.7vw,53px);line-height:1.16;max-width:22ch;margin-bottom:25px}
.sj-editorial #top .big-q em,.sj-editorial #top .disc span{color:var(--sj-accent)}
.sj-editorial #top .split{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:9%;align-items:center}
.sj-editorial #top .split .txt{position:static;min-width:0}
.sj-editorial #top p,.sj-editorial #top .split .txt p{font-size:13px;line-height:1.85}
.sj-editorial #top .split .txt p{max-width:45ch}
.sj-editorial #top .fig{background:transparent;border-radius:0;overflow:visible;box-shadow:none;margin:0}
.sj-editorial #top .fig img{height:auto;object-fit:contain;border-radius:0}
.sj-editorial #top .fig.fit img{padding:0;background:transparent}
.sj-editorial #top .fig figcaption{font-size:10px;font-weight:400;line-height:1.6;letter-spacing:.015em;text-transform:none;color:var(--muted);background:transparent;border:0;padding:12px 0 0;display:block}
.sj-editorial #top .fig figcaption>span{display:none}
.sj-editorial #top .sj-kit>div:last-child{padding-top:35px}
.sj-editorial #top .morph{max-width:580px;margin-left:auto;border-radius:4px}
.sj-editorial #top .m-tag{font-size:9px;font-weight:500;letter-spacing:.07em}
.sj-editorial #top .play{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:10%;margin-top:30px;align-items:center}
.sj-editorial #top .play-stage{max-width:680px;border-radius:4px}
.sj-editorial #top .play-steps button{padding-block:18px;border-color:var(--sj-rule);gap:6px 14px;opacity:.65}
.sj-editorial #top .play-steps li.on button{opacity:1}
.sj-editorial #top .play-steps b{font-size:13px;font-weight:500}
.sj-editorial #top .play-steps span{font-size:11px;line-height:1.8}
.sj-editorial #top .crit{max-width:none;margin-top:28px}
.sj-editorial #top .crit li{grid-template-columns:82px minmax(0,1fr);font-size:12px;line-height:1.8;gap:18px;padding:15px 0;border-color:var(--sj-rule)}
.sj-editorial #top .crit b{font-size:9px;letter-spacing:.08em;font-weight:500;color:var(--sj-accent)}
.sj-editorial #top .sj-original{align-items:start}
.sj-editorial #top .sj-original>div:last-child{padding-top:25px}
.sj-editorial #top .sj-original>div:last-child>figure{width:94%;margin-left:auto}
.sj-editorial #top .sj-original .grid3{margin-top:35px;gap:25px;align-items:start}
.sj-editorial #top .sj-original .grid3 figure:last-child{margin-top:45px}
.sj-editorial #top .sj-original .grid3 img{aspect-ratio:auto;max-height:230px;object-fit:contain}
.sj-editorial #top .trace{margin-top:70px;background:transparent;padding:42px 0 0;border-radius:0;border-top:1px solid var(--sj-rule)}
.sj-editorial #top .tr-head{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:15%;align-items:center}
.sj-editorial #top .tr-head h3{font-size:clamp(27px,3vw,42px);line-height:1.18;max-width:20ch;margin-bottom:22px}
.sj-editorial #top .tr-head p:not(.label){font-size:12px;line-height:1.85;max-width:53ch}
.sj-editorial #top .tr-sketch{background:transparent;max-width:270px;border-radius:0;justify-self:end;padding:0}
.sj-editorial #top .tr-sketch svg{background:#fff;border-radius:3px}
.sj-editorial #top .tr-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:12%;margin-top:45px;align-items:center}
.sj-editorial #top .tr-stone{max-width:270px;justify-self:start;margin-left:10%}
.sj-editorial #top .tr-right{grid-template-columns:minmax(0,1fr) minmax(0,125px);gap:30px}
.sj-editorial #top .tr-page{font-size:11px;line-height:1.65;padding:18px}
.sj-editorial #top .tr-page p{font-size:11px;line-height:1.65}
.sj-editorial #top .tr-best figcaption{font-size:9px;line-height:1.7}
.sj-editorial #top .tex{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:12%;background:transparent;padding:55px 0 0;border-radius:0;border-top:1px solid var(--sj-rule);margin-top:65px;align-items:start}
.sj-editorial #top .tex .pic{max-width:285px;margin:35px 0 0 8%;border-radius:0}
.sj-editorial #top .tex h3{font-size:clamp(27px,3vw,40px);line-height:1.2;max-width:20ch;margin-bottom:18px}
.sj-editorial #top .tex li{font-size:12px;line-height:1.8;padding:12px 0;gap:16px;border-color:var(--sj-rule)}
.sj-editorial #top .tex li::before,.sj-editorial #top .tex .pin{background:var(--ink);color:var(--bg);font-weight:400}
.sj-editorial #top .sec-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10%;align-items:start;margin-bottom:40px}
.sj-editorial #top .sec-head p{font-size:13px;line-height:1.85;color:var(--muted);max-width:45ch}
.sj-editorial #top .whys{gap:40px 10%;margin-top:30px}
.sj-editorial #top .whys article{border-color:var(--sj-rule);border-width:1px;padding-top:22px}
.sj-editorial #top .whys h3{font-size:clamp(23px,2.2vw,30px);line-height:1.25;max-width:27ch;margin-bottom:17px}
.sj-editorial #top .whys p{font-size:12px;line-height:1.85;max-width:48ch}
.sj-editorial #top .sj-decisions>figure{width:72%;max-width:800px!important;background:transparent!important;margin:55px 0 0 auto!important}
.sj-editorial #top .whole{background:transparent;color:var(--ink);padding:38px 0;border-top:1px solid var(--sj-rule);border-radius:0;gap:12%;margin-top:50px}
.sj-editorial #top .whole h3{font-size:clamp(28px,3vw,42px);line-height:1.2}
.sj-editorial #top .whole p{font-size:12px;line-height:1.85;color:var(--muted);opacity:1}
.sj-editorial #top .sj-making{display:block}
.sj-editorial #top .sj-making .txt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 12%;align-items:start}
.sj-editorial #top .sj-making .txt>h2{grid-column:1;grid-row:1}
.sj-editorial #top .sj-making .txt>.crit{grid-column:2;grid-row:1/3;margin-top:0}
.sj-editorial #top .sj-making .txt>p{grid-column:1;grid-row:2;padding-top:22px;border-top:1px solid var(--sj-rule);font-size:12px;line-height:1.85;max-width:38ch}
.sj-editorial #top .sj-making>.grid3{max-width:1020px;margin:45px auto 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 6%;align-items:start;counter-reset:making}
.sj-editorial #top .sj-making>.grid3 .fig:nth-child(3n+2){margin-top:35px}
.sj-editorial #top .sj-making>.grid3 img{aspect-ratio:auto;max-height:215px;object-fit:contain;object-position:left bottom}
.sj-editorial #top .sj-making>.grid3 figcaption::before{counter-increment:making;content:counter(making,decimal-leading-zero) ' / ';color:var(--sj-accent);margin-right:7px;font-size:9px}
.sj-editorial #top .sj-outcome{align-items:center;margin-bottom:50px}
.sj-editorial #top .sj-outcome>div:last-child .fig{max-width:580px;margin-left:auto;padding-top:45px}
.sj-editorial #top .pack-list li{font-size:12px;line-height:1.85;border-color:var(--sj-rule);padding:15px 0}
.sj-editorial #top .pack-list b{font-weight:500}
.sj-editorial #top .jrow{display:grid;gap:35px 5%;align-items:start;margin-top:45px;max-width:none}
.sj-editorial #top .jrow .fig{width:100%;min-width:0}
.sj-editorial #top .jrow .fig img{aspect-ratio:auto;height:auto;object-fit:contain;max-height:300px}
.sj-editorial #top .sj-packaging{grid-template-columns:minmax(0,.65fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
.sj-editorial #top .sj-packaging .fig:nth-child(2){padding-top:55px}
.sj-editorial #top .sj-packaging .fig:nth-child(4){padding-top:50px}
.sj-editorial #top .sj-pack-details{grid-template-columns:minmax(0,.65fr) minmax(0,1fr) minmax(0,1.25fr);gap:8%;margin-top:65px}
.sj-editorial #top .sj-pack-details .fig:nth-child(2){padding-top:50px}
.sj-editorial #top .sj-pack-details .fig:nth-child(3){padding-top:100px}
.sj-editorial #top .sj-pack-details .fig img{max-height:310px;object-position:left top}
.sj-editorial #top .sj-retail{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:12%;max-width:950px;margin:65px auto 0}
.sj-editorial #top .sj-retail .fig:last-child{padding-top:50px}
.sj-editorial #top .barriers{margin:10px 0 30px;gap:7%}
.sj-editorial #top .barrier,.sj-editorial #top .barrier.now{background:transparent;color:var(--ink);border-top:1px solid var(--sj-rule);border-radius:0;padding:25px 0}
.sj-editorial #top .barrier b{font:400 clamp(28px,3vw,42px)/1.2 var(--serif);letter-spacing:-.035em}
.sj-editorial #top .barrier small{font-size:9px;letter-spacing:.09em;color:var(--sj-accent);opacity:1}
.sj-editorial #top .barrier p{font-size:12px;line-height:1.85;color:var(--muted);opacity:1}
.sj-editorial #top .btn-line{font-size:11px;padding:0 0 7px;border:0;border-bottom:1px solid var(--sj-accent);border-radius:0;color:var(--sj-accent);background:none}
.sj-editorial #top .symnext{margin-top:70px}
.sj-editorial .sj-contents{position:fixed;right:calc(var(--gutter) + 6px);top:88px;z-index:25}
.sj-editorial .sj-contents-toggle{display:flex;gap:12px;align-items:center;margin-left:auto;border:0;border-radius:999px;padding:11px 17px;font:500 12px/1.2 var(--body);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);box-shadow:0 3px 14px #0000000b;backdrop-filter:blur(12px);cursor:pointer}
.sj-editorial #sj-contents-links{position:absolute;right:0;top:calc(100% + 10px);width:215px;max-height:calc(100svh - 148px);overflow:auto;padding:20px 22px;border:1px solid var(--sj-rule);border-radius:22px;background:var(--surface);box-shadow:0 12px 30px #00000018;backdrop-filter:blur(12px)}
.sj-editorial #sj-contents-links[hidden]{display:none}
.sj-editorial #sj-contents-links a{display:block;color:var(--ink);font:400 12px/1.5 var(--body);padding:9px 0;text-decoration:none}
.sj-editorial #sj-contents-links a:hover{color:var(--sj-accent)}
.sj-editorial .cord small{right:0}
@media(max-width:1000px){
 .sj-editorial #top .cs-hero{min-height:0;gap:5%}
 .sj-editorial #top .cs-hero h1{font-size:clamp(58px,8.5vw,95px)}
 .sj-editorial #top .tr-stage{gap:7%}
 .sj-editorial #top .tr-right{grid-template-columns:minmax(0,1fr) 95px;gap:18px}
}
@media(max-width:760px){
 .sj-editorial #top .cs-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:40px}
 .sj-editorial #top .cs-hero>figure{width:82%;max-width:450px;margin:10px 0 0 auto}
 .sj-editorial #top .cs-hero h1{font-size:clamp(55px,13vw,90px)}
 .sj-editorial #top .cs-hero .sj-logo{width:130px}
 .sj-editorial #top .split,.sj-editorial #top .sec-head,.sj-editorial #top .play,.sj-editorial #top .tex,.sj-editorial #top .tr-head,.sj-editorial #top .tr-stage,.sj-editorial #top .whole{grid-template-columns:minmax(0,1fr);gap:28px}
 .sj-editorial #top .chapter{margin-top:50px}
 .sj-editorial #top .big-q,.sj-editorial #top .disc{font-size:clamp(31px,7.5vw,43px);max-width:24ch}
 .sj-editorial #top .sj-kit>div:last-child{padding-top:0;width:94%;justify-self:end}
 .sj-editorial #top .play{gap:22px}
 .sj-editorial #top .play-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px}
 .sj-editorial #top .play-steps button{height:100%;grid-template-columns:16px minmax(0,1fr)}
 .sj-editorial #top .play-steps span{font-size:10px}
 .sj-editorial #top .tr-sketch{max-width:230px;width:65%;justify-self:end}
 .sj-editorial #top .tr-stone{max-width:200px;margin-left:5%}
 .sj-editorial #top .tr-right{grid-template-columns:minmax(0,1fr) minmax(0,.45fr)}
 .sj-editorial #top .tr-line{display:none}
 .sj-editorial #top .tex .pic{max-width:230px;width:70%;margin:0 0 0 6%}
 .sj-editorial #top .whys{gap:28px 8%}
 .sj-editorial #top .sj-decisions>figure{width:90%}
 .sj-editorial #top .sj-making .txt{grid-template-columns:minmax(0,1fr);gap:20px}
 .sj-editorial #top .sj-making .txt>h2,.sj-editorial #top .sj-making .txt>.crit,.sj-editorial #top .sj-making .txt>p{grid-column:auto;grid-row:auto}
 .sj-editorial #top .sj-making>.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 7%;margin-top:30px}
 .sj-editorial #top .sj-making>.grid3 .fig:nth-child(3n+2){margin-top:0}
 .sj-editorial #top .sj-making>.grid3 .fig:nth-child(even){margin-top:25px}
 .sj-editorial #top .sj-outcome>div:last-child .fig{width:94%;padding-top:0}
 .sj-editorial #top .sj-packaging,.sj-editorial #top .sj-pack-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 8%;margin-top:35px}
 .sj-editorial #top .sj-packaging .fig:nth-child(2),.sj-editorial #top .sj-packaging .fig:nth-child(4),.sj-editorial #top .sj-pack-details .fig:nth-child(2){padding-top:25px}
 .sj-editorial #top .sj-pack-details .fig:nth-child(3){grid-column:1/-1;width:85%;padding-top:0;justify-self:end}
 .sj-editorial #top .sj-retail{gap:7%;margin-top:45px}
 .sj-editorial #top .sj-retail .fig:last-child{padding-top:30px}
 .sj-editorial #top .barriers{grid-template-columns:minmax(0,1fr);gap:0}
 .sj-editorial #top .barriers .arrow{font-size:25px;transform:rotate(90deg);justify-self:start}
}
@media(max-width:600px){
 .sj-editorial .top{gap:8px}
 .sj-editorial .top .mark{font-size:20px}
 .sj-editorial .top .right{gap:8px}
 .sj-editorial .top .cv{font-size:10px;padding:9px 10px;white-space:nowrap;flex-shrink:0}
 .sj-editorial .top .lang span{padding:5px}
 .sj-editorial .top .cord{width:18px}
 .sj-editorial #top{padding-inline:22px}
 .sj-editorial #top .cs-hero{margin-inline:-22px;padding:35px 22px 40px}
 .sj-editorial #top .whys{grid-template-columns:minmax(0,1fr)}
 .sj-editorial #top .sj-original .grid3{gap:18px}
 .sj-editorial #top .tr-right{grid-template-columns:minmax(0,1fr)}
 .sj-editorial #top .tr-best{max-width:145px;justify-self:end}
 .sj-editorial #top .tr-head h3{font-size:30px}
 .sj-editorial #top .crit li{grid-template-columns:64px minmax(0,1fr);gap:12px;font-size:11px}
 .sj-editorial #top .sj-logo{margin-bottom:25px}
}