:root{
  --paper:#f4f0e7;--paper-2:#f8f5ee;--ink:#1f211f;--soft:#6e6a62;
  --stone:#d8d2c8;--stone-2:#e8e1d6;--vermilion:#c64a32;--relational:#a99b87;
  --dark:#202521;--serif:"EB Garamond",Georgia,serif;--sans:"Inter",Arial,sans-serif;
  --edge:clamp(22px,5.4vw,88px);--header:76px;--max:1380px
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:20;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);
  background:color-mix(in srgb,var(--paper) 95%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb,var(--stone) 72%,transparent)
}
.brand{display:grid;gap:6px;text-decoration:none;line-height:1}
.brand strong{font:600 clamp(15px,1vw,19px) var(--serif)}
.brand span{color:var(--vermilion);font:600 7px var(--sans);text-transform:uppercase;letter-spacing:.18em}
.back-link{color:var(--vermilion);text-decoration:none;text-transform:uppercase;font:600 8px var(--sans);letter-spacing:.13em}
main{padding-top:var(--header)}
.shell{width:min(calc(100% - (var(--edge)*2)),var(--max));margin:auto}
.eyebrow{margin:0;color:var(--vermilion);text-transform:uppercase;font:600 8px/1.45 var(--sans);letter-spacing:.18em}
.hero{padding:clamp(42px,5.2vw,76px) 0 clamp(26px,3vw,42px);border-bottom:1px solid var(--stone)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(260px,.56fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin:18px 0 14px;max-width:820px;font-size:clamp(46px,5vw,82px);line-height:.88;letter-spacing:-.03em;font-weight:500}
.hero-deck{max-width:660px;margin:0;color:var(--soft);font-size:clamp(18px,1.18vw,22px);line-height:1.18;font-style:italic}
.hero-meta{border-left:1px solid var(--stone);padding-left:26px}
.hero-meta dl{margin:0}
.hero-meta div{padding:10px 0;border-bottom:1px solid var(--stone-2)}
.hero-meta div:last-child{border-bottom:0}
.hero-meta dt{margin:0 0 5px;color:var(--vermilion);text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.14em}
.hero-meta dd{margin:0;color:var(--soft);font:400 12.5px/1.34 var(--sans)}

.archive-intro{padding:70px 0 48px;display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}
.archive-intro h2{margin:14px 0 0;max-width:720px;font-size:clamp(38px,4vw,66px);line-height:.94;font-weight:500}
.archive-intro p{margin:0;color:var(--soft);font-size:17px;line-height:1.35}
.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 42px}
.filter-button{
  border:1px solid var(--stone);background:transparent;color:var(--soft);
  min-height:36px;padding:0 14px;border-radius:18px;
  text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.12em;cursor:pointer
}
.filter-button[aria-pressed="true"]{border-color:var(--vermilion);color:var(--vermilion)}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:110px}
.archive-card{
  min-height:330px;padding:30px;border:1px solid var(--stone-2);background:var(--paper-2);
  display:flex;flex-direction:column;text-decoration:none;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}
