/* ================================================================
   THINGS MADE. Visual system drawn from the paintings:
   petrol teal / vermillion duotone, black as structure,
   the disc as the sun of the whole world, grain everywhere.
   ================================================================ */
:root{
  --black:#0e0d02;
  --black-warm:#121103;
  --teal:#003e4a;
  --teal-deep:#032f44;
  --teal-bright:#2E7D93;
  --red:#d02323;
  --red-deep:#7E1512;
  --paper:#D9D5C9;      /* reading tone on dark */
  --dim:#7E837E;        /* metadata gray-green */
  --rule:rgba(217,213,201,0.12);

  --serif:'Cormorant', Georgia, serif;
  --text:'EB Garamond', Georgia, serif;
  --mono:'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --measure:720px;
  --wide:1160px;
  --pad:clamp(24px, 6vw, 84px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--black);
  color:var(--paper);
  font-family:var(--text);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* Grain over the entire world */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:200;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

::selection{ background:var(--red); color:var(--black); }
a{ color:inherit; }

img{ max-width:100%; height:auto; display:block; }

.mono{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--dim);
}
.mono.red{ color:var(--red); }

/* ================================================================
   PAGE TRANSITIONS — a short fade out, then the new page fades
   in slowly.
   ================================================================ */
.site-main{ animation:vIn 1.4s ease both; }
@keyframes vIn{
  from{ opacity:0; filter:blur(12px); }
  60%{ opacity:1; }
  to{ opacity:1; filter:blur(0); }
}
body.leaving .site-main{ animation:vOut .5s ease forwards; }
@keyframes vOut{ to{ opacity:0; filter:blur(10px); } }
@media (prefers-reduced-motion:reduce){
  .site-main, body.leaving .site-main{ animation:none; }
}

/* ================================================================
   THE ROAMING ORB — on every page but the door, the disc drifts
   around the edge of the screen, behind all content. It picks up
   where the door's sun left off: caught near the top center.
   ================================================================ */
.roam-orb{
  position:fixed; top:0; left:0; z-index:-1;
  width:34px; height:34px; border-radius:50%;
  background:var(--red);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s ease;
  will-change:transform;
}
.roam-orb.awake{ opacity:1; }
.home-template .roam-orb{ display:none; }

/* The tide: on click the orb drops off the bottom of the screen, and the
   new color rises from below as a misty gradient while the page's own
   colors morph in place beneath it. */
.sun-tide{
  position:fixed; left:0; bottom:0; z-index:150;
  width:100%; height:200vh;
  pointer-events:none;
  background:linear-gradient(0deg,
    rgba(var(--tide-rgb), 0.85) 0%,
    rgba(var(--tide-rgb), 0.5) 55%,
    rgba(var(--tide-rgb), 0) 100%);
  transform:translateY(100%);
  transition:transform 2.1s cubic-bezier(.33,0,.2,1), opacity 1.1s ease;
}
.sun-tide.rise{ transform:translateY(0); }
/* While the mist rises, the palette itself glides: the color variables are
   registered as real colors so they can animate, and the transition lives
   on body alone. Every element (and every gradient) reads the same moving
   values each frame, so all text recolors in perfect sync: no laggards,
   no flash. */
