/*
Theme Name: ZOME
Theme URI: https://zome.au/
Author: ZOME
Description: Five areas of practice on a shared topographic field. Bodywork, support work, art, tools and thinking.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zome
*/

:root{
  --ink:#0E1417;
  --ink-soft:#2A343A;
  --ground:#EDE6D6;
  --ground-deep:#E4DAC4;
  --blush:#FFC1C1;
  --citron:#FAFDC6;
  --aqua:#C3FFFA;
  --lilac:#E5CDFF;
  --orchid:#FFCAFD;
  --terracotta:#D98A5F;
  --gold:#E8C77E;
  --r:18px;
  --measure:64ch;
  --geo:"Century Gothic","Jost","Questrial",Futura,"Trebuchet MS",sans-serif;
  /* --contours is injected by functions.php */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Karla",system-ui,sans-serif;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);line-height:1.65;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10000;background:var(--ink);color:var(--ground);padding:.6rem 1rem;border-radius:8px}

body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.wrap{width:min(100% - 2rem, 70rem);margin-inline:auto}

/* ===== HERO ===================================================== */
.hero{
  position:relative;background:var(--ink);color:var(--ground);
  overflow:hidden;isolation:isolate;min-height:min(82vh,46rem);
  display:grid;place-items:center;padding:clamp(4rem,12vh,7rem) 0;
}
.hero-image{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:58% 42%;opacity:.85;
  filter:saturate(1.3) contrast(1.06);
}
.diffusion{
  position:absolute;inset:-25%;z-index:-1;filter:blur(90px);opacity:.5;
  mix-blend-mode:screen;animation:spectrum 90s linear infinite;pointer-events:none;
}
.diffusion span{
  position:absolute;width:52%;aspect-ratio:1;border-radius:50%;
  mix-blend-mode:screen;animation:drift 54s ease-in-out infinite alternate;
}
.diffusion span:nth-child(1){background:var(--blush);top:0%;left:2%;animation-delay:-2s}
.diffusion span:nth-child(2){background:var(--aqua);top:26%;left:54%;animation-delay:-16s}
.diffusion span:nth-child(3){background:var(--lilac);top:52%;left:8%;animation-delay:-30s}
.diffusion span:nth-child(4){background:var(--citron);top:4%;left:62%;animation-delay:-42s}
.diffusion span:nth-child(5){background:var(--terracotta);top:60%;left:56%;animation-delay:-9s}
.diffusion span:nth-child(6){background:var(--orchid);top:34%;left:28%;animation-delay:-24s}
.diffusion span:nth-child(7){background:var(--gold);top:70%;left:32%;animation-delay:-37s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12%,-9%,0) scale(1.34)}}
@keyframes spectrum{0%{filter:blur(90px) hue-rotate(0deg)}100%{filter:blur(90px) hue-rotate(360deg)}}

.hero::before{
  content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 46%, rgba(237,230,214,.07) 0 1px, transparent 1px 26px);
  animation:breathe 24s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(14,20,23,.66) 0%, rgba(14,20,23,.4) 50%, rgba(14,20,23,.86) 100%);
}
.hero-inner{text-align:center;position:relative}
.wordmark{
  position:relative;font-family:var(--geo);font-weight:200;
  font-size:clamp(4rem,17vw,11rem);line-height:.9;
  letter-spacing:.24em;text-indent:.24em;margin:0;text-transform:uppercase;
}
.wordmark::before,.wordmark::after{
  content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
}
.wordmark::before{color:var(--aqua);animation:shiftA 11s ease-in-out infinite alternate}
.wordmark::after{color:var(--orchid);animation:shiftB 13s ease-in-out infinite alternate}
@keyframes shiftA{from{transform:translate3d(-5px,3px,0);opacity:.5}to{transform:translate3d(4px,-4px,0);opacity:.75}}
@keyframes shiftB{from{transform:translate3d(5px,-3px,0);opacity:.45}to{transform:translate3d(-4px,4px,0);opacity:.7}}
.hero .locale{
  font-family:var(--geo);font-weight:300;
  font-size:clamp(.95rem,.9rem + .35vw,1.2rem);
  letter-spacing:.3em;text-indent:.3em;margin:1.5rem 0 0;
  color:rgba(237,230,214,.9);
}

