/* v5 / mix · front page top: the boutique hero tableau with the blackletter name under the moon, on the homepage tokens.
   Loaded by index.html only. Every colour literal is in the token block below; the rest reads tokens.
   Image paths are absolute: WebKit resolves a url() inside a custom property against the page. */

/* ============ tokens (the hero's own, beside site.css section 1) ============ */
:root{
  --head-bg:radial-gradient(90% 140% at 50% 0%,#1a0d17 0%,rgba(26,13,23,0) 70%),var(--ground);
  --hero-solid:#1a0d16;   /* bow silhouette backing */
  --hero-edge:#0d080e;    /* rose silhouette backing */
  --m-lace-h:url("/img/lace-edge.webp?v=4");
  --m-chain-v-h:url("/img/chain-v-pink.webp?v=3");
}
html[data-theme="light"]{
  --head-bg:var(--frame-bg);
  --hero-solid:#ecbecc;
  --hero-edge:#e3afc0;
}

/* ============ the name: the blackletter logotype, set under the moon as part of the still life ============ */
.mix-top{position:relative;z-index:3}
.logotype{position:relative;display:inline-flex;align-items:flex-start;margin:0;padding:0 .12em;
  font:700 9.5rem/1 var(--f-display);letter-spacing:.01em;color:var(--display);isolation:isolate}
/* the ruled shade: a small cached tile, not a repeating gradient */
.logotype [data-name]{position:relative;display:inline-block}
.logotype [data-name]::before{content:attr(data-n);position:absolute;left:0;top:0;z-index:-1;translate:.05em .045em;pointer-events:none;
  color:transparent;background:linear-gradient(180deg,var(--display-shade) 0 1.5px,transparent 1.5px) 0 0/100% 3.5px;
  -webkit-background-clip:text;background-clip:text}
.logotype__mark{display:inline-block;width:.11em;height:.17em;margin:.5em 0 0 .08em;color:var(--glyph)}
.logotype__mark svg{display:block;width:100%;height:100%;fill:currentColor}
/* centred on the word (the cross mark hangs out to the right); the bottom padding takes in the tail of the Y,
   so sparkle.js, which maps every h1 in the tableau as art, keeps its stars off the whole name */
.hero .hero-name{position:absolute;z-index:2;left:50%;top:var(--name-top);translate:calc(-50% + .1em) 0;
  font-size:var(--name-size);padding:.04em .12em .3em;white-space:nowrap}

/* ============ the engraved still life ============ */
.hero-wrap{position:relative;container-type:inline-size}
.tableau{position:relative;container-type:inline-size;overflow:hidden;isolation:isolate;color:var(--engrave);background:var(--hero-bg)}
.tableau__frame{position:absolute;inset:max(22px,3.2cqw) max(18px,2.6cqw);border:1px solid var(--rule-strong);pointer-events:none;z-index:-1}
.tableau .hero-in{position:absolute;inset:0;z-index:1}
.tableau__lace{position:absolute;left:0;right:0;height:24px;background:var(--engrave-soft);z-index:5;pointer-events:none;
  -webkit-mask:var(--m-lace-h) left top/auto 24px round no-repeat;mask:var(--m-lace-h) left top/auto 24px round no-repeat}
.tableau__lace--bot{bottom:2px}
.tableau img,.tableau .engr,.tableau .charm{position:absolute;display:block;height:auto;max-width:none}
.tableau .charm .engr{position:relative;width:100%}
.tableau .mirror{transform:scale(-1,1)}
.tableau .engr.bk{background:var(--hero-edge)}
.tableau .chainv{position:absolute;background:var(--engrave);
  -webkit-mask:var(--m-chain-v-h) center top/100% auto no-repeat round;mask:var(--m-chain-v-h) center top/100% auto no-repeat round}
.tableau .tw{position:absolute;width:1.6cqw;height:1.6cqw;color:var(--sparkle);fill:currentColor;filter:var(--sparkle-glow);opacity:.85}
.tableau .tw--s{width:1cqw;height:1cqw}
.tableau .crs{position:absolute;display:block;color:var(--engrave);fill:currentColor}

/* engraving mattes (alpha only), coloured by --engrave through the mask */
.tableau .e-rose-a{--m:url("/img/hero/rose-a-pink.webp?v=3");aspect-ratio:679/600}
.tableau .e-rose-b{--m:url("/img/hero/rose-b-pink.webp?v=3");aspect-ratio:546/600}
.tableau .e-rose-a-bk{--m:url("/img/hero/rose-a-backing.webp");aspect-ratio:679/600}
.tableau .e-rose-b-bk{--m:url("/img/hero/rose-b-backing.webp");aspect-ratio:546/600}
.tableau .e-cross{--m:url("/img/cross-pendant-pink.webp?v=3");aspect-ratio:263/520}
.tableau .e-lock{--m:url("/img/padlock-pink.webp?v=5");aspect-ratio:252/336}
.tableau .e-selenia{--m:url("/img/hero/plate-selenia-pink.webp");aspect-ratio:1}
.tableau .e-bow-back{--m:url("/img/hero/bow-480-backing.webp");aspect-ratio:480/473}

/* the shaded bow: its silhouette backing, then the twin for the theme (t-night / t-milk from site.css) */
.bowpair{position:absolute;display:block;aspect-ratio:480/473;filter:var(--bow-shadow)}
.bowpair .bow-back{position:absolute;inset:0;width:100%;background:var(--hero-solid)}
.bowpair img{position:absolute;left:0;top:0;width:100%;height:auto}
/* the hero bow, softened (2026-10-22): less shine and contrast, so it reads as the same ink as the roses and the moon */
.hero .hbow img.t-night{filter:contrast(.78) brightness(.86) saturate(.9)}
.hero .hbow img.t-milk{filter:contrast(.8) brightness(1.12)}

/* composition: the boutique front page at its own height; the moon and bow sit a little smaller and higher to leave the name room */
.hero{--name-top:27.5cqw;--name-size:9.6cqw;width:100%;aspect-ratio:20/9;min-height:420px}
.hero .chainv{width:1.05cqw}
.hero .c-l{left:14.6cqw;top:0;height:7.4cqw}
.hero .pendant{left:10.6cqw;top:6.6cqw;width:9cqw}
.hero .medal{left:38.5cqw;top:4.3cqw;width:23cqw}
.hero .hbow{left:43.6cqw;top:.6cqw;width:12.8cqw}
.hero .c-r{left:85.2cqw;top:0;height:12.6cqw}
.hero .lock{left:81.95cqw;top:11.8cqw;width:7.6cqw}
.hero .rose-l{left:.8cqw;bottom:-3.6cqw;width:26cqw}
.hero .rose-r{right:.8cqw;bottom:-5cqw;width:21cqw}
.hero .crs-l{left:28.6cqw;top:22cqw;width:1.1cqw;height:1.8cqw}
.hero .crs-r{left:70.3cqw;top:22cqw;width:1.1cqw;height:1.8cqw}
/* the key, tucked under the left rose's leaf */
.hero-wrap .airi-key{left:calc(22.4cqw - 15px);bottom:calc(2.2cqw + 14px)}

/* motion: the same gates as site.css */
/* the little masthead lines either side of the name (like the inner pages' banner) */
.hero .hero-meta{position:absolute;z-index:2;margin:0;top:calc(var(--name-top) + var(--name-size)*.42);font:italic 16px/1.4 var(--fell);color:var(--ink-soft);white-space:nowrap}
.hero .hero-meta span{display:block}
.hero .hero-meta span:first-child{color:var(--accent)}
.hero .hero-meta.l{right:calc(50% + var(--name-size)*1.42);text-align:right}
.hero .hero-meta.r{left:calc(50% + var(--name-size)*1.62)}
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="off"]) .hero .hero-in{animation:heroIn 1.4s cubic-bezier(.2,.7,.1,1) both}
  html.js:not([data-motion="off"]):not([data-hidden]) .tableau .tw{animation:heroTwinkle 3.3s ease-in-out infinite}
  html.js:not([data-motion="off"]):not([data-hidden]) .tableau .tw:nth-of-type(2n){animation-duration:2.8s;animation-delay:-1s}
  html.js:not([data-motion="off"]):not([data-hidden]) .tableau .tw:nth-of-type(3n){animation-duration:3.9s;animation-delay:-2s}
  html.js:not([data-motion="off"]):not([data-hidden]) .tableau .tw:nth-of-type(5n){animation-duration:4.2s;animation-delay:-.6s}
  /* one gloss across the name on arrival, as the inner banners do */
  html.js:not([data-motion="off"]) .hero-name [data-name]::after{content:attr(data-n);position:absolute;left:0;top:0;pointer-events:none;color:transparent;
    background:linear-gradient(90deg,transparent 0 42%,color-mix(in srgb,var(--link-hover) 90%,transparent) 50%,transparent 58%) no-repeat;background-size:250% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;animation:gloss 1s 1s ease-out 1 both}
  html.js:not([data-motion="off"]) .hero .hero-name{animation:heroIn 1.4s .15s cubic-bezier(.2,.7,.1,1) both}
}
@keyframes heroIn{from{opacity:0;scale:1.03}to{opacity:1;scale:1}}
@keyframes heroTwinkle{0%,100%{opacity:.18;scale:.6}50%{opacity:1;scale:1}}

