/* Sakumichi : feuille de style du site statique */
:root{--white:#FFFFFF;--blush:#FFF5F7;--sakura:#F7CAD6;--petal:#F1A9BD;--rose:#B03A62;--rose-d:#8A2A4C;--ink:#3B2430;--muted:#6B4A58;--line:#F3D5DE;--pale:#FDE9EF;
--serif:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--sans:'Zen Maru Gothic','Hiragino Sans','Yu Gothic',sans-serif;--logo:'Zen Antique Soft','Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:var(--rose)}a:hover{color:var(--rose-d)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 18px;border-radius:999px;background:var(--rose);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{left:16px;color:#fff}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.serif{font-family:var(--serif)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* en-tête */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.brand:hover svg{transform:rotate(-8deg) scale(1.07)}
.brand .name{display:flex;flex-direction:column;gap:5px;line-height:1}
.brand .name b{font-family:var(--logo);font-weight:400;font-size:27px;letter-spacing:.02em}
.brand .name b i{font-style:normal;color:var(--rose)}
.brand .name span{font-family:var(--serif);font-size:11px;font-weight:700;letter-spacing:.6em;color:var(--muted)}
.mainnav>ul{display:flex;align-items:center;gap:0 4px}
.mainnav a.nl{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:color .25s}
.mainnav a.nl::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mainnav a.nl:hover,.mainnav li:hover>a.nl,.mainnav li:focus-within>a.nl,.mainnav a.nl[aria-current="page"]{color:var(--rose)}
.mainnav a.nl:hover::after,.mainnav li:hover>a.nl::after,.mainnav li:focus-within>a.nl::after,.mainnav a.nl[aria-current="page"]::after{transform:scaleX(1)}
.mainnav li{position:relative}
.mainnav .caret{transition:transform .3s}
.mainnav li:hover .caret,.mainnav li:focus-within .caret{transform:rotate(180deg)}
.panel{position:absolute;top:100%;left:-90px;z-index:70;width:min(640px,92vw);padding-top:14px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top center;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1),visibility 0s linear .3s}
.panel.r{left:auto;right:-30px;width:min(540px,92vw)}
.mainnav li:hover>.panel,.mainnav li:focus-within>.panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panel>div{display:flex;flex-wrap:wrap;gap:4px;padding:16px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(176,58,98,.16)}
.panel a{flex:1 1 46%;min-width:0;display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background .25s}
.panel a:hover{background:var(--blush);color:var(--ink)}
.panel a .k{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--pale);font-family:var(--serif);font-size:22px;font-weight:700;color:var(--rose);transition:transform .4s cubic-bezier(.2,1.4,.4,1),background .25s}
.panel a:hover .k{background:var(--sakura);transform:rotate(-6deg) scale(1.08)}
.panel a b{display:block;font-size:16px}
.panel a small{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.panel a.all{flex:1 1 100%;justify-content:space-between;margin-top:6px;padding:14px 16px;background:var(--blush);font-weight:700;color:var(--rose)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;background:var(--rose);color:#fff;text-decoration:none;font-size:15px;font-weight:700;border:1.5px solid var(--rose);transition:background .25s,transform .25s,box-shadow .25s}
.btn:hover{background:var(--rose-d);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(176,58,98,.28)}
.btn.lg{min-height:52px;padding:0 28px;font-size:16px}
.btn.ghost{background:transparent;color:var(--rose)}
.btn.ghost:hover{background:#FFF0F4;color:var(--rose-d);box-shadow:none}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:#2a1a22}
.burger{display:none;width:44px;height:44px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s,opacity .2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.progress{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--rose);transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:scroll()){.progress{animation:progress linear both;animation-timeline:scroll(root)}}
@media (max-width:1000px){
.burger{display:inline-flex;align-items:center;justify-content:center}
.head-cta{display:none}
.mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(176,58,98,.12);padding:8px 16px 24px}
.site-header.open .mainnav{display:block;animation:dropin .35s cubic-bezier(.2,.9,.3,1) both}
.mainnav>ul{flex-direction:column;align-items:stretch}
.mainnav a.nl{min-height:56px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:22px;font-weight:700}
.mainnav a.nl::after{display:none}
.mainnav .caret,.panel{display:none}
}

/* éléments communs */
.pill{display:inline-block;padding:2px 14px;border-radius:999px;background:var(--pale);color:var(--rose);font-size:13px;font-weight:700;letter-spacing:.04em}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--rose);text-decoration:underline}
.crumbs li[aria-current]{color:var(--ink);font-weight:700}
.crumbs li.sep{color:var(--petal)}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blush) 0%,#fff 100%)}
.hero .petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .inner{position:relative;padding-top:clamp(24px,3vw,36px);padding-bottom:clamp(40px,6vw,72px);display:flex;flex-direction:column;gap:32px}
.hero .row{display:flex;flex-wrap:wrap;align-items:center;gap:32px 48px}
.hero .txt{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,60px);line-height:1.16;font-weight:700;text-wrap:balance;animation:rise .8s cubic-bezier(.2,.8,.2,1) .15s both}
.hero.home h1{font-size:clamp(40px,5.6vw,74px);line-height:1.14}
.hero .lede{max-width:620px;font-size:19px;line-height:1.8;color:var(--muted);animation:rise .8s cubic-bezier(.2,.8,.2,1) .3s both}
.hero .meta{font-size:14px;color:var(--muted)}
.hero .ring{flex:0 0 auto;width:clamp(150px,20vw,240px);height:clamp(150px,20vw,240px);display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--sakura)}
.hero .ring span{font-family:var(--serif);font-size:clamp(72px,10vw,128px);line-height:1;font-weight:700;color:#fff;animation:breathe 6s ease-in-out infinite}
.petal{position:absolute;top:0;animation:fall 15s linear infinite}
.petal svg{display:block;animation:drift 5s ease-in-out infinite}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 16px}
.section{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px)}
.section.tint{background:var(--blush)}
.section.rose{background:var(--sakura)}
.section h2.t,.article h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);line-height:1.22;font-weight:700;text-wrap:balance}
.article h2{font-size:clamp(26px,3vw,36px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:32px}
.sec-head p{max-width:520px;color:var(--muted)}
.layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px 56px;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.article{flex:3 1 560px;min-width:0;display:flex;flex-direction:column;gap:40px}
.article section{scroll-margin-top:96px;display:flex;flex-direction:column;gap:16px}
.article p{max-width:70ch}
.article a:not(.btn):not(.card){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.toc{padding:20px 24px;border-radius:20px;background:var(--blush)}
.toc p{font-weight:700;margin-bottom:8px}
.toc ol{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px}
.toc a{color:var(--ink);text-decoration:none!important}.toc a:hover{color:var(--rose)}
.items{display:flex;flex-direction:column;gap:12px}
.items>div{padding:18px 22px;border-radius:18px;border:1px solid var(--line);background:#fff}
.items h3{font-family:var(--serif);font-size:20px;line-height:1.35;font-weight:700;margin-bottom:4px}
.items p{font-size:16px;color:var(--muted)}
.bullets{display:flex;flex-direction:column;gap:12px;max-width:70ch}
.bullets li{display:flex;align-items:flex-start;gap:12px}
.bullets svg{flex:none;margin-top:7px}
.tablewrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line)}
table{width:100%;min-width:520px;border-collapse:collapse}
th{text-align:left;padding:12px 16px;background:var(--sakura);font-size:14px;font-weight:700;white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;vertical-align:top}
td:first-child{font-weight:700}
tr:hover td{background:var(--blush)}
.aside{flex:1 1 280px;min-width:0;max-width:380px;position:sticky;top:104px;align-self:flex-start;padding:28px;border-radius:24px;background:var(--blush);border:1px solid var(--line)}
.aside .ttl{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.2}
.aside dl{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.aside dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
.aside dd{margin-top:2px;font-weight:500}
@media (max-width:900px){.aside{position:static;max-width:none}}
details.faq{border:1.5px solid var(--line);border-radius:18px;background:#fff;padding:0 22px;transition:background .25s,border-color .25s}
details.faq:hover{border-color:#EFA6BB}
details.faq[open]{background:var(--blush)}
details.faq summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;font-family:var(--serif);font-size:18px;line-height:1.4;font-weight:700;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary svg{flex:none;color:var(--rose);transition:transform .3s}
details.faq[open] summary svg{transform:rotate(180deg)}
details.faq p{padding:0 0 20px;color:var(--muted)}
.faqlist{display:flex;flex-direction:column;gap:12px}
.cards{display:flex;flex-wrap:wrap;gap:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{min-width:0;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:24px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(176,58,98,.16);border-color:#EFA6BB;color:var(--ink)}
.card.tint{background:var(--blush)}
.card.tint:hover{background:var(--sakura)}
.cards .card{flex:1 1 300px}
.card .kj{font-family:var(--serif);font-size:48px;line-height:1;font-weight:700;color:var(--petal);transition:color .35s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.card:hover .kj{color:var(--rose);transform:scale(1.06)}
.card h2,.card h3{font-family:var(--serif);font-size:22px;line-height:1.3;font-weight:700}
.card p{font-size:15px;color:var(--muted)}
.card .more{margin-top:auto;color:var(--rose);font-weight:700}
.card .more i{display:inline-block;font-style:normal;transition:transform .3s}
.card:hover .more i{transform:translateX(6px)}
.card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tag{padding:2px 12px;border-radius:999px;background:#fff;color:var(--rose);font-size:13px;font-weight:700}
.tag.pale{background:var(--pale)}
.tag.solid{background:var(--rose);color:#fff}
.badge{flex:none;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--sakura);font-family:var(--serif);font-size:30px;font-weight:700;color:var(--rose);transition:transform .4s cubic-bezier(.2,1.4,.4,1),background .3s}
.card:hover .badge{background:#fff;transform:rotate(-8deg) scale(1.08)}
.card.row{flex-direction:row;align-items:flex-start;gap:20px}
.notice{padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--pale);display:flex;flex-direction:column;gap:20px}
.notice .cols{display:flex;flex-wrap:wrap;gap:16px}
.notice .cols>div{flex:1 1 240px;min-width:0;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:20px;background:#fff}
.notice h3{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:700}
.notice p{font-size:15px;color:var(--muted)}
.split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.rows{display:flex;flex-direction:column;gap:12px}
.rows>div{display:flex;align-items:flex-start;gap:16px;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.rows h3{font-family:var(--serif);font-size:19px;line-height:1.35;font-weight:700}
.rows p{font-size:15px;color:var(--muted)}
.sitemap{display:flex;flex-wrap:wrap;gap:32px 48px}
.sitemap section{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px}
.sitemap h2{font-family:var(--serif);font-size:28px;font-weight:700}
.sitemap a{display:inline-flex;align-items:center;min-height:40px}

/* pied de page */
.site-footer{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px);padding-bottom:48px}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:40px 48px}
.site-footer .cols>div{flex:1 1 160px;min-width:0}
.site-footer .cols>div.lead{flex:2 1 280px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.site-footer h2{font-family:var(--serif);font-size:18px;font-weight:700;margin-bottom:12px}
.site-footer li a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;transition:transform .25s,color .25s}
.site-footer li a:hover{transform:translateX(5px);color:var(--rose)}
.site-footer .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer .big{font-family:var(--serif);font-size:32px;letter-spacing:.2em;color:var(--petal)}

/* lecture vivante */
.article strong{background:linear-gradient(transparent 58%,var(--sakura) 58%) no-repeat left/100% 100%}
[data-reveal]{opacity:1}
.essential{position:relative;overflow:hidden;padding:clamp(22px,3vw,32px);border-radius:24px;background:var(--pale);border:1px solid var(--sakura)}
.essential .mark{position:absolute;right:20px;top:-4px;font-family:var(--serif);font-size:120px;line-height:1;font-weight:700;color:#fff;opacity:.75;pointer-events:none}
.essential>*:not(.mark){position:relative}
.article .note{color:var(--muted)}
.tl{position:relative}
.tl .line{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--petal);transform-origin:top}
.tl ol{position:relative;display:flex;flex-direction:column;gap:16px}
.tl li{display:flex;align-items:flex-start;gap:18px}
.tl .dot{position:relative;flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:2px solid var(--petal);transition:transform .3s cubic-bezier(.2,1.4,.4,1),background .3s}
.tl li>div{flex:1;min-width:0;padding:16px 20px;border-radius:18px;border:1px solid var(--line);background:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.tl li:hover>div{transform:translateX(6px);border-color:#EFA6BB}
.tl li:hover .dot{background:var(--sakura);transform:scale(1.1)}
.tl .slot{display:inline-block;padding:1px 12px;border-radius:999px;background:var(--pale);color:var(--rose);font-size:13px;font-weight:700}
.tl h3{margin-top:8px;font-family:var(--serif);font-size:20px;line-height:1.35;font-weight:700}
.tl p{margin-top:4px;font-size:16px;color:var(--muted)}
.tips{display:flex;flex-wrap:wrap;gap:16px}
.tips>div{flex:1 1 240px;min-width:0;padding:20px 22px;border-radius:20px;border:1px solid var(--line);border-left:5px solid var(--rose);background:var(--blush)}
.tips h3{font-family:var(--serif);font-size:20px;line-height:1.35;font-weight:700}
.tips p{margin-top:6px;font-size:16px;color:var(--muted)}
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.terms>div{min-width:0;padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:#fff}
.terms dt{font-family:var(--serif);font-size:19px;line-height:1.3;font-weight:700;color:var(--rose)}
.terms dd{margin-top:4px;font-size:15px;color:var(--muted)}
.tips>div,.terms>div{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.tips>div:hover,.terms>div:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(176,58,98,.13);border-color:#EFA6BB}
.check{counter-reset:done;padding:10px;border-radius:24px;border:1px solid var(--line);background:#fff}
.check ul{display:flex;flex-direction:column;gap:2px}
.check label{display:flex;align-items:flex-start;gap:14px;min-height:52px;padding:12px 16px;border-radius:14px;cursor:pointer;transition:background .25s}
.check label:hover{background:var(--blush)}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--rose);cursor:pointer}
.check input:checked{counter-increment:done}
.check label:has(input:checked)>span{text-decoration:line-through;text-decoration-color:#EFA6BB;color:var(--muted)}
.check .count{margin:8px 16px 6px;font-size:14px;font-weight:700;color:var(--rose)}
.check .count::before{content:counter(done) " sur " var(--n) " faites"}
.check .ready{display:none;margin:0 16px 10px;font-weight:700}
.check:not(:has(input:not(:checked))) .ready{display:block;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.prevnext{display:flex;flex-wrap:wrap;gap:16px}
.prevnext .pn{flex:1 1 260px;gap:4px;padding:20px 24px;border-radius:20px}
.prevnext .pn.next{align-items:flex-end;text-align:right}
.prevnext .lab{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose)}
.prevnext .ttl{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:700}
.ph-wrap{flex:0 0 auto;width:clamp(250px,30vw,380px);margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.ph-wrap.disc{width:clamp(260px,38vw,500px)}
.ph-arch{position:relative;width:100%;animation:archin .9s cubic-bezier(.2,.8,.2,1) .25s both}
.ph-ring{position:absolute;left:-16px;top:-16px;width:calc(100% + 32px);height:calc(100% + 32px);overflow:visible;pointer-events:none}
.ph-ring path,.ph-ring circle{animation:dashmove 30s linear infinite}
.ph-frame{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:50% 50% 28px 28px/40% 40% 28px 28px;background:var(--pale);box-shadow:0 28px 60px rgba(176,58,98,.24);transition:box-shadow .4s ease}
.ph-wrap.disc .ph-frame{aspect-ratio:1/1;border-radius:50%}
.ph-arch:hover .ph-frame{box-shadow:0 36px 80px rgba(176,58,98,.34)}
.ph-img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%;animation:kenburns 22s ease-in-out infinite alternate}
.ph-arch:hover .ph-img{filter:saturate(1.15) contrast(1.03)}
.ph-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(247,202,214,0) 55%,rgba(59,36,48,.34) 100%)}
.ph-grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph-sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);transform:translateX(-140%) skewX(-12deg);animation:sheen 7s ease-in-out 1.5s infinite;pointer-events:none}
.ph-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ph-petals i{position:absolute;top:0;left:0;animation:fall linear infinite}
.ph-petals svg{display:block;animation:drift 5s ease-in-out infinite}
.ph-cap{position:absolute;left:0;right:0;bottom:18px;width:max-content;max-width:calc(100% - 32px);margin:0 auto;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font-size:13px;font-weight:700;animation:rise .8s cubic-bezier(.2,.8,.2,1) 1s both}
.ph-wrap.disc .ph-cap{bottom:12%}
.ph-kanji{position:absolute;left:-22px;bottom:76px;width:84px;height:84px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--rose);box-shadow:0 12px 28px rgba(176,58,98,.35);font-family:var(--serif);font-size:40px;line-height:1;font-weight:700;color:#fff;animation:breathe 6s ease-in-out infinite}
.ph-wrap.disc .ph-kanji{left:2%;bottom:6%}
.ph-flower{position:absolute;right:-14px;top:40px;animation:float 7s ease-in-out infinite}
.ph-wrap.disc .ph-flower{right:2%;top:4%}
.ph-credit{font-size:12px;color:var(--muted)}
.ph-credit a{color:var(--muted)}
@media (max-width:560px){.ph-kanji{left:-6px;width:68px;height:68px;font-size:32px}.ph-flower{right:-4px}}
.article section:target>h2{animation:flash 1.8s ease-out}
@keyframes hl{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.5%,-1.5%)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(8deg)}}
@keyframes dashmove{to{stroke-dashoffset:-240}}
@keyframes sheen{0%,55%{transform:translateX(-140%) skewX(-12deg)}100%{transform:translateX(420%) skewX(-12deg)}}
@keyframes archin{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes par{from{transform:translateY(-30px)}to{transform:translateY(40px)}}
@keyframes reveal{from{opacity:.25;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes flash{0%{background:var(--sakura)}100%{background:transparent}}
@supports (animation-timeline:view()){
.article strong{background-size:0% 100%;animation:hl linear both;animation-timeline:view();animation-range:entry 25% cover 38%}
[data-reveal]{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
.tl .line{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 70%}
.ph-wrap{animation:par linear both;animation-timeline:view()}
}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes dropin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fall{0%{transform:translate3d(0,-60px,0);opacity:0}10%{opacity:.95}85%{opacity:.95}100%{transform:translate3d(0,820px,0);opacity:0}}
@keyframes drift{0%,100%{transform:translateX(-20px) rotate(-30deg)}50%{transform:translateX(24px) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.petal{display:none}html{scroll-behavior:auto}}