
:root{--p:#e8e5dc;--i:#17201d;--g:#5c7061;--gp:#cbd0c6;--gd:#879688;--r:#a65f43;--s:#d8c5af;--l:rgba(23,32,29,.25);--ser:Iowan Old Style,Palatino Linotype,Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--p);color:var(--i);font:16px/1.5 var(--ser)}a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1px}a:focus-visible{outline:3px solid var(--r);outline-offset:4px}.note{padding:9px 18px;background:var(--i);color:var(--p);font-size:12px;letter-spacing:.04em;text-align:center}.site{max-width:1440px;margin:auto;padding:24px 32px 60px}.header{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--i)}.wordmark{text-decoration:none;font-weight:650}.nav{display:flex;gap:24px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.nav a{text-decoration:none}.nav a:hover,.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.35em}.view{display:none}.view:target{display:block}.view:target~#home{display:none}#home{display:block}.k,.meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.k{color:var(--g)}h1,h2,h3,p{margin-top:0}.footer{display:flex;justify-content:space-between;margin-top:90px;padding-top:12px;border-top:1px solid var(--i);font-size:12px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.hero{padding:74px 0 62px;border-bottom:1px solid var(--i)}.hero .k{grid-column:1/3}.hero h1{grid-column:3/11;margin:54px 0 0;font:clamp(50px,6.2vw,96px)/.92 var(--ser);letter-spacing:-.057em}.intro{grid-column:7/12;margin:30px 0 0;font-size:22px;line-height:1.25}.mark{grid-column:1/5;grid-row:2;position:relative;min-height:290px;margin-top:32px;overflow:hidden;background:linear-gradient(138deg,var(--gp),var(--gd));border-radius:128px 0 0}.mark:before,.mark:after{content:"";position:absolute;display:block}.mark i{display:none}.work:before{width:110%;height:55%;bottom:-9%;left:-12%;background:var(--g);border-radius:50%}.work:after{width:57%;height:56%;right:0;top:0;background:var(--r);border-radius:0 0 0 120px}.academic{background:linear-gradient(145deg,#c7ceca,var(--gp))}.academic:before{width:82%;height:82%;left:-25%;bottom:-29%;background:var(--r);border-radius:50%}.academic:after{width:62%;height:62%;right:-10%;top:-10%;background:var(--g);border-radius:50%}.insights{background:linear-gradient(145deg,var(--s),var(--gp))}.insights:before{width:76%;height:76%;right:-22%;bottom:-34%;background:var(--g);border-radius:50%}.insights:after{width:70%;height:42%;left:0;top:0;background:var(--r);border-radius:0 0 105px 0}.section{padding:62px 0}.head{grid-column:1/4}.head h2{margin:18px 0 0;font:44px/.98 var(--ser);letter-spacing:-.045em}.boxes{grid-column:5/13;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.box{display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:22px;border-top:1px solid var(--i)}.box h3{margin:80px 0 17px;font:30px/1.05 var(--ser);letter-spacing:-.03em}.box p,.timeline p,.research p{margin:0;font-size:16px;line-height:1.5}.a{background:linear-gradient(140deg,var(--gp),var(--gd))}.b{background:linear-gradient(142deg,var(--s),#c99075)}.c{background:linear-gradient(145deg,var(--i),#385148);color:var(--p)}.statement{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:0 -32px;padding:68px 32px;background:var(--i);color:var(--p)}.statement .k{grid-column:2/4;color:var(--gp)}.statement h2{grid-column:4/10;margin:0;font:44px/.97 var(--ser);letter-spacing:-.05em}.statement p{grid-column:10/12;margin:5px 0 0;font-size:16px;line-height:1.5}.timeline{grid-column:4/13}.timeline article{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--l)}.timeline article:first-child{border-color:var(--i)}.timeline h3{margin:0 0 7px;font:30px/1.1 var(--ser);letter-spacing:-.025em}.note2{grid-column:4/11;margin-top:20px;padding:18px 0;border-top:1px solid var(--l);font-size:12px;color:var(--g)}.researchmark{grid-column:1/5;min-height:480px}.research{grid-column:6/13}.research>h2{margin:0 0 26px;font:12px/1.2 var(--ser);letter-spacing:.08em;text-transform:uppercase;color:var(--g)}.research article{padding:27px 0;border-top:1px solid var(--l)}.research article:first-of-type{border-color:var(--i)}.research h3{max-width:640px;margin:15px 0;font:30px/1.04 var(--ser);letter-spacing:-.035em}.teaching{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:16px -32px 0;padding:54px 32px;background:linear-gradient(145deg,var(--s),#d3ad93)}.teaching .k{grid-column:2/4}.teaching h2{grid-column:4/9;margin:0;font:44px/.98 var(--ser);letter-spacing:-.045em}.teaching p{grid-column:9/12;margin:4px 0 0;font-size:16px;line-height:1.5}.downloads{grid-column:4/12;margin-top:36px;padding-top:22px;border-top:1px solid var(--l);font-size:12px}.downloads a{display:block;width:max-content;max-width:100%;margin:8px 0}.essay{grid-column:4/13}.essay article{display:grid;grid-template-columns:150px minmax(0,1fr) 105px;gap:18px;padding:27px 0;border-top:1px solid var(--l)}.essay article:first-child{border-color:var(--i)}.essay h3{margin:0 0 8px;font:30px/1.03 var(--ser);letter-spacing:-.035em}.essay p{grid-column:2/3;max-width:590px;margin:0;font-size:16px;line-height:1.5}.status{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--g);text-align:right}.editorial{margin-top:28px;padding:22px 0;border-top:1px solid var(--l);font:22px/1.25 var(--ser)}.home{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;min-height:650px;padding:80px 0 56px;border-bottom:1px solid var(--l)}.home .k{grid-column:1/3}.home h1{grid-column:3/10;align-self:center;margin:0;font:clamp(48px,6.6vw,106px)/.94 var(--ser);letter-spacing:-.055em}.home .mark{grid-column:10/13;align-self:end;margin:0;background:var(--g)}.home .mark:before{width:74%;height:74%;right:-30%;bottom:-32%;background:#456053;border-radius:50%}.home .mark:after{width:65%;height:52%;right:0;top:0;background:var(--r);border-radius:0 0 0 120px}.home p{grid-column:3/7;align-self:end;margin:40px 0 0;font:22px/1.25 var(--ser)}.home .signal{grid-column:8/10;align-self:end;margin:0;padding-left:16px;border-left:1px solid var(--i);font:12px/1.4 var(--ser)}.homeboxes{padding:56px 0}.homeboxes>.k{grid-column:1/3}.links{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--l);font:30px/1.1 var(--ser)}
@media(max-width:1080px){.note{padding:8px 15px;text-align:left;font-size:12px}.site{padding:16px 16px 42px}.header{align-items:flex-start;padding-top:10px}.nav{gap:13px;font-size:12px;letter-spacing:.055em;flex-wrap:wrap;justify-content:flex-end}.grid,.hero,.home{display:block}.hero{padding:48px 0}.hero .k,.home .k{margin-bottom:28px;font-size:12px}.hero h1,.home h1{margin:0;font-size:clamp(47px,14vw,68px);line-height:.91}.intro{margin:30px 0 0;font-size:22px;line-height:1.25}.mark,.hero .mark,.home .mark{height:235px;min-height:0;margin:35px 0 0}.home{min-height:0;padding:48px 0 42px}.home .mark{height:274px;margin:38px 0 0}.home p{margin:30px 0 0;font-size:22px;line-height:1.25}.home .signal{margin:25px 0 0;padding:12px 0 0;border-top:1px solid var(--i);border-left:0;font-size:12px}.section{padding:44px 0}.head h2{font-size:44px}.boxes{display:block;margin-top:34px}.box{min-height:235px;margin-bottom:24px}.box h3{margin-top:58px;font-size:30px}.statement{display:block;margin:0 -16px;padding:42px 16px}.statement .k{margin-bottom:26px}.statement h2{font-size:44px}.statement p{margin-top:26px}.timeline{margin-top:34px}.timeline article,.essay article{grid-template-columns:1fr;gap:7px}.timeline h3{font-size:30px}.note2{margin-top:26px}.researchmark{height:270px;min-height:0;margin:0 0 34px}.research>h2{margin-bottom:20px}.research h3{font-size:30px}.teaching{display:block;margin:0 -16px;padding:42px 16px}.teaching .k{margin-bottom:26px}.teaching h2{font-size:44px}.teaching p{margin-top:25px}.downloads{margin-top:30px}.essay{margin-top:34px}.essay h3{font-size:30px}.essay p{margin-top:4px}.status{text-align:left;margin-top:4px}.editorial{font-size:22px}.homeboxes{padding:42px 0 20px}.homeboxes>.k{margin-bottom:22px;font-size:12px}.links{display:block;padding-top:25px;font-size:30px}.links a{display:block;margin:14px 0}.footer{flex-direction:column;gap:8px;margin-top:64px;font-size:12px}}
/* Public-page refinement: signature marks and language control. */
:root { --signature-radius: 120px; }

/* The SFTP package is the public first version, not a prototype preview. */
.note { display: none !important; }
.downloads { display: none !important; }

.wordmark {
  font: 44px/.98 var(--ser);
  letter-spacing: -.045em;
  white-space: nowrap;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 24px;
}

.language {
  display: flex;
  gap: 7px;
  padding-left: 18px;
  border-left: 1px solid var(--l);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.language a,
.language span { color: var(--g); text-decoration: none; }
.language a[aria-current="page"] { color: var(--i); text-decoration: underline; text-underline-offset: .35em; }
.language .pending { cursor: default; }

/* The three subpage marks exhaust the pairings of light green, dark green,
   and clay red. Their fields meet on one shared edge; none overlap. */
.mark.work,
.mark.academic,
.mark.insights,
.mark.contact { background: transparent; border-radius: 0; }

.mark.work::before,
.mark.work::after,
.mark.academic::before,
.mark.academic::after,
.mark.insights::before,
.mark.insights::after,
.mark.contact::before,
.mark.contact::after { display: none; }

.page-mark { display: block; width: 100%; height: 100%; }

/* Marks consistently occupy the right-hand edge, as on the home signature. */
.hero .mark { grid-column: 10 / 13; grid-row: 2; min-height: 290px; }
.hero .intro { grid-column: 3 / 8; grid-row: 2; }
.researchmark { display: none !important; }
.section .research { grid-column: 1 / 13; }

.latest { margin-top: 74px; padding-top: 18px; border-top: 1px solid var(--i); }
.latest-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: end; }
.latest-head .k { grid-column: 1 / 3; }
.latest-head h2 { grid-column: 3 / 9; margin: 0; font: 44px/.98 var(--ser); letter-spacing: -.045em; }
.latest-head a { grid-column: 10 / 13; margin-bottom: 4px; font-size: 12px; text-align: right; }
.latest-list { margin-top: 48px; }
.latest-list article { display: grid; grid-template-columns: 2fr 6fr 2fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--l); }
.latest-list article:last-child { border-bottom: 1px solid var(--l); }
.latest-list h3 { margin: 0; font: 30px/1.08 var(--ser); letter-spacing: -.025em; }
.home-insights-content { grid-column: 4 / 13; }
.explore-insights { display: block; margin: 3px 0 28px; font-size: 12px; text-align: right; }
.home-insights-content .editorial { margin: 0; border-top: 0; }
.home-insights-content .latest-list { margin-top: 48px; }
.portrait-panel { grid-column: 4 / 13; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 16px; align-items: end; }
.portrait-frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; margin: 0; background: var(--g); }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(.93); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; background: var(--g); mix-blend-mode: color; opacity: .22; pointer-events: none; }
.portrait-copy { align-self: end; margin: 0; padding: 0 0 16px; font: 30px/1.12 var(--ser); letter-spacing: -.03em; }

