/*
Theme Name: Artha Lima Nusa
Theme URI: https://temalistudio.com
Author: Temali Studio
Description: Company profile theme for Artha Lima Nusa. Ported from the Phase 2 static
  mockup (artha.html). All design tokens live in :root below - see DESIGN.md.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary - Temali Studio
Text Domain: artha
*/
:root{
  --paper:#f5f7f8;
  --paper-2:#ebeff0;
  --line:#d1dadb;
  --teal-300:#93babd;
  --teal-500:#508488;
  --teal-600:#3d6c71;
  --teal-700:#2c5559;
  --teal-800:#1c383b;
  --ink:#111e1f;
  --gold-400:#ebb756;
  --gold-500:#e5a828;
  --gold-700:#89621a;
  --bg:var(--paper);
  --bg-recessed:var(--paper-2);
  --bg-dark:var(--teal-800);
  --bg-deepest:var(--ink);
  --fg:var(--ink);
  --fg-muted:var(--teal-600);
  --fg-on-dark:var(--paper);
  --fg-on-dark-2:var(--teal-300);
  --rule:var(--line);
  --rule-strong:var(--teal-300);
  --accent:var(--gold-500);
  --accent-text:var(--gold-700);
  --accent-on-dark:var(--gold-500);
  --focus:var(--teal-600);
  --display:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-display-xl:clamp(min(11vw,52px),min(6.4vw,11vh),84px);
  --t-display-l:clamp(38px,5.4vw,78px);
  --t-display-m:clamp(28px,3.4vw,46px);
  --t-display-s:clamp(21px,2.1vw,28px);
  --t-lead:clamp(19px,1.5vw,23px);
  --t-body:17px;
  --t-small:15px;
  --t-eyebrow:12px;
  --t-note:13px;
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --s9:96px; --s10:128px; --s11:160px; --s12:224px;
  --maxw:1240px;
  --pad:clamp(20px,4vw,72px);
  --section-y:clamp(96px,14vh,200px);
  --bar-h:60px;                      
  --ease:cubic-bezier(.16,1,.3,1);
  --grade:grayscale(1) contrast(1.10) brightness(1.02);
  --wash:.22;
  --scrim:linear-gradient(to top,rgb(17 30 31 / .93) 0%,rgb(17 30 31 / .87) 55%,rgb(17 30 31 / .84) 100%);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
::selection{background:var(--teal-800);color:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:100;
  padding:var(--s3) var(--s5);
  background:var(--accent);color:var(--fg);
  font:600 var(--t-body) var(--text);text-decoration:none;
  border:1px solid var(--gold-700);
}
.skip:focus{top:var(--s4)}
main:focus{outline:none}
.on-dark :focus-visible{outline-color:var(--gold-400)}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.page{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
main{display:block}
section{padding-block:var(--section-y);scroll-margin-top:var(--s5)}
.rule{border:none;border-top:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5)}
.col-main{grid-column:1/9}
.col-side{grid-column:10/13}
.col-wide{grid-column:1/8}
.col-plate{grid-column:8/13}
@media (max-width:899px){
  .col-main,.col-side,.col-wide,.col-plate{grid-column:1/-1}
}
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:600;
  text-wrap:balance;
  line-height:1.12;
}
p{text-wrap:pretty}
.d-xl{font-size:var(--t-display-xl);line-height:.92;letter-spacing:-.03em;font-weight:600}
.d-l {font-size:var(--t-display-l);line-height:1;letter-spacing:-.022em}
.d-m {font-size:var(--t-display-m);line-height:1.08;letter-spacing:-.015em}
.d-s {font-size:var(--t-display-s);line-height:1.22;letter-spacing:-.01em;font-weight:500}
.lead{font-size:var(--t-lead);line-height:1.55;max-width:54ch}
.kicker{
  font-size:var(--t-eyebrow);font-weight:600;
  line-height:1.2;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:var(--s3);
}
.prose{max-width:64ch}
.prose + .prose{margin-top:var(--s5)}
.small{font-size:var(--t-small);line-height:1.6}
.muted{color:var(--fg-muted)}
.tlink{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  text-decoration-color:var(--rule-strong);
  transition:text-decoration-color .15s var(--ease),color .15s var(--ease);
}
.tlink:hover{text-decoration-color:currentColor}
.on-dark .tlink{text-decoration-color:var(--teal-700)}
.slot{
  font:500 .88em/1.4 var(--mono);
  color:var(--fg-muted);
  background:color-mix(in oklab,var(--teal-500) 7%,transparent);
  border:1px dashed var(--rule-strong);
  border-radius:2px;
  padding:.12em .5em;
  white-space:nowrap;
}
.on-dark .slot{
  color:var(--fg-on-dark-2);
  background:color-mix(in oklab,var(--teal-300) 9%,transparent);
  border-color:var(--teal-700);
}
.slot--frame{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:var(--s2);
  min-height:120px;padding:var(--s5);
  text-align:center;white-space:normal;
  font-size:var(--t-note);letter-spacing:.08em;text-transform:uppercase;
}
.slot--frame span{display:block;letter-spacing:.02em;text-transform:none;opacity:.75}
.note{
  font:400 var(--t-note)/1.6 var(--mono);
  letter-spacing:.01em;
  color:var(--fg-muted);
  max-width:34ch;
}
.note::before{content:"NOTE FROM TEMALI — ";letter-spacing:.08em;color:var(--teal-700)}
.on-dark .note{color:var(--fg-on-dark-2)}
.on-dark .note::before{color:var(--teal-300)}
@media (max-width:1099px){
  .note{margin-top:var(--s7)}
}
.plate{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-dark);
}
.plate img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--grade);
}
.plate::after{
  content:"";position:absolute;inset:0;
  background:var(--teal-500);
  mix-blend-mode:multiply;
  opacity:var(--wash);
  pointer-events:none;
}
.plate--backing{opacity:.16}
.plate--bleed{width:100%;aspect-ratio:16/9}
@media (max-width:699px){.plate--bleed{aspect-ratio:4/5}}
.plate--tall{aspect-ratio:3/4}
@media (min-width:560px) and (max-width:899px){.plate--tall{aspect-ratio:4/3}}
.plate--wide{aspect-ratio:5/3}
.plate--square{aspect-ratio:1/1}
.plate--portrait::after,.plate--product::after{content:none}
figure{margin:0}
figcaption{margin-top:var(--s5)}
.caption{
  font-size:var(--t-small);line-height:1.6;
  color:var(--fg-muted);max-width:38ch;
}
.on-dark .caption{color:var(--fg-on-dark-2)}
.bleed figcaption .caption{margin-left:auto}
@media (max-width:899px){.bleed figcaption .caption{margin-left:0}}
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);
  padding-inline:var(--pad);
  background:var(--bg);
  border-top:1px solid var(--rule);
}
.bar__mark{width:22px;height:auto;display:block}
.bar__link,.bar__toggle{
  font-family:var(--text);
  font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-muted);text-decoration:none;
}
.bar__toggle{cursor:pointer;background:none;border:none;padding:var(--s2) 0}
.bar > a,.bar__toggle{
  display:flex;align-items:center;
  min-height:44px;min-width:44px;
}
.bar > a:first-child{justify-content:flex-start}
.bar__link{justify-content:flex-end}
.sheet{
  position:fixed;inset:0;z-index:39;
  background:var(--bg);
  padding:var(--s9) var(--pad) calc(var(--bar-h) + var(--s7));
  display:flex;flex-direction:column;justify-content:flex-end;
  visibility:hidden;opacity:0;
  transition:opacity .25s var(--ease),visibility .25s;
}
.sheet a{
  display:block;text-decoration:none;
  font-family:var(--display);font-weight:500;
  font-size:var(--t-display-s);
  padding:var(--s4) 0;
  border-top:1px solid var(--rule);
}
.sheet a:last-child{border-bottom:1px solid var(--rule)}
#navtoggle:checked ~ .sheet{visibility:visible;opacity:1}
#navtoggle:checked ~ .bar .bar__toggle{color:var(--fg)}
#navtoggle:focus-visible ~ .bar .bar__toggle{outline:2px solid var(--focus);outline-offset:3px}
body{padding-bottom:var(--bar-h)}
@media (min-width:1100px){
  .bar,.sheet,#navtoggle{display:none}
  body{padding-bottom:0}
}
.masthead{
  padding-block:var(--s7) var(--s5);
  border-bottom:1px solid var(--rule);
}
.masthead svg{height:clamp(30px,3.4vw,42px);width:auto;display:block}
.open{padding-block:clamp(44px,6.5vh,110px) var(--section-y)}
.open h1 .line{display:block}
.open h1{hanging-punctuation:first}
.open__type > * + *{margin-top:clamp(var(--s5),3vh,var(--s7))}
.open__type > h1{margin-top:0}
.open__cta{
  margin-top:var(--s6);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4) var(--s6);
}
.cta{
  display:inline-flex;align-items:center;min-height:52px;
  padding:0 var(--s6);
  font-family:var(--text);font-weight:600;font-size:var(--t-body);
  letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
  background:var(--accent);
  border:1px solid var(--gold-700);
  transition:background-color .15s var(--ease);
}
.cta:hover,.cta:focus-visible{background:var(--gold-400)}
.open .note{margin-top:var(--s7)}
@media (min-width:1100px){
  body{--hero-offset:calc(var(--topnav-h) + 1px)}
  .open{
    min-height:calc(100svh - var(--hero-offset,0px));
    display:flex;
    padding-block:clamp(32px,5vh,72px);
  }
  .open__grid{
    flex:1;display:grid;align-items:stretch;
    grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
    gap:clamp(var(--s6),3.5vw,var(--s8));
  }
  .open__type{display:flex;flex-direction:column;justify-content:center}
  .open__plate{display:flex}
  .open__plate .plate{flex:1;aspect-ratio:auto;min-height:0}
  .open__plate .plate img{position:absolute;inset:0}
}
.both__opener{max-width:20ch}
.both__prose{margin-top:var(--s7)}
.pillar{padding-block:var(--s8);border-top:1px solid var(--rule)}
.pillar p{margin-top:var(--s5);max-width:52ch}
.pillar--b{margin-top:0}
.pillar--b h3{text-align:right}
@media (min-width:900px){
  .pillar{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    gap:var(--s7);align-items:start;
  }
  .pillar p{margin-top:0;max-width:56ch}
  .pillar--b h3{order:2}
  .pillar--b p{order:1}
}
.both__close{
  margin-top:var(--s8);padding-top:var(--s7);
  border-top:1px solid var(--rule);
  font-family:var(--display);font-size:var(--t-display-s);
  max-width:44ch;
}
.weave{
  background:var(--bg-dark);
  color:var(--fg-on-dark);
  position:relative;
}
.weave__opener{max-width:18ch}
.wefts{margin-top:clamp(var(--s8),9vh,var(--s10))}
.weft{position:relative;padding-block:var(--s7)}
.weft__thread{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rule-strong);opacity:.5;
  transform:scaleX(1);transform-origin:left;
}
.weft:nth-child(even) .weft__thread{transform-origin:right}
.weft__row{display:grid;gap:var(--s5)}
@media (min-width:900px){
  .weft__row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s7)}
}
.weft h3{font-size:var(--t-display-m);max-width:16ch}
.weft p{color:var(--fg-on-dark-2);max-width:56ch}
.certs{
  margin-top:clamp(var(--s8),9vh,var(--s10));
  display:grid;gap:var(--s6);align-items:start;
}
@media (min-width:900px){
  .certs{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s7)}
}
.certs__note{margin-top:var(--s5);color:var(--fg-on-dark-2);max-width:56ch}
.on-dark .index{border-top-color:var(--teal-700)}
.on-dark .index li{border-bottom-color:var(--teal-700)}
.on-dark .index__moq{color:var(--fg-on-dark-2)}
.certs__index{margin-top:clamp(var(--s7),6vh,var(--s9))}
.runs{margin-top:clamp(var(--s8),9vh,var(--s10));display:grid;gap:var(--s7)}
.node{position:relative;padding-top:var(--s6)}
.node::before{                     
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--accent);
}
.node::after{                      
  content:"";position:absolute;top:-3px;left:0;
  width:7px;height:7px;background:var(--accent);
}
.node h3{font-size:var(--t-display-s)}
.node p{margin-top:var(--s3);font-size:var(--t-small);color:var(--fg-muted)}
@media (min-width:900px){
  .runs{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .node{padding-right:var(--s5)}
}
@media (max-width:899px){
  .node{padding-top:0;padding-left:var(--s5)}
  .node::before{top:0;bottom:0;left:0;right:auto;width:1px;height:auto}
  .node::after{top:0;left:-3px}
}
.runs__close{margin-top:var(--s8);max-width:60ch;color:var(--fg-muted);font-size:var(--t-small)}
.source{position:relative;background:var(--bg-recessed);isolation:isolate;overflow:hidden}
.source__bg{position:absolute;inset:0;z-index:-1}
.source__bg .plate{height:100%}
.source__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.index{
  margin-top:clamp(var(--s8),9vh,var(--s10));
  display:grid;
  border-top:1px solid var(--rule);
}
@media (min-width:900px){
  .index{grid-template-columns:1fr 1fr;column-gap:var(--s8)}
}
.index li{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s5);
  padding-block:var(--s5);
  border-bottom:1px solid var(--rule);
}
.index .name{font-family:var(--display);font-weight:500;font-size:var(--t-display-s);line-height:1.2}
.index__moq{margin-top:var(--s6);font-size:var(--t-small);color:var(--fg-muted)}
#source .index__moq{color:var(--fg)}
.showcase{
  margin-top:clamp(var(--s7),6vh,var(--s9));
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);
}
@media (min-width:900px){
  .showcase{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
}
.showcase__note{
  margin-top:var(--s5);max-width:60ch;
  font-size:var(--t-small);color:var(--fg-muted);
}
.source__close{
  margin-top:var(--s7);
  font-family:var(--display);font-size:var(--t-display-s);
}
.numbers__prose{margin-top:var(--s7)}
.faq{padding-top:0}
.faq__list{margin-top:var(--s7);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);
  font-family:var(--display);font-weight:500;
  font-size:var(--t-display-s);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:var(--t-body);
  color:var(--fg-muted);flex:none;
}
.faq details[open] summary::after{content:"\2212"}  
.faq summary:hover{color:var(--fg-muted)}
.faq__a{padding-bottom:var(--s6);max-width:64ch}
@media (min-width:900px){
  .faq__a{margin-left:calc(100% / 2.25);max-width:56ch}
}
.vision blockquote{
  margin-top:var(--s8);
  padding-left:var(--s5);
  border-left:1px solid var(--rule-strong);
  max-width:44ch;
}
.vision blockquote p{
  font-family:var(--display);font-weight:500;
  font-size:var(--t-display-s);line-height:1.3;
}
.vision cite{
  display:block;margin-top:var(--s4);
  font-style:normal;font-size:var(--t-small);color:var(--fg-muted);
}
.vision__after{margin-top:var(--s5);font-size:var(--t-small);color:var(--fg-muted)}
.contact{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(to bottom,var(--bg-dark),var(--bg-deepest));
  color:var(--fg-on-dark);
}
.contact__bg{position:absolute;inset:0;z-index:-2}
.contact__bg .plate{height:100%}
.contact__bg::after{content:"";position:absolute;inset:0;background:var(--scrim);z-index:1}
.sentence{
  font-family:var(--display);font-weight:500;
  font-size:clamp(21px,3.2vw,40px);
  line-height:1.7;letter-spacing:-.01em;
  max-width:24ch;
}
.sentence input,.sentence select{
  font-family:var(--mono);font-size:.62em;font-weight:500;
  color:var(--fg-on-dark);
  background:color-mix(in oklab,var(--teal-300) 9%,transparent);
  border:1px dashed var(--teal-300);
  border-radius:2px;
  padding:.2em .5em;
  width:11ch;max-width:100%;
  vertical-align:baseline;
}
.sentence input::placeholder{color:var(--fg-on-dark-2);opacity:1}
@media (max-width:699px){
  .sentence input,.sentence select{padding:.45em .6em}
}
.sentence select{width:auto;max-width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.6em}
.sentence .field-wrap{position:relative;display:inline-block;white-space:nowrap}
.sentence .field-wrap::after{
  content:"";position:absolute;right:1.1em;top:50%;
  width:.34em;height:.34em;margin-top:-.28em;
  border-right:1px solid var(--teal-300);
  border-bottom:1px solid var(--teal-300);
  transform:rotate(45deg);
  pointer-events:none;
}
.sentence select option{background:var(--bg-dark);color:var(--fg-on-dark)}
.sentence input:focus-visible,.sentence select:focus-visible{border-style:solid;border-color:var(--gold-400)}
.form__more{margin-top:var(--s8);max-width:56ch}
.form__more textarea{
  width:100%;
  font-family:var(--mono);font-size:var(--t-note);line-height:1.6;
  color:var(--fg-on-dark);
  background:color-mix(in oklab,var(--teal-300) 9%,transparent);
  border:1px dashed var(--teal-300);
  border-radius:2px;
  padding:var(--s3);resize:vertical;
}
.form__more textarea::placeholder{color:var(--fg-on-dark-2);opacity:1}
.form__more textarea:focus-visible{border-style:solid;border-color:var(--gold-400)}
.form__more label{
  display:block;margin-top:var(--s3);
  font-size:var(--t-small);color:var(--fg-on-dark-2);
}
.submit{
  margin-top:var(--s7);
  display:inline-flex;align-items:center;min-height:52px;
  padding:0 var(--s6);
  font-family:var(--text);font-size:var(--t-body);font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--accent);
  border:1px solid var(--gold-700);
  cursor:pointer;
  transition:background-color .15s var(--ease);
}
.submit:hover,.submit:focus-visible{background:var(--gold-400)}
.submit[disabled]{opacity:.6;cursor:default}
.form__result{
  margin-top:var(--s5);max-width:56ch;
  font-size:var(--t-small);line-height:1.6;
  color:var(--fg-on-dark);
}
.form__more label,
.sentence input::placeholder,
.form__more textarea::placeholder{color:var(--fg-on-dark)}
.form__result:empty{margin-top:0}
.form__result[data-state="ok"]{color:var(--accent-on-dark)}
.form__result[data-state="error"]{
  padding-left:var(--s4);
  border-left:1px solid var(--teal-300);
  font-weight:500;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__ctas{
  margin-top:clamp(var(--s8),9vh,var(--s10));
  padding-top:var(--s6);
  border-top:1px solid var(--teal-700);
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);
}
.contact__ctas a{
  color:var(--accent-on-dark);
  font-size:var(--t-display-s);font-family:var(--display);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:var(--teal-700);
  transition:text-decoration-color .15s var(--ease);
}
.contact__ctas a:hover{text-decoration-color:currentColor}
.contact__disclosure{
  margin-top:var(--s7);
  font-size:var(--t-small);color:var(--fg-on-dark);max-width:56ch;
}
.foot{
  position:relative;
  background:var(--bg-deepest);color:var(--fg-on-dark-2);
  padding-block:var(--s8);
}
.foot__line{
  font-family:var(--mono);font-size:var(--t-note);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
}
.foot__fine{
  margin-top:var(--s5);
  font-size:var(--t-small);color:var(--fg-on-dark-2);
}
.foot__fine a{color:var(--fg-on-dark-2)}
.proof{
  list-style:none;
  margin-top:var(--s6);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s7);
  font-size:var(--t-small);color:var(--fg-muted);
}
.proof li{display:flex;align-items:center}
:root{--topnav-h:62px}
.topnav{display:none}
@media (min-width:1100px){
  .masthead{display:none}   
  .topnav{
    display:block;
    position:sticky;top:0;z-index:45;
    background:var(--bg);
    border-bottom:1px solid var(--rule);
  }
  section{scroll-margin-top:calc(var(--topnav-h) + var(--s5))}
}
.topnav__inner{
  height:var(--topnav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
}
.topnav__logo{display:flex;align-items:center;gap:var(--s4);text-decoration:none}
.topnav__mark{width:24px;height:auto;display:block}
.topnav__word{
  font-family:var(--display);font-weight:600;
  font-size:var(--t-body);color:var(--fg);
  letter-spacing:-.01em;white-space:nowrap;
}
.topnav__links{display:flex;align-items:center;gap:clamp(var(--s5),1.6vw,var(--s7))}
.topnav__links a{
  display:flex;align-items:center;min-height:44px;
  font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-muted);text-decoration:none;white-space:nowrap;
  transition:color .15s var(--ease);
}
.topnav__links a:hover,.topnav__links a:focus-visible{color:var(--fg)}
.topnav__links a.is-cta{color:var(--fg)}
.topnav__links a.is-cta::after{
  content:"";display:block;height:1px;margin-top:3px;background:var(--accent);
}
@media (prefers-reduced-motion:no-preference){
  @keyframes artha-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes artha-line{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
  @keyframes artha-weft{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes artha-plate{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
  .open h1 .line{animation:artha-line .85s var(--ease) both}
  .open h1 .line:nth-child(1){animation-delay:.06s}
  .open h1 .line:nth-child(2){animation-delay:.15s}
  .open h1 .line:nth-child(3){animation-delay:.24s}
  .open .lead{animation:artha-rise .9s var(--ease) .33s both}
    .open .proof{animation:artha-rise .9s var(--ease) .49s both}
  .open__plate img{animation:artha-plate 1.15s var(--ease) .28s both}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    section .eyebrow,
    section h2,
    .prose,
    .pillar,
    .node,
    .index li,
    .certs > div,
    .caption{
      animation:artha-rise .8s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
    .bleed .plate img,
    .col-plate .plate img{
      animation:artha-plate 1s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 4% cover 24%;
    }
    .weft__thread{
      animation:artha-weft 1s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 12% cover 34%;
    }
  }
}
:root{ --steps-scroll:1; }   
@supports (animation-timeline:view()){
  @media (min-width:1100px) and (prefers-reduced-motion:no-preference){
    .steps{
      view-timeline-axis:block;
      height:calc((var(--steps-scroll) + 1) * 100svh);
    }
    .steps__stage{
      position:sticky;
      top:var(--hero-offset,0px);
      height:calc(100svh - var(--hero-offset,0px));
      display:flex;flex-direction:column;justify-content:center;
      overflow:hidden;
    }
    #how .steps__stage h2{ font-size:var(--t-display-m) }
    #how .steps{ view-timeline-name:--how-steps; }
    #how .steps__stage .runs{ margin-top:var(--s3); align-items:start }
    #how .steps__stage .runs__close{ margin-top:var(--s3) }
    #how .steps__item{
      animation:step-rise .6s var(--ease) both;
      animation-timeline:--how-steps;
    }
    #how .steps__item::before{
      transform-origin:left;
      animation:thread-draw .5s var(--ease) both;
      animation-timeline:--how-steps;
    }
    #how .steps__item:nth-child(1),
    #how .steps__item:nth-child(1)::before{ animation-range:contain 0%  contain 22% }
    #how .steps__item:nth-child(2),
    #how .steps__item:nth-child(2)::before{ animation-range:contain 22% contain 44% }
    #how .steps__item:nth-child(3),
    #how .steps__item:nth-child(3)::before{ animation-range:contain 44% contain 66% }
    #how .steps__item:nth-child(4),
    #how .steps__item:nth-child(4)::before{ animation-range:contain 66% contain 88% }
    @keyframes step-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
    @keyframes thread-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    #weave .steps{ view-timeline-name:--weave-steps; }
    #weave .steps__stage .weave__opener{ font-size:var(--t-display-s) }
    #weave .steps__stage .col-plate .plate{ aspect-ratio:auto;height:var(--s9) }
    #weave .steps__stage .wefts{
      margin-top:var(--s3);
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);
    }
    #weave .steps__stage .weft{ padding-block:var(--s3) 0 }
    #weave .steps__stage .weft__row{ grid-template-columns:1fr;gap:var(--s2) }
    #weave .steps__stage .weft h3{ font-size:var(--t-display-s);max-width:none }
    #weave .steps__stage .weft p{ font-size:var(--t-small);max-width:none }
    #weave .steps__item{
      animation:step-rise .6s var(--ease) both;
      animation-timeline:--weave-steps;
    }
    #weave .steps__stage .weft__thread{
      animation:artha-weft 1s var(--ease) both;
      animation-timeline:--weave-steps;
    }
    #weave .steps__item:nth-child(1),
    #weave .steps__stage .weft:nth-child(1) .weft__thread{ animation-range:contain 0%  contain 22% }
    #weave .steps__item:nth-child(2),
    #weave .steps__stage .weft:nth-child(2) .weft__thread{ animation-range:contain 22% contain 44% }
    #weave .steps__item:nth-child(3),
    #weave .steps__stage .weft:nth-child(3) .weft__thread{ animation-range:contain 44% contain 66% }
    #weave .steps__item:nth-child(4),
    #weave .steps__stage .weft:nth-child(4) .weft__thread{ animation-range:contain 66% contain 88% }
    #both .steps{ view-timeline-name:--both-steps; }
    #both .steps__stage .both__opener{ font-size:var(--t-display-s);max-width:none }
    #both .steps__stage .both__prose{ margin-top:var(--s5);font-size:var(--t-small);max-width:none }
    #both .steps__stage .col-plate{ display:flex }
    #both .steps__stage .col-plate .plate{ flex:1;aspect-ratio:auto;min-height:0 }
    #both .steps__stage .col-plate .plate img{ position:absolute;inset:0 }
    #both .steps__stage .pillars{
      margin-top:var(--s4);
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);
    }
    #both .steps__stage .pillar{
      padding-block:var(--s4) 0;
      grid-template-columns:1fr;gap:var(--s2);
    }
    #both .steps__stage .pillar h3{ font-size:var(--t-display-s) }
    #both .steps__stage .pillar p{ margin-top:0;font-size:var(--t-small);max-width:none }
    #both .steps__stage .pillar--b h3{ order:0 }
    #both .steps__stage .pillar--b p{ order:0 }
    #both .steps__stage .both__close{
      margin-top:var(--s4);padding-top:var(--s4);max-width:none;
    }
    #both .steps__item{
      animation:step-rise .6s var(--ease) both;
      animation-timeline:--both-steps;
    }
    #both .pillar--a{    animation-range:contain 0%  contain 29% }
    #both .pillar--b{    animation-range:contain 29% contain 59% }
    #both .both__close{  animation-range:contain 59% contain 88% }
  }
}
@media (prefers-reduced-motion:reduce), not all and (min-width:1100px){
  .steps{ height:auto }
  .steps__stage{ position:static;height:auto }
}
@supports not (animation-timeline:view()){
  .steps{ height:auto }
  .steps__stage{ position:static;height:auto }
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  html{--hero-offset:calc(var(--topnav-h) + 1px)}
  html{
    scroll-padding-top:var(--hero-offset,0px);
  }
  .snap{ scroll-snap-align:start; scroll-snap-stop:normal }
}
html{margin-top:0 !important}
#wpadminbar{position:fixed}
.open--page{min-height:0;display:block;padding-block:clamp(44px,6.5vh,110px) var(--s9)}
.open--page .open__type > h1{max-width:18ch}
body.page .page-intro{padding-top:0}
body.page section{padding-block:clamp(var(--s8),9vh,var(--s10))}
body.page .open--page{padding-block:clamp(44px,6.5vh,110px) var(--s8)}
.col-plate .index{grid-template-columns:1fr;margin-top:0}
.updates li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5)}
.updates time{font-family:var(--mono);font-size:var(--t-note);color:var(--fg-muted);white-space:nowrap}
.updates a{text-decoration:none}
.updates a:hover,.updates a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.details{margin-top:var(--s7);display:grid;gap:var(--s5)}
@media (min-width:560px){.details{grid-template-columns:1fr 1fr}}
.details dt{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
.details dd{margin:var(--s2) 0 0;font-family:var(--display);font-weight:500;font-size:var(--t-display-s);line-height:1.3}
.details dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule-strong)}
.details dd a:hover{text-decoration-color:currentColor}
.article-body{padding-top:0}
.article__date{font-family:var(--mono);font-size:var(--t-note);color:var(--fg-muted)}
.open--page .open__type > .article__date{margin-top:var(--s4)}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover,.kicker a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.article{max-width:64ch}
.article > * + *{margin-top:var(--s5)}
.article h2{font-size:var(--t-display-s);line-height:1.22;letter-spacing:-.01em;font-weight:500;margin-top:var(--s7)}
.article h3{font-size:var(--t-lead);line-height:1.3;font-weight:500;margin-top:var(--s6)}
.article h2 + *,.article h3 + *{margin-top:var(--s4)}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article ul,.article ol{padding-left:1.25em}
.article li + li{margin-top:var(--s2)}
.article a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:var(--rule-strong);
}
.article a:hover,.article a:focus-visible{text-decoration-color:currentColor}
.article blockquote{margin-inline:0;padding-left:var(--s5);border-left:2px solid var(--gold-500);color:var(--fg-muted)}
.article figure{margin-inline:0}
.article img{max-width:100%;height:auto;display:block;filter:var(--grade)}
.article figcaption{font-size:var(--t-note);color:var(--fg-muted);margin-top:var(--s2)}
.article table{border-collapse:collapse;width:100%;font-size:var(--t-small)}
.article th,.article td{text-align:left;padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--rule)}
.article__after{margin-top:var(--s8);max-width:64ch}
.updates__cat{margin-right:var(--s3);color:var(--fg-muted)}
.updates__cat::after{content:"\00b7";margin-left:var(--s3)}
.index.updates--all{margin-top:var(--s7)}
@media (max-width:559px){
  .updates li{flex-direction:column;align-items:flex-start;gap:var(--s2)}
}
.consent{
  position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--bar-h) + 12px);z-index:38;
  background:var(--teal-800);color:var(--fg-on-dark);
  padding:var(--s5);
  box-shadow:0 14px 36px rgba(17,30,31,.28);
  font-size:var(--t-small);line-height:1.55;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.consent[hidden]{display:none}