@property --black{ syntax:'<color>'; inherits:true; initial-value:#0e0d02; }
@property --black-warm{ syntax:'<color>'; inherits:true; initial-value:#121103; }
@property --paper{ syntax:'<color>'; inherits:true; initial-value:#D9D5C9; }
@property --dim{ syntax:'<color>'; inherits:true; initial-value:#7E837E; }
@property --red{ syntax:'<color>'; inherits:true; initial-value:#d02323; }
@property --rule{ syntax:'<color>'; inherits:true; initial-value:rgba(217,213,201,0.12); }
html.sun-anim body:not(.home-template){
  transition:
    --black 2.4s ease,
    --black-warm 2.4s ease,
    --paper 2.4s ease,
    --dim 2.4s ease,
    --red 2.4s ease,
    --rule 2.4s ease,
    color 2.4s ease,
    background-color 2.4s ease;
}

/* Sun mode: the palette inverted into the day register. Every value is an
   existing brand color; the disc motif turns dark on the red field.
   Scoped to body:not(.home-template): the door is never inverted. */
html.sun-mode body:not(.home-template){
  --black:#d02323;
  --black-warm:#b01f1a;
  --paper:#0e0d02;
  --dim:#7E1512;
  --rule:rgba(14,13,2,0.18);
  --red:#0e0d02;
}

/* ================================================================
   NAV — nearly nothing. The name and the count.
   ================================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:24px var(--pad);
}
.site-nav a{ text-decoration:none; }
.site-nav .name{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dim);
  transition:color .25s ease;
}
.site-nav .name:hover{ color:var(--paper); }
/* On scrolling pages the fixed nav gets a soft black scrim so content
   fades out beneath it instead of colliding with the links. The door
   page is exempt: nothing scrolls there and the sky stays untouched. */
body:not(.home-template) .site-nav{
  padding-bottom:34px;
  background:linear-gradient(180deg, var(--black) 62%, rgba(14,13,2,0) 100%);
}
.site-nav .count-link{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dim);
  transition:color .25s ease;
}
.site-nav .count-link:hover{ color:var(--paper); }

/* ================================================================
   THE FRONT DOOR — the stage from the paintings, unpopulated.
   Teal falling into red, black ground, the disc. The count stands
   where the figure stands.
   ================================================================ */
.door{
  min-height:100svh;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* Side bars — the portal framing from the canvases */
.door::before, .door::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(12px, 5vw, 64px);
  background:var(--black); z-index:3;
}
.door::before{ left:0; }
.door::after{ right:0; }

.door .sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    #032f44 0%,
    #003e4a 34%,
    #3d3a2e 52%,
    #8e2019 68%,
    #d02323 84%,
    #701410 100%);
}
.door .ground{
  position:absolute; left:0; right:0; bottom:0; height:12%;
  background:linear-gradient(180deg, transparent 0%, rgba(14,13,2,0.85) 55%, var(--black) 100%);
}
.door .disc{
  position:absolute; left:50%; top:14%;
  transform:translateX(-50%);
  width:clamp(64px, 9vw, 110px); height:clamp(64px, 9vw, 110px);
  border-radius:50%;
  background:var(--red);
  z-index:2;
  animation:discFloat 32s ease-in-out infinite alternate;
}
@keyframes discFloat{
  0%{   transform:translateX(-50%) translate(0, 0); }
  30%{  transform:translateX(-50%) translate(1.9vw, 1.5vh); }
  55%{  transform:translateX(-50%) translate(-1.2vw, 2.6vh); }
  80%{  transform:translateX(-50%) translate(-2.2vw, 0.8vh); }
  100%{ transform:translateX(-50%) translate(1.1vw, -0.7vh); }
}
@media (prefers-reduced-motion:reduce){ .door .disc{ animation:none; } }
/* The living sky: a canvas drawing the same six-stop field, drifting.
   Sits over the CSS gradient, which remains as the no-script fallback. */
.door .sky-canvas{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
}
.door .count-stage{
  position:relative; z-index:4;
  text-align:center;
  padding:0 var(--pad);
}
.door .count-stage .no{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(88px, 17vw, 220px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--black);
  text-shadow:0 0 60px rgba(14,13,2,0.25);
}
.door .colophon{
  margin-top:26px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(14,13,2,0.75);
}
.door .enter{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
  transition:color .3s ease;
}
.door .enter:hover{ color:var(--paper); }

/* The door slides up to reveal the dark beneath, then the record loads */
body.door-leaving .door{
  animation:doorUp .9s cubic-bezier(.6,.05,.3,1) forwards;
}
@keyframes doorUp{ to{ transform:translateY(-102%); } }
@media (prefers-reduced-motion:reduce){ body.door-leaving .door{ animation:none; } }

/* ================================================================
   THE RECORD. The index. Beneath the field, the list lives in the dark.
   ================================================================ */
.record{
  max-width:var(--wide); margin:0 auto;
  padding:clamp(90px, 14vh, 150px) var(--pad) clamp(80px, 12vh, 130px);
}
.record-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px 24px; flex-wrap:wrap;
  margin-bottom:clamp(48px, 8vh, 84px);
}
.record-head h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4vw, 44px); letter-spacing:0.01em;
}

/* The type filter: a quiet line under the count, opening a small panel
   in the same registrar lettering. Multiple kinds can be marked at once;
   the disc marks a selection. */
.record-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
/* on tablet and phone the meta block sits under the title, left-aligned,
   with Type flush to the same edge as the entries line */
