/* Approved shared typography, spacing and marker treatments. */
::selection{background:#53e5fd;color:#101010}
input,textarea{caret-color:#066d7a}
body .hub-scene .hub-node[data-node] .node-label,
body .hub-scene .hub-node[data-node][aria-current=page] .node-label{
 font-family:Infamous,cursive;font-size:18px;line-height:1.2;font-weight:400!important;
 letter-spacing:0;padding:5px 2px;max-width:calc(100% - 12px);text-wrap:balance;
}
/* A usable static baseline before the original enhancement positions each node. */
.hub-scene .hub-node:nth-of-type(1){left:calc(12.5% - 55px)}
.hub-scene .hub-node:nth-of-type(2){left:calc(37.5% - 55px)}
.hub-scene .hub-node:nth-of-type(3){left:calc(62.5% - 55px)}
.hub-scene .hub-node:nth-of-type(4){left:calc(87.5% - 55px)}
.home-revision .home-story{margin-top:66px}
.home-revision .auntie-photo{left:332px}
.home-revision .marker-ink{display:none}
.home-revision .story-text mark{
 display:inline;position:relative;color:#101010;padding:.04em .2em .03em;
 background-color:transparent;background-image:var(--marker-swipe);background-size:100% 100%;
 background-repeat:no-repeat;border-radius:0;box-shadow:none;text-shadow:none;-webkit-text-stroke:0;
 box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.home-revision .story-text .marker-pink.story-line{display:inline;margin:0}
.marker-cyan{--marker-swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 10L96 0L100 84L3 100L0 62Z' fill='%2353e5fd'/%3E%3C/svg%3E")}
.marker-pink{--marker-swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 10L96 0L100 84L3 100L0 62Z' fill='%23f519af'/%3E%3C/svg%3E")}
.work-content .portfolio-motion-link .ink-marker::before{
 height:.95em;bottom:.01em;clip-path:polygon(1% 10%,96% 0,100% 84%,3% 100%,0 62%);background:#53e5fd;
}
.work-content .portfolio-row-highlight{clip-path:polygon(1% 10%,96% 0,100% 84%,3% 100%,0 62%)}
/* The same upper header stays put; the note's typography supplies the hierarchy. */
.contact-live .shared-header{margin-bottom:48px}
.contact-composition{width:min(1100px,calc(100% - 80px));grid-template-columns:minmax(0,.86fr) minmax(0,1.74fr);gap:64px}
.contact-heading h1{font-size:64px;line-height:1.12;text-wrap:normal}
.contact-heading h1>span{display:inline}
.contact-heading h1>span:last-child{display:block;white-space:nowrap}
.contact-heart{width:28px;height:28px;margin-left:3px}
.note-row{gap:8px 12px;margin-bottom:24px;align-items:baseline}
.note-row>label{font:400 36px/1.25 Infamous,cursive;letter-spacing:0}
.note-field-wrap{flex:1 1 160px}
.note-answer{font:400 26px/1.45 Infamous,cursive;border-bottom-width:1px;min-height:54px;padding:6px 1px 9px}
.note-answer::placeholder{font:400 16px/1.4 Arial,Helvetica,sans-serif;color:#666}
.note-answer:focus{border-bottom-width:2px}
.note-answer:focus-visible{outline:2px solid #066d7a;outline-offset:4px}
.note-message .note-field-wrap{flex-basis:100%}
.note-actions{margin-top:32px}
/* Original cyan Send swipe is the marker master, including its visible resting state. */
.note-send::before{clip-path:polygon(1% 10%,96% 0,100% 84%,3% 100%,0 62%)}
.zine-top{justify-content:space-between;gap:8px}
@container toned-card (min-width:1000px) and (min-height:421px){
 .zine-stage .toned-about{isolation:isolate}
 .zine-stage .toned-about::before{content:'';position:absolute;inset:-.08em -.09em;background:#3a320c;z-index:-1}
}
@media(max-width:1023px) and (min-width:761px){
 .contact-composition{width:calc(100% - 64px);grid-template-columns:1fr;max-width:720px;gap:36px}
 .contact-heading h1{font-size:44px}.contact-heading h1>span:last-child{display:inline}
 .note-row>label{font-size:32px}
}
@media(max-width:760px){
 body .hub-scene .hub-node[data-node] .node-label{font-size:17px;line-height:1.2}
 .hub-scene .hub-node:nth-of-type(1){left:0}.hub-scene .hub-node:nth-of-type(2){left:25%}.hub-scene .hub-node:nth-of-type(3){left:50%}.hub-scene .hub-node:nth-of-type(4){left:75%}
 .home-revision .home-story{margin-top:56px}
 .home-revision .auntie-photo{left:auto;transform:translateX(2px) rotate(6deg)}
 html:not(.nav-readable) body .shared-header .hub-scene{height:calc(246px + var(--nav-thread-clearance,0px))}
 .contact-live .shared-header{margin-bottom:36px}
 .contact-composition{width:calc(100% - 40px);max-width:520px;grid-template-columns:1fr;gap:28px}
 .contact-heading h1{font-size:36px;line-height:1.16}
 .contact-heading h1>span:last-child{display:inline;white-space:normal}
 .contact-heart{width:22px;height:22px}
 .note-row{margin-bottom:24px;gap:8px 10px}.note-row>label{font-size:28px;line-height:1.25}
 .note-field-wrap{flex:1 1 156px}.note-answer{font-size:24px;min-height:50px}
 .note-actions{margin-top:28px}

}
@media(max-width:359px){
 .home-revision .home-story{margin-top:52px}
 .contact-composition{width:calc(100% - 32px)}
 .contact-heading h1{font-size:34px}.note-row>label{font-size:26px}
 .zine-top .zine-return{font-size:20px;white-space:nowrap}
}
/* Accessibility enlargement states reserve actual text space rather than clipping it. */
html.nav-readable .hub-scene{height:calc(var(--readable-node-height,160px) + 152px);--hub-logo-y:calc(var(--readable-node-height,160px) + 12px)!important}
html.toned-reading,html.toned-reading body.toned-zine{height:auto;min-height:100svh;overflow:auto}
html.toned-reading body.toned-zine{display:block}
html.toned-reading .zine-paper{height:auto;min-height:calc(100svh - 24px);grid-template-rows:auto auto auto}
html.toned-reading .zine-margin{min-height:56px;padding-block:8px;flex-wrap:wrap}
html.toned-reading .zine-stage{height:auto;min-height:0;container-type:inline-size;overflow:visible}
html.toned-reading .zine-stage .toned-sheet{container-type:inline-size;display:grid;height:auto;grid-template-columns:1fr;grid-template-rows:120px auto 420px 180px;grid-template-areas:'masthead' 'lead' 'cover' 'video';gap:18px;padding:16px}
html.toned-reading .zine-top .zine-return{white-space:normal;overflow-wrap:anywhere;flex:1 1 100%;max-width:100%}
html.toned-reading .zine-stage .toned-masthead,html.toned-reading .zine-stage .toned-about,html.toned-reading .zine-stage .toned-moving-cover,html.toned-reading .zine-stage .toned-stories-frame{position:relative;inset:auto;width:100%;height:100%;margin:0;max-width:100%;min-height:0}
html.toned-reading .toned-masthead{grid-area:masthead}html.toned-reading .toned-about{grid-area:lead}
html.toned-reading .toned-moving-cover{grid-area:cover}html.toned-reading .toned-stories-frame{grid-area:video}
@media(forced-colors:active){.home-revision .story-text mark{background:Mark;color:MarkText}}