.archive-card:hover,.archive-card:focus-visible{transform:translateY(-4px);border-color:var(--stone);box-shadow:0 20px 50px rgba(31,33,31,.05);outline:none}
.archive-card[data-hidden="true"]{display:none}
.archive-card .type{color:var(--vermilion);text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.14em}
.archive-card .place{margin:7px 0 0;color:#8b857c;text-transform:uppercase;font:500 7px var(--sans);letter-spacing:.11em}
.archive-card h3{margin:54px 0 16px;font-size:clamp(23px,2vw,31px);line-height:1.02;font-weight:500}
.archive-card p{margin:0;color:var(--soft);font:400 12px/1.48 var(--sans)}
.archive-card .modalities{margin:auto 0 0;padding-top:34px;color:#857f76;text-transform:uppercase;font:500 6.8px/1.5 var(--sans);letter-spacing:.1em}
.archive-card .open{margin-top:20px;color:var(--vermilion);text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.13em}
.archive-card.is-trace{background:transparent}
.archive-card.is-trace .open{color:#8a847a}

.note-main{padding:clamp(26px,3.4vw,40px) 0 82px}
.note-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(260px,.46fr);gap:clamp(24px,3.6vw,52px);align-items:start}
.note-prose{max-width:850px}
.note-prose .opening{
  margin:0 0 clamp(30px,2.6vw,40px);font-size:clamp(22px,1.95vw,32px);line-height:1.08;font-style:italic
}
.note-prose h2{margin:72px 0 22px;font-size:clamp(32px,3vw,48px);line-height:.98;font-weight:500}
.note-prose p{font-size:clamp(17px,1.02vw,18.8px);line-height:1.38}
.note-prose p+p{margin-top:16px}
.observed{
  margin:54px 0 0;padding:34px 36px;border:1px solid var(--stone);background:var(--paper-2)
}
.observed .eyebrow{margin-bottom:22px}
.observed p{margin:0;font-size:18px;line-height:1.38}
.observed p+p{margin-top:18px}
.not-concluded{
  margin-top:26px;padding-left:24px;border-left:1px solid var(--vermilion);color:var(--soft)
}
.not-concluded strong{display:block;margin-bottom:8px;color:var(--vermilion);text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.14em}
.note-aside{position:sticky;top:calc(var(--header) + 18px)}
.trace-visual{
  position:relative;aspect-ratio:1;border:1px solid var(--stone-2);background:var(--paper-2);overflow:hidden
}
.trace-visual svg{width:100%;height:100%}
.trace-legend{margin-top:22px;display:grid;gap:12px}
.trace-legend div{display:flex;align-items:center;gap:10px;color:var(--soft);font:500 7px var(--sans);text-transform:uppercase;letter-spacing:.11em}
.trace-legend i{width:22px;border-top:1px dotted var(--vermilion)}
.trace-legend i.dot{width:6px;height:6px;border:0;border-radius:50%;background:var(--vermilion)}
.field-record{margin-top:24px;padding-top:18px;border-top:1px solid var(--stone)}
.field-record h3{margin:0 0 18px;color:var(--vermilion);text-transform:uppercase;font:600 8px var(--sans);letter-spacing:.14em}
.field-record dl{margin:0}
.field-record div{padding:11px 0;border-bottom:1px solid var(--stone-2)}
.field-record dt{color:#8a847a;text-transform:uppercase;font:600 6.5px var(--sans);letter-spacing:.12em}
.field-record dd{margin:5px 0 0;font:400 12px/1.35 var(--sans)}


.echoes{margin-top:86px;padding-top:44px;border-top:1px solid var(--stone)}
.echoes h2{margin:0 0 30px;font-size:32px;font-weight:500}
.echo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.echo{padding:24px;border:1px solid var(--stone-2);text-decoration:none}
.echo span{color:var(--vermilion);text-transform:uppercase;font:600 6.5px var(--sans);letter-spacing:.12em}
.echo strong{display:block;margin-top:14px;font-weight:500;font-size:20px}
.footer{padding:36px var(--edge);border-top:1px solid var(--stone);display:flex;justify-content:space-between;gap:20px;color:var(--soft);font:400 8px var(--sans);text-transform:uppercase;letter-spacing:.1em}
.footer a{color:var(--vermilion);text-decoration:none}

@media(max-width:900px){
  .hero-grid,.archive-intro,.note-grid{grid-template-columns:1fr}
  .hero-meta{border-left:0;border-top:1px solid var(--stone);padding:18px 0 0}
  .archive-grid{grid-template-columns:1fr 1fr}
  .note-aside{position:static}
  .trace-visual{width:min(100%,460px)}
}
@media(max-width:560px){
  :root{--header:66px}
  .site-header{padding-inline:20px}
  .brand span{display:none}
  .shell{width:calc(100% - 40px)}
  .hero{padding-top:54px}
  .hero h1{font-size:clamp(48px,14vw,67px)}
  .archive-grid{grid-template-columns:1fr}
  .archive-card{min-height:280px}
  .archive-card h3{margin-top:42px}
  .note-main{padding-top:34px}
  .observed{padding:26px 22px}
  .echo-grid{grid-template-columns:1fr}
  .footer{display:block;padding-inline:20px}
  .footer span{display:block;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ==========================================================
   PHASE FOUR-C — FILTERED EDITORIAL VOICE + ESSAY INTERACTION
   ========================================================== */
#archive-description{
  transition:opacity .18s ease,transform .18s ease
}
#archive-description.is-changing{
  opacity:.28;
  transform:translateY(3px)
}

.essay-motif-wrap{
  margin:0;
}
.essay-motif{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1;
  border:1px solid var(--stone-2);
  padding:0;
  background:var(--paper-2);
  color:var(--relational);
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.essay-motif:focus-visible{
  outline:1px solid var(--vermilion);
  outline-offset:4px;
}
.essay-motif svg{
  width:100%;
  height:100%;
  display:block;
}
.essay-orbit{
  fill:none;
  stroke:var(--relational);
  stroke-width:.7;
  stroke-dasharray:2 4;
  opacity:.62;
}
.essay-centre-field{
  fill:var(--vermilion);
  opacity:.025;
  transition:opacity .9s ease;
}
.essay-centre-ring{
  fill:none;
  stroke:var(--vermilion);
  stroke-width:.8;
  opacity:.15;
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);
  transform-box:fill-box;
  transform-origin:center;
}
.essay-centre-response{
  fill:none;
  stroke:var(--vermilion);
  stroke-width:.65;
  stroke-dasharray:1.5 5.5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.essay-centre-dot{
  fill:var(--vermilion);
  opacity:.52;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1);
}
.essay-person{
  fill:var(--relational);
  opacity:.72;
  transition:fill .5s ease,opacity .5s ease
}
.essay-body{
  fill:none;
  stroke:var(--relational);
  stroke-width:1;
  stroke-linecap:round;
  opacity:.58;
  transition:stroke .5s ease,opacity .5s ease
}
.essay-left-participant,
.essay-right-participant{
  transform-box:fill-box;
  transform-origin:center;
}
.essay-left-participant{
  transition:transform 1.55s cubic-bezier(.22,.61,.36,1)
}
.essay-right-participant{
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1)
}
.essay-path{
  fill:none;
  stroke:var(--vermilion);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:2 8;
  opacity:.08;
  transition:opacity .7s ease
}
.essay-signal-dot,
.essay-response-dot{
  fill:var(--vermilion);
  opacity:0;
  transition:opacity .35s ease
}
.essay-motif-reading{
  min-height:100px;
  padding:22px 6px 4px;
  text-align:center;
  transition:opacity .18s ease,transform .18s ease
}
.essay-motif-reading.copy-changing{
  opacity:.28;
  transform:translateY(3px)
}
.essay-motif-label{margin-bottom:11px}
.essay-motif-text{
  max-width:390px;
  margin:0 auto;
  color:var(--soft);
  font-size:15px;
  line-height:1.32;
  font-style:italic
}

/* PRE-INTERACTION:
   a hesitant approach, a signal, and acknowledgement without resolution. */
.essay-motif[data-state="pre"] .essay-left-participant{
  animation:essayHesitantApproach 1.6s cubic-bezier(.22,.61,.36,1) both
}
.essay-motif[data-state="pre"] .dot-1{
  animation:essaySignalBlink .48s .65s ease both
}
.essay-motif[data-state="pre"] .essay-centre-dot{
  animation:essayCentreNotice .72s 1.08s ease both
}
@keyframes essayHesitantApproach{
  0%{transform:translateX(0)}
  36%{transform:translateX(8px)}
  58%{transform:translateX(6px)}
  100%{transform:translateX(12px)}
}
@keyframes essaySignalBlink{
  0%{opacity:0}
  45%{opacity:.88}
  100%{opacity:.42}
}
@keyframes essayCentreNotice{
  0%{opacity:.52;transform:scale(1)}
  52%{opacity:.95;transform:scale(1.18)}
  100%{opacity:.68;transform:scale(1.04)}
}

.essay-motif[data-state="attending"] .essay-left-participant{
  transform:translateX(12px)
}
.essay-motif[data-state="attending"] .essay-person-left,
.essay-motif[data-state="attending"] .essay-body-left{
  fill:var(--vermilion);
  stroke:var(--vermilion);
  opacity:.78
}
.essay-motif[data-state="attending"] .essay-right-participant{
  transform:translateX(-4px)
}
.essay-motif[data-state="attending"] .essay-person-right,
.essay-motif[data-state="attending"] .essay-body-right{
  opacity:.78
}
.essay-motif[data-state="attending"] .essay-path-left{opacity:.26}
.essay-motif[data-state="attending"] .dot-1,
.essay-motif[data-state="attending"] .dot-2{opacity:.52}
.essay-motif[data-state="attending"] .essay-centre-field{opacity:.05}
.essay-motif[data-state="attending"] .essay-centre-dot{opacity:.78;transform:scale(1.06)}

/* PARTICIPATION:
   both sides enter relation; Mutual Recalibration becomes visible. */
.essay-motif[data-state="participating"] .essay-left-participant{
  transform:translateX(23px)
}
.essay-motif[data-state="participating"] .essay-right-participant{
  transform:translateX(-17px)
}
.essay-motif[data-state="participating"] .essay-person,
.essay-motif[data-state="participating"] .essay-body{
  fill:var(--vermilion);
  stroke:var(--vermilion);
  opacity:.9
}
.essay-motif[data-state="participating"] .essay-path{
  opacity:.66;
  animation:essayPathBreathe 1.2s ease-in-out infinite alternate
}
.essay-motif[data-state="participating"] .essay-signal-dot,
.essay-motif[data-state="participating"] .essay-response-dot{
  animation:essayDotsIn .28s ease forwards
}
.essay-motif[data-state="participating"] .dot-1{animation-delay:.10s}
.essay-motif[data-state="participating"] .dot-2{animation-delay:.28s}
.essay-motif[data-state="participating"] .dot-3{animation-delay:.46s}
.essay-motif[data-state="participating"] .dot-r1{animation-delay:.68s}
.essay-motif[data-state="participating"] .dot-r2{animation-delay:.86s}
.essay-motif[data-state="participating"] .dot-r3{animation-delay:1.04s}
.essay-motif[data-state="participating"] .essay-centre-field{opacity:.12}
.essay-motif[data-state="participating"] .essay-centre-ring{opacity:.52;transform:scale(1.08)}
.essay-motif[data-state="participating"] .essay-centre-response{
  animation:essayResponseRing 1.35s .55s ease both
}
.essay-motif[data-state="participating"] .essay-centre-dot{
  opacity:1;
  transform:scale(1.28)
}
@keyframes essayPathBreathe{
  from{stroke-dashoffset:0;opacity:.42}
  to{stroke-dashoffset:-4;opacity:.75}
}
@keyframes essayDotsIn{
  from{opacity:0}
  to{opacity:.86}
}
@keyframes essayResponseRing{
  0%{opacity:0;transform:scale(.88)}
  55%{opacity:.55;transform:scale(1)}
  100%{opacity:.22;transform:scale(1.08)}
}

/* RESOLUTION:
   relation stabilises without becoming symmetrical or final. */
.essay-motif[data-state="resolved"] .essay-left-participant{
  transform:translateX(20px)
}
.essay-motif[data-state="resolved"] .essay-right-participant{
  transform:translateX(-14px)
}
.essay-motif[data-state="resolved"] .essay-person,
.essay-motif[data-state="resolved"] .essay-body{
  fill:var(--vermilion);
  stroke:var(--vermilion);
  opacity:.78
}
.essay-motif[data-state="resolved"] .essay-path{opacity:.48}
.essay-motif[data-state="resolved"] .essay-signal-dot,
.essay-motif[data-state="resolved"] .essay-response-dot{opacity:.66}
.essay-motif[data-state="resolved"] .essay-centre-field{opacity:.09}
.essay-motif[data-state="resolved"] .essay-centre-ring{opacity:.38;transform:scale(1.03)}
.essay-motif[data-state="resolved"] .essay-centre-response{opacity:.12}
.essay-motif[data-state="resolved"] .essay-centre-dot{opacity:.96;transform:scale(1.16)}

@media(max-width:560px){
  .essay-motif-reading{min-height:112px;padding-inline:10px}
  .essay-motif-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .essay-motif *{animation:none!important}
}


/* ==========================================================
   PHASE FOUR-D — RELATIONAL CONCEPT STATES
   The concepts become perceptible as the relation develops.
   ========================================================== */
#archive-state-label,
#archive-heading,
#archive-description{
  transition:opacity .18s ease,transform .18s ease;
}
#archive-state-label.is-changing,
#archive-heading.is-changing,
#archive-description.is-changing{
  opacity:.2;
  transform:translateY(3px);
}