/* ===== THE FIVE SQUARES + PLATE ================================= */
.squares{padding:clamp(2rem,6vw,4rem) 0 clamp(3rem,8vw,5rem)}
.square-grid{
  --gap:clamp(.6rem,1.6vw,1.1rem);
  --cols:2;
  --rows:3;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gap);
  width:min(100%,52rem);margin-inline:auto;
}
/* Every cell knows its own column and row, so the sheet can be
   re-cut at any breakpoint without touching the markup order. */
.square-grid > *{grid-column:var(--col);grid-row:var(--row)}

/* phone: five squares and one plate, 2 x 3 */
.sq--somatics{--col:1;--row:1}
.sq--social  {--col:2;--row:1}
.sq--art     {--col:1;--row:2}
.sq--nomad   {--col:2;--row:2}
.sq--ethical {--col:1;--row:3}
.sq--map     {--col:2;--row:3}
.sq--terrain-a{--col:2;--row:3}
.sq--terrain-b{--col:2;--row:3}
.sq--terrain-c{--col:2;--row:3}
.square-grid .sq--terrain{display:none}

/* desktop: the practice squares sit inside surrounding country, 3 x 3 */
@media (min-width:44rem){
  .square-grid{--cols:3;--rows:3;width:min(100%,58rem)}
  .sq--somatics {--col:1;--row:1}
  .sq--social   {--col:2;--row:1}
  .sq--terrain-a{--col:3;--row:1}
  .sq--terrain-b{--col:1;--row:2}
  .sq--art      {--col:2;--row:2}
  .sq--nomad    {--col:3;--row:2}
  .sq--ethical  {--col:1;--row:3}
  .sq--map      {--col:2;--row:3}
  .sq--terrain-c{--col:3;--row:3}
  .square-grid .sq--terrain{display:flex}
}
.sq{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(.9rem,3vw,1.8rem);text-decoration:none;
  background:var(--ink);isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.sq img{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(.62);
  transition:filter .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.sq::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(to top, rgba(10,14,16,.9) 0%, rgba(10,14,16,.55) 42%, rgba(10,14,16,.3) 100%);
}

/* One Mt Barney field across the whole 2-column, 3-row grid.
   Keyword mask positions land exactly on each cell's origin. */
.sq::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--tint);opacity:.42;
  -webkit-mask-image:var(--contours);mask-image:var(--contours);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--sheet-w) var(--sheet-h);
  mask-size:var(--sheet-w) var(--sheet-h);
  -webkit-mask-position:var(--sheet-x) var(--sheet-y);
  mask-position:var(--sheet-x) var(--sheet-y);
  transition:transform 1.1s cubic-bezier(.16,.8,.28,1), opacity .6s ease;
  transform-origin:center;will-change:transform;
}
/* The sheet spans the whole grid; each cell shows its own window onto it.
   Percentage mask-position resolves to exactly (col-1)/(cols-1) of the
   overflow, which is the cell's true origin. */
.sq,.sq--plate{
  --sheet-w:calc(var(--cols) * 100% + var(--gap) * (var(--cols) - 1));
  --sheet-h:calc(var(--rows) * 100% + var(--gap) * (var(--rows) - 1));
  --sheet-x:calc((var(--col) - 1) / (var(--cols) - 1) * 100%);
  --sheet-y:calc((var(--row) - 1) / (var(--rows) - 1) * 100%);
}

/* the recorded route, one continuous line across all six cells */
.route{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--route);
  background-repeat:no-repeat;
  background-size:var(--sheet-w) var(--sheet-h);
  background-position:var(--sheet-x) var(--sheet-y);
  opacity:.85;
  transition:transform 1.1s cubic-bezier(.16,.8,.28,1), opacity .6s ease;
  transform-origin:center;
}
.sq:hover .route,.sq:focus-visible .route{transform:scale(1.34,1.14);opacity:1}
.sq--plate .route{opacity:1}

.sq--blush {--tint:var(--blush)}
.sq--aqua  {--tint:var(--aqua)}
.sq--citron{--tint:var(--citron)}
.sq--lilac {--tint:var(--lilac)}
.sq--orchid{--tint:var(--orchid)}