.insight-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.insight-filters button { appearance: none; padding: 8px 11px; border: 1px solid var(--l); border-radius: 999px; background: transparent; color: var(--i); font: 12px/1 var(--ser); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.insight-filters button:hover,
.insight-filters button[aria-pressed="true"] { border-color: var(--i); background: var(--i); color: var(--p); }
.insight-filters button:focus-visible { outline: 3px solid var(--r); outline-offset: 3px; }
.essay[data-insights-archive] { border-bottom: 1px solid var(--l); }
.insight-filters[hidden],
[data-insights-archive] article[hidden] { display: none; }
.insight-index [data-insights-archive] { grid-column: 4 / 13; min-width: 0; }
.insight-index .insight-filters { margin: 0 0 24px; }
.insight-index .latest-list { margin-top: 0; border-top: 1px solid var(--l); }
.insight-index .latest-list article {
  grid-template-columns: minmax(0, 4.5fr) minmax(155px, 1.6fr);
  gap: 8px 24px;
}
.insight-index .latest-list article > .meta { grid-column: 1; grid-row: 1; }
.insight-index .latest-list article > h3 { grid-column: 1; grid-row: 2; }
.insight-index .latest-list article > .insight-list-aside { grid-column: 2; grid-row: 1 / 3; }
.insight-index .latest-list article:first-child { border-top: 0; }
.insight-date { font-size: 12px; color: var(--g); white-space: nowrap; }
.home-insights-content .insight-date { justify-self: end; }
.insight-list-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }

