/* Hilora wordmark: a continuous thread framing readable text. */
.brand{align-items:flex-start;gap:0;min-width:0}
.brand-name{position:relative;display:inline-block;flex:none;width:max-content;max-width:100%;padding:0 38px 11px 46px;line-height:1.1;isolation:isolate;background:none}
.brand-name>span{display:none}
.brand-name::before{content:"";position:absolute;inset:0 0 auto;width:100%;height:54px;background:url('/thread-wordmark.svg') center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.brand-name::after{display:none}
.brand-byline{padding-left:46px;margin:0;line-height:1.35}
.composition::before{display:none}
.intro,.content,.work,.contact{position:relative}
.intro::before,.content::before,.work::before,.contact::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:40px;background:url('/thread-line.svg') center/40px 100% no-repeat;opacity:.48;pointer-events:none}
.work::before{filter:brightness(1.8);opacity:.7}
.archive-main{position:relative}
.archive-main::before{content:"";position:absolute;top:0;bottom:0;left:12px;width:35px;background:url('/thread-line.svg') center/35px 600px repeat-y;opacity:.38;pointer-events:none}
.contact::after{content:"";position:absolute;right:5%;bottom:8px;width:65px;height:40px;background:url('/thread-mark.svg') center/contain no-repeat;opacity:.7;pointer-events:none}

/* Explicit header rows prevent navigation from wrapping around the logo. */
@media(min-width:1001px){header{display:grid;grid-template-columns:minmax(230px,320px) minmax(0,1fr) auto;gap:22px;align-items:center}header nav{margin:0;max-width:none;justify-content:flex-end;gap:14px 24px}header .languages{margin:0;flex-wrap:nowrap}}
@media(min-width:701px) and (max-width:1000px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 20px;align-items:center}header .brand{grid-column:1;max-width:320px}header .languages{grid-column:2;grid-row:1;margin:0}header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-start;max-width:none;margin:0;gap:14px 26px;font-size:14px}}
@media(max-width:700px){
 header{display:grid;grid-template-columns:minmax(0,1fr) 66px;align-items:start;gap:16px 12px;padding:18px 5%}
 header .brand{grid-column:1;grid-row:1;max-width:none;width:100%;min-width:0;gap:0}
 .brand-name{font-size:30px;padding:0 34px 10px 42px;line-height:1.1;width:max-content}
 .brand-name::before{height:49px}
 header .brand-byline{font-size:11px;padding-left:0;max-width:240px;line-height:1.35}
 header .languages{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:0;width:66px;font-size:11px}
 header .languages a{display:flex;justify-content:center;align-items:center;min-height:30px;padding:4px;border:1px solid var(--line);border-radius:3px}
 header nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin:0;max-width:none;width:100%;font-size:13px;text-align:left;justify-content:start;border-top:1px solid var(--line);padding-top:8px}
 header nav a{display:flex;align-items:center;min-height:42px;line-height:1.35;padding:7px 0;overflow-wrap:anywhere}
 .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 6% 45px}
 .hero>div,.intro>div,.work>div,.about>div,.notes>div{min-width:0}
 .hero h1{font-size:clamp(40px,10vw,62px);letter-spacing:-1px}
 .composition{width:100%;max-width:360px;height:auto;aspect-ratio:1.03}
 .piece{padding:18px;font-size:clamp(17px,5vw,22px)}
 .piece small{font-size:8px;letter-spacing:.8px}
 .center{width:58px;height:58px;font-size:30px}
 .intro,.work,.about,.notes{grid-template-columns:minmax(0,1fr);gap:26px}
 .sectionhead{display:block}.sectionhead p{margin-top:18px}
 .projects,.archive-grid,.notebook-layout{grid-template-columns:minmax(0,1fr)}
 .project:last-child{grid-column:auto}.project{min-width:0;padding:24px}
 .project h3,.entry h2,.exploration-card h2{overflow-wrap:anywhere}
 .contact{display:block}.contact a{overflow-wrap:anywhere}
 .archive-main{padding:30px 6% 50px}.notebook-controls label{min-width:0;width:100%;flex-basis:100%}
 .view-buttons{gap:16px;flex-wrap:wrap}.view-buttons button{font-size:14px}
 footer{gap:12px;flex-wrap:wrap}
 .intro::before,.content::before,.work::before,.contact::before,.archive-main::before{left:1px;width:15px;opacity:.3}
}

