/* Viri Miryoku: miryoku.dev. Atelier palette + type (Viri's Atelier, lookbook lane). */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/BodoniModa-normal-500-latin.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/BodoniModa-italic-500-latin.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/BodoniModa-normal-700-latin.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/DancingScript-normal-700-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Nunito-normal-500-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Nunito-normal-700-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/Nunito-normal-800-latin.woff2) format("woff2")}

:root{
  --cream:#fff7f0; --paper:#fffaf4; --blush:#fde3ee; --petal:#f6c2d8; --pink:#f46aa6; --rose:#b81d63;
  --wine:#8e1450; --plum:#3b1f33; --mauve:#7a5470; --lilac:#efe7fb; --gold:#8a6420; --line:rgba(142,20,80,.16);
  --display:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif;
  --script:"Dancing Script","Segoe Script","Brush Script MT",cursive;
  --body:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cream);color:var(--plum);
  font:500 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(60vmax 50vmax at 88% -8%,var(--blush),transparent 70%),
                   radial-gradient(45vmax 40vmax at -10% 105%,var(--lilac),transparent 70%)}
a{color:var(--rose);text-underline-offset:3px}
a:hover{color:var(--wine)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}
header.top{padding:22px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--plum)}
.brand img{width:34px;height:34px}
.brand span{font:500 21px/1 var(--display);letter-spacing:.02em}
.chip{display:inline-block;font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);
  background:rgba(253,227,238,.85);border:1px solid var(--line);padding:8px 12px;border-radius:999px}

main{flex:1}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:24px 0 48px}
.hero h1{font:500 clamp(48px,8vw,92px)/1.02 var(--display);margin:18px 0 6px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--wine)}
.tagline{font:700 clamp(28px,4vw,40px)/1.2 var(--script);color:var(--rose);margin:0 0 22px}
.lede{max-width:34em;color:var(--mauve);margin:0 0 28px}
.rule{width:120px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:0 0 22px}
.hero figure{margin:0;position:relative;justify-self:center}
.hero figure::before{content:"";position:absolute;inset:8% -6% 2%;border-radius:50% 50% 46% 46%;
  background:radial-gradient(closest-side,var(--blush),rgba(253,227,238,0));z-index:-1}
.hero img{display:block;width:min(400px,80vw);height:auto;filter:drop-shadow(0 18px 30px rgba(142,20,80,.14))}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 0 64px}
.card{background:rgba(255,250,244,.82);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;
  box-shadow:0 10px 30px -18px rgba(142,20,80,.35)}
.card h3{font:500 22px/1.2 var(--display);margin:0 0 6px;color:var(--wine)}
.card p{margin:0;color:var(--mauve);font-size:15.5px}
.card .n{font:700 22px/1 var(--script);color:var(--gold)}

/* legal pages */
.doc{max-width:760px;padding:16px 0 64px}
.doc h1{font:500 clamp(38px,6vw,56px)/1.08 var(--display);margin:8px 0 4px}
.doc .updated{color:var(--mauve);font-size:14px;margin:0 0 28px}
.doc h2{font:500 26px/1.25 var(--display);color:var(--wine);margin:36px 0 8px}
.doc p,.doc li{color:var(--plum)}
.doc ul{padding-left:1.2em}
.doc li{margin:4px 0}
.summary{background:rgba(253,227,238,.55);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 8px}
.summary p{margin:0}

footer{border-top:1px solid var(--line);padding:22px 0 28px;font-size:14px;color:var(--mauve)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--mauve);text-decoration:none}
footer a:hover{color:var(--rose);text-decoration:underline}
.fine{flex-basis:100%;font-size:12.5px;opacity:.85}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:8px}
  .hero .rule{margin-left:auto;margin-right:auto}
  .lede{margin-left:auto;margin-right:auto}
  .hero figure{order:-1}
  .hero img{width:min(280px,70vw)}
  .cards{grid-template-columns:1fr}
}
@media (max-width:420px){.wrap{padding:0 16px}header.top .chip{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero img{animation:float 7s ease-in-out infinite}
  @keyframes float{50%{transform:translateY(-8px)}}
}