/* =============================================================================
   ai-at-work.au

   Design direction: confident editorial, not minimal. Colour carries meaning,
   surfaces separate content, and the page is dense enough to feel substantial.

   Colour     plum (structure) + green (action and accent) on a warm paper,
              with a lifted white surface for cards and panels
   Type       Bricolage Grotesque for display, Newsreader for reading
   Rhythm     4px baseline, section padding 64–104, cards on a 24px gutter
   Surfaces   cards, tinted panels, a dark band and a green action band
   ========================================================================== */

:root{
  --ink:#1D1320;
  --plum:#300039;
  --plum-deep:#1E0024;
  --plum-mid:#4A2B52;
  --plum-soft:#F2ECF4;
  --plum-tint:#FBF8FC;

  --green:#00BF63;
  --green-deep:#00994F;
  --green-ink:#00703A;
  --green-soft:#E6F8EE;

  --paper:#FAF8F6;
  --lift:#FFFFFF;
  --slate:#5E5566;
  --edge:#E6DFE9;
  --edge-soft:#F0EAF2;

  /* Plus Jakarta Sans for headings: geometric and open, so it reads warm
     rather than corporate. Inter for reading: the most legible screen face
     there is at body sizes, and quiet enough to stay out of the way. */
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --shadow-sm:0 1px 2px rgba(29,19,32,.04),0 2px 8px rgba(29,19,32,.05);
  --shadow-md:0 2px 4px rgba(29,19,32,.05),0 12px 28px -12px rgba(29,19,32,.18);
  --shadow-lg:0 24px 60px -28px rgba(48,0,57,.38);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;

  --measure:64ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --bar-h:4.75rem;
  --pad:clamp(4rem,7vw,6.5rem);

  /* Spacing and type tokens used by the figure, tool and media blocks in
     extra.css. Defined here so both sheets share one scale. */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:2.5rem; --s6:3rem; --s7:4rem; --s8:5rem; --s9:6rem;
  --t1:1rem; --t2:1.22rem; --t3:clamp(1.7rem,2.9vw,2.4rem); --t4:clamp(2.3rem,4.6vw,3.6rem);
  --plum-72:var(--slate);
  --plum-14:var(--edge);
  --paper-72:#CBBFD1;
  --paper-24:rgba(255,255,255,.24);
  --face:var(--body);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.25vw + .95rem,1.0625rem);
  line-height:1.62;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.15rem,4.2vw,3.35rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(1.6rem,2.7vw,2.2rem);letter-spacing:-.025em;font-weight:700}
h3{font-size:clamp(1.15rem,1.3vw,1.3rem);font-weight:700}
h4{font-size:1.05rem;font-weight:600}
p{margin:0}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:3px}

.shell{max-width:78rem;margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--plum);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm)}