.consent.is-on{opacity:1;transform:none}
.consent p{margin:0;max-width:none}
.consent__q{font-size:var(--t-lead);line-height:1.3;font-weight:500;letter-spacing:-.005em;margin-bottom:var(--s2) !important}
.consent p:not(.consent__q){color:var(--fg-on-dark-2)}
.consent__row{display:flex;gap:var(--s3);margin-top:var(--s5)}
.consent button{
  flex:1;min-height:44px;padding:0 var(--s4);cursor:pointer;
  font-family:var(--text);font-size:var(--t-small);font-weight:600;letter-spacing:.01em;
  background:transparent;color:var(--fg-on-dark);border:1px solid var(--teal-300);
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.consent button:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--ink)}
.consent button:focus-visible,.foot__btn:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}
@media (min-width:640px){.consent{left:auto;max-width:23rem}} 
@media (min-width:1100px){.consent{bottom:var(--s5)}}
@media (prefers-reduced-motion:reduce){.consent{transition:none;transform:none}}
.foot__btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.policy-sec{padding-top:0}
.policy{border-top:1px solid var(--rule)}
.policy__row{display:grid;gap:var(--s3) var(--s8);padding-block:var(--s7);border-bottom:1px solid var(--rule)}
@media (min-width:900px){.policy__row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.policy__row .kicker{margin-bottom:var(--s2)}
.policy__row h2{font-size:var(--t-display-s);line-height:1.22;letter-spacing:-.01em;font-weight:500}
.policy__text p{font-size:var(--t-body);line-height:1.65;max-width:60ch}
.policy__text p + p{margin-top:var(--s4)}
.policy__date{margin-top:var(--s6)}
.notfound{padding-top:0}
.notfound__list{margin-top:0}
.notfound__list li{align-items:baseline}
.notfound__list .name{text-decoration:none;color:var(--fg)}
.notfound__list .name:hover,.notfound__list .name:focus-visible{color:var(--teal-600);text-decoration:underline;text-underline-offset:.2em}
.notfound__list span{font-size:var(--t-small);color:var(--fg-muted);text-align:right}
@media (max-width:599px){.notfound__list li{flex-direction:column;gap:var(--s1)}.notfound__list span{text-align:left}}