.essay-concepts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.essay-concept{
  min-height:48px;
  padding:12px 13px;
  border-top:1px solid var(--stone-2);
  display:flex;
  align-items:center;
  gap:10px;
  color:#8a847a;
  opacity:.48;
  transition:
    color .55s ease,
    opacity .55s ease,
    border-color .55s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}
.essay-concept.is-noticed{
  opacity:.7;
}
.concept-name{
  text-transform:uppercase;
  font:600 6.8px/1.25 var(--sans);
  letter-spacing:.115em;
}
.concept-mark{
  position:relative;
  flex:0 0 auto;
  display:block;
}
.concept-mark-centre{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--vermilion);
  opacity:.38;
  transform:scale(.82);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.concept-mark-recalibration{
  width:28px;
  height:1px;
  border-top:1px dotted var(--vermilion);
  opacity:.28;
  transition:opacity .55s ease;
}
.concept-mark-recalibration::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:7px;
  border-top:1px solid var(--vermilion);
  opacity:0;
  transform:translateX(0);
}

/* REST — concept language remains available but quiet. */
.essay-motif-wrap[data-relation-state="rest"] .essay-concept{
  opacity:.42;
}

/* PRE-INTERACTION — relation is sensed before it is established.
   Mutual Recalibration becomes perceptible first; centre only notices. */
