/*
  PERSONAL PAGE DESIGN SYSTEM.
  Edit tokens in :root to restyle Hobbies, Skills, and Sidequests together.
  Content lives in content/hobbies.js, content/skills.js, and content/sidequests.js.
*/

:root{
  --serif:'Fraunces',serif;
  --mono:'VT323',monospace;
  --fog-cream:#F7F2EA;
  --sky-blue:#C6E2F2;
  --lavender:#D7CDEE;
  --blush:#F4D6DC;
  --peach:#F8E3CE;
  --lilac:#B9A6E4;
  --sun-glow:#F8DE93;
  --ink:#2B2723;
  --ink-soft:#6A625A;
  --twilight:#34304F;
  --frost:#FFFFFF;
  --deep-night:#17162F;
  --radius:20px;
  --shadow:0 24px 80px rgba(60,42,80,.12);
  --line:rgba(43,39,35,.2);
  --space:clamp(1.25rem,4vw,4rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--mono);
  font-size:18px;
  color:var(--ink);
  background:var(--page-bg);
  overflow-x:hidden;
}
#personal-page{opacity:0; transform:translateY(10px) scale(.992); transition:opacity .65s ease,transform .65s ease}
body.page-ready #personal-page{opacity:1; transform:none}
body.page-hobbies{--page-bg:radial-gradient(circle at 78% 10%,rgba(248,222,147,.55),transparent 18rem),linear-gradient(135deg,var(--fog-cream) 0%,var(--sky-blue) 54%,var(--peach) 100%)}
body.page-skills{--page-bg:radial-gradient(circle at 82% 10%,rgba(215,205,238,.65),transparent 24rem),linear-gradient(135deg,var(--fog-cream) 0%,#F7F1F0 42%,var(--lavender) 100%)}
body.page-sidequests{--page-bg:radial-gradient(circle at 89% 8%,rgba(247,242,234,.18),transparent 9rem),linear-gradient(135deg,var(--twilight) 0%,var(--deep-night) 100%); color:var(--fog-cream)}

a{color:inherit}
button,a{touch-action:manipulation}
.page-header,.personal-hero,.section-block,.love-strip,.toolbox,.personal-footer,.player-card{width:min(100% - 2rem,88rem); margin-inline:auto}
.page-header{
  display:grid; grid-template-columns:minmax(10rem,1fr) auto minmax(10rem,1fr); align-items:center; gap:1rem;
  padding:clamp(2rem,4vw,3.6rem) 0 1rem;
}
.brand{grid-column:2; justify-self:center; font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.72rem); font-weight:700; text-decoration:none; text-align:center}
.page-nav{display:flex; align-items:center; gap:.62rem; font-family:var(--mono); font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.page-header .page-nav{grid-column:3; justify-self:end}
.page-nav a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.page-nav a[aria-current="page"]{color:var(--sun-glow); font-weight:700}
body:not(.page-sidequests) .page-nav a[aria-current="page"]{color:var(--ink)}
.nav-toggle{display:none}
.page-header .nav-toggle{grid-column:3; justify-self:end}

.personal-hero{position:relative; padding:clamp(2.5rem,7vw,7rem) 0 clamp(4.5rem,9vw,9rem)}
.back-button,.top-button{
  min-height:44px; border:1px solid color-mix(in srgb,currentColor 25%,transparent);
  color:inherit; background:rgba(255,255,255,.34); border-radius:999px; padding:.72rem 1.1rem;
  font-family:var(--mono); font-size:1rem; font-weight:700; letter-spacing:.04em; cursor:pointer;
  box-shadow:0 10px 30px rgba(65,50,74,.08);
}
.page-header .back-button{grid-column:1; justify-self:start}
body.page-sidequests .back-button,body.page-sidequests .top-button{background:rgba(255,255,255,.08); border-color:rgba(247,242,234,.38)}
.eyebrow{font-family:var(--mono); font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
body.page-sidequests .eyebrow{color:var(--sun-glow)}
h1{
  font-family:var(--serif);
  margin:.5rem 0 1.4rem;
  max-width:13ch;
  font-size:clamp(4rem,9vw,7.8rem);
  line-height:.92;
  font-weight:500;
  letter-spacing:-.02em;
}
.intro{
  max-width:40rem; font-family:var(--mono); font-size:clamp(1.15rem,2vw,1.7rem);
  line-height:1.22; color:var(--ink-soft); font-weight:700;
}
body.page-sidequests .intro{color:rgba(247,242,234,.78)}

.glass-card{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
body.page-sidequests .glass-card{border-color:rgba(248,222,147,.34); background:rgba(255,255,255,.045); box-shadow:0 22px 90px rgba(0,0,0,.22)}
.section-rule{display:flex; align-items:center; gap:1rem; margin-bottom:clamp(2rem,4vw,3.5rem); font-family:var(--mono); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.section-rule::after{content:""; flex:1; border-top:1px dashed color-mix(in srgb,currentColor 35%,transparent)}

.hobby-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 5.5rem}
.hobby-card{
  display:grid; grid-template-columns:4.8rem 1fr; gap:1.55rem; padding:2.1rem 0;
  border-bottom:1px dashed rgba(43,39,35,.22); text-decoration:none; background:transparent; border-radius:0; box-shadow:none; backdrop-filter:none;
}
.hobby-icon{width:3.8rem; height:3.8rem; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); font-family:var(--mono); font-size:1.3rem; box-shadow:inset 0 0 18px rgba(255,255,255,.55)}
.tone-blue{background:rgba(198,226,242,.82)} .tone-pink{background:rgba(244,214,220,.82)} .tone-cream{background:rgba(248,227,206,.82)} .tone-lavender{background:rgba(215,205,238,.82)}
.hobby-card h2,.skill-panel h2,.quest-card h2{margin:0; font-family:var(--serif); font-size:clamp(1.45rem,2vw,1.85rem); line-height:1.05}
.mono-note{margin:.35rem 0 .8rem; font-family:var(--mono); color:var(--ink-soft); font-size:1.08rem; line-height:1.35}
.soft-copy{margin:0 0 .9rem; color:rgba(106,98,90,.72); font-style:italic; font-size:1.08rem; line-height:1.55; font-weight:400}
.chip,.chip-row span,.tag-cloud span{
  display:inline-flex; align-items:center; min-height:2rem; padding:.38rem .78rem;
  border:1px solid rgba(185,166,228,.46); border-radius:999px; background:rgba(255,255,255,.46);
  font-family:var(--mono); font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
}
.love-strip{padding:clamp(4.5rem,9vw,7rem) 0}
.love-strip h2{font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); font-style:italic; font-weight:400}
.chip-row,.tag-cloud{display:flex; flex-wrap:wrap; gap:.7rem}

.skill-grid{width:min(100% - 2rem,88rem); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 3.5rem}
.skill-panel{position:relative; min-height:23rem; padding:2.5rem 2.1rem; overflow:hidden}
.skill-panel::before{content:""; position:absolute; inset:0 0 auto; height:.34rem; background:var(--accent)}
.accent-lavender{--accent:var(--lilac)} .accent-blue{--accent:#66B6E8} .accent-lilac{--accent:#8F85D8} .accent-pink{--accent:#EFA5BE}
.skill-heading{display:flex; align-items:baseline; gap:.7rem}
.skill-heading span{font-size:clamp(2.5rem,4.5vw,3.6rem); color:var(--accent); opacity:.78; line-height:1}
.skill-heading h2{font-size:clamp(1.65rem,2.5vw,2.15rem)}
.toolbox{margin-top:3rem; padding:1.5rem 1.75rem}
.toolbox p:last-child{font-family:var(--mono); font-size:1.08rem; font-weight:700; line-height:1.8}

.page-sidequests::before{content:""; position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px),radial-gradient(circle,var(--sun-glow) 0 1.2px,transparent 1.5px); background-size:190px 150px,310px 230px; opacity:.42}
.page-sidequests::after{content:""; position:fixed; right:6vw; top:7vh; width:4.5rem; height:4.5rem; border-radius:50%; background:radial-gradient(circle at 70% 35%,transparent 0 42%,var(--fog-cream) 43% 100%); filter:drop-shadow(0 0 42px rgba(247,242,234,.4)); pointer-events:none}
.player-card{padding:1.2rem 1.4rem; margin-bottom:3rem}
.player-card strong{display:block; font-size:1.3rem}
.xp-bar{height:.7rem; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin:.8rem 0}
.xp-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--sun-glow),var(--blush)); border-radius:inherit}
.quest-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem}
.quest-card{display:block; min-height:14rem; padding:1.8rem; text-decoration:none}
.quest-top{display:flex; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; font-family:var(--mono); font-size:.78rem; color:rgba(247,242,234,.65)}
.status-pill{border:1px solid currentColor; border-radius:999px; padding:.28rem .7rem; font-family:var(--mono); font-size:.75rem}
.status-active{color:#92F0C5}.status-progress,.reward{color:var(--sun-glow)}.status-complete{color:#BCE9FF}.status-shelved{color:#C8BFE2}.status-new{color:#FFD6EC}
.quest-card p{font-family:var(--mono); color:rgba(247,242,234,.75); line-height:1.65}
.more-text{text-align:center; margin:12rem 0 4rem; font-family:var(--serif); font-size:2rem}

.personal-footer{border-top:1px solid color-mix(in srgb,currentColor 20%,transparent); margin-top:5rem; padding:2.8rem 0 4rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--ink-soft)}
body.page-sidequests .personal-footer{color:rgba(247,242,234,.7)}
.site-credit{
  margin:0;
  max-width:32rem;
  text-align:center;
  text-transform:none;
  letter-spacing:.035em;
  line-height:1.35;
  color:color-mix(in srgb,currentColor 72%,transparent);
}
.site-credit-sparkle{
  font-family:"Apple Color Emoji","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols",system-ui,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun-glow); outline-offset:4px}

