/* type.css (round 13, U3 + U4): typography scale and rhythm, micro-interactions and cross-document view transitions. Linked on every page right after the last stylesheet in the head (home and /work/hearthfold/, whose heads link site.css alone: in the body, right after the header and right after the body art.css link). Tokens from site.css. No JS, no HTML. Every transition 200 ms or less; everything off under prefers-reduced-motion; html.sky-paused switches the transitions off and sets the crossfade rule to none (cross-document limit: see NOTES). */
h1{letter-spacing:-.016em}
h2{letter-spacing:-.014em}
@media (min-width:1024px){h1{letter-spacing:-.02em;line-height:1.08}.sub{max-width:38em}}
.sub,.hero__body,figcaption{text-wrap:pretty}
.gate__fig{font-size:var(--fs-xl)}
@media (hover:hover) and (pointer:fine){
  .btn{transition:transform var(--dur-press) var(--ease),background-color var(--dur-ui) var(--ease)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:scale(.98)}
  .card--link,.work-card,.ccard,.offer{transition:border-color var(--dur-ui) var(--ease)}
  .card--link:hover,.work-card:hover{border-color:var(--bl-obj)}
}
input[type=text],input[type=email],input[type=url],textarea{transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=url]:focus-visible,textarea:focus-visible{border-color:var(--bl-obj);box-shadow:0 0 0 4px var(--explainer)}
summary svg{transition:transform var(--dur-ui) var(--ease)}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:var(--ease)}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
}
html.sky-paused::view-transition-old(root),html.sky-paused::view-transition-new(root){animation:none}
.btn--blue{background:var(--bl-obj)}
@media (hover:hover) and (pointer:fine){.btn--blue:hover{background:var(--bl-text)}}
/* owner-block start (round 14, 2026-11-05): the owner-approved toolbar buttons and button ring carry their own colours and three image files; the Type row exempts only this block from its tokens-only and no-url rules */
/* "On this page" as a toolbar of buttons (owner, 2026-11-05: the Trendlyne-style example): raised 8 px buttons with a white round badge holding an
   original two-tone tick (green stroke, red sweep); first green, second blue, last purple, the rest white; 4 px grid, motion off under reduce and Pause */
.toc{max-width:none;background:#F4F7FD;border-color:#E3E8F0;padding:var(--sp-4) var(--sp-5)}
.toc ul,.toc ol{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2)}
.toc li{margin:0}
.toc a{gap:var(--sp-3);min-height:48px;padding:0 var(--sp-5) 0 var(--sp-3);border:1px solid #E3E8F0;border-radius:8px;background:var(--page);color:#0B1B33;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 6px rgba(11,27,51,.1)}
.toc a::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:#EEF2FF url(img/toc-mark.svg) 50% 50%/20px 20px no-repeat;box-shadow:0 0 0 1px rgba(11,27,51,.08),0 1px 3px rgba(11,27,51,.18)}
.toc li:first-child a{background:#086B4F linear-gradient(90deg,#086B4F,#0B7A5A);color:#fff;border-color:transparent}
.toc li:nth-child(2) a{background:#3B5BDB;color:#fff;border-color:transparent}
.toc li:last-child a{background:#6D3FD1;color:#fff;border-color:transparent}
.toc li:is(:first-child,:nth-child(2),:last-child) a::before{background-color:#fff}
@media (hover:hover) and (pointer:fine){.toc a{transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}.toc a:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(11,27,51,.16)}}
/* main button (owner, 2026-11-05: the Starfolio button in his video): the o of "Investor" is a two-colour ring that turns (a self-animating SVG, no CSS
   keyframes), still under reduce and Pause motion, hidden in forced colours where the real o shows; faint white arcs in two corners */
.ring{position:relative;-webkit-text-fill-color:transparent}
.ring::after{content:"";position:absolute;left:50%;top:calc(50% + .08em);width:.7em;height:.7em;transform:translate(-50%,-50%);background:url(img/ring.svg) 50% 50%/100% 100% no-repeat}
html.sky-paused .ring::after{background-image:url(img/ring-still.svg)}
@media (prefers-reduced-motion:reduce){.ring::after{background-image:url(img/ring-still.svg)}}
@media (forced-colors:active){.ring{-webkit-text-fill-color:currentColor}.ring::after{display:none}}
.btn:has(.ring),.btn:has(.ring):hover{background-image:radial-gradient(circle at 0 100%,transparent 15px,rgba(255,255,255,.32) 15.5px,rgba(255,255,255,.32) 17px,transparent 17.5px),radial-gradient(circle at 100% 0,transparent 15px,rgba(255,255,255,.32) 15.5px,rgba(255,255,255,.32) 17px,transparent 17.5px)}
.gx-photo{display:block;max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 10px rgba(11,27,51,.14)}
/* owner-block end */
@media (prefers-reduced-motion:reduce){.btn,.card--link,.work-card,.ccard,.offer,input[type=text],input[type=email],input[type=url],textarea,summary svg,.toc a{transition:none}.btn:hover,.toc a:hover{transform:none}}
html.sky-paused :is(.btn,.card--link,.work-card,.ccard,.offer,input[type=text],input[type=email],input[type=url],textarea,summary svg,.toc a){transition:none}

/* white page column (owner, 2026-11-04; round 14 step 1g, contract 8.2): the content column is white edge to edge with a hairline rule; the drifting clouds stay in the side margins and show through the footer. The gradient is painted on the header and on main (longhands, so the header keeps its own white from site.css and gains the hairlines); body paints nothing, so the fixed cloud layers (z-index -1) show wherever main does not; flow-root on body and main keeps the first child's top margin inside the paint instead of collapsing through it (page heights unchanged, no sky strip above the header); the three z-index:-1 glows get their own stacking context so they stay visible. The footer is a translucent panel: --boe-veil comes from boe.css :root on the pages that link it; where the token is undefined (free-read, feedback, trs) the fallback paints the footer white, so those three pages change by nothing visible. */
body{margin-top:0;display:flow-root;background:none}
main{display:flow-root}
.site-header,main{background-image:linear-gradient(90deg,var(--rule) 0 1px,var(--page) 1px calc(100% - 1px),var(--rule) calc(100% - 1px));background-position:50% 0;background-size:min(100%,1304px) 100%;background-repeat:no-repeat}
.site-footer{background:var(--boe-veil,var(--page))}.site-footer{box-shadow:0 var(--sticky-h) var(--boe-veil,var(--page))}
.contact-me,.about-band__ph,.about-hero__media picture{isolation:isolate}