.essay-motif-wrap[data-relation-state="pre"] .essay-concept-recalibration{
  color:var(--vermilion);
  opacity:.76;
  transform:translateX(2px);
}
.essay-motif-wrap[data-relation-state="pre"] .concept-mark-recalibration{
  opacity:.65;
}
.essay-motif-wrap[data-relation-state="pre"] .concept-mark-recalibration::after{
  animation:conceptPathProbe 1.25s .2s ease both;
}
.essay-motif-wrap[data-relation-state="pre"] .essay-concept-centre{
  opacity:.54;
}
.essay-motif-wrap[data-relation-state="pre"] .concept-mark-centre{
  animation:conceptCentreNotice .72s 1.05s ease both;
}

/* ATTENDING — the signal has been noticed, but relation remains provisional. */
.essay-motif-wrap[data-relation-state="attending"] .essay-concept-recalibration{
  color:var(--vermilion);
  opacity:.88;
}
.essay-motif-wrap[data-relation-state="attending"] .concept-mark-recalibration{
  opacity:.78;
  animation:conceptLineBreathe 1.15s ease-in-out infinite alternate;
}
.essay-motif-wrap[data-relation-state="attending"] .essay-concept-centre{
  opacity:.65;
}
.essay-motif-wrap[data-relation-state="attending"] .concept-mark-centre{
  opacity:.66;
  transform:scale(.95);
}

