/* ── CLOSED LOOP RESEARCH ─────────────────────────────────────
   One field: lapis. One ink: bone. No second colour, no italics.
   ───────────────────────────────────────────────────────────── */

:root{
  --field:#101F4C;
  --field-deep:#0B1739;
  --paper:#F2ECE0;
  --ghost:#25376E;

  --line:rgba(242,236,224,.18);
  --line-soft:rgba(242,236,224,.11);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;

  --gut:clamp(20px,4.2vw,64px);
  --max:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--field);color:var(--paper);
  font-family:var(--serif);
  font-variation-settings:'opsz' 14,'SOFT' 18,'WONK' 0;
  font-size:clamp(16px,1.05vw,18px);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{ /* press grain */
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.4;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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--paper);color:var(--field)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,34px)}
section{padding-block:clamp(72px,10vw,158px)}
.divide{border-top:1px solid var(--line-soft)}

/* ── type ──────────────────────────────────────────────────── */
.label{
  font-family:var(--sans);font-weight:500;font-size:clamp(10.5px,.78vw,12.5px);
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5;
}
h1,h2,h3{margin:0;font-weight:600;font-variation-settings:'opsz' 110,'SOFT' 0,'WONK' 1}
h2{font-size:clamp(2.15rem,4.7vw,4.3rem);line-height:.98;letter-spacing:-.024em;text-transform:uppercase;max-width:19ch}
h2.wide{max-width:24ch}
h3{font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.06;letter-spacing:-.015em}
p{margin:0 0 1.1em;max-width:60ch}
.lede{
  font-size:clamp(1.22rem,2.15vw,2.05rem);line-height:1.24;letter-spacing:-.012em;
  font-variation-settings:'opsz' 60,'SOFT' 10,'WONK' 0;margin:0 0 .65em;max-width:24ch;
}
.dim{opacity:.66}
.small{font-size:clamp(14px,.95vw,15.5px);line-height:1.6}

/* ── crop-mark link ────────────────────────────────────────── */
.mark{
  position:relative;display:inline-block;padding:1.05em 1.6em;
  font-family:var(--sans);font-weight:500;font-size:clamp(10.5px,.78vw,12.5px);
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--paper);
}
.mark span{position:relative;z-index:2;display:block}
.mark::before,.mark::after,.mark span::before,.mark span::after{
  content:'';position:absolute;width:11px;height:11px;border:0 solid currentColor;
  transition:width .38s cubic-bezier(.2,.7,.3,1),height .38s cubic-bezier(.2,.7,.3,1);
}
.mark::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.mark::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.mark span::before{top:0;right:-1.6em;border-top-width:1px;border-right-width:1px}
.mark span::after{bottom:0;left:-1.6em;border-bottom-width:1px;border-left-width:1px}
.mark span::before,.mark span::after{margin-block:-1.05em}
.mark:hover::before,.mark:hover::after,.mark:hover span::before,.mark:hover span::after{width:50%;height:50%}
.mark:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.tlink{
  font-family:var(--sans);font-weight:500;font-size:clamp(10.5px,.78vw,12.5px);letter-spacing:.15em;
  text-transform:uppercase;color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(242,236,224,.4);padding-bottom:.35em;transition:border-color .25s,color .25s;
}
.tlink:hover{border-color:var(--paper)}
.tlink .arw{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.tlink:hover .arw{transform:translateX(5px)}

/* ── top rail ──────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.brandmark{display:flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:inherit;text-decoration:none}
.brandmark .dot{width:9px;height:9px;border:1px solid var(--paper);border-radius:50%;position:relative}
.brandmark .dot::after{content:'';position:absolute;inset:2px;background:var(--paper);border-radius:50%}
.nav{display:flex;gap:clamp(14px,2vw,30px)}
.nav a{color:inherit;text-decoration:none;opacity:.68;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1}
@media(max-width:640px){.nav{display:none}}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding-block:clamp(52px,7.5vw,104px) clamp(48px,6vw,88px)}
.wordmark{
  margin:0 0 clamp(38px,5vw,68px);text-transform:uppercase;font-weight:700;
  line-height:.8;letter-spacing:-.035em;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;
}
.wm{display:block;position:relative}
.wm-a{font-size:clamp(3.05rem,10.72vw,9.92rem)}
.wm-b{font-size:clamp(3.9rem,13.7vw,12.7rem)}
.wm::before{ /* second plate, off register */
  content:attr(data-t);position:absolute;inset:0;z-index:-1;
  color:var(--ghost);transform:translate(.018em,.014em);
}
.hero-say{grid-column:1/span 7}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(28px,3.2vw,44px)}
@media(max-width:900px){.hero-say{grid-column:1/-1}}