@media (max-width:900px){
  .record-head{ flex-direction:column; align-items:flex-start; }
  .record-meta{ align-items:flex-start; }
  .type-panel{ right:auto; left:0; }
}
.type-filter{ position:relative; }
.type-trigger{
  display:none;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dim);
  transition:color .25s ease;
}
html.js .type-trigger{ display:inline-flex; align-items:baseline; gap:8px; }
.type-trigger:hover, .type-trigger[aria-expanded="true"]{ color:var(--paper); }
.type-trigger .arrow{
  display:inline-block;
  transition:transform .3s ease;
}
.type-trigger[aria-expanded="true"] .arrow{ transform:rotate(180deg); }
.type-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:90;
  min-width:160px;
  background:var(--black-warm);
  box-shadow:0 0 0 1px var(--rule);
  padding:10px 16px;
  display:none;
}
.type-panel.open{
  display:flex; flex-direction:column;
  animation:panelIn .3s ease both;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .type-panel.open{ animation:none; } }
.type-item{
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:4px 0; text-align:left;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dim);
  transition:color .25s ease;
}
.type-item:hover{ color:var(--paper); }
.type-item .mark{
  width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px var(--dim);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.type-item[aria-pressed="true"]{ color:var(--paper); }
.type-item[aria-pressed="true"] .mark{
  background:var(--red);
  box-shadow:none;
}
.entry-row.type-fade{ opacity:0 !important; }
.entry-row.type-hidden{ display:none; }

.entry-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px 40px;
  padding:clamp(30px, 4.5vh, 44px) 0;
  border-top:1px solid var(--rule);
  text-decoration:none;
  transition:opacity .3s ease;
}
.entries:hover .entry-row{ opacity:0.4; }
.entries:hover .entry-row:hover{ opacity:1; }
.entry-row:last-of-type{ border-bottom:1px solid var(--rule); }
@media (min-width:820px){
  .entry-row{ grid-template-columns:110px 1fr 200px; align-items:baseline; }
}
.entry-row .no{
  font-family:var(--mono); font-size:13px; letter-spacing:0.1em;
  color:var(--red);
}
.entry-row .no:empty{ display:none; }
@media (min-width:820px){ .entry-row .no:empty{ display:block; } }
.entry-row .title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px, 3.2vw, 34px); line-height:1.15;
}
.entry-row.kind-essay .title,
.entry-row.kind-object .title{ font-style:italic; }
.entry-row .title em{ font-style:italic; font-weight:400; }
.entry-row .medium{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim);
  text-align:left;
  white-space:pre-line;
}
@media (min-width:820px){ .entry-row .medium{ text-align:right; } }

/* Pagination — only appears if the record ever outgrows one page */
.pagination{
  margin-top:44px;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--dim);
}
.pagination a{ color:var(--paper); text-decoration:none; }
.pagination a:hover{ color:var(--red); }

/* ================================================================
   CLOSING BAND on the record page
   ================================================================ */
.record-close{
  max-width:var(--wide); margin:0 auto;
  padding:0 var(--pad) clamp(70px, 10vh, 110px);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.record-close .line{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(19px, 2.4vw, 24px); color:var(--dim);
}
.record-close a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid var(--teal-bright); padding-bottom:3px;
}
.record-close a:hover{ border-color:var(--red); }

/* ================================================================
   ENTRY PAGES — the portal composition. Dark bars, lit center.
   ================================================================ */
.entry{
  min-height:100svh;
  padding:clamp(110px, 16vh, 170px) var(--pad) clamp(70px, 10vh, 110px);
  position:relative;
}
.entry-inner{ max-width:var(--measure); margin:0 auto; }

.entry .reg{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dim);
  margin-bottom:34px;
}
.entry .reg .medium-line{ white-space:pre-line; }
.entry .reg .counted{ margin-left:auto; text-align:right; }
/* on tablet and phone the counted date tucks in under the other details,
   left-aligned in the same column */
@media (max-width:900px){
  .entry .reg{
    display:grid; grid-template-columns:auto 1fr;
    gap:8px 28px;
  }
  .entry .reg .no{ grid-column:1; }
  .entry .reg .medium-line{ grid-column:2; }
  .entry .reg .counted{ grid-column:2; margin-left:0; text-align:left; }
}
.entry .reg .no{ color:var(--red); }
.entry .reg .no:empty{ display:none; }
.entry h1.entry-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 6vw, 64px); line-height:1.04; letter-spacing:-0.005em;
  margin-bottom:44px;
  max-width:var(--measure);
}
.entry.tag-essay h1.entry-title,
.entry.tag-object h1.entry-title{ font-style:italic; }