@media (max-width: 1080px) {
  .wordmark { font-size: 30px; }
  .header-tools { max-width: 68%; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
  .language { padding-left: 0; border-left: 0; font-size: 12px; }
  /* The Raster & Garten form is composed for a near-square field.  Keep that
     field intact when the layout changes: stretching it across a tablet-width
     mobile flow changes the geometry of the mark itself. */
  .mark,
  .hero .mark,
  .home .mark {
    width: min(100%, 320px);
    height: auto !important;
    min-height: 0;
    aspect-ratio: 320 / 290;
    margin-right: 0;
    margin-left: auto;
  }
  .latest { margin-top: 52px; }
  .latest-head { display: block; }
  .latest-head .k { margin-bottom: 22px; }
  .latest-head h2 { font-size: 44px; }
  .latest-head a { display: inline-block; margin-top: 22px; }
  .latest-list { margin-top: 32px; }
  .latest-list article { grid-template-columns: 1fr; gap: 8px; }
  .latest-list h3 { font-size: 30px; }
  .insight-filters { margin-bottom: 22px; }
}
.hero .mark{grid-column:10/13;grid-row:2;min-height:290px}.hero .intro{grid-column:3/8;grid-row:2}.article{max-width:800px;margin:78px auto 0}.article .k{margin-bottom:30px}.article h1{margin:0 0 28px;font:clamp(50px,6.2vw,96px)/.92 var(--ser);letter-spacing:-.057em}.article .summary{max-width:620px;font:22px/1.32 var(--ser)}.article .article-status{margin-top:48px;padding:24px 0;border-top:1px solid var(--l);border-bottom:1px solid var(--l);font-size:12px}.back{display:inline-block;margin-top:62px;font-size:12px}@media(max-width:1080px){.article{margin-top:48px}.article .summary{font-size:22px}.article h1{font-size:clamp(46px,14vw,68px)}}

/* Masterform 06: one exact SVG geometry across the complete page family. */
.home .mark,
.hero .mark {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 800 / 560;
  overflow: hidden;
  background: transparent !important;
  border-radius: 0 !important;
}
.home .mark::before,
.home .mark::after { display: none; }
@media (max-width: 1080px) {
  .home .mark,
  .hero .mark { aspect-ratio: 800 / 560; }
}

/* The three overview cards continue the colour order of each page's hero sign.
   They are flat fields, not decorative gradients. */
.homeboxes .box.a { background: #5c7061; color: #fff; }
.homeboxes .box.b { background: #a65f43; color: #fff; }
.homeboxes .box.c { background: #456053; color: #fff; }

.site:has(.mark.work) .box.a { background: #cbd0c6; color: var(--i); }
.site:has(.mark.work) .box.b { background: #a65f43; color: #fff; }
.site:has(.mark.work) .box.c { background: #456053; color: #fff; }

.site:has(.mark.insights) .box.a { background: #879688; color: var(--i); }
.site:has(.mark.insights) .box.b { background: #cbd0c6; color: var(--i); }
.site:has(.mark.insights) .box.c { background: #a65f43; color: #fff; }

/* Academic continues in the same flat-field language, with two real content
   blocks rather than an invented third topic. */
.site:has(.mark.academic) .statement,
.site:has(.mark.academic) .teaching {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(50% - 8px);
  min-height: 280px;
  margin: 16px 0 0;
  padding: 13px;
  border-top: 1px solid var(--i);
}
.site:has(.mark.academic) .statement { float: left; background: #cbd0c6; color: var(--i); }
.site:has(.mark.academic) .teaching { float: right; background: #a65f43; color: #fff; }
.site:has(.mark.academic) .statement .k,
.site:has(.mark.academic) .teaching .k { display: block; color: inherit; }
.site:has(.mark.academic) .statement h2,
.site:has(.mark.academic) .teaching h2 {
  display: block;
  margin: 76px 0 17px;
  font: 30px/1.05 var(--ser);
  letter-spacing: -.03em;
}
.site:has(.mark.academic) .statement p,
.site:has(.mark.academic) .teaching p { display: block; margin: 0; font-size: 16px; line-height: 1.5; }
.site:has(.mark.academic) .downloads { clear: both; }
.site:has(.mark.academic) .footer { clear: both; }

@media (min-width: 1081px) {
  .home .mark,
  .hero .mark { aspect-ratio: 1 / 1; }
}

@media (max-width: 1080px) {
  .home,
  .hero { display: flow-root !important; }
  .home .mark,
  .hero .mark {
    float: right;
    width: min(35%, 260px);
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 30px 0 18px 16px;
  }
  .home .signal { clear: both; }
  .site:has(.mark.academic) .statement,
  .site:has(.mark.academic) .teaching {
    float: none;
    width: 100%;
    min-height: 235px;
  }
}

/* Three overview fields each occupy the same three-column measure as the
   desktop hero square. */
@media (min-width: 1081px) {
  .boxes { grid-column: 4 / 13; }
}

/* Academic uses the same three-field vocabulary as the other sections.
   The fields continue the Academic page mark: deep green, pale sage, clay. */
.site:has(.mark.academic) .academic-boxes {
  grid-column: 4 / 13;
  width: auto;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Academic starts with one unbroken research question before the supporting
   text and the page sign split into their respective fields. */
@media (min-width: 1081px) {
  /* One stable three-column orientation field across the page family. */
  .hero .k { grid-column: 1 / 4; grid-row: 1; align-self: start; }
  .hero h1 {
    grid-column: 4 / 13;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
  }
  .hero .intro { grid-column: 4 / 9; }
  .home .k { grid-column: 1 / 4; }
  .home p { grid-column: 4 / 8; }
  .home h1 {
    grid-column: 3 / 11;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
  }
  .home .mark { grid-row: 2; }
  .home p { grid-row: 2; }
  .home .signal { grid-row: 2; }
  .site:has(.mark.academic) .hero .intro { grid-row: 2; }
  .site:has(.mark.academic) .hero .mark { grid-row: 2; }
}

/* Home follows the same hero grammar as every other page: the stable
   orientation column and the headline share a row; explanation and mark
   form the quieter second row.  The portrait repeats the mark's exact
   right-hand measure rather than becoming a separate oversized feature. */
@media (min-width: 1081px) {
  /* The orientation label and the headline form one top-aligned first row. */
  .home .k { grid-row: 1; align-self: start; }
  .portrait-panel { display: contents; }
  .portrait-frame {
    grid-column: 10 / 13;
    grid-row: 1;
    width: 100%;
    align-self: start;
  }
  .portrait-copy {
    grid-column: 4 / 9;
    grid-row: 1;
    align-self: start;
    padding-top: 8px;
    padding-bottom: 0;
  }
}
.academic-box {
  min-height: 280px;
  padding: 13px;
  border-top: 1px solid var(--i);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.academic-box .k { color: inherit; }
.academic-box h2 {
  margin: 76px 0 17px;
  font: 30px/1.05 var(--ser);
  letter-spacing: -.03em;
}
.academic-box p { margin: 0; font-size: 16px; line-height: 1.5; }
.academic-box.continues { background: #456053; color: #fff; }
.academic-box.teaching-card { background: #cbd0c6; color: var(--i); }
.academic-box.research-thread { background: #a65f43; color: #fff; }
.site:has(.mark.academic) .research { grid-column: 4 / 13; }

/* The left-hand column is the page family's stable orientation line. */
.site:has(.mark.work) .statement .k { grid-column: 1 / 4; }

/* Work's “How I work” is a continuation of the reading surface, not a
   separate colour event.  It follows the home page's quiet ivory field. */
.site:has(.mark.work) .statement {
  margin: 0;
  padding: 68px 0;
  background: var(--p);
  color: var(--i);
  border-top: 1px solid var(--i);
}
.site:has(.mark.work) .statement .k { color: var(--g); }

@media (max-width: 1080px) {
  .site:has(.mark.work) .statement { padding: 42px 0; }
  .site:has(.mark.academic) .academic-boxes {
    display: grid;
    width: 100%;
    margin-top: 34px;
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .academic-box { min-height: 235px; }
  .home-insights-content { margin-top: 34px; }
  .explore-insights { text-align: left; }
  .portrait-panel { grid-template-columns: 1fr; margin-top: 34px; }
  .portrait-copy { padding: 0; font-size: 30px; }
}

/* Contact carries the same orientation-column structure as the public pages. */
.connect-links { grid-column: 4 / 13; }
.connect-email { padding: 20px 0; border-bottom: 1px solid var(--l); }
.connect-email-address { display: flex; justify-content: space-between; gap: 12px; font: 22px/1.25 var(--ser); text-decoration: none; overflow-wrap: anywhere; }
.connect-email-address span:last-child { flex: none; }
.pgp-link { display: block; width: max-content; max-width: 100%; margin-top: 4px; color: var(--g); font: 14px/1.4 var(--ser); text-decoration: none; }
.legal-page { max-width: 900px; margin: 0 auto; padding: 74px 0 62px; }
.legal-page h1 { margin: 42px 0 28px; font: clamp(50px, 6.2vw, 96px)/.95 var(--ser); letter-spacing: -.055em; }
.legal-page .summary { max-width: 640px; font: 24px/1.25 var(--ser); }
.legal-toc { display: flex; gap: 28px; padding: 4px 0 48px; }
.legal-toc a { font-size: 14px; text-decoration: underline; }
.legal-part { padding: 42px 0 56px; border-top: 1px solid var(--i); scroll-margin-top: 24px; }
.legal-part + .legal-part { margin-top: 28px; }
.legal-part h2 { margin: 0 0 38px; font: clamp(36px, 4vw, 56px)/1 var(--ser); letter-spacing: -.04em; }
.legal-part h3 { margin: 38px 0 16px; font: 26px/1.15 var(--ser); letter-spacing: -.025em; }
.legal-part p { max-width: 72ch; line-height: 1.6; }
.legal-part .summary { margin-bottom: 36px; }
.legal-part:target { border-top-width: 3px; }
@media (max-width: 600px) {
  .header { flex-direction: column; gap: 16px; }
  .wordmark { font-size: 44px; }
  .header-tools { width: 100%; max-width: none; justify-content: space-between; align-items: flex-start; }
  .nav { justify-content: flex-start; }
  .legal-page { padding: 50px 0 30px; }
  .legal-page h1 { margin-top: 30px; }
}

.connect-links { display: flex; flex-direction: column; border-top: 1px solid var(--l); }
.connect-links > a { display: flex; justify-content: space-between; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--l); font: 22px/1.25 var(--ser); text-decoration: none; }
.connect-links a:hover { color: var(--r); }
.legal-nav { display: flex; gap: 16px; }
.legal-nav a { text-decoration: none; }
.legal-nav a:hover,
.legal-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }

@media (max-width: 1080px) {
  .connect-links { margin-top: 34px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form label { grid-column: 1 / -1; }
  .legal-nav { order: 2; }
}

/* The first content section opens from the hero. Every following section
   begins with the page-wide orientation line used by header and footer. */
.homeboxes + .section,
.section + .section,
.statement + .section { border-top: 1px solid var(--i); }

/* A section divider already establishes the first boundary. Do not repeat it
   immediately inside the section's first list item. */
.section + .section .latest-list article:first-child,
.section + .section .timeline article:first-child,
.section + .section .research article:first-of-type,
.section + .section .essay article:first-child,
.statement + .section .timeline article:first-child { border-top: 0; }

/* Homepage section rhythm: use the desktop hero rule as the shared reference.
   The Current Practice fields receive one additional step below their solid
   colour blocks so the following divider has the same optical calm. */
@media (min-width: 1081px) {
  .home { border-bottom-color: var(--i); }
  .homeboxes { padding: 56px 0 72px; }
  .homeboxes + .portrait-section,
  .portrait-section + .home-insights { padding: 56px 0; }
}

/* The public site uses one editorial serif throughout. Existing size, weight,
   casing, tracking, and colour rules continue to provide the hierarchy. */
button,
input,
textarea,
select {
  font-family: var(--ser);
}

/* One shared graphite rule anchors every page-scale division. */
:root { --section-rule: #17201d; }
.header,
.footer { border-top-color: var(--section-rule); }
.hero,
.home { border-bottom-color: var(--section-rule); }
.homeboxes + .section,
.section + .section,
.statement + .section { border-top-color: var(--section-rule); }

/* Work background and Academic thesis tables use the same complete, soft-grey
   rule: one line before the list, between records, and after the final record. */
.timeline,
.research {
  border-top: 1px solid var(--l);
}
.timeline article,
.research article {
  border-color: var(--l);
}
.timeline article:first-child,
.research article:first-of-type {
  border-top: 0;
}
.timeline article:last-child,
.research article:last-child {
  border-bottom: 1px solid var(--l);
}

/* Home sections 02 and 03 share the left-hand section-heading baseline:
   supporting copy begins alongside the heading, while the archive link sits
   immediately above its list. */
@media (min-width: 1081px) {
  .portrait-copy {
    align-self: start;
    padding: 36px 0 0;
    font: 22px/1.25 var(--ser);
    letter-spacing: 0;
  }
  .home-insights-content {
    padding-top: 0;
  }
  .home-insights-content .editorial {
    font: 22px/1.25 var(--ser);
  }
  .home-insights-content .explore-insights {
    margin: 28px 0 12px;
    text-align: right;
  }
  .home-insights-content .latest-list {
    margin-top: 0;
  }
  .home-insights-content .latest-list {
    border-top: 1px solid var(--l);
  }
  .home-insights-content .latest-list article {
    border-color: var(--l);
  }
  .home-insights-content .latest-list article:first-child {
    border-top: 0;
  }
}

/* Home practice cards are concise propositions: one headline, followed
   directly by its supporting text, rather than vertically distributed fields. */
.box,
.academic-box {
  display: block;
}
.box .meta,
.academic-box .k {
  margin-bottom: 17px;
}
.box h3 {
  margin: 0 0 17px;
}
.box p,
.academic-box p {
  margin: 0;
}
.academic-box h2 {
  margin: 0 0 17px;
}

/* Home hero — Work's reading order, retained as a distinct composition:
   the three-line proposition leads; the explanation and master form form a
   quieter second row below it. */
@media (min-width: 1081px) {
  .home {
    grid-template-rows: auto auto;
    row-gap: 58px;
    min-height: 0;
    padding: 80px 0 62px;
  }
  .home h1 {
    grid-column: 4 / 13;
    grid-row: 1;
    margin: 0;
  }
  .home-hero-line { display: block; white-space: nowrap; }
  .home p {
    grid-column: 4 / 9;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }
  .home .mark {
    grid-column: 10 / 13;
    grid-row: 2;
    align-self: start;
    width: 100%;
    margin: 0;
  }
}

/* Work section 02 follows Home’s About composition: the section marker and
   heading share the left orientation field; the statement begins on the
   heading baseline and occupies two-thirds of the right content field. */
@media (min-width: 1081px) {
  .site:has(.mark.work) .statement .k {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;
  }
  .site:has(.mark.work) .statement h2 {
    grid-column: 1 / 4;
    grid-row: 2;
    align-self: start;
    margin: 18px 0 0;
  }
  .site:has(.mark.work) .statement p {
    grid-column: 4 / 10;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding-top: 36px;
    font: 22px/1.25 var(--ser);
  }
}

/* The authorship note belongs to the site-wide footer, not to one page's
   professional history. It remains legible without competing with the legal
   links or the page content above. */
.footer {
  flex-wrap: wrap;
}

.footer-disclaimer {
  flex-basis: 100%;
  max-width: 34rem;
  margin: 0 0 16px;
  color: var(--g);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

@media (max-width: 1080px) {
  .footer-disclaimer {
    margin: 0 0 8px;
  }
}

/* Work section 02 uses precisely the Home About section grammar: its complete
   left field contains the label and heading, while the supporting text begins
   at the same top baseline in the right content field. */
@media (min-width: 1081px) {
  .site:has(.mark.work) .statement .head {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;
  }
  .site:has(.mark.work) .statement .head .k {
    grid-column: auto;
    grid-row: auto;
    color: var(--g);
  }
  .site:has(.mark.work) .statement .head h2 {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    margin: 18px 0 0;
  }
  .site:has(.mark.work) .statement p {
    grid-column: 4 / 10;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding-top: 36px;
    font: 22px/1.25 var(--ser);
  }
}

/* Footer is one desktop line: name at the left, authorship statement centred,
   and legal links with copyright grouped at the right. */
.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.footer-name { justify-self: start; }
.footer-disclaimer {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: 0;
  text-align: center;
}
.footer-legal {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .footer-disclaimer,
  .footer-legal {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}

/* Work Learning continues the Career table rather than becoming a card:
   year, programme, and focus retain the same quiet, ruled reading surface. */
@media (min-width: 1081px) {
  .site:has(.mark.work) .learning-table article {
    grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  }
  .site:has(.mark.work) .learning-table article > p {
    grid-column: auto;
    margin: 0;
  }
}

/* Footer metadata is one typographic register: all elements use the same
   editorial serif, size, and graphite tone. */
.footer,
.footer-name,
.footer-disclaimer,
.footer-legal,
.footer-legal a {
  color: var(--i);
  font: 12px/1.35 var(--ser);
}

/* Learning uses the Career-record structure exactly: the year forms the first
   field; programme and provider are the heading; the description follows
   beneath it in the same content field. */
@media (min-width: 1081px) {
  .site:has(.mark.work) .learning-table article {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .site:has(.mark.work) .learning-table article > div:last-child > p {
    margin: 0;
  }
}

/* Academic section 01 now makes teaching itself the central subject.  It uses
   the established left orientation field and a generous reading measure,
   rather than retaining the superseded three-theme card group. */
.academic-teaching-copy {
  grid-column: 4 / 10;
  align-self: start;
  padding-top: 36px;
  font: 22px/1.25 var(--ser);
}
.academic-teaching-copy p { margin: 0 0 24px; }
.academic-teaching-copy p:last-child { margin-bottom: 0; }

@media (max-width: 1080px) {
  .academic-teaching-copy { margin-top: 34px; padding-top: 0; }
}

.insight-index .insight-read { font-size: 12px; white-space: nowrap; }
.insight-index h3 a { text-decoration: none; }
.insight-index h3 a:hover { text-decoration: underline; }
.insight-article { max-width: 940px; margin: 88px auto 0; }
.insight-article-header { padding-bottom: 36px; border-bottom: 1px solid var(--i); }
.insight-article-header .k { margin-bottom: 28px; }
.insight-article-header h1 { max-width: 850px; margin: 0 0 30px; font: clamp(48px, 6.2vw, 80px)/.98 var(--ser); letter-spacing: -.05em; }
.insight-byline { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--g); }
.insight-article-body { max-width: 760px; margin: 48px auto 0; font-size: 19px; line-height: 1.65; }
.insight-article-body > p { margin: 0 0 1.35em; }
.insight-article-body > p:first-child { font-size: 23px; line-height: 1.4; }
.insight-article-body h2 { margin: 2.2em 0 .65em; padding-top: .7em; border-top: 1px solid var(--l); font: 38px/1.12 var(--ser); letter-spacing: -.035em; }
.insight-article-body ul { padding-left: 1.3em; margin: 0 0 1.5em; }
.insight-article-body li { margin: 0 0 .35em; }
.insight-article-body a { overflow-wrap: anywhere; }
.insight-figure { max-width: 580px; margin: 54px auto 62px; padding: 16px; background: #f8f6ef; border: 1px solid var(--l); }
.insight-figure a { display: block; max-width: 480px; margin: auto; }
.insight-figure img { display: block; width: 100%; height: auto; }
.insight-figure figcaption { max-width: 480px; margin: 15px auto 0; font-size: 15px; line-height: 1.45; color: var(--i); }
@media (max-width: 1080px) {
  .home-insights-content .insight-date { justify-self: start; }
  .insight-index [data-insights-archive] { margin-top: 34px; }
  .insight-index .latest-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .insight-index .latest-list article > .meta { grid-column: 1; grid-row: 1; }
  .insight-index .latest-list article > h3 { grid-column: 1; grid-row: 2; }
  .insight-index .latest-list article > .insight-list-aside { grid-column: 1; grid-row: 3; }
  .insight-list-aside { align-items: flex-start; gap: 20px; margin-top: 12px; }
}
@media (max-width: 650px) {
  .site:has(.insight-article) .header { display: block; }
  .site:has(.insight-article) .header-tools { max-width: none; justify-content: flex-start; margin-top: 18px; }
  .site:has(.insight-article) .nav { justify-content: flex-start; }
  .insight-article { margin-top: 52px; }
  .insight-article-header { padding-bottom: 28px; }
  .insight-article-header h1 { font-size: clamp(38px, 10vw, 62px); overflow-wrap: break-word; }
  .insight-article-body { margin-top: 36px; font-size: 18px; line-height: 1.6; }
  .insight-article-body > p:first-child { font-size: 21px; }
  .insight-article-body h2 { font-size: 32px; }
  .insight-figure { margin: 40px 0 48px; padding: 8px; }
  .insight-figure figcaption { font-size: 14px; }
}