/* the sixth cell: no photograph, the map alone on the sand ground */
.sq--plate{
  background:var(--ground-deep);border:1px solid rgba(14,20,23,.16);
  --tint:var(--ink);
}
.sq--plate::after{display:none}
.sq--plate::before{opacity:.30}
.sq--terrain{background:var(--ground-deep);border-color:rgba(14,20,23,.10)}
.sq--terrain::before{opacity:.22}
.sq--terrain .route{opacity:.55}
.plate-note{
  font-family:var(--geo);font-weight:300;font-size:.72rem;
  letter-spacing:.14em;text-transform:lowercase;color:rgba(14,20,23,.5);
}

.sq .glyph{
  position:absolute;top:clamp(.4rem,2vw,1.1rem);right:clamp(.7rem,2.4vw,1.6rem);
  font-family:var(--geo);font-weight:300;
  font-size:clamp(2.4rem,9vw,5rem);line-height:1;
  color:var(--tint);opacity:.35;pointer-events:none;transition:opacity .4s ease;
}
.sq h2{
  font-family:var(--geo);font-weight:500;text-transform:lowercase;
  font-size:clamp(1.15rem,.85rem + 2vw,2rem);line-height:1.05;
  letter-spacing:.01em;margin:0 0 .3rem;color:var(--tint);
}
.sq .frame{
  font-family:var(--geo);font-weight:300;
  font-size:clamp(.75rem,.68rem + .5vw,.95rem);
  letter-spacing:.06em;margin:0 0 auto;color:var(--tint);opacity:.78;
}
.sq .what{
  margin:0;font-family:var(--geo);font-weight:300;
  font-size:clamp(.8rem,.72rem + .45vw,.98rem);line-height:1.4;
  max-width:30ch;color:var(--tint);opacity:.9;
}
.sq:hover,.sq:focus-visible{transform:translateY(-5px)}
.sq:hover img,.sq:focus-visible img{
  filter:grayscale(0) contrast(1.06) brightness(.72) saturate(1.25);transform:scale(1.045);
}
.sq:hover::before,.sq:focus-visible::before{transform:scale(1.34,1.14);opacity:.62}
.sq:hover .glyph,.sq:focus-visible .glyph{opacity:.6}
@media (max-width:26rem){.sq .what{display:none}}

/* touch devices get a very slow drift instead of the hover stretch */
@media (hover:none){
  .sq::before,.sq .route{animation:tide 34s ease-in-out infinite alternate}
  @keyframes tide{
    from{transform:scale(1,1)}
    to{transform:scale(1.14,1.05)}
  }
}

/* ===== PAGE HEADS (category, post, page) ======================== */
.page-head{
  position:relative;background:var(--ink);color:var(--ground);
  overflow:hidden;isolation:isolate;
  padding:clamp(4rem,14vh,8rem) 0 clamp(2.5rem,7vh,4rem);
}
.page-head-image{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.5);
}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,14,16,.92) 0%, rgba(10,14,16,.6) 60%, rgba(10,14,16,.45) 100%);
}
.page-head .wrap{position:relative}
.page-head h1{
  font-family:var(--geo);font-weight:400;text-transform:lowercase;
  font-size:clamp(2rem,1.4rem + 3vw,4rem);line-height:1.02;
  margin:0 0 .5rem;color:var(--tint,var(--aqua));
}
.page-head .frame{
  font-family:var(--geo);font-weight:300;letter-spacing:.08em;
  margin:0 0 .5rem;color:var(--tint,var(--aqua));opacity:.8;
}
.page-head .frame a{text-decoration:none;border-bottom:1px solid currentColor}
.page-head time{font-family:var(--geo);font-size:.95rem;color:rgba(237,230,214,.7)}
.page-head-intro{max-width:var(--measure);color:rgba(237,230,214,.88);margin-top:.75rem}
.page-head .glyph{
  position:absolute;right:0;top:-2.5rem;font-family:var(--geo);font-weight:300;
  font-size:clamp(4rem,12vw,9rem);line-height:1;color:var(--tint,var(--aqua));opacity:.2;
}
.page-head--blush {--tint:var(--blush)}
.page-head--aqua  {--tint:var(--aqua)}
.page-head--citron{--tint:var(--citron)}
.page-head--lilac {--tint:var(--lilac)}
.page-head--orchid{--tint:var(--orchid)}