/* PARTICIPATING — Mutual Recalibration is active.
   The Co-Created Centre emerges as a consequence, not a starting condition. */
.essay-motif-wrap[data-relation-state="participating"] .essay-concept-recalibration{
  color:var(--vermilion);
  opacity:1;
  border-color:color-mix(in srgb,var(--vermilion) 38%,var(--stone-2));
}
.essay-motif-wrap[data-relation-state="participating"] .concept-mark-recalibration{
  opacity:1;
  animation:conceptLineBreathe .85s ease-in-out infinite alternate;
}
.essay-motif-wrap[data-relation-state="participating"] .concept-mark-recalibration::after{
  opacity:.9;
  animation:conceptTravel 1.15s linear infinite;
}
.essay-motif-wrap[data-relation-state="participating"] .essay-concept-centre{
  color:var(--vermilion);
  opacity:.9;
  transition-delay:.62s;
}
.essay-motif-wrap[data-relation-state="participating"] .concept-mark-centre{
  opacity:.92;
  transform:scale(1.22);
  transition-delay:.62s;
  animation:conceptCentreEmerge 1.25s .62s ease both;
}

/* RESOLVED — centre remains perceptible; recalibration settles but does not vanish. */
.essay-motif-wrap[data-relation-state="resolved"] .essay-concept-centre{
  color:var(--vermilion);
  opacity:1;
  border-color:color-mix(in srgb,var(--vermilion) 30%,var(--stone-2));
}
.essay-motif-wrap[data-relation-state="resolved"] .concept-mark-centre{
  opacity:1;
  transform:scale(1.12);
}
.essay-motif-wrap[data-relation-state="resolved"] .essay-concept-recalibration{
  color:#8a847a;
  opacity:.68;
}
.essay-motif-wrap[data-relation-state="resolved"] .concept-mark-recalibration{
  opacity:.56;
}

@keyframes conceptPathProbe{
  0%{opacity:0;transform:translateX(0)}
  45%{opacity:.8}
  100%{opacity:0;transform:translateX(20px)}
}
@keyframes conceptTravel{
  from{transform:translateX(0);opacity:.2}
  25%{opacity:.9}
  to{transform:translateX(21px);opacity:.15}
}
@keyframes conceptLineBreathe{
  from{opacity:.48}
  to{opacity:1}
}
@keyframes conceptCentreNotice{
  0%{opacity:.38;transform:scale(.82)}
  50%{opacity:.86;transform:scale(1.08)}
  100%{opacity:.62;transform:scale(.94)}
}
@keyframes conceptCentreEmerge{
  0%{opacity:.45;transform:scale(.88)}
  52%{opacity:1;transform:scale(1.34)}
  100%{opacity:.92;transform:scale(1.22)}
}

