@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    --ink: #090709;
    --ink-soft: #120c12;
    --wine: #3b0d1d;
    --crimson: #a92145;
    --crimson-bright: #e05270;
    --teal: #3d8d8c;
    --teal-soft: #9ac5c0;
    --paper: #f1e8e8;
    --muted: #b6a8ad;
    --line: rgba(226, 173, 184, 0.25);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --mono: 'DM Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--serif); overflow-x: hidden; }
body::selection { background: var(--crimson); color: white; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--teal-soft); outline-offset: 5px; }
img { display: block; max-width: 100%; }

.site-wash { position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 74% 25%, rgba(49, 117, 119, .18), transparent 30%), radial-gradient(circle at 20% 45%, rgba(135, 17, 48, .2), transparent 38%), #090709; }
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 clamp(20px, 5vw, 76px); background: linear-gradient(180deg, rgba(9, 7, 9, .94), rgba(9, 7, 9, .6), transparent); }
.return-link, .shrine-nav a, .eyebrow, figcaption, footer, .profile-list dt, .favorite-list span, .gallery-card span, .gallery-card small, .media-card span, .media-card small, .editable-note { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.return-link { font-size: .7rem; color: var(--teal-soft); text-decoration: none; }
.shrine-nav { display: flex; gap: clamp(14px, 2vw, 32px); align-items: center; }
.shrine-nav a { font-size: .64rem; color: var(--muted); text-decoration: none; transition: color .25s ease; }
.shrine-nav a:hover { color: var(--crimson-bright); }
.nav-toggle { display: none; background: none; border: 0; color: var(--paper); padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; width: 25px; height: 1px; margin: 5px 0; background: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.shrine-section { padding: clamp(88px, 12vw, 180px) clamp(20px, 9vw, 150px); position: relative; }
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .82fr) minmax(280px, 1fr); align-items: center; gap: clamp(24px, 7vw, 120px); padding-top: 120px; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.eyebrow { margin: 0 0 22px; color: var(--teal-soft); font-size: clamp(.62rem, 1vw, .76rem); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--paper); font-size: clamp(5rem, 15vw, 13rem); font-weight: 500; letter-spacing: -.04em; line-height: .72; text-shadow: 12px 14px 0 rgba(120, 20, 45, .22); }
.hero-subtitle { margin: 38px 0 6px; color: var(--crimson-bright); font-family: var(--mono); font-size: clamp(.9rem, 1.5vw, 1.1rem); letter-spacing: .32em; }
.hero-role { margin-bottom: 42px; color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .27em; }
.hero-cta { display: inline-flex; gap: 18px; align-items: center; padding: 15px 20px; border: 1px solid var(--line); color: var(--paper); font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.hero-cta:hover { border-color: var(--crimson-bright); background: rgba(169, 33, 69, .16); transform: translateX(5px); }
.hero-art { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 620px; margin: 0; }
.hero-art::before { content: ''; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid rgba(61, 141, 140, .3); border-radius: 50%; box-shadow: 0 0 90px rgba(61, 141, 140, .12), inset 0 0 90px rgba(169, 33, 69, .14); }
.hero-art img { position: relative; z-index: 1; width: min(100%, 590px); max-height: 78vh; object-fit: contain; filter: saturate(.8) contrast(1.08) drop-shadow(-30px 30px 50px rgba(0,0,0,.65)); }
.hero-art figcaption { position: absolute; right: 0; bottom: 12%; color: var(--muted); font-size: .58rem; }
.art-halo { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(169, 33, 69, .32); filter: blur(70px); }
.hero-clock { position: absolute; right: 4%; top: 22%; width: min(30vw, 360px); aspect-ratio: 1; border: 1px solid rgba(169,33,69,.2); border-radius: 50%; opacity: .48; }
.hero-clock::before, .hero-clock::after { content: ''; position: absolute; inset: 10%; border: 1px solid rgba(61,141,140,.16); border-radius: 50%; }
.hero-clock::after { inset: 49% 5% 49%; transform: rotate(-26deg); transform-origin: center; background: var(--crimson); border: 0; }
.roman { position: absolute; color: var(--muted); font: .58rem var(--mono); }
.roman-xii { top: 4%; left: 48%; }.roman-iii { top: 48%; right: 3%; }.roman-vi { bottom: 4%; left: 48%; }.roman-ix { top: 48%; left: 3%; }.roman-xiii { top: 46%; left: 42%; color: var(--crimson-bright); }
.hero-side-note { position: absolute; left: clamp(20px, 9vw, 150px); bottom: 6%; color: rgba(182,168,173,.55); font: .58rem/1.7 var(--mono); letter-spacing: .14em; }

.section-dark { background: linear-gradient(110deg, rgba(39,8,20,.7), rgba(10,18,19,.72)); border-top: 1px solid rgba(226,173,184,.1); border-bottom: 1px solid rgba(226,173,184,.1); }
.section-heading { max-width: 800px; margin-bottom: 64px; }
h2 { color: var(--paper); font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 500; letter-spacing: -.03em; line-height: .86; }
.section-lead { max-width: 540px; color: var(--muted); font-size: clamp(1.12rem, 1.8vw, 1.5rem); line-height: 1.45; }
.profile-layout { display: grid; grid-template-columns: minmax(160px, .42fr) 1fr; gap: clamp(28px, 7vw, 120px); max-width: 1100px; }
.profile-stamp { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1; max-width: 260px; border: 1px solid var(--line); border-radius: 50%; color: var(--crimson-bright); box-shadow: 0 0 60px rgba(169,33,69,.14); }
.profile-stamp span { font-size: clamp(4rem, 9vw, 7rem); }.profile-stamp small { color: var(--teal-soft); font: .62rem/1.5 var(--mono); letter-spacing: .2em; text-align: center; }
.profile-list { margin: 0; border-top: 1px solid var(--line); }.profile-list div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }.profile-list dt { color: var(--teal-soft); font-size: .68rem; }.profile-list dd { margin: 0; color: var(--paper); font-size: 1.35rem; }