/* ===== PROSE ==================================================== */
.prose{padding:clamp(2.5rem,7vw,4.5rem) 0}
.prose > *{max-width:var(--measure)}
.prose > .alignwide,.prose > .alignfull,.prose > .zome-diffuse,.prose > figure{max-width:none}
.prose h2,.prose h3{
  font-family:var(--geo);font-weight:500;text-transform:lowercase;line-height:1.15;
  margin:2.2em 0 .6em;
}
.prose h2{font-size:clamp(1.4rem,1.15rem + 1.2vw,2rem)}
.prose h3{font-size:clamp(1.15rem,1rem + .7vw,1.4rem)}
.prose p{margin:0 0 1.15em}
.prose a{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--terracotta)}
.prose blockquote{
  margin:2em 0;padding:0 0 0 1.4rem;border-left:3px solid var(--terracotta);
  font-family:var(--geo);font-size:1.15em;font-weight:300;
}
.prose img,.prose figure img{border-radius:var(--r)}
.prose figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:.5rem}
.section-intro{background:var(--ground-deep)}
.section-intro .prose{padding-block:clamp(2.5rem,7vw,4rem)}

/* ===== DIFFUSION GALLERY ======================================== */
.zome-diffuse{
  position:relative;margin:2.5rem 0;border-radius:var(--r);overflow:hidden;background:var(--ink);
}
.zome-diffuse-stage{position:relative;aspect-ratio:4/3}
.zome-diffuse-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 2.4s ease-in-out;
}
.zome-diffuse-frame.is-live{opacity:1}
.zome-diffuse-dots{
  position:absolute;left:0;right:0;bottom:.9rem;
  display:flex;gap:.4rem;justify-content:center;
}
.zome-dot{
  width:6px;height:6px;border-radius:50%;background:rgba(237,230,214,.4);
  transition:background .6s ease,transform .6s ease;
}
.zome-dot.is-live{background:var(--ground);transform:scale(1.5)}
@media (min-width:52rem){.zome-diffuse-stage{aspect-ratio:16/9}}

/* ===== POST LISTS =============================================== */
.posts{padding:clamp(3rem,8vw,5.5rem) 0}
.posts h2{
  font-family:var(--geo);font-weight:300;text-transform:lowercase;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.2rem);margin:0 0 1.75rem;
}
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(14,20,23,.28)}
.post-list li{border-bottom:1px solid rgba(14,20,23,.28)}
.post-list a{display:grid;gap:.15rem .5rem;padding:1.3rem 0;text-decoration:none}
@media (min-width:46rem){
  .post-list a{grid-template-columns:10rem minmax(0,1fr) 9rem;align-items:baseline;gap:2rem}
}
.post-list .in{font-family:var(--geo);font-weight:500;text-transform:lowercase;font-size:.92rem;letter-spacing:.04em}
.post-list .t{
  font-size:1.1rem;line-height:1.35;text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:rgba(14,20,23,.3);
}
.post-list a:hover .t{text-decoration-color:var(--terracotta)}
.post-list time,.post-list .ex{font-size:.9rem;color:var(--ink-soft)}
.empty{color:var(--ink-soft)}
.pager{margin-top:2rem;font-family:var(--geo)}
.pager .page-numbers{padding:.35rem .6rem;text-decoration:none;border-bottom:1px solid transparent}
.pager .page-numbers.current{border-bottom-color:var(--terracotta)}

.post-nav{display:grid;gap:1rem;padding-bottom:clamp(3rem,8vw,5rem)}
@media (min-width:46rem){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{
  display:block;padding:1.2rem;border-radius:var(--r);
  background:var(--ground-deep);text-decoration:none;font-family:var(--geo);
}
.post-nav a span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:lowercase;color:var(--ink-soft);margin-bottom:.25rem}
.post-nav .next{text-align:right}

/* ===== STATEMENT ================================================ */
.statement{
  padding:clamp(3rem,8vw,5.5rem) 0;
  background:
    radial-gradient(80% 120% at 8% 0%, rgba(197,255,250,.5), transparent 60%),
    radial-gradient(70% 110% at 96% 100%, rgba(229,205,255,.5), transparent 62%),
    var(--ground-deep);
}
.statement .wrap{display:grid;gap:clamp(1.25rem,4vw,3.5rem)}
@media (min-width:52rem){.statement .wrap{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}}
.statement h2{
  font-family:var(--geo);font-weight:300;text-transform:lowercase;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.2rem);line-height:1.15;margin:0;
}
.statement p{max-width:var(--measure);margin:0 0 1.1em}
.statement p:last-child{margin-bottom:0}