@media(max-width:560px){
  .essay-concepts{
    grid-template-columns:1fr;
    gap:0;
  }
  .essay-concept{
    min-height:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .essay-concept *,
  .essay-concept{
    animation:none!important;
    transition-duration:.01ms!important;
  }
}


/* ==========================================================
   PHASE FOUR-E — MUTUAL RECALIBRATION / TWO-WAY FLOW
   Final pass: post-participation paths visibly travel both ways.
   ========================================================== */
.essay-path-return{
  opacity:0;
  stroke-dasharray:2 8;
  pointer-events:none;
}

/* During participation, keep the existing inward movement only. */
.essay-motif[data-state="participating"] .essay-path-return{
  opacity:0;
  animation:none;
}

/* After participation resolves, two identical dotted paths run in
   opposite dash directions at the same time. The relation therefore
   reads as reciprocal rather than one-way. */
.essay-motif[data-state="resolved"] .essay-path:not(.essay-path-return){
  opacity:.48;
  animation:essayMutualFlowForward 1.5s linear infinite;
}
.essay-motif[data-state="resolved"] .essay-path-return{
  opacity:.34;
  animation:essayMutualFlowReturn 1.5s linear infinite;
}

@keyframes essayMutualFlowForward{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-10}
}
@keyframes essayMutualFlowReturn{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:10}
}

@media(prefers-reduced-motion:reduce){
  .essay-motif[data-state="resolved"] .essay-path,
  .essay-motif[data-state="resolved"] .essay-path-return{
    animation:none!important;
  }
}


/* ==========================================================
   PHASE FOUR-F — SMOOTHER MUTUAL RECALIBRATION FLOW
   Final aesthetic refinement only.
   ========================================================== */

/* Longer spacing, slower travel, and an offset return stream make the
   reciprocal movement feel continuous rather than mechanically mirrored. */
.essay-motif[data-state="resolved"] .essay-path:not(.essay-path-return),
.essay-motif[data-state="resolved"] .essay-path-return{
  stroke-dasharray:1.45 6.55;
  stroke-linecap:round;
  will-change:stroke-dashoffset,opacity;
}

.essay-motif[data-state="resolved"] .essay-path:not(.essay-path-return){
  opacity:.46;
  animation:essayMutualFlowForwardSmooth 3.2s linear infinite;
}

.essay-motif[data-state="resolved"] .essay-path-return{
  opacity:.28;
  animation:essayMutualFlowReturnSmooth 3.2s linear infinite;
  animation-delay:-1.6s;
}

@keyframes essayMutualFlowForwardSmooth{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-16}
}

@keyframes essayMutualFlowReturnSmooth{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:16}
}

@media(prefers-reduced-motion:reduce){
  .essay-motif[data-state="resolved"] .essay-path,
  .essay-motif[data-state="resolved"] .essay-path-return{
    animation:none!important;
  }
}


/* PUBLIC / PROTECTED THRESHOLD */
.protected-threshold{
  position:relative;margin-top:22px;padding:20px 22px 22px;
  border:1px solid rgba(214,206,194,.78);background:linear-gradient(to bottom,rgba(248,245,238,.72),rgba(243,239,230,.68));
}
.protected-threshold::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
  background:linear-gradient(to bottom,transparent,var(--paper));pointer-events:none
}
.protected-threshold h2{margin:8px 0 8px!important;font-size:clamp(22px,1.8vw,30px)!important;line-height:1.02!important}
.protected-threshold>p:not(.eyebrow){max-width:620px;color:var(--soft);font-size:14.2px!important;line-height:1.38!important;margin-top:8px!important}
.protected-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.protected-actions a{
  min-height:34px;padding:0 13px;border:1px solid var(--stone);display:inline-flex;align-items:center;
  text-decoration:none;color:var(--vermilion);text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.12em
}
.protected-actions a:first-child{background:var(--ink);border-color:var(--ink);color:var(--paper-2)}
.reader-access-link{color:var(--vermilion);text-decoration:none;text-transform:uppercase;font:600 7px var(--sans);letter-spacing:.12em}
@media(max-width:560px){
  .protected-threshold{padding:30px 24px}.protected-actions{display:grid}.protected-actions a{justify-content:center}
}


.legal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.legal-footer nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.legal-footer a{
  color:inherit;
  text-decoration:none;
}
.legal-footer a:hover,
.legal-footer a:focus-visible{
  color:var(--vermilion);
  outline:none;
}
@media(max-width:640px){
  .legal-footer{
    display:grid;
    gap:10px;
  }
}