/* A single continuous thread lives behind the content, never above it. */
.intro::before,.content::before,.work::before,.contact::before,.archive-main::before,.contact::after{display:none}
main{position:relative;isolation:isolate}
main>.page-thread{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:block}
.page-thread path{fill:none;stroke:#8a1aff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.3;vector-effect:non-scaling-stroke}
main>:not(.page-thread){position:relative;z-index:1}
.archive-main>.entry,.archive-main>.archive-grid,.archive-main>.notebook-layout,.archive-main>.reading,.archive-main>.outcomes{background:var(--paper,#fff)}
@media(max-width:700px){.page-thread path{stroke-width:1.2;opacity:.22}}

/* Full brand violet; content cutouts keep the crossing thread behind text. */
main>.page-thread{z-index:2}
.page-thread path{stroke:#8a1aff;opacity:1;stroke-width:1.6}
@media(max-width:700px){.page-thread path{opacity:1;stroke-width:1.4}}

/* Handwritten wordmark with its own connected thread gesture. */
header .brand{gap:0;align-items:flex-start}
header .brand-name{display:block;width:218px;max-width:100%;height:69px;padding:0;font-size:0;line-height:0;background:url('/hilora-wordmark.svg') left bottom/contain no-repeat;isolation:auto}
header .brand-name::before,header .brand-name::after{display:none}
header .brand-byline{padding-left:14px;line-height:1.35;margin-top:0}
@media(max-width:700px){header .brand-name{width:195px;height:61px;padding:0;font-size:0;line-height:0;background:url('/hilora-wordmark.svg') left bottom/contain no-repeat}header .brand-byline{padding-left:12px}}

/* Page-wide thread removed; retain only the wordmark. */
main>.page-thread{display:none}

/* Original typographic wordmark. */
header .brand-name{display:inline;width:auto;max-width:none;height:auto;padding:0;background:none;font-family:Oswald,Arial,sans-serif;font-weight:500;font-size:34px;line-height:1.1;letter-spacing:-.5px;isolation:auto}
header .brand-name>span{display:inline;color:#8a1aff}
header .brand-name::before,header .brand-name::after{display:none}
header .brand{gap:2px}
header .brand-byline{padding:0;margin:0}
@media(max-width:700px){header .brand-name{width:auto;height:auto;padding:0;background:none;font-size:30px;line-height:1.1}header .brand-byline{padding:0}}

.contact-email{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.contact-email .textlink{margin:0}.contact-email-address{font-size:15px;letter-spacing:0;user-select:all;overflow-wrap:anywhere}@media(max-width:700px){.contact-email{margin-top:22px}.contact .contact-email a{margin-top:0}}

/* Hero pilot: one shared path behind the four pieces, revealed on scroll. */
body:has(.hero){position:relative}
body:has(.hero) main{overflow:visible;isolation:auto}
body:has(.hero) header{position:relative;z-index:2;background:transparent}
.hero{position:relative;isolation:auto}
.hero>:not(.hero-stitch){position:relative;z-index:1}
.hero>.hero-stitch{position:absolute;left:0;width:100%;z-index:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.thread-fibre{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.thread-base{stroke:#8a1aff;stroke-width:2.6}
.thread-twist-a{stroke:#a955ff;stroke-width:.7;stroke-dasharray:2 7}
.thread-twist-b{stroke:#7010dc;stroke-width:.6;stroke-dasharray:2 7;stroke-dashoffset:4.5}
@media(max-width:700px){.thread-base{stroke-width:2.2}}

.thread-edge{stroke:#e9d7ff;stroke-width:3.4}

/* The approved hero stitch now continues in the same layer to contact. */
body:has(.hero) main>.hero-stitch{position:absolute;left:0;width:100%;z-index:2;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}

/* Threaded o: retain original typography and compact tagline. */
header .brand-name .brand-thread-o{display:inline-block;width:.57em;height:1em;vertical-align:-.13em;margin:0 .015em;color:#8a1aff;overflow:visible}

/* Continuous thread lettering; the final a leads into the homepage route. */
header .brand-name:has(.brand-thread-word){display:block;width:150px;height:51px;line-height:0;font-size:0;letter-spacing:0}
header .brand-thread-word{display:block;width:100%;height:100%;color:#8a1aff;overflow:visible}
header .brand:has(.brand-thread-word){gap:0}
@media(max-width:700px){header .brand-name:has(.brand-thread-word){width:140px;height:48px}}

/* Original compact wordmark, without thread decoration. */
header .brand-name{display:inline;width:auto;max-width:none;height:auto;padding:0;background:none;font-family:Oswald,Arial,sans-serif;font-weight:500;font-size:34px;line-height:1.1;letter-spacing:-.5px;isolation:auto}
header .brand-name>span{display:inline;color:#8a1aff}
header .brand-name::before,header .brand-name::after{display:none;content:none}
header .brand{gap:2px}
header .brand-byline{padding:0;margin:0}
.hero-stitch,.page-thread,.thread-flow{display:none!important}
@media(max-width:700px){header .brand-name{width:auto;height:auto;padding:0;background:none;font-size:30px;line-height:1.1}header .brand-byline{padding:0}}

/* Supplied yarn symbol beside the original wordmark. */
header .brand-name{display:flex;align-items:center;gap:0}
header .brand-yarn{display:block;width:43px;height:38px;object-fit:contain;margin-right:9px;flex:none}
header .brand-byline{padding:0}
@media(max-width:700px){header .brand-yarn{width:37px;height:33px;margin-right:7px}}

/* Compact icon-to-word spacing. */
header .brand-yarn{margin-right:2px}
@media(max-width:700px){header .brand-yarn{margin-right:2px}}