/* ===== FOOTER =================================================== */
.foot{
  position:relative;background:var(--ink);color:var(--ground);
  padding:clamp(3rem,8vw,5.5rem) 0 2.5rem;overflow:hidden;isolation:isolate;
}
.foot::before{
  content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 30%, rgba(255,193,193,.3), transparent 70%),
    radial-gradient(42% 42% at 78% 74%, rgba(197,255,250,.26), transparent 72%);
  filter:blur(50px);animation:drift 62s ease-in-out infinite alternate;
}
.foot .wrap{display:grid;gap:2.25rem;position:relative}
@media (min-width:46rem){.foot .wrap{grid-template-columns:1fr auto;align-items:end}}
.foot h2{
  font-family:var(--geo);font-weight:300;text-transform:lowercase;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem);line-height:1.15;margin:0 0 .9rem;max-width:22ch;
}
.foot a.mail{
  font-family:var(--geo);font-weight:500;
  font-size:clamp(1.05rem,1rem + .55vw,1.35rem);color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:.25em;
}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font-size:.95rem;font-family:var(--geo);text-transform:lowercase}
.foot nav a{text-decoration:none;border-bottom:1px solid rgba(237,230,214,.35);padding-bottom:2px}
.foot nav a:hover{border-color:var(--gold)}
.colophon{
  margin-top:2.75rem;padding-top:1.15rem;position:relative;
  border-top:1px solid rgba(237,230,214,.2);
  font-size:.85rem;color:rgba(237,230,214,.6);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
}
.stillness{
  font-family:var(--geo);font-size:.85rem;letter-spacing:.06em;
  background:none;border:1px solid rgba(237,230,214,.3);color:inherit;
  padding:.35rem .8rem;border-radius:999px;cursor:pointer;
}
.stillness:hover{border-color:var(--gold);color:var(--gold)}

/* ===== MOTION OFF =============================================== */
.is-still *,
.is-still *::before,
.is-still *::after{animation:none !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}


/* ===============================================================
   ZOME 1.3.0 — dialogue turns, figures, reference lists
   =============================================================== */
:root{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Titles and in-content headings render as typed.
   Site chrome (grid squares, statement band, footer, nav) stays lowercase. */
.page-head h1,
.prose h2,.prose h3,.prose h4,
.posts h2,
.post-list .in{ text-transform:none; }

/* --- dialogue turns ------------------------------------------- */
.prose .turn{
  max-width:36rem;
  margin:2em 0;
  padding:1.2rem 1.35rem;
  border-radius:var(--r);
  position:relative;
}
.prose .turn > *:last-child{ margin-bottom:0; }
.prose .turn-who{
  display:inline-block;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.3em .85em .28em;
  border-radius:999px;
  margin:0 0 .95em;
}
.prose .turn--scrute{
  background:rgba(217,138,95,.09);
  box-shadow:inset 3px 0 0 var(--terracotta);
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.68;
}
.prose .turn--scrute .turn-who{
  background:var(--terracotta);
  color:var(--ground);
}
.prose .turn--scrute p{ margin:0 0 1em; }
.prose .turn--scrute em{ font-style:normal; text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--terracotta); }
.prose .turn--dave{
  background:rgba(14,20,23,.045);
  box-shadow:inset 3px 0 0 var(--gold);
}
.prose .turn--dave .turn-who{
  background:var(--citron);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(14,20,23,.3);
}

/* --- figures --------------------------------------------------- */
.prose figure.zome-fig{ margin:2.6em 0; max-width:var(--measure); }
.prose figure.zome-fig img{ display:block; width:auto; max-width:100%; height:auto; max-height:60vh; border-radius:var(--r); }
.prose figure.zome-fig figcaption,
.prose .fig-pair figcaption{
  font-family:var(--mono);
  font-size:.71rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin-top:.75em;
  max-width:var(--measure);
}
.prose .fig-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:2.6em 0;
  max-width:40rem;
}
.prose .fig-pair figure{ margin:0; }
.prose .fig-pair img{ display:block; width:100%; height:auto; border-radius:var(--r); }
@media (max-width:640px){
  .prose .fig-pair{ grid-template-columns:1fr; }
  .prose .turn{ padding:1rem 1.05rem; }
  .prose .turn--scrute{ font-size:.82rem; }
}