/* The work panel — where a photographed piece sits, framed like the canvases */
.work-panel{
  position:relative;
  aspect-ratio:3/4;
  max-width:var(--measure);
  margin:0 0 40px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(217,213,201,0.07);
}
.work-panel .field{
  position:absolute; inset:0;
  background:
    radial-gradient(circle 90px at 62% 13%, var(--red) 0%, var(--red) 99%, transparent 100%),
    linear-gradient(180deg, #003e4a 0%, #004552 38%, #5a2a24 58%, #b01f1a 82%, #661310 100%);
}
.work-panel .placeholder-note{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(14,13,2,0.65); white-space:nowrap;
}
.work-frame{
  max-width:var(--measure);
  margin:0 0 40px;
}
.work-frame .work-img{
  width:100%;
  box-shadow:0 0 0 1px rgba(217,213,201,0.07);
}
.caption, .work-frame figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:var(--measure); margin:14px 0 0;
}

/* ================================================================
   READING TEXT — the essay measure, and Ghost editor content
   ================================================================ */
.essay{ max-width:var(--measure); margin:0; }
.essay p{ margin-bottom:26px; font-size:19px; line-height:1.75; }
.essay > p:first-of-type{ font-size:21px; }

.gh-content a{
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid var(--teal-bright); padding-bottom:1px;
  transition:border-color .25s ease;
}
.gh-content a:hover{ border-color:var(--red); }

.gh-content h2, .gh-content h3, .gh-content h4{
  font-family:var(--serif); font-weight:500; line-height:1.15;
  margin:44px 0 18px;
}
.gh-content h2{ font-size:clamp(26px, 3.4vw, 34px); }
.gh-content h3{ font-size:clamp(22px, 2.8vw, 27px); }
.gh-content h4{ font-size:20px; }

.gh-content ul, .gh-content ol{
  margin:0 0 26px 1.2em;
  font-size:19px; line-height:1.75;
}
.gh-content li{ margin-bottom:8px; }

.gh-content blockquote{
  margin:34px 0; padding-left:22px;
  border-left:2px solid var(--teal-bright);
  font-style:italic; color:var(--paper);
}
.gh-content blockquote p{ font-size:19px; }

.gh-content hr{
  border:none; border-top:1px solid var(--rule);
  margin:44px 0; max-width:200px;
}

.gh-content code{
  font-family:var(--mono); font-size:15px;
  background:var(--black-warm); padding:2px 6px;
}
.gh-content pre{
  font-family:var(--mono); font-size:14px; line-height:1.6;
  background:var(--black-warm); padding:20px;
  overflow-x:auto; margin:0 0 26px;
  box-shadow:0 0 0 1px var(--rule);
}
.gh-content pre code{ background:none; padding:0; }

/* Editor cards */
.gh-content figure{ margin:40px 0; }
.gh-content .kg-image-card img{
  margin:0;
  box-shadow:0 0 0 1px rgba(217,213,201,0.07);
}
.gh-content .kg-width-wide{ max-width:900px; margin-left:50%; transform:translateX(-50%); width:min(900px, 92vw); }
.gh-content .kg-width-full{ width:100vw; margin-left:50%; transform:translateX(-50%); }
.gh-content figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim);
  margin-top:14px; text-align:left;
}
.gh-content .kg-embed-card{ position:relative; }
.gh-content .kg-embed-card iframe{ max-width:100%; }
.gh-content .kg-gallery-image img{ box-shadow:0 0 0 1px rgba(217,213,201,0.07); }

.gh-content .kg-bookmark-card, .gh-content .kg-button-card{
  font-family:var(--mono); font-size:13px;
}

/* Registrar metadata typed inside post content (.mono on a span or a whole
   paragraph): pinned so essay/underneath paragraph sizing can never inflate
   it. Matches the entry-header metadata row exactly. */
.gh-content .mono,
.gh-content p.mono,
.gh-content .kg-toggle-content p.mono{
  font-family:var(--mono) !important;
  font-size:11.5px !important;
  letter-spacing:0.18em !important;
  text-transform:uppercase !important;
  color:var(--dim) !important;
  line-height:1.6;
}
.gh-content .mono.red{ color:var(--red) !important; }

/* ================================================================
   THE BENEATH. One layer down, opened by the disc.
   Ghost's toggle card, reskinned. The trigger is the red disc and
   the single label "Go beneath". The disc eases red to teal when open.
   ================================================================ */