/* Sidequests page: tuned to the supplied dusk RPG-style Figma frame. */
body.page-sidequests{
  --page-bg:
    radial-gradient(circle at 84% 8%,rgba(247,242,234,.14),transparent 8.5rem),
    radial-gradient(circle at 26% 24%,rgba(185,166,228,.1),transparent 17rem),
    linear-gradient(135deg,#3A365F 0%,var(--twilight) 36%,var(--deep-night) 100%);
  min-height:100vh;
  background-color:var(--deep-night);
}
body.page-sidequests #personal-page{
  min-height:100vh;
  background:var(--page-bg);
}
body.page-sidequests .page-header,
body.page-sidequests .personal-hero,
body.page-sidequests .section-block,
body.page-sidequests .personal-footer{
  width:min(100% - clamp(2rem,8vw,8rem),86rem);
}
body.page-sidequests .page-header{
  padding:3.05rem 0 .35rem;
}
body.page-sidequests .brand{
  color:var(--fog-cream);
  font-size:clamp(1.34rem,1.55vw,1.55rem);
  letter-spacing:-.01em;
}
body.page-sidequests .page-nav{
  gap:.55rem;
  font-size:1rem;
  letter-spacing:.08em;
  font-weight:700;
  color:rgba(247,242,234,.64);
}
body.page-sidequests .page-nav a{
  min-height:38px;
}
body.page-sidequests .page-nav a[aria-current="page"]{
  color:var(--sun-glow);
}
body.page-sidequests .personal-hero{
  padding:1.05rem 0 3.9rem;
}
body.page-sidequests .back-button{
  min-height:2.45rem;
  padding:.5rem 1rem;
  color:var(--fog-cream);
  background:rgba(255,255,255,.07);
  border-color:rgba(248,222,147,.44);
  box-shadow:none;
  font-size:1rem;
  letter-spacing:.04em;
}
body.page-sidequests .personal-hero .eyebrow{
  margin:0 0 1.15rem;
  font-size:1rem;
  letter-spacing:.1em;
}
body.page-sidequests h1{
  max-width:10.6ch;
  margin:0 0 1.55rem;
  color:var(--fog-cream);
  font-size:clamp(4.25rem,6vw,6rem);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:500;
}
body.page-sidequests h1 em{
  font-style:italic;
  font-weight:300;
}
body.page-sidequests .intro{
  max-width:36rem;
  color:rgba(247,242,234,.7);
  font-size:clamp(1.28rem,1.55vw,1.55rem);
  line-height:1.36;
  letter-spacing:.02em;
}
body.page-sidequests::before{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.35px),
    radial-gradient(circle,var(--sun-glow) 0 1.6px,transparent 1.85px),
    radial-gradient(circle,rgba(255,255,255,.55) 0 .8px,transparent 1.1px);
  background-position:20px 14px,120px 58px,80px 35px;
  background-size:155px 132px,310px 235px,232px 190px;
  opacity:.44;
}
body.page-sidequests::after{
  right:clamp(2.8rem,9vw,9.4rem);
  top:clamp(4.5rem,7vw,6.8rem);
  width:4.35rem;
  height:4.35rem;
  background:
    radial-gradient(circle at 72% 40%,transparent 0 42%,var(--fog-cream) 43% 100%);
  filter:
    drop-shadow(0 0 22px rgba(247,242,234,.62))
    drop-shadow(0 0 58px rgba(247,242,234,.24));
}
body.page-sidequests .player-card{
  display:none;
}
body.page-sidequests .section-block{
  padding-top:.25rem;
}
body.page-sidequests .section-rule{
  margin-bottom:3.1rem;
  color:rgba(247,242,234,.58);
  font-size:1rem;
  letter-spacing:.09em;
}
body.page-sidequests .section-rule::after{
  border-top-color:rgba(248,222,147,.2);
}
body.page-sidequests .quest-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.55rem;
}
body.page-sidequests .quest-card{
  min-height:8.8rem;
  padding:1.35rem 1.45rem;
  border-radius:14px;
  border-color:rgba(248,222,147,.24);
  background:rgba(255,255,255,.035);
  box-shadow:0 16px 52px rgba(0,0,0,.12);
}
body.page-sidequests .quest-top{
  margin-bottom:.92rem;
  font-size:.95rem;
  letter-spacing:.08em;
}
body.page-sidequests .status-pill{
  min-height:1.25rem;
  padding:.28rem .7rem;
  font-size:.9rem;
  font-weight:700;
  background:rgba(255,255,255,.08);
}
body.page-sidequests .quest-card h2{
  color:var(--fog-cream);
  font-size:clamp(1.28rem,1.5vw,1.52rem);
  line-height:1.05;
  margin-bottom:.72rem;
}
body.page-sidequests .quest-card p{
  margin:.45rem 0;
  color:rgba(247,242,234,.7);
  font-size:1.08rem;
  line-height:1.72;
  letter-spacing:.025em;
}
body.page-sidequests .quest-card .reward{
  color:var(--sun-glow);
  font-weight:700;
}
body.page-sidequests .quest-card .tag-cloud{
  gap:.45rem;
  margin-top:.9rem;
}
body.page-sidequests .quest-card .tag-cloud span{
  min-height:1.45rem;
  padding:.28rem .68rem;
  border-color:rgba(247,242,234,.28);
  background:rgba(247,242,234,.1);
  color:rgba(247,242,234,.76);
  font-size:.92rem;
  letter-spacing:.06em;
}
body.page-sidequests .more-text{
  margin:12rem 0 10.2rem;
  color:var(--fog-cream);
  font-size:clamp(1.55rem,2vw,2rem);
  letter-spacing:-.01em;
}
body.page-sidequests .personal-footer{
  margin-top:0;
  padding:2.4rem 0 4rem;
  color:rgba(247,242,234,.58);
}
body.page-sidequests .top-button{
  display:none;
}