/* --- video ----------------------------------------------------- */
.prose figure.zome-fig video{ display:block; width:auto; max-width:100%; height:auto; max-height:60vh; border-radius:var(--r); background:var(--ink); }

/* --- reference list, APA hanging indent ------------------------ */
.prose .refs{ font-size:.88rem; line-height:1.5; }
.prose .refs p{ padding-left:2.2em; text-indent:-2.2em; margin:0 0 .75em; }


/* ===============================================================
   ZOME 1.4.0 - site bar: home mark + areas disclosure
   =============================================================== */
.site-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; position:relative; z-index:60;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:var(--ground);
  border-bottom:1px solid rgba(14,20,23,.12);
}

/* home mark - static channel offset, no animation */
.site-bar__home{ text-decoration:none; line-height:1; }
.site-bar__home .mark{
  position:relative; display:inline-block;
  font-family:var(--geo); font-weight:200;
  font-size:1.05rem; letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase; color:var(--ink);
}
.site-bar__home .mark::before,
.site-bar__home .mark::after{
  content:attr(data-text); position:absolute; inset:0;
  mix-blend-mode:multiply; pointer-events:none;
}
.site-bar__home .mark::before{ color:var(--aqua); transform:translate(-1.5px,.5px); }
.site-bar__home .mark::after{ color:var(--orchid); transform:translate(1.5px,-.5px); }
.site-bar__home:hover .mark::before{ transform:translate(-3px,1px); }
.site-bar__home:hover .mark::after{ transform:translate(3px,-1px); }

/* glyph row */
.site-bar .g{
  font-family:var(--geo); font-weight:500; line-height:1;
  display:inline-block; min-width:1ch; text-align:center;
}
.g--blush{color:#C98A8A} .g--aqua{color:#4FA6A0}
.g--citron{color:#9A9E36} .g--lilac{color:#8E6FB5}
.g--orchid{color:#B96BB4}

.site-bar__menu{ position:relative; }
.site-bar__menu > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(14,20,23,.18);
  font-size:1rem;
}
.site-bar__menu > summary::-webkit-details-marker{ display:none; }
.site-bar__menu > summary:hover{ background:rgba(14,20,23,.05); }
.site-bar__menu[open] > summary{ background:rgba(14,20,23,.07); }

.site-bar__panel{
  position:absolute; right:0; top:calc(100% + .5rem);
  min-width:15rem; padding:.45rem;
  background:var(--ground); border:1px solid rgba(14,20,23,.16);
  border-radius:var(--r);
  box-shadow:0 12px 28px rgba(14,20,23,.16);
}
.site-bar__area{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.5rem .7rem; border-radius:10px;
  text-decoration:none; color:var(--ink);
  font-family:var(--geo); font-size:.92rem; text-transform:lowercase;
}
.site-bar__area:hover{ background:rgba(14,20,23,.06); }
.site-bar__area.is-current{ background:rgba(14,20,23,.09); font-weight:500; }
.site-bar__area .g{ font-size:1.05rem; }

@media (max-width:520px){
  .site-bar__menu > summary{ gap:.4rem; padding:.4rem .6rem; }
  .site-bar__panel{ min-width:13rem; }
}


/* ---- archive list: thumbnail beside date, title and excerpt.
   Grey at rest, colour on hover, as the home-page squares. ---- */
.post-list a.has-thumb{grid-template-columns:7.5rem minmax(0,1fr);align-items:start;gap:1.6rem}
.post-list .thumb{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#15191c}
.post-list .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.12) brightness(.82);
  transition:filter .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.post-list a.has-thumb:hover .thumb img,.post-list a.has-thumb:focus-visible .thumb img{
  filter:grayscale(0) contrast(1.04) brightness(.95) saturate(1.15);transform:scale(1.04)}
.post-list .body{display:flex;flex-direction:column;gap:.4rem;min-width:0;padding-top:.15rem}
.post-list .body .ex{font-size:.95rem;line-height:1.55;max-width:62ch}
@media(max-width:600px){
  .post-list a.has-thumb{grid-template-columns:4.75rem minmax(0,1fr);gap:1rem}
  .post-list .body .ex{font-size:.9rem}
}