.gh-content .kg-toggle-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  margin:64px 0 0;
  max-width:var(--measure);
}
.gh-content .kg-toggle-heading{
  position:relative;
  display:flex !important; flex-wrap:wrap; align-items:center;
  justify-content:flex-start !important;
  gap:16px;
  cursor:pointer;
}
/* the disc */
.gh-content .kg-toggle-heading::before{
  content:''; order:1;
  width:22px; height:22px; border-radius:50%;
  background:var(--red); flex:none;
  transition:background-color .6s ease;
}
/* the one label, ever */
.gh-content .kg-toggle-heading::after{
  content:'Go beneath'; order:2;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--dim);
  transition:color .3s ease;
}
.gh-content .kg-toggle-heading:hover::after{ color:var(--paper); }

/* the author's toggle heading becomes the label inside the underneath */
.gh-content .kg-toggle-heading-text{
  display:none;
  order:3; width:100%;
  margin:44px 0 0; padding-top:44px;
  border-top:1px solid var(--rule);
  font-family:var(--mono) !important;
  font-size:10.5px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  letter-spacing:0.24em !important;
  text-transform:uppercase !important;
  color:var(--teal-bright) !important;
}
.gh-content .kg-toggle-heading-text span{
  font:inherit; color:inherit; letter-spacing:inherit;
}
/* Ghost's chevron button becomes an invisible full-row click target */
.gh-content .kg-toggle-card-icon{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
  background:none; border:none; margin:0; padding:0;
}
.gh-content .kg-toggle-card-icon svg{ display:none; }

.gh-content .kg-toggle-content{
  display:none;
  margin-top:28px;
  padding:0 !important;
}
.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading::before,
.gh-content details.kg-toggle-card[open] .kg-toggle-heading::before{
  background:var(--teal-bright);
}
.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading-text,
.gh-content details.kg-toggle-card[open] .kg-toggle-heading-text{
  display:block;
}
.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content,
.gh-content details.kg-toggle-card[open] .kg-toggle-content{
  display:block;
  animation:uIn .45s ease both;
}
@keyframes uIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content,
  .gh-content details.kg-toggle-card[open] .kg-toggle-content{ animation:none; }
}
/* details fallback: no default marker */
.gh-content details.kg-toggle-card summary{ list-style:none; }
.gh-content details.kg-toggle-card summary::-webkit-details-marker{ display:none; }

/* text inside the underneath */
.gh-content .kg-toggle-content p{
  font-size:17px; line-height:1.75; color:#B9B5AA;
  margin-bottom:22px;
}
/* commerce, styled as gallery-label text, never as store UI */
.gh-content .kg-toggle-content strong{
  font-weight:500;
}

/* ================================================================
   ENTRY FOOTER NAV
   ================================================================ */
.entry-nav{
  max-width:var(--measure); margin:80px 0 0;
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
}
.entry-nav a{ color:var(--dim); text-decoration:none; transition:color .25s ease; }
.entry-nav a:hover{ color:var(--paper); }
.entry-nav-siblings{ display:flex; gap:28px; text-align:right; }

/* ================================================================
   PAGES (static) — quiet fallback
   ================================================================ */
.entry.page h1.entry-title{ margin-bottom:44px; }

/* ================================================================
   SUBSCRIBE — the honest trade, at the foot of the record and of
   every entry. Appears only when memberships are switched on.
   ================================================================ */
.subscribe-wrap{
  max-width:var(--wide); margin:0 auto;
  padding:0 var(--pad) clamp(70px, 10vh, 110px);
}
.subscribe-band{
  border-top:1px solid var(--rule);
  padding-top:44px;
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:24px 40px;
}
.entry .subscribe-band{ margin-top:80px; }
.subscribe-form{
  display:flex; align-items:baseline; gap:24px; flex-wrap:wrap;
}
.subscribe-form input[data-members-email]{
  background:transparent; border:none;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  color:var(--paper);
  padding:6px 2px; width:min(300px, 70vw);
  border-radius:0;
}
.subscribe-form input[data-members-email]:focus{
  outline:none; border-bottom-color:var(--teal-bright);
}
.subscribe-form input[data-members-email]::placeholder{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim);
}
.subscribe-form button{
  background:none; border:none; padding:0 0 3px; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--paper);
  border-bottom:1px solid var(--teal-bright);
}
.subscribe-form button:hover{ border-color:var(--red); }
.subscribe-form .sub-msg{
  display:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase;
}
.subscribe-form.success input,
.subscribe-form.success button{ display:none; }
.subscribe-form.success .sub-success{ display:inline; color:var(--teal-bright); }
.subscribe-form.error .sub-error{ display:inline; color:var(--red); }
.subscribe-form.loading button{ opacity:0.5; }

/* ================================================================
   GHOST BITS — keep member/portal injections from clashing
   ================================================================ */
.gh-post-upgrade-cta{ background:var(--black-warm); }