.why-kurumi { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 8vw, 140px); }.why-art { position: relative; }.why-art::after { content: 'XIII'; position: absolute; right: -14px; bottom: -24px; color: var(--crimson); font: clamp(4rem, 10vw, 9rem) var(--serif); opacity: .3; }.why-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; filter: saturate(.72) contrast(1.1); }.why-copy { max-width: 620px; }.large-copy { color: var(--paper); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.16; }.editable-note { color: var(--teal-soft); font-size: .65rem; line-height: 1.7; }

.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1120px; }.gallery-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 20px; border: 0; background: none; color: var(--paper); text-align: left; cursor: pointer; }.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; filter: saturate(.72); transition: filter .3s ease, transform .3s ease; }.gallery-card:hover img { filter: saturate(1); transform: scale(.985); }.gallery-card span { margin-bottom: 8px; color: var(--teal-soft); font-size: .6rem; }.gallery-card strong { font-size: 1.35rem; font-weight: 500; }.gallery-card small { margin-top: 8px; color: var(--muted); font-size: .58rem; }.gallery-feature { grid-row: span 2; }.gallery-feature img { aspect-ratio: 3 / 4; }

.favorite-list, .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 1100px; background: var(--line); }.favorite-list article, .media-card { min-height: 230px; padding: 28px; background: var(--ink); text-decoration: none; }.favorite-list span { color: var(--crimson-bright); font-size: .65rem; }.favorite-list h3 { margin: 46px 0 10px; color: var(--paper); font-size: 2rem; font-weight: 500; }.favorite-list p { margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.4; }.quote-placeholder { max-width: 850px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.quote-placeholder span { color: var(--crimson-bright); font-size: 6rem; line-height: .5; }.quote-placeholder p { color: var(--paper); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; }.quote-placeholder small { color: var(--teal-soft); font: .6rem var(--mono); letter-spacing: .17em; }.media-grid { grid-template-columns: repeat(2, 1fr); }.media-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; }.media-card span { color: var(--teal-soft); font-size: .63rem; }.media-card strong { color: var(--paper); font-size: 1.5rem; font-weight: 500; }.media-card small { color: var(--muted); font-size: .6rem; }.archive { text-align: center; }.archive .section-lead { margin: 0 auto 36px; }.archive-return { display: inline-block; padding: 14px 18px; border: 1px solid var(--line); }.archive h2 { max-width: 900px; margin-inline: auto; }

.lightbox { width: min(900px, calc(100% - 32px)); padding: 18px; border: 1px solid var(--line); background: var(--ink-soft); color: var(--paper); }.lightbox::backdrop { background: rgba(0,0,0,.78); }.lightbox img { width: 100%; max-height: 75vh; object-fit: contain; }.lightbox p { margin: 12px 0 0; color: var(--teal-soft); font: .7rem var(--mono); }.lightbox-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--paper); font-size: 2rem; cursor: pointer; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 9vw, 150px); color: var(--muted); font-size: .58rem; }

.shrine-section, .gallery-card, .favorite-list article, .media-card { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.is-visible { opacity: 1; transform: none; }

@media (max-width: 800px) { .site-header { min-height: 62px; }.nav-toggle { display: block; }.shrine-nav { position: absolute; top: 62px; left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: rgba(18,12,18,.97); border: 1px solid var(--line); }.shrine-nav.is-open { display: flex; }.shrine-nav a { padding: 15px 12px; }.hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding-top: 130px; }.hero-copy { order: 1; }.hero-art { order: 2; min-height: 54vh; }.hero-side-note { position: static; order: 3; margin-top: 18px; }.hero-clock { top: 24%; right: -16%; width: 78vw; }.hero-art img { max-height: 54vh; }.hero-art figcaption { right: 4%; bottom: 3%; }.profile-layout, .why-kurumi { grid-template-columns: 1fr; }.profile-stamp { max-width: 180px; margin: 0 auto; }.profile-list div { grid-template-columns: 1fr; gap: 7px; }.split-heading { display: block; }.gallery-grid { grid-template-columns: 1fr 1fr; }.gallery-feature { grid-column: span 2; grid-row: auto; }.gallery-feature img { aspect-ratio: 4 / 3; }.favorite-list, .media-grid { grid-template-columns: 1fr; }.favorite-list article { min-height: 180px; }.favorite-list h3 { margin-top: 25px; } footer { flex-direction: column; } }
@media (max-width: 430px) { .shrine-section { padding: 84px 18px; }.hero { padding-top: 112px; }.return-link { max-width: 190px; font-size: .56rem; }.hero-art { min-height: 390px; }.hero-art img { max-height: 390px; }.hero-side-note { font-size: .5rem; }.gallery-grid { grid-template-columns: 1fr; }.gallery-feature { grid-column: auto; }.gallery-card img, .gallery-feature img { aspect-ratio: 4 / 3; }.profile-list dd { font-size: 1.15rem; }.large-copy { font-size: 1.8rem; } h2 { font-size: clamp(3rem, 15vw, 4.5rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .shrine-section, .gallery-card, .favorite-list article, .media-card { opacity: 1; transform: none; } }