/* ============ responsive ============ */
@media (max-width:760px){
  .hero .hero-meta{display:none}
  /* the Pause and theme switches sit in the top corners on phones: a strip of ground above the hero holds them */
  .mix-top{padding-top:60px;background:var(--head-bg);border-bottom:1px solid var(--rule-strong)}
}
@media (max-width:600px){
  .hero{--name-top:75.5cqw;--name-size:17cqw;aspect-ratio:390/600;min-height:0}
  .hero .chainv{width:2.6cqw}
  .hero .c-l{left:12.2cqw;height:12cqw}
  .hero .pendant{left:4cqw;top:10.8cqw;width:19cqw}
  .hero .medal{left:19cqw;top:12cqw;width:62cqw}
  .hero .hbow{left:34.5cqw;top:2.4cqw;width:31cqw}
  .hero .c-r{left:85.6cqw;height:24cqw}
  .hero .lock{left:78.7cqw;top:23.4cqw;width:16.4cqw}
  .hero .rose-l{left:-6cqw;bottom:-7cqw;width:66cqw}
  .hero .rose-r{right:-4cqw;bottom:-9cqw;width:53cqw}
  .hero .crs-l,.hero .crs-r{display:none}
  .hero .tw{width:4cqw;height:4cqw}
  .hero .tw--s{width:2.6cqw;height:2.6cqw}
  .hero-wrap .airi-key{left:calc(50% - 15px);bottom:12px}
}
@media (forced-colors:active){
  .logotype{color:CanvasText}
  .logotype [data-name]::before{display:none}
  .tableau .engr,.tableau .chainv,.tableau__lace{background:CanvasText}
}