[data-fade]{opacity:0;transform:translateY(16px)}
[data-fade].in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){
  [data-fade]{opacity:1;transform:none}
  [data-fade].in{transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ------------------------------------------------------------------- bar --*/
.bar{position:sticky;top:0;z-index:60;background:rgba(250,248,246,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.bar-in{display:flex;align-items:center;gap:1.5rem;height:var(--bar-h)}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;flex:none;color:var(--plum)}
.wordmark img{height:2.25rem;width:auto;display:block}
.wm{font-family:var(--display);line-height:1;display:block}
.wm b{display:block;font-weight:800;font-size:1.22rem;letter-spacing:-.03em}
.wm i{display:block;font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.24em;margin-top:.2rem;color:var(--green-ink)}

.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.nav-item{position:static}
.nav-btn,.nav-link{
  font-family:var(--display);font-size:.94rem;font-weight:500;
  background:none;border:0;padding:.5rem .62rem;cursor:pointer;
  color:var(--ink);text-decoration:none;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:.3rem;transition:background .15s,color .15s;
}
.nav-btn:hover,.nav-link:hover{background:var(--plum-soft);color:var(--plum)}
.nav-btn[aria-expanded="true"]{background:var(--plum);color:#fff}
.nav-link[aria-current="page"]{color:var(--green-ink)}
.chev{width:.5rem;height:.5rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(225deg) translateY(-1px)}
.bar-cta{
  font-family:var(--display);font-size:.94rem;font-weight:700;
  background:var(--green);color:#052B18;text-decoration:none;
  padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap;flex:none;margin-left:.6rem;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,background .15s;
}
.bar-cta:hover{background:var(--green-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cta-short{display:none}
.burger{display:none}

/* ------------------------------------------------------------------ mega --*/
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--lift);
  border-bottom:1px solid var(--edge);box-shadow:var(--shadow-lg);display:none;
}
.mega[data-open="true"]{display:block}
.mega-in{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:3rem;padding:2.25rem 0 2.5rem}
.mega-lead{background:linear-gradient(160deg,var(--plum) 0%,var(--plum-deep) 100%);color:#fff;border-radius:var(--r-lg);padding:1.6rem 1.7rem}
.mega-lead h3{font-size:1.3rem;margin-bottom:.55rem;color:#fff}
.mega-lead p{font-size:.94rem;color:#CFC2D5}
.mega-lead a{
  display:inline-block;margin-top:1.1rem;font-family:var(--display);
  font-size:.9rem;font-weight:700;color:#052B18;background:var(--green);
  text-decoration:none;padding:.5rem .95rem;border-radius:999px;
}
.mega-lead a:hover{background:#fff}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.5rem 2rem}
.mega-group h4{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-ink);margin-bottom:.75rem;
}
.mega-group ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega-group a{
  font-family:var(--display);font-size:.93rem;font-weight:400;text-decoration:none;
  color:var(--ink);line-height:1.3;display:block;padding:.4rem .55rem;
  border-radius:var(--r-sm);transition:background .15s,color .15s;
}
.mega-group a:hover{background:var(--plum-soft);color:var(--plum)}
.mega-group .soon{color:var(--slate);font-family:var(--body);font-size:.85rem;font-style:italic;padding:.4rem .55rem;display:block}

/* ------------------------------------------------------------------ hero --*/
.hero{
  padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,5vw,4.5rem);
  background:
    radial-gradient(60rem 32rem at 88% -10%,var(--green-soft) 0%,transparent 60%),
    radial-gradient(50rem 30rem at 8% 0%,var(--plum-soft) 0%,transparent 62%);
}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-ink);background:var(--green-soft);border:1px solid #BFE9D2;
  padding:.38rem .8rem;border-radius:999px;margin-bottom:1.2rem;
}
.hero h1{max-width:15ch}
.hero-sub{margin-top:1.25rem;max-width:46ch;color:var(--slate);font-size:1.14rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.btn-primary,.btn-quiet{
  font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;
  padding:.8rem 1.5rem;border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s;
  /* both variants carry a border so they sit on the same baseline and match
     in height — without it the bordered one stood 3px taller */
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.3;border:1.5px solid transparent;
}
.hero-actions{align-items:stretch}
.btn-primary{background:var(--green);color:#052B18;border:1.5px solid var(--green);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-quiet{background:var(--lift);border-color:var(--edge);color:var(--plum)}
.btn-quiet:hover{border-color:var(--plum);background:var(--plum-soft)}
.hero-tools{margin-top:1.6rem;font-size:.96rem;color:var(--slate);max-width:44ch}
.hero-tools strong{font-family:var(--display);font-weight:700;color:var(--plum)}
.hero-art{align-self:center}

/* page hero */
.phero{
  padding:clamp(2.25rem,4vw,3.5rem) 0 clamp(1.5rem,2.5vw,2.25rem);
  background:linear-gradient(180deg,var(--plum-tint) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--edge-soft);
}
.phero .crumb{font-family:var(--display);font-size:.88rem;color:var(--slate);margin-bottom:.9rem}
.phero .crumb a{text-decoration:none;color:var(--green-ink)}
.phero .crumb a:hover{text-decoration:underline}
.phero h1{max-width:24ch}
.phero .lede{margin-top:1.1rem;max-width:54ch;font-size:1.14rem;color:var(--slate)}
.phero .stamp{margin-top:1.1rem;font-size:.92rem;color:var(--slate);font-style:italic}

/* -------------------------------------------------------------- the week --*/
.week{background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-xl);padding:1.6rem 1.7rem;box-shadow:var(--shadow-md)}
.week-hd{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:.1rem}
.week-note{font-size:.88rem;color:var(--slate);margin-bottom:1rem}
.week ol{list-style:none;margin:0;padding:0}
.week li{border-top:1px solid var(--edge-soft);padding:.72rem 0}
.week li:first-of-type{border-top:0;padding-top:0}
.week .task{display:block;font-size:.99rem;line-height:1.4}
.week .who{display:block;margin-top:.25rem;font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink)}

/* ------------------------------------------------------------------ band --*/
.band{background:linear-gradient(155deg,var(--plum) 0%,var(--plum-deep) 100%);color:#EFE9F1;padding:var(--pad) 0}
.band h2{max-width:24ch;color:#fff}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
.band p{color:#CBBFD1;max-width:46ch;margin-top:1rem}
.band-pair{display:grid;gap:1rem}
.band-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.25rem 1.4rem}
.band-item h3{color:#fff;margin-bottom:.4rem}
.band-item h3 span{color:var(--green)}
.band-item p{margin-top:0;font-size:.96rem}
.band-line{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--plum-mid);font-size:.94rem;color:#B4A5BA;max-width:52ch}
.band a{color:var(--green)}

/* -------------------------------------------------------------- sections --*/
.sect{padding:var(--pad) 0}
.sect-lift{background:var(--lift);border-block:1px solid var(--edge)}
.sect-hd{max-width:var(--measure);margin-bottom:2.25rem}
.sect-hd p{margin-top:.85rem;color:var(--slate)}

/* rows become cards */
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));gap:1rem}
.row{
  display:grid;gap:.3rem;background:var(--lift);border:1px solid var(--edge);
  border-radius:var(--r-lg);padding:1.3rem 1.4rem;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#D6C8DC}
.row-fam{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.row-name{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--plum)}
.row-name b{display:block;font-weight:400;font-family:var(--body);font-size:.95rem;color:var(--slate);margin-top:.35rem;line-height:1.5;letter-spacing:0}
.row-hook{font-size:.9rem;color:var(--green-ink);font-family:var(--display);font-weight:500;margin-top:.5rem}
.rows-foot{margin-top:1.5rem;font-size:.97rem;color:var(--slate)}
.rows-foot a{color:var(--plum);font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:s}
.step{counter-increment:s;background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.6rem;position:relative}
.step-n{
  font-family:var(--display);font-weight:800;font-size:.95rem;color:#052B18;
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;background:var(--green);margin-bottom:.9rem;
}
.step-n::before{content:counter(s)}
.step h3{margin-bottom:.5rem;color:var(--plum)}
.step p{color:var(--slate);font-size:.99rem}

/* ----------------------------------------------------------------- prose --*/
.prose{max-width:var(--measure)}
.prose h2{margin-top:2.75rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9rem;font-size:1.2rem}
.prose p{margin-top:1rem}
.prose ul,.prose ol{margin:1.1rem 0 0;padding-left:1.35rem;display:grid;gap:.5rem}
.prose a{color:var(--plum);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px;text-decoration-thickness:2px}
.prose a:hover{color:var(--green-ink)}
.prose strong{font-weight:600;color:var(--plum)}
.wide{max-width:66rem}

.note{border-left:4px solid var(--green);background:var(--green-soft);border-radius:0 var(--r-md) var(--r-md) 0;padding:1.15rem 1.35rem;margin-top:1.75rem}
.note h4{font-size:1.02rem;margin-bottom:.4rem;color:var(--green-ink)}
.note p{margin-top:.45rem;font-size:.99rem}
.note p:first-of-type{margin-top:0}

.kv{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.5rem;font-size:.99rem;background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-md);overflow:hidden}
.kv th,.kv td{text-align:left;vertical-align:top;padding:.8rem .95rem;border-bottom:1px solid var(--edge-soft)}
.kv thead th{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--plum);border-bottom:0}
.kv tr:last-child td,.kv tr:last-child th{border-bottom:0}
.kv tbody tr:hover td,.kv tbody tr:hover th{background:var(--plum-tint)}
.kv .t-claude{color:var(--plum);font-family:var(--display);font-size:.84rem;font-weight:700;white-space:nowrap}
.kv .t-chatgpt{color:var(--green-ink);font-family:var(--display);font-size:.84rem;font-weight:700;white-space:nowrap}
.kv .t-neither{color:#9A3B27;font-family:var(--display);font-size:.84rem;font-weight:700;white-space:nowrap}
.table-wrap{overflow-x:auto}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;margin-top:1.75rem}
.card-x{background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-lg);padding:1.35rem 1.4rem;border-top:4px solid var(--green)}
.card-x h3{margin-bottom:.45rem;color:var(--plum)}
.card-x p{color:var(--slate);font-size:.99rem}

.qa{margin-top:1.75rem;display:grid;gap:.75rem}
.qa-item{background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-md);padding:1.15rem 1.3rem}
.qa-item h3{margin-bottom:.4rem;color:var(--plum);font-size:1.08rem}
.qa-item p{color:var(--slate);font-size:.99rem}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem;list-style:none;padding:0}
.chips li{font-family:var(--display);font-size:.82rem;font-weight:500;background:var(--plum-soft);color:var(--plum);border-radius:999px;padding:.32rem .8rem}