/* ── the loop ──────────────────────────────────────────────── */
.loop-head{grid-column:1/span 9;margin-bottom:clamp(44px,5.5vw,84px)}
.loop-fig{grid-column:1/-1;margin:0 auto;width:100%;max-width:min(960px,100%)}
@media(max-width:960px){.loop-head,.loop-fig{grid-column:1/-1}}
.ring{width:100%;height:auto;display:block;overflow:visible}
.ring .ring-line{fill:none;stroke:var(--paper);stroke-width:2;opacity:.4}
.ring .ring-dial{fill:none;stroke:var(--paper);stroke-width:6;stroke-dasharray:.5 13;stroke-linecap:round;opacity:.09}
.ring .ring-close{fill:none;stroke:var(--paper);stroke-width:6}
.ring .node{fill:var(--field);stroke:var(--paper);stroke-width:2}
.ring .node-hit{fill:var(--paper);stroke:var(--paper)}
.ring .arw{fill:var(--paper)}
.ring text{font-family:var(--sans);text-transform:uppercase;fill:var(--paper)}
.ring .lbl{font-size:16px;font-weight:500;letter-spacing:.12em}
.ring .idx{fill:var(--paper);opacity:.45}
.ring .note{font-size:12px;letter-spacing:.14em;fill:var(--paper);opacity:.6}
.ring .ctr-k{font-size:12px;letter-spacing:.2em;fill:var(--paper);opacity:.4}
.ring .ctr-s{font-family:var(--serif);font-size:32px;letter-spacing:-.01em;text-transform:none;fill:var(--paper)}
@media(max-width:760px){
  .ring .lbl,.ring .note{display:none}
  .ring .ctr-s{font-size:46px}
}
.loop-seq{grid-column:1/-1;display:none;margin:26px 0 0;text-align:center;opacity:.6;line-height:2}
@media(max-width:760px){.loop-seq{display:block}}


/* ── thesis ────────────────────────────────────────────────── */
.th-head{grid-column:1/span 9;margin-bottom:clamp(34px,4vw,58px)}
.th-body{grid-column:1/span 6}
@media(max-width:900px){.th-head,.th-body{grid-column:1/-1}}


/* ── closing cta ─────────────────────────────────────────── */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,30px)}
.cta h2{max-width:14ch}
.cta .lede{max-width:34ch;margin:0}
.cta .mark{margin-top:clamp(6px,1vw,14px)}

/* ── footer ────────────────────────────────────────────────── */
.foot{padding-block:clamp(64px,8vw,120px) 0;border-top:1px solid var(--line-soft)}
.f-about{grid-column:1/span 5}
.f-contact{grid-column:8/span 5}
.f-mark{
  grid-column:1/-1;margin-top:clamp(56px,7vw,110px);font-family:var(--serif);font-weight:700;
  text-transform:uppercase;font-size:clamp(2rem,10.6vw,9.9rem);line-height:.86;letter-spacing:-.035em;
  color:transparent;-webkit-text-stroke:1px rgba(242,236,224,.34);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;
}
.colophon{grid-column:1/-1;margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line-soft);padding-block:20px 26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;opacity:.42}
@media(max-width:900px){.f-about,.f-contact{grid-column:1/-1}.f-contact{margin-top:34px}}

/* ── entrance ──────────────────────────────────────────────── */
.rise{animation:rise .9s cubic-bezier(.16,.8,.3,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── inner-page header (reuses the h2 scale for a page's H1) ── */
.page-head{padding-block:clamp(140px,15vw,220px) clamp(8px,1vw,16px)}
.page-h1{
  font-family:var(--serif);margin:0 0 .3em;font-weight:600;
  font-variation-settings:'opsz' 110,'SOFT' 0,'WONK' 1;
  font-size:clamp(2.15rem,4.7vw,4.3rem);line-height:.98;letter-spacing:-.024em;
  text-transform:uppercase;max-width:19ch;
}
.page-col{grid-column:1/span 8}
@media(max-width:900px){.page-col{grid-column:1/-1}}
.field-row{display:flex;gap:clamp(16px,2.4vw,32px);align-items:baseline;padding-block:18px}
.field-row .idx{min-width:2.6em}
.field-row .fname{font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.2rem)}
.step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px) clamp(20px,2.4vw,34px)}
@media(max-width:760px){.step-list{grid-template-columns:repeat(2,1fr)}}
.step-item .label{display:block;margin-bottom:.6em;opacity:.55}
.plain-list{margin:0;padding:0;list-style:none}
.plain-list li{padding-block:16px;display:flex;gap:1em}
.plain-list li::before{content:'—';opacity:.45}

/* ── forms ─────────────────────────────────────────────────── */
.form-col{max-width:44rem}
.field{margin-block:0 clamp(26px,3vw,38px)}
.field label{
  display:block;font-family:var(--sans);font-weight:500;font-size:clamp(10.5px,.78vw,12.5px);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:.9em;
}
.field input,
.field select,
.field textarea{
  width:100%;display:block;background:transparent;color:var(--paper);
  font-family:var(--serif);font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.6em .1em;-webkit-appearance:none;appearance:none;
}
.field textarea{border:1px solid var(--line);padding:.85em;min-height:8em;resize:vertical}
.field select{
  border:1px solid var(--line);padding:.7em .8em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2ECE0' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:11px 7px;
}
.field select option{background:var(--field);color:var(--paper)}
.field input::placeholder,
.field textarea::placeholder{color:var(--paper);opacity:.4}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.mark:focus-visible,
.tlink:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.mark{background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0}
.form-note{max-width:44rem;margin-block:0 clamp(18px,2vw,26px)}
.form-actions{margin-top:clamp(30px,3.4vw,44px)}