/* About me as a little jirai console (front page only) */
.console{padding:0;overflow:hidden;background:var(--ground-2)}
.con-bar{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--rule-strong);
  background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent) 24%,transparent))}
.con-bar h2{margin:0;flex:1;text-align:center;font:700 22px/1.2 var(--display-font,'UnifrakturCook'),serif;color:var(--head)}
.con-dots{display:flex;gap:6px;font-size:13px;color:var(--glyph);letter-spacing:0}
.con-file{font:400 13px/1 var(--mono);color:var(--ink-mute)}
.con-body{padding:18px 22px 20px;font:400 15.5px/1.75 var(--mono);color:var(--ink)}
.con-lines{list-style:none;margin:0;padding:0}
.con-lines li{display:grid;grid-template-columns:1.3em minmax(0,max-content) minmax(0,1fr);gap:0 .7em;align-items:baseline}
.con-lines .pr{color:var(--glyph)}
.con-lines .cmd{color:var(--accent);white-space:nowrap}
.con-lines .out{color:var(--ink)}
.con-lines .out a{color:var(--link)}
.con-lines .out a:hover{color:var(--link-hover)}
.con-lines .np-by{color:var(--ink-mute)}
.con-apps{display:flex;flex-wrap:wrap;gap:2px 14px}
.console .swatch{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;background:var(--oshi);border:1px solid var(--rule-strong)}
.con-prompt .caret{display:inline-block;width:.6em;height:1.05em;vertical-align:-.18em;background:var(--glyph)}
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="off"]) .con-prompt .caret{animation:conBlink 1.05s steps(1) infinite}
  html.js:not([data-motion="off"]) .console.con-wait .con-lines li{opacity:0}
  html.js:not([data-motion="off"]) .console.con-type .con-lines li{animation:conLine .32s steps(4,end) both;animation-delay:calc(var(--i) * .22s)}
}
@keyframes conBlink{50%{opacity:0}}
@keyframes conLine{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (max-width:600px){
  .con-body{padding:14px 14px 16px;font-size:14px}
  .con-lines li{grid-template-columns:1.3em minmax(0,1fr)}
  .con-lines .out{grid-column:2}
  .con-file{display:none}
}

/* a paper tag hanging off the sidebar padlock, with her quote */
.side-foot .tag-string{width:1px;height:18px;margin-top:2px;background:var(--rule-strong)}
.side-foot .hangtag{position:relative;margin:0;max-width:170px;padding:12px 14px 12px 16px;text-align:center;
  font:italic 15px/1.45 var(--fell);color:var(--plate-meta);background:var(--paper);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);box-shadow:var(--lift)}
.side-foot .hangtag::before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ground-2)}
.side-foot .ht-heart{display:block;margin-bottom:4px;color:var(--glyph)}
@media (max-width:760px){.side-foot{display:flex}.side-foot .cv,.side-foot .m-lock,.side-foot .tag-string{display:none}.side-foot .hangtag{max-width:none}}


/* the poem, folded away: one quiet line that opens */
.poem{margin-top:22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.poem summary{display:flex;align-items:baseline;gap:10px;padding:10px 4px;cursor:pointer;list-style:none;font:italic 17px/1.3 var(--fell);color:var(--ink-soft)}
.poem summary::-webkit-details-marker{display:none}
.poem-h{color:var(--glyph)}
.poem-t{color:var(--head)}
.poem-by{flex:1}
.poem-open{font-size:15px;text-decoration:underline;text-underline-offset:3px;color:var(--link)}
.poem[open] .poem-open{visibility:hidden}
.poem-body{padding:8px 0 4px;text-align:center}
.poem-body p{margin:0 auto 14px;font:italic 17px/1.55 var(--fell);color:var(--ink)}
.poem-credit{margin:6px 0 14px;text-align:center;font:italic 14px/1.4 var(--fell);color:var(--ink-mute)}

@media (max-width:600px){.poem-by{display:none}}