/* ------------------------------------------------------------------- cta --*/
.cta{background:linear-gradient(135deg,var(--green) 0%,#00A857 100%);color:#052B18;padding:clamp(3rem,5vw,4.5rem) 0}
.cta-in{max-width:58ch}
.cta h2{color:#052B18;max-width:22ch}
.cta p{margin-top:1rem;color:#0C3A21;font-size:1.08rem}
.cta .btn-primary{background:var(--plum);color:#fff;margin-top:1.75rem}
.cta .btn-primary:hover{background:var(--plum-deep)}

/* ---------------------------------------------------------------- footer --*/
.foot{background:var(--plum-deep);color:#BFB1C5;padding:clamp(3rem,5vw,4rem) 0 2.25rem;font-size:.94rem}
.foot-top{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2.75rem;margin-bottom:2.5rem}
.foot-top .wordmark{color:#fff}
.foot-top img{height:2.75rem}
.foot-top .wm b{font-size:1.45rem}
.foot-top .wm i{font-size:.78rem;color:var(--green)}
.foot-top p{margin-top:.9rem;max-width:30ch;color:#A294A8;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:2rem}
.foot h4{font-family:var(--display);font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:.75rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot a{text-decoration:none;color:#BFB1C5}
.foot a:hover{color:#fff}
.foot-base{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--plum-mid);display:flex;flex-wrap:wrap;gap:.85rem 1.5rem;justify-content:space-between;font-size:.9rem;color:#A99BAE}
.foot-base a{color:#BFB1C5;text-decoration:underline}
.foot-base a:hover{color:#fff}

/* ------------------------------------------------------------ responsive --*/
@media (max-width:64rem){
  .hero-in,.band-grid,.foot-top{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:64rem){
  .nav{display:none}
  .cta-long{display:none}
  .cta-short{display:inline}
  .bar-in{gap:.75rem}
  .burger{
    display:inline-flex;align-items:center;margin-left:auto;
    font-family:var(--display);font-weight:700;font-size:.92rem;
    background:var(--lift);border:1.5px solid var(--edge);color:var(--plum);
    padding:.55rem .9rem;border-radius:999px;cursor:pointer;
  }
  .bar-cta{margin-left:0;padding:.55rem 1rem}
  .bar[data-mobile="true"] .nav{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--lift);border-bottom:1px solid var(--edge);box-shadow:var(--shadow-lg);
    padding:.75rem var(--gutter) 1.75rem;max-height:calc(100dvh - var(--bar-h));
    overflow-y:auto;margin-left:0;
  }
  .nav-btn,.nav-link{width:100%;justify-content:space-between;padding:.85rem .4rem;border-bottom:1px solid var(--edge-soft);border-radius:0;font-size:1.02rem}
  .mega{position:static;box-shadow:none;border-bottom:0;background:transparent}
  .mega-in{padding:1rem 0 1.25rem}
  .mega-lead{display:none}
  .mega-cols{grid-template-columns:1fr;gap:1.25rem}
}
@media (max-width:26rem){
  /* scoped to the bar: the footer lockup has room and keeps its size */
  .bar .wordmark img{height:1.9rem}
  .bar .wm b{font-size:1.05rem}
  .bar .wm i{font-size:.75rem;letter-spacing:.16em}
}
@media print{
  .bar,.foot,.cta,.skip{display:none}
  body{background:#fff}
  [data-fade]{opacity:1;transform:none}
}

/* ------------------------------------------------------------------- rail --
   The right-hand column on prose pages. Long articles used to run as a narrow
   column against an empty half-page; this fills it with the next step and
   keeps that step in view while the reader is still reading. */
.sect .shell:has(.rail){
  display:grid;grid-template-columns:minmax(0,1fr) 19.5rem;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.rail{position:sticky;top:calc(var(--bar-h) + 1.25rem);display:grid;gap:1rem}
.rail-card{
  background:linear-gradient(160deg,var(--plum) 0%,var(--plum-deep) 100%);
  color:#EFE9F1;border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-md);
}
.rail-eyebrow{
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);margin-bottom:.55rem;
}
.rail-card h3{color:#fff;font-size:1.18rem;margin-bottom:.6rem}
.rail-card p{font-size:.95rem;color:#CBBFD1;line-height:1.6}
.rail-card .btn-primary{margin-top:1.1rem;width:100%;font-size:.97rem}
.rail-fine{margin-top:.85rem;font-size:.9rem!important;color:#A294A8!important}
.rail-alt{
  background:var(--lift);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:1.2rem 1.3rem;
}
.rail-alt h4{color:var(--plum);margin-bottom:.4rem;font-size:1rem}
.rail-alt p{font-size:.93rem;color:var(--slate);line-height:1.55}
.rail-alt a{
  display:inline-block;margin-top:.75rem;font-family:var(--display);
  font-weight:700;font-size:.94rem;color:var(--green-ink);text-decoration:none;
}
.rail-alt a:hover{text-decoration:underline}

/* Pages without a rail centre their column instead of hugging the left edge. */
.sect .shell:not(:has(.rail)) > .prose{margin-inline:auto}
.phero .shell{max-width:64rem}

@media (max-width:64rem){
  .sect .shell:has(.rail){grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:1fr 1fr;display:grid}
}
@media (max-width:44rem){
  .rail{grid-template-columns:1fr}
}

/* ================= additions: artwork, figures, form, blog ================= */

/* ---------- artwork ---------- */
.art{display:block;width:100%;height:auto}
.art-spine{max-width:41rem;margin:2.25rem 0}
.art-boundary{max-width:34rem;margin:1.75rem 0}
.art-tools{max-width:35rem;margin:1.75rem 0}
.art-stack{max-width:27rem;margin:0}
.hero-art{align-self:center}
.imark{width:2.6rem;height:2.6rem;color:var(--plum);flex:none}

/* ---------- figures ---------- */
.fig{margin:2.5rem 0;padding:0}
.fig figcaption{
  margin-top:.85rem;font-size:.9rem;color:var(--slate);font-style:italic;max-width:60ch;
}
.prose .fig{margin-left:0;margin-right:0}

/* session clock */
.clk{border:1px solid var(--edge);background:var(--lift);border-radius:4px;padding:1.6rem 1.7rem 1.8rem}
.clk h3{font-size:1.2rem;margin-bottom:1.1rem}
.clk-list{list-style:none;margin:0;padding:0;counter-reset:clk}
.clk-list li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:1.25rem;
  padding:.85rem 0;border-top:1px solid var(--edge);
}
.clk-list li:first-child{border-top:0;padding-top:0}
.clk-t{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--green-ink);padding-top:.15rem}
.clk-b strong{font-family:var(--display);font-weight:600;font-size:1.02rem;display:block}
.clk-b span{display:block;margin-top:.25rem;font-size:.98rem;color:var(--slate)}

/* split: goes in / never goes in */
.spl{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--edge);border-radius:4px;overflow:hidden;background:var(--lift)}
.spl-col{padding:1.5rem 1.6rem}
.spl-col[data-tone="stop"]{border-left:3px solid var(--green);background:var(--plum-soft)}
.spl-col h4{font-size:1.05rem;margin-bottom:.9rem}
.spl-col ul{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
.spl-col li{font-size:1rem}

/* engagement arc */
.arc{list-style:none;counter-reset:arc;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.arc li{counter-increment:arc;border-top:2px solid var(--plum);padding-top:.9rem;position:relative}
.arc li::before{
  content:counter(arc);font-family:var(--display);font-weight:800;font-size:.8rem;
  color:var(--green-ink);display:block;margin-bottom:.35rem;
}
.arc strong{font-family:var(--display);font-weight:600;font-size:1.05rem;display:block;margin-bottom:.3rem}
.arc span{font-size:.98rem;color:var(--slate)}

/* before / after table */
.ba{width:100%;border-collapse:collapse;font-size:1rem}
.ba th,.ba td{text-align:left;vertical-align:top;padding:.85rem 1rem;border-bottom:1px solid var(--edge)}
.ba thead th{font-family:var(--display);font-size:.9rem;font-weight:600;background:var(--plum-soft);color:var(--plum)}
.ba tbody th{font-family:var(--display);font-weight:600;width:26%}
.ba td:last-child{border-left:2px solid var(--green)}

/* checklist */
.chk{border-left:3px solid var(--green);background:var(--lift);padding:1.4rem 1.6rem;border-radius:0 4px 4px 0}
.chk h3{font-size:1.15rem;margin-bottom:.85rem}
.chk ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.chk li{padding-left:1.7rem;position:relative;font-size:1rem}
.chk li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;
  border:1.5px solid var(--green-ink);border-radius:2px;
}

/* ---------- inline enquiry prompt ---------- */
.ask{
  margin:2.5rem 0;padding:1.5rem 1.7rem;background:var(--plum);color:#fff;border-radius:4px;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.75rem;justify-content:space-between;
}
.ask p{max-width:46ch;font-size:1.02rem}
.ask>a{
  font-family:var(--display);font-weight:600;font-size:.98rem;background:var(--green);
  color:#10021A;text-decoration:none;padding:.75rem 1.3rem;border-radius:3px;white-space:nowrap;
}
.ask>a:hover{background:var(--green-deep)}
.ask p a{
  color:var(--green);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
}
.ask p a:hover{color:#fff}

/* ---------- enquiry form ---------- */
.form-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.eform{display:grid;gap:1.35rem;max-width:38rem}
.eform .fld{display:grid;gap:.4rem}
.eform .fld-2{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.eform label{font-family:var(--display);font-size:.95rem;font-weight:600}
.eform .hint{font-size:.88rem;color:var(--slate);font-family:var(--body)}
.eform input,.eform select,.eform textarea{
  font-family:var(--body);font-size:1.02rem;color:var(--ink);background:var(--lift);
  border:1px solid var(--edge);border-radius:3px;padding:.7rem .85rem;width:100%;
}
.eform textarea{min-height:9.5rem;resize:vertical;line-height:1.55}
.eform input:focus,.eform select:focus,.eform textarea:focus{border-color:var(--plum);outline:2px solid var(--green);outline-offset:1px}
.eform .req{color:var(--green-ink);font-family:var(--body)}
.eform button{
  font-family:var(--display);font-weight:600;font-size:1.02rem;background:var(--plum);
  color:#fff;border:0;border-radius:3px;padding:.9rem 1.7rem;cursor:pointer;justify-self:start;
}
.eform button:hover{background:var(--plum-deep)}
.eform .pot{position:absolute;left:-9999px}
.eform .legal{font-size:.92rem;color:var(--slate)}
.eform .plan-note{
  border-left:3px solid var(--green);background:var(--plum-soft);padding:.9rem 1.1rem;
  font-size:.95rem;display:none;
}
.eform .plan-note[data-has="true"]{display:block}
.form-side{border:1px solid var(--edge);background:var(--lift);border-radius:4px;padding:1.6rem 1.7rem;font-size:1rem}
.form-side h3{font-size:1.1rem;margin-bottom:.8rem}
.form-side ul{margin:0 0 1.4rem;padding-left:1.15rem;display:grid;gap:.5rem}
.form-side p{color:var(--slate)}
.form-side .direct{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--edge)}

/* ---------- blog ---------- */
.plist{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));margin-top:2.5rem}
.pcard{
  display:flex;flex-direction:column;background:var(--lift);border:1px solid var(--edge);
  border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;
}
.pcard:hover{border-color:var(--plum)}
.pcard .cover{display:block;width:100%;height:auto;border-bottom:1px solid var(--edge)}
.pcard-b{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.pcard-cat{font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--green-ink)}
.pcard h3{font-size:1.16rem;line-height:1.25}
.pcard p{font-size:.98rem;color:var(--slate)}
.pcard-m{margin-top:auto;font-size:.9rem;color:var(--slate);font-style:italic}
.post-meta{margin-top:1.4rem;font-size:.92rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.post-meta a{color:var(--green-ink)}
.post-body{margin-top:2.5rem}
.post-body h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:2.6rem 0 1rem}
.post-body h3{font-size:1.22rem;margin:2rem 0 .7rem}
.post-body p{margin:1.1rem 0;max-width:var(--measure)}
.post-body ul,.post-body ol{margin:1.1rem 0;padding-left:1.3rem;max-width:var(--measure);display:grid;gap:.55rem}
.post-body blockquote{
  margin:1.9rem 0;padding:.3rem 0 .3rem 1.4rem;border-left:3px solid var(--green);
  font-style:italic;color:var(--plum);max-width:58ch;
}
.post-body a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.cats{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;list-style:none;padding:0}
.cats a{
  font-family:var(--display);font-size:.9rem;text-decoration:none;color:var(--plum);
  border:1px solid var(--edge);border-radius:999px;padding:.4rem .95rem;background:var(--lift);
}
.cats a:hover,.cats a[aria-current="page"]{border-color:var(--plum);background:var(--plum-soft)}
.rel{margin-top:3.5rem;border-top:1px solid var(--edge);padding-top:2rem}
.rel h2{font-size:1.35rem}

/* ---------- thank you ---------- */
.ty{max-width:44rem}
.ty .arc{margin-top:2.2rem}

@media (max-width:860px){
  .form-wrap{grid-template-columns:1fr}
  .spl{grid-template-columns:1fr}
  .spl-col[data-tone="stop"]{border-left:0;border-top:3px solid var(--green)}
  .eform .fld-2{grid-template-columns:1fr}
  .clk-list li{grid-template-columns:1fr;gap:.25rem}
  .ba tbody th{width:auto}
  .ask{flex-direction:column;align-items:flex-start}
}
@media print{
  .ask,.eform button{display:none}
}

/* ------------------------------------------------------------------ media --
   One image per page, one slot, directly under the hero. No border, no radius,
   no shadow, no caption box — the image sits on the paper and the caption is
   the same italic aside used for every other figure on the site.

   A photograph goes full bleed because it is the only element on the site that
   is allowed to touch the viewport edge, and that is what makes it read as
   deliberate rather than dropped in. A screenshot stays in the text column,
   because it is being read, not looked at. */
.media{margin:0 0 var(--s8)}
.ph{margin:0;padding:0}
.ph img{display:block;width:100%;height:auto;object-fit:cover;background:var(--edge)}
.ph figcaption{
  width:100%;max-width:76rem;margin:var(--s3) auto 0;padding-inline:var(--gutter);
  color:var(--slate);font-style:italic;
}
.ph figcaption span{display:block;max-width:58ch}

/* wide, full bleed */
.media[data-ratio="wide"] .ph img{aspect-ratio:16/9}

/* portrait, held to a column and left-aligned with everything else */
.media[data-ratio="portrait"]{max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.media[data-ratio="portrait"] .ph img{aspect-ratio:4/5;max-width:26rem}
.media[data-ratio="portrait"] .ph figcaption{max-width:none;margin-inline:0;padding-inline:0}

/* screenshots read as evidence: in the column, never bled */
.media[data-kind="screen"]{max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.media[data-kind="screen"] .ph img{aspect-ratio:auto;max-width:62rem}
.media[data-kind="screen"] .ph figcaption{max-width:none;margin-inline:0;padding-inline:0}

@media (max-width:64rem){
  .media{margin-bottom:var(--s7)}
  .media[data-ratio="wide"] .ph img{aspect-ratio:4/3}
}
@media print{ .media{display:none} }


/* ------------------------------------------------------- prompt specimens --
   A prompt is text, so it is set as text. The label is the same italic aside
   used for every caption on the site and the indent is the same one used by
   .note and .chk, so this introduces no new visual language. */
.pr{display:grid;gap:var(--s6)}
.pr-item{padding-left:var(--s4)}
.pr-lab{font-style:italic;color:var(--slate);margin-bottom:var(--s2)}
.pr-txt{max-width:58ch;white-space:pre-line}
.pr-out{margin-top:var(--s3);color:var(--slate);max-width:58ch}
.wh-h{margin-bottom:var(--s4)}
.fig-where .spl{gap:var(--s6)}


/* =========================================================== tool primitives ==
   Shared by the assessment and the prompt builder, defined once here rather
   than twice in two tool stylesheets, so the two tools cannot drift apart.
   Options are underlined lines of type; fields are underlined, never boxed.
   ========================================================================== */
fieldset.bd-step,.card fieldset{border:0;margin:0;padding:0;min-width:0}
.card legend{
  display:block;padding:0;font-size:var(--t3);font-weight:600;line-height:1.1;
  letter-spacing:-.03em;text-indent:-.03em;max-width:22ch;margin-bottom:var(--s3);
}
.card h2{margin-bottom:var(--s3);max-width:22ch}
.q-help{color:var(--slate);max-width:52ch;margin-bottom:var(--s5)}
.hint{color:var(--slate)}

.opts{display:grid;gap:0;margin-bottom:var(--s5)}
.opt{
  display:block;cursor:pointer;padding:var(--s3) 0;
  border-bottom:1px solid var(--edge);line-height:1.5;
}
.opt:first-child{border-top:1px solid var(--edge)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;max-width:54ch}
.opt small{display:block;color:var(--slate);margin-top:var(--s1)}
.opt:hover{color:var(--plum)}
.opt:hover span{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--edge)}
.opt:has(input:checked) span{
  font-weight:600;text-decoration:underline;text-underline-offset:.25em;
  text-decoration-color:var(--green);text-decoration-thickness:2px;
}
.opt:has(input:focus-visible){outline:2px solid var(--green);outline-offset:4px}

.fields{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.field{display:grid;gap:var(--s1)}
.field label{font-weight:600}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:var(--t1);color:var(--plum);background:transparent;
  border:0;border-bottom:1px solid var(--edge);border-radius:0;padding:var(--s1) 0;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--green);border-bottom-width:2px;padding-bottom:calc(var(--s1) - 1px);
}
.err{color:var(--plum);font-style:italic}

.actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:baseline;margin-top:var(--s5)}
.actions .btn-primary,.actions .btn-quiet{
  font-family:inherit;font-size:var(--t1);font-weight:600;color:var(--plum);
  background:none;border:0;padding-block:.6rem;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:1px;text-underline-offset:.35em;
}
.actions .btn-quiet{font-weight:400;color:var(--slate);text-decoration-color:var(--edge)}
.actions .btn-primary:hover,.actions .btn-quiet:hover{text-decoration-thickness:2px}

@media (max-width:64rem){
  .opts{gap:0}
}


/* 2026-09-30 mobile fixes: grid children may shrink so wide tables scroll inside their wrapper; larger tap targets for breadcrumb/footer links on phones; minimum 14px small text */
.prose{min-width:0}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:44rem){.crumb a{display:inline-block;padding:.55rem 0}.foot a{display:inline-block;padding-top:.45rem;padding-bottom:.45rem}.chips li{font-size:.875rem}.talk-note{font-size:.9375rem}}