/* Skills page: tuned to the supplied lavender studio-light Figma frame. */
body.page-skills{
  --page-bg:
    radial-gradient(ellipse at 32% 27%,rgba(255,255,255,.64),transparent 11rem),
    radial-gradient(ellipse at 80% 22%,rgba(255,255,255,.62),transparent 13rem),
    radial-gradient(circle at 82% 11%,rgba(215,205,238,.55),transparent 16rem),
    linear-gradient(135deg,var(--fog-cream) 0%,#F8F1EF 34%,var(--lavender) 100%);
}
body.page-skills .page-header,
body.page-skills .personal-hero,
body.page-skills .skill-grid,
body.page-skills .toolbox,
body.page-skills .personal-footer{
  width:min(100% - clamp(2rem,8vw,8rem),86rem);
}
body.page-skills .page-header{
  padding:3.05rem 0 1rem;
}
body.page-skills .brand{
  font-size:clamp(1.3rem,1.45vw,1.55rem);
  letter-spacing:-.01em;
}
body.page-skills .back-button{
  min-height:2.45rem;
  padding:.5rem 1rem;
  border-color:rgba(185,166,228,.34);
  background:rgba(255,255,255,.6);
  box-shadow:0 12px 28px rgba(90,74,125,.14);
  font-size:1rem;
  letter-spacing:.04em;
}
body.page-skills .page-nav{
  gap:.55rem;
  font-size:1rem;
  letter-spacing:.08em;
  font-weight:700;
}
body.page-skills .page-nav a{
  min-height:38px;
}
body.page-skills .personal-hero{
  position:relative;
  padding:clamp(1.15rem,1.9vw,1.8rem) 0 clamp(1.6rem,2.7vw,2.5rem);
}
body.page-skills .personal-hero::before,
body.page-skills .personal-hero::after{
  content:"✦";
  position:absolute;
  color:rgba(185,166,228,.62);
  text-shadow:0 0 22px rgba(185,166,228,.35);
  pointer-events:none;
}
body.page-skills .personal-hero::before{
  right:17%;
  top:5.1rem;
  font-size:1rem;
}
body.page-skills .personal-hero::after{
  right:33%;
  top:12.7rem;
  font-size:.75rem;
}
body.page-skills .personal-hero .eyebrow{
  margin:0 0 1.35rem;
  font-size:1rem;
  letter-spacing:.1em;
}
body.page-skills h1{
  max-width:52rem;
  margin:0 0 1.25rem;
  font-size:clamp(3.85rem,5.3vw,5.55rem);
  line-height:.98;
  letter-spacing:-.032em;
  font-weight:500;
}
body.page-skills h1 em{
  font-style:italic;
  font-weight:300;
}
body.page-skills .intro{
  max-width:38rem;
  font-size:clamp(1.25rem,1.52vw,1.48rem);
  line-height:1.22;
  color:rgba(72,66,61,.72);
  letter-spacing:.02em;
}
body.page-skills .skill-grid{
  gap:1.55rem 2.05rem;
}
body.page-skills .skill-panel{
  min-height:13.9rem;
  padding:1.95rem 2rem 1.75rem;
  border-radius:14px;
  background:rgba(255,255,255,.42);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 22px 60px rgba(104,80,135,.13);
}
body.page-skills .skill-panel::before{
  height:.23rem;
}
body.page-skills .skill-heading{
  gap:.45rem;
  align-items:baseline;
  margin-bottom:1.1rem;
}
body.page-skills .skill-heading span{
  font-size:clamp(2.05rem,3vw,2.65rem);
  font-weight:300;
}
body.page-skills .skill-heading h2{
  font-size:clamp(1.45rem,2vw,1.82rem);
  letter-spacing:-.02em;
}
body.page-skills .mono-note{
  margin:0 0 1.35rem;
  font-size:1.08rem;
  letter-spacing:.035em;
  font-weight:700;
  color:rgba(80,75,69,.66);
}
body.page-skills .tag-cloud{
  gap:.55rem .6rem;
}
body.page-skills .tag-cloud span{
  min-height:1.35rem;
  padding:.28rem .68rem;
  border-color:rgba(185,166,228,.38);
  background:rgba(255,255,255,.64);
  color:rgba(55,50,46,.76);
  font-size:1rem;
  letter-spacing:.06em;
  font-weight:700;
}
body.page-skills .accent-blue .tag-cloud span{border-color:rgba(102,182,232,.42)}
body.page-skills .accent-pink .tag-cloud span{border-color:rgba(239,165,190,.42)}
body.page-skills .toolbox{
  margin-top:2.45rem;
  padding:1.25rem 1.55rem;
  border-radius:14px;
  background:rgba(255,255,255,.35);
}
body.page-skills .toolbox .eyebrow{
  margin:0 0 .62rem;
  font-size:1rem;
  letter-spacing:.09em;
}
body.page-skills .toolbox p:last-child{
  margin:0;
  font-size:1.08rem;
}
body.page-skills .personal-footer{
  margin-top:3rem;
}

/* Hobbies page: tuned to the supplied Figma frame while sharing the same renderer. */
body.page-hobbies{
  --page-bg:
    radial-gradient(circle at 80% 13%,rgba(248,222,147,.52),transparent 18rem),
    radial-gradient(ellipse at 58% 60%,rgba(255,255,255,.52),transparent 19rem),
    linear-gradient(140deg,var(--fog-cream) 0%,#F7F5EF 24%,var(--sky-blue) 58%,var(--peach) 100%);
}
body.page-hobbies .page-header,
body.page-hobbies .personal-hero,
body.page-hobbies .section-block,
body.page-hobbies .love-strip,
body.page-hobbies .personal-footer{
  width:min(100% - clamp(2rem,8vw,8rem),86rem);
}
body.page-hobbies .page-header{
  padding:3.05rem 0 1rem;
}
body.page-hobbies .brand{
  font-size:clamp(1.55rem,1.8vw,1.82rem);
  letter-spacing:-.015em;
}
body.page-hobbies .page-nav{
  gap:.55rem;
  font-size:1rem;
  letter-spacing:.08em;
  font-weight:700;
}
body.page-hobbies .page-nav a{
  min-height:38px;
}
body.page-hobbies .personal-hero{
  padding:clamp(4rem,5.2vw,5rem) 0 clamp(6rem,7.8vw,7.4rem);
}
body.page-hobbies .personal-hero::before{
  content:"";
  position:absolute;
  right:22.5%;
  top:3.8rem;
  width:3.4rem;
  height:3.4rem;
  background:url("../assets/images/hobbies-daisy.png") center / contain no-repeat;
  filter:drop-shadow(0 4px 10px rgba(244,214,220,.45));
  transform:rotate(12deg);
  pointer-events:none;
}
body.page-hobbies .personal-hero::after{
  content:"✦";
  position:absolute;
  right:11.2%;
  top:7.4rem;
  color:var(--sun-glow);
  font-size:1.05rem;
  text-shadow:0 0 18px rgba(248,222,147,.75);
  pointer-events:none;
}
body.page-hobbies .eyebrow,
body.page-hobbies .section-rule,
body.page-hobbies .personal-footer{
  font-size:1rem;
  letter-spacing:.1em;
}
body.page-hobbies .personal-hero .eyebrow{
  margin:0 0 1.35rem;
}
body.page-hobbies h1{
  max-width:none;
  margin:0 0 2.2rem;
  font-size:clamp(4.8rem,6.65vw,6.95rem);
  line-height:.88;
  letter-spacing:-.028em;
  font-weight:500;
}
body.page-hobbies h1 em{
  font-style:italic;
  font-weight:300;
}
body.page-hobbies .intro{
  max-width:47rem;
  font-size:clamp(1.38rem,1.9vw,1.8rem);
  line-height:1.12;
  color:rgba(70,66,60,.72);
  letter-spacing:.015em;
}
body.page-hobbies .section-rule{
  margin-bottom:3.4rem;
}
body.page-hobbies .hobby-grid{
  gap:0 clamp(4.4rem,7.5vw,6.7rem);
}
body.page-hobbies .hobby-card{
  grid-template-columns:4.7rem 1fr;
  gap:1.35rem;
  padding:2.15rem 0 2.3rem;
  min-height:10rem;
  border:0;
  border-bottom:1px dashed rgba(106,98,90,.25);
}
body.page-hobbies .hobby-icon{
  width:3.75rem;
  height:3.75rem;
  font-size:0;
}
body.page-hobbies .hobby-icon img{
  display:block;
  width:auto;
  height:auto;
  max-width:1.85rem;
  max-height:1.85rem;
  object-fit:contain;
}
body.page-hobbies .hobby-card h2{
  font-size:clamp(1.58rem,1.8vw,1.78rem);
  letter-spacing:-.018em;
}
body.page-hobbies .mono-note{
  margin:.28rem 0 .78rem;
  font-size:1.08rem;
  line-height:1.23;
  color:rgba(80,75,69,.62);
  font-weight:600;
}
body.page-hobbies .soft-copy{
  max-width:39rem;
  margin:0;
  font-size:1.16rem;
  line-height:1.46;
  color:rgba(106,98,90,.58);
  font-weight:500;
}
body.page-hobbies .hobby-card .chip{
  display:none;
}
body.page-hobbies .love-strip{
  padding:clamp(5.4rem,8vw,7.4rem) 0 clamp(5.8rem,9vw,8.5rem);
}
body.page-hobbies .love-strip .eyebrow{
  margin-bottom:1.05rem;
}
body.page-hobbies .love-strip h2{
  margin:.25rem 0 2.25rem;
  font-size:clamp(2rem,3vw,2.65rem);
  line-height:1;
  letter-spacing:-.025em;
}
body.page-hobbies .chip-row{
  gap:.78rem;
}
body.page-hobbies .chip-row span{
  min-height:2.55rem;
  padding:.52rem 1.22rem;
  border-color:rgba(185,166,228,.32);
  background:rgba(255,255,255,.48);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
  font-size:1.08rem;
  letter-spacing:.035em;
  text-transform:none;
  font-weight:600;
}
body.page-hobbies .personal-footer{
  margin-top:0;
  padding:3rem 0 4.8rem;
}
body.page-hobbies .top-button{
  display:none;
}

@media (max-width:900px){
  .page-header{position:relative}
  .nav-toggle{display:inline-flex; min-height:44px; align-items:center; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; padding:.55rem .9rem; font-family:var(--mono)}
  .page-nav{display:none; position:absolute; right:1rem; top:5.6rem; z-index:5; flex-direction:column; align-items:flex-end; padding:1rem; border-radius:18px; background:rgba(255,255,255,.86); box-shadow:var(--shadow)}
  body.page-sidequests .page-nav{background:rgba(23,22,47,.92)}
  .page-nav.open{display:flex}
  .page-nav > span{display:none}
  .hobby-grid,.skill-grid,.quest-grid{grid-template-columns:1fr}
  .skill-panel{min-height:auto}
  body.page-sidequests .quest-grid{grid-template-columns:1fr}
  body.page-sidequests .personal-hero{padding-bottom:3rem}
  body.page-hobbies .personal-hero::before{right:13%; top:4.5rem}
  body.page-hobbies .personal-hero::after{right:7%; top:8.2rem}
  body.page-hobbies .hobby-grid{gap:0}
}

@media (max-width:560px){
  .page-header{padding-top:1.2rem}
  .page-header{grid-template-columns:1fr auto}
  .page-header .brand{grid-column:1 / -1; grid-row:1; margin-bottom:.7rem}
  .page-header .back-button{grid-column:1; grid-row:2}
  .page-header .nav-toggle{grid-column:2; grid-row:2}
  .personal-hero{padding-top:2rem}
  h1{font-size:clamp(3.4rem,18vw,5.2rem)}
  .intro{font-size:1.16rem}
  .hobby-card{grid-template-columns:1fr; gap:1rem; padding:1.7rem 0}
  .skill-panel,.quest-card{padding:1.35rem}
  .chip,.chip-row span,.tag-cloud span{font-size:.95rem}
  .personal-footer{flex-direction:column; align-items:flex-start}
  body.page-sidequests .page-header,
  body.page-sidequests .personal-hero,
  body.page-sidequests .section-block,
  body.page-sidequests .personal-footer{
    width:min(100% - 2rem,86rem);
  }
  body.page-sidequests h1{font-size:clamp(3.4rem,17vw,4.65rem)}
  body.page-sidequests .intro{font-size:1.18rem}
  body.page-sidequests::after{right:1.6rem; top:6.6rem; width:3.2rem; height:3.2rem}
  body.page-sidequests .more-text{margin:6rem 0 5rem}
  body.page-hobbies .page-header,
  body.page-hobbies .personal-hero,
  body.page-hobbies .section-block,
  body.page-hobbies .love-strip,
  body.page-hobbies .personal-footer{
    width:min(100% - 2rem,86rem);
  }
  body.page-hobbies .personal-hero{padding-bottom:5.5rem}
  body.page-hobbies h1{font-size:clamp(3.9rem,17vw,5.1rem)}
  body.page-hobbies .intro{font-size:1.18rem; line-height:1.22}
  body.page-hobbies .hobby-card{grid-template-columns:3.9rem 1fr; padding:1.85rem 0; min-height:auto}
  body.page-hobbies .hobby-icon{width:3.2rem; height:3.2rem}
  body.page-hobbies .soft-copy{font-size:1.06rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #personal-page{transition:none; transform:none}
}