.entry-body,.lead{white-space:pre-line}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-top:22px}.media-grid:empty{display:none}.media-grid figure{margin:0}.media-grid img,.media-grid video{display:block;width:100%;max-height:600px;object-fit:contain;border-radius:12px;background:#ebe9de}.media-grid figcaption{font-size:12px;line-height:1.6;color:#686858;margin-top:8px}

.pdf-download{display:block;padding:22px;border:1px solid #80917b;border-radius:12px;background:#edf0e5;color:#244a32;font-weight:700;text-decoration:none}.pdf-download:hover{background:#dfe8d4}.draft-banner{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#244a32;color:#fff;padding:18px 5vw;font:15px system-ui}.draft-banner a{color:white;margin-left:auto}.section-help{color:#53604e;line-height:1.6}

/* A reserved outer margin keeps the root pattern away from all page content. */
:root{--pattern-rail:clamp(100px,16vw,260px);--title-green:#0c852a}
body:has(.sub)::after{content:'';position:fixed;top:94px;right:0;bottom:0;width:var(--pattern-rail);background:url('/assets/root-network.png') center top/520px auto repeat-y;mix-blend-mode:multiply;opacity:.28;mask-image:linear-gradient(to right,transparent,#000 60%);-webkit-mask-image:linear-gradient(to right,transparent,#000 60%);pointer-events:none;z-index:0}
.sub{position:relative;width:calc(100% - var(--pattern-rail) - 64px);max-width:1000px;margin-left:auto;margin-right:calc(var(--pattern-rail) + 32px);padding:0;z-index:1}
.sub :is(h1,h2,h3,h4,h5,h6),.sub .eyebrow{color:var(--title-green)}
.entry>div{min-width:0}.sub :is(h1,h2,h3,p,a){overflow-wrap:anywhere}
@media(max-width:900px){.entry{grid-template-columns:110px minmax(0,1fr);gap:20px}}
@media(max-width:650px){:root{--pattern-rail:30px}.sub{width:calc(100% - var(--pattern-rail) - 44px);margin-left:22px;margin-right:calc(var(--pattern-rail) + 22px)}body:has(.sub)::after{top:75px;background-size:360px auto;opacity:.2}.entry{grid-template-columns:minmax(0,1fr);gap:8px}}

/* Scroll changes the texture position, never the margin or the text layout. */
body:has(.sub)::after{background-position:center var(--root-scroll-y,0px)}
@media(prefers-reduced-motion:reduce){body:has(.sub)::after{background-position:center top}}

/* Text colors mixed with 30% black; green headings retain their chosen color. */
body:has(.sub){--ink:#221e18;--muted:#5b584e}
.sub .lead,.sub .entry p{color:#4f4a40}
.sub .lead{font-size:19.55px}.sub .entry .entry-body{font-size:16.1px}
.sub .tags span{color:#554b3b}.sub .media-grid figcaption{color:#49493e}
.thesis-group{position:relative;isolation:isolate}
.thesis-group .entry{position:relative}
.thesis-group .entry-content{padding-left:32px}
.thesis-group .thesis-child .entry-content{padding-left:56px}
.thesis-group .thesis-child{border-top:0}
.thesis-group .thesis-child::before{content:'';position:absolute;top:0;left:197px;right:7%;height:1px;background:var(--line)}
.thesis-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.thesis-connections path{fill:none;stroke:#7e4f1f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.thesis-connections circle{fill:#7e4f1f;stroke:var(--paper);stroke-width:2}
@media(max-width:900px){.thesis-group .thesis-child::before{left:162px}}
@media(max-width:650px){.thesis-group .thesis-child::before{left:32px;right:5%}.thesis-group .entry-content{padding-left:28px}.thesis-group .thesis-child .entry-content{padding-left:48px}}

/* A lighter root strand beneath the thesis label, in the left-hand gutter. */
.thesis-connections{opacity:.5}
.thesis-connections path{stroke-width:2.4}
.thesis-group .entry-content,.thesis-group .thesis-child .entry-content{padding-left:0}
@media(max-width:650px){.thesis-group .entry-content{padding-left:28px}.thesis-group .thesis-child .entry-content{padding-left:48px}}

/* Simple dots connect the three aligned thesis nodes. */
.thesis-connections path{stroke-width:2.4;stroke-dasharray:.1 7;stroke-linecap:round}

/* Consistent paragraph alignment and a separate, half-sized recruitment flyer. */
.sub .lead,.sub .entry p{max-width:none;text-align:left}
.sub .entry-body,.sub .lead{overflow-wrap:break-word;word-break:normal}
.media-grid:has(.thesis-flyer){grid-template-columns:minmax(0,1fr);container-type:inline-size}
.media-grid .thesis-flyer{grid-column:1/-1;order:-1;margin-bottom:8px}
.media-grid .thesis-flyer img{width:calc((100% - 18px)/4);height:auto;max-height:300px;object-fit:contain;object-position:left top;background:transparent;border-radius:6px}
@container(max-width:537px){.media-grid .thesis-flyer img{width:50%}}

/* Album art plays as part of the page, without a player frame. */
.album-artwork{margin:24px 0 0;overflow:hidden;border-radius:12px;background:#f3f3e0}
.album-loop{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;pointer-events:none}
/* One landscape piece, then a measured row of portrait creative work. */
.media-grid.advertising-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.advertising-gallery figure{min-width:0}
.advertising-gallery img,.advertising-gallery video{width:100%;height:auto;aspect-ratio:9/16;max-height:none;object-fit:contain;background:#edece2;border:1px solid rgba(126,79,31,.12);box-sizing:border-box}
.advertising-gallery .advertising-landscape{grid-column:1/-1;width:100%;margin:0 0 8px}
.advertising-gallery .advertising-landscape img{aspect-ratio:3/2;max-height:420px;object-fit:contain}
@media(max-width:650px){.media-grid.advertising-gallery{grid-template-columns:minmax(0,1fr);gap:24px}.advertising-gallery figure:not(.advertising-landscape){width:min(100%,360px);justify-self:center}.advertising-gallery .advertising-landscape img{max-height:none}}

/* Centre the academic media; preserve their proportions at the smaller sizes. */
.media-grid .thesis-flyer{display:flex;flex-direction:column;align-items:center;text-align:center}
.media-grid .thesis-flyer img{object-position:center}
.media-grid .thesis-flyer figcaption{text-align:center}
.media-grid .vr-screenshot{width:50%;justify-self:center}
.media-grid .vr-screenshot img{max-height:none;height:auto}
.advertising-gallery .advertising-landscape{width:50%;justify-self:center}

/* Keep the full name readable beside navigation on narrow screens. */
header .brand{white-space:nowrap}
@media(max-width:480px){body:has(.sub) header{height:auto;min-height:93px;padding:16px 0;gap:14px;flex-wrap:wrap}body:has(.sub) header nav{flex-wrap:wrap}}