:root {
  --night:#191923; --surface:#22222f; --paper:#eeebe6; --muted:#b5b0c1;
  --line:#3b394a; --accent:#dea799; --lilac:#b8add4; --max:1200px;
  font-family:'Segoe UI',sans-serif; color:var(--paper); background:var(--night); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
a:focus,button:focus { outline:2px solid var(--accent); outline-offset:7px; }
button { font:inherit; }
p { line-height:1.8; margin-top:0; }
h1,h2,h3 { margin-top:0; font-weight:400; }
h1,h2,.myth-name,.brand,.hero-line,.myth-story h3 { font-family:Georgia,'Times New Roman',serif; }
.wrap { width:min(var(--max),calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:-80px; left:20px; background:var(--paper); color:var(--night); padding:12px; z-index:10; }
.skip-link:focus { top:16px; }
.site-header { height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:13px; font-size:24px; letter-spacing:.3px; }
.brand svg { width:37px; height:37px; fill:none; stroke:var(--accent); stroke-width:1.2; }
.site-header nav { display:flex; gap:32px; font-size:13px; color:var(--muted); }
.site-header nav [aria-current] { color:var(--paper); }
.hero { position:relative; isolation:isolate; min-height:660px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero-image { position:absolute; z-index:-2; inset:0; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:center 53%; }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(25,25,35,.96) 0%,rgba(25,25,35,.88) 24%,rgba(25,25,35,.25) 58%,rgba(25,25,35,.08) 100%),linear-gradient(0deg,var(--night),transparent 20%,transparent 85%,rgba(25,25,35,.35)); }
.hero-copy { padding-block:80px 100px; }
h1 { font-size:clamp(95px,11.5vw,158px); letter-spacing:-7px; line-height:1; margin-bottom:22px; }
.hero-line { font-size:clamp(25px,3vw,39px); line-height:1.3; margin-bottom:23px; }
.explore { display:inline-flex; align-items:center; gap:38px; font-size:13px; padding-block:15px 10px; border-bottom:1px solid #948497; margin-top:14px; }
.my-world { padding-block:90px 60px; }
.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:center; margin-bottom:42px; }
h2 { font-size:clamp(35px,4vw,53px); letter-spacing:-1.5px; line-height:1.15; margin-bottom:15px; }
.myth-atlas { --myth-accent:#b8add4; }
.myth-atlas[data-myth=akkorokamui] { --myth-accent:#df9b88; }
.myth-atlas[data-myth=raijuu] { --myth-accent:#d5c293; }
.myth-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.myth-choice { cursor:pointer; text-align:left; background:none; color:var(--muted); border:0; padding:20px 0 24px; position:relative; }
.myth-name { display:block; font-size:30px; }
.choice-mark { position:absolute; right:32px; top:26px; font-size:22px; opacity:0; }
.myth-choice[aria-expanded=true] { color:var(--myth-accent); }
.atlas-ready .myth-choice[aria-expanded=true]::after { content:''; position:absolute; bottom:-1px; left:0; right:32px; height:2px; background:var(--myth-accent); }
.atlas-ready .myth-choice[aria-expanded=true] .choice-mark { opacity:1; }
.myth-choice:hover { color:var(--paper); }
.myth-panel { display:grid; grid-template-columns:1fr 1.75fr; gap:60px; align-items:center; padding:48px 55px; background:var(--surface); min-height:345px; border-bottom:1px solid var(--line); }
.myth-panel[hidden] { display:none; }
.myth-emblem { color:var(--myth-accent); width:230px; max-width:100%; margin:auto; }
.myth-emblem svg { display:block; width:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.myth-emblem svg>circle:first-child { stroke-opacity:.28; }
.myth-emblem .eye { fill:currentColor; }
.myth-story { max-width:560px; }
.myth-story h3 { font-size:32px; line-height:1.25; margin-bottom:17px; }
.myth-story p { font-size:14px; color:var(--muted); }
.myth-story .personal-note { color:var(--paper); }
.personal { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; padding-block:55px 100px; }
.interests article { padding:24px 0; border-bottom:1px solid var(--line); }
.interests article:first-child { padding-top:0; }
.interests h3 { font-size:18px; margin-bottom:10px; }
.interests p { color:var(--muted); font-size:14px; max-width:540px; margin-bottom:0; }
.projects { background:#242330; padding-block:70px; }
.project-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; }
.project-list article+article { border-top:1px solid #484452; padding-top:30px; margin-top:30px; }
.project-list h3 { font-size:21px; margin-bottom:12px; }
.project-list p { font-size:14px; color:var(--muted); }
.project-list a { font-size:12px; color:var(--accent); }
.project-list a span { margin-left:12px; }
.contact { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:80px; padding-block:90px; }
.contact-links .email { display:flex; gap:20px; justify-content:space-between; border-bottom:1px solid var(--line); padding-block:20px; font-size:clamp(17px,2.3vw,27px); }
.contact-links>div { display:flex; gap:30px; padding-top:22px; font-size:12px; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:25px; padding-block:27px 35px; font-size:11px; color:var(--muted); }
@media (min-width:1600px) { .hero { min-height:760px; } }
@media (max-width:900px) {
  .wrap { width:calc(100% - 48px); }
  .hero { min-height:600px; }
  .myth-panel { gap:30px; padding:36px 30px; }
  .myth-name { font-size:26px; }
  .choice-mark { right:15px; }
  .personal,.project-layout,.contact { gap:40px; }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { height:auto; padding-block:22px 20px; flex-wrap:wrap; gap:20px; }
  .brand { font-size:20px; gap:8px; }
  .brand svg { width:27px; height:27px; }
  .site-header nav { width:100%; justify-content:space-between; gap:20px; font-size:12px; }
  .hero { min-height:690px; justify-content:flex-start; }
  .hero-copy { padding-block:55px 300px; }
  h1 { font-size:100px; letter-spacing:-5px; }
  .hero-line { font-size:29px; }
  .hero-image img { object-position:65% bottom; }
  .hero::after { background:linear-gradient(180deg,rgba(25,25,35,.91),rgba(25,25,35,.85) 32%,rgba(25,25,35,.1) 72%,var(--night) 99%); }
  .my-world { padding-block:55px 35px; }
  .section-heading { display:block; margin-bottom:24px; }
  h2 { font-size:38px; }
  .myth-tabs { grid-template-columns:1fr 1.4fr 1fr; column-gap:12px; }
  .myth-name { font-size:clamp(15px,4.1vw,21px); }
  .choice-mark { display:none; }
  .myth-choice { padding-block:17px; }
  .atlas-ready .myth-choice[aria-expanded=true]::after { right:10px; }
  .myth-panel { grid-template-columns:1fr; gap:10px; padding:25px 22px 30px; }
  .myth-emblem { width:160px; }
  .myth-story h3 { font-size:29px; }
  .myth-story p { font-size:13px; }
  .personal,.project-layout,.contact { grid-template-columns:1fr; gap:25px; }
  .personal { padding-block:35px 60px; }
  .personal-title h2 br { display:none; }
  .projects { padding-block:55px; }
  .contact { padding-block:55px; }
  .site-footer { flex-wrap:wrap; gap:15px; }
}
@media (max-width:360px) {
  h1 { font-size:88px; }
  .myth-tabs { column-gap:8px; }
  .myth-name { font-size:14px; }
  .contact-links .email { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* A quiet pause for the place the owner wants to move to. */
.horizon { border-top:1px solid var(--line); padding-block:65px 80px; display:grid; grid-template-columns:160px 1fr auto; align-items:center; gap:50px; }
.horizon-moon { font-family:Georgia,serif; font-size:145px; line-height:1; color:var(--lilac); transform:rotate(-15deg); text-align:center; }
.horizon h2 { font-size:clamp(52px,6vw,80px); margin-bottom:15px; }
.horizon p:not(.small-label) { color:var(--muted); font-size:14px; margin-bottom:0; }
.horizon>a { font-size:12px; color:var(--accent); }
.horizon>a span { margin-left:16px; }
@media (max-width:900px) { .horizon { grid-template-columns:100px 1fr; gap:30px; } .horizon-moon { font-size:105px; } .horizon>a { grid-column:2; } }
@media (max-width:640px) { .horizon { grid-template-columns:55px 1fr; padding-block:45px 55px; gap:20px; } .horizon-moon { font-size:80px; } }

.chosen-name { display:grid; grid-template-columns:1.25fr 1fr; gap:45px 100px; padding-block:85px 65px; border-bottom:1px solid var(--line); }
.name-story h2 { margin-bottom:30px; }
.name-story p,.community-story>p { font-size:15px; color:var(--muted); max-width:570px; }
.name-story p:first-of-type { font-size:19px; color:var(--paper); line-height:1.65; }
.community-story { align-self:center; }
.community-story blockquote { margin:0 0 30px; }
.community-story blockquote p { font-family:Georgia,'Times New Roman',serif; font-size:clamp(36px,4.5vw,58px); line-height:1.2; letter-spacing:-1px; color:var(--lilac); margin-bottom:0; }
.camavor-story { grid-column:1/-1; border-top:1px solid var(--line); padding-top:22px; }
summary { cursor:pointer; }
summary:focus { outline:2px solid var(--accent); outline-offset:7px; }
.camavor-story summary { list-style:none; font-size:15px; display:flex; justify-content:space-between; align-items:center; }
.camavor-story summary::-webkit-details-marker { display:none; }
.camavor-story summary span { font-size:24px; color:var(--accent); }
.camavor-story[open] summary span { transform:rotate(45deg); }
.camavor-prose { max-width:760px; padding-top:25px; }
.camavor-prose p { font-size:14px; color:var(--muted); }
.lore-links { display:flex; flex-wrap:wrap; gap:15px 30px; font-size:12px; color:var(--accent); padding-top:10px; }
@media (max-width:900px) { .chosen-name { gap:35px 45px; } }
@media (max-width:640px) {
  .chosen-name { grid-template-columns:1fr; gap:25px; padding-block:55px 45px; }
  .name-story p,.community-story>p { font-size:14px; }
  .name-story p:first-of-type { font-size:18px; }
  .community-story blockquote { margin-block:15px 22px; }
  .community-story blockquote p { font-size:43px; }
  .camavor-story { margin-top:10px; }
}

.inline-reference { text-decoration:underline; text-decoration-color:#625b76; text-underline-offset:4px; }

/* Personal emblems and a readable daylight palette. */
:root { color-scheme:dark; --projects-surface:#242330; }
:root[data-theme=light] {
  color-scheme:light;
  --night:#edf2f5; --surface:#dfe8ed; --paper:#152d39; --muted:#425765;
  --line:#a6b8c4; --accent:#854630; --lilac:#594477; --projects-surface:#dce5eb;
}
@media (prefers-color-scheme:light) {
  :root:not([data-theme]) {
    color-scheme:light;
    --night:#edf2f5; --surface:#dfe8ed; --paper:#152d39; --muted:#425765;
    --line:#a6b8c4; --accent:#854630; --lilac:#594477; --projects-surface:#dce5eb;
  }
}
.brand { margin-right:auto; }
.brand img { width:48px; height:48px; display:block; }
.site-header nav { order:2; }
.theme-toggle { order:3; border:1px solid var(--line); border-radius:5px; padding:10px 14px; min-height:44px; background:var(--surface); color:var(--paper); cursor:pointer; white-space:nowrap; font-size:13px; }
.theme-toggle:hover { border-color:var(--accent); }
.theme-toggle[hidden] { display:none; }
.theme-toggle { width:48px; padding:7px; display:grid; place-items:center; }
.theme-icon { width:30px; height:30px; }
.theme-icon-moon { display:none; }
:root[data-theme="light"] .theme-icon-sun { display:none; }
:root[data-theme="light"] .theme-icon-moon { display:block; }
.hero { min-height:600px; }
.hero::after { display:none; }
.hero-emblem { inset:auto max(24px,calc((100vw - 1200px)/2)) auto auto; top:50%; transform:translateY(-50%); aspect-ratio:1; width:49%; max-width:570px; z-index:-1; }
.hero-emblem img { object-fit:contain; object-position:center; }
.hero-copy { padding-block:80px; }
.hero-copy h1,.hero-copy .hero-line { max-width:50%; }
.explore { border-color:var(--line); }
.myth-emblem { width:270px; }
.myth-emblem img,.horizon-emblem img { width:100%; height:auto; display:block; }
.horizon { grid-template-columns:210px 1fr auto; }
.horizon-emblem { width:210px; }
.projects { background:var(--projects-surface); }
.project-list article+article { border-color:var(--line); }
.inline-reference { text-decoration-color:var(--muted); }
:root[data-theme=light] .myth-atlas { --myth-accent:#594477; }
:root[data-theme=light] .myth-atlas[data-myth=akkorokamui] { --myth-accent:#854630; }
:root[data-theme=light] .myth-atlas[data-myth=raijuu] { --myth-accent:#68501f; }
@media (prefers-color-scheme:light) {
  :root:not([data-theme]) .myth-atlas { --myth-accent:#594477; }
  :root:not([data-theme]) .myth-atlas[data-myth=akkorokamui] { --myth-accent:#854630; }
  :root:not([data-theme]) .myth-atlas[data-myth=raijuu] { --myth-accent:#68501f; }
}
@media (max-width:900px) {
  .site-header { gap:18px; }
  .site-header nav { gap:20px; }
  .hero { min-height:520px; }
  h1 { font-size:clamp(80px,11vw,130px); }
  .hero-line { font-size:29px; }
  .horizon { grid-template-columns:170px 1fr; }
  .horizon-emblem { width:170px; }
}
@media (max-width:700px) {
  .site-header { height:auto; flex-wrap:wrap; padding-block:18px; }
  .site-header nav { order:4; width:100%; justify-content:space-between; }
  .brand { font-size:20px; gap:8px; }
  .brand img { width:42px; height:42px; }
  .theme-toggle { padding-inline:10px; }
  .hero { min-height:0; display:flex; }
  .hero-copy { padding-block:35px 20px; }
  .hero-copy h1,.hero-copy .hero-line { max-width:100%; }
  .hero-copy h1 { font-size:clamp(88px,15vw,112px); letter-spacing:-5px; }
  .hero-emblem { position:static; transform:none; width:min(85%,390px); margin:0 auto 25px; order:2; z-index:0; }
  .hero-emblem img { height:auto; }
  .myth-emblem { width:220px; }
  .horizon { grid-template-columns:110px 1fr; gap:20px; }
  .horizon-emblem { width:110px; }
}
@media (max-width:700px) {
  .horizon { grid-template-columns:1fr; gap:25px; }
  .horizon-emblem { width:190px; }
  .horizon>a { grid-column:1; }
}

@media (min-width:701px) and (max-width:900px) {
  .site-header { height:auto; flex-wrap:wrap; padding-block:18px; }
  .site-header nav { order:4; width:100%; justify-content:space-between; }
}