:root { --backdrop:#171614; --ink:#f3efe7; --muted:#aaa49b; --paper:#f7f7f4; }
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { width:100%; height:100%; overflow:hidden; }
body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--backdrop); color:var(--ink); font-family:'IBM Plex Mono',ui-monospace,monospace; font-style:normal; font-weight:200; text-align:center; text-transform:lowercase; transition:background-color .5s ease; -webkit-font-smoothing:antialiased; }
.aog-room { --backdrop:#f6f3ec; --ink:#171614; --muted:#625e57; }
.aog-room .exit-arrow,.aog-room .room-sound-toggle,.aog-room .room-menu-toggle { color:#171614; }
.aog-room.nav-open .room-menu-toggle { color:#fff; }
.aog-room .wordmark { background:rgba(246,243,236,.82); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.aog-room .artwork-image { box-shadow:0 46px 96px rgba(23,22,20,.42),0 22px 44px rgba(23,22,20,.32),0 7px 16px rgba(23,22,20,.2); transform:translateY(-7px); }
.wearable-preview { position:relative; width:min(70vw,520px); max-height:min(52dvh,560px); aspect-ratio:1; filter:drop-shadow(0 46px 48px rgba(23,22,20,.4)) drop-shadow(0 18px 22px rgba(23,22,20,.28)); transform:translateY(-7px); }
.wearable-shirt { display:block; width:100%; height:100%; object-fit:contain; }
.wearable-art { position:absolute; top:25%; left:37%; width:26%; height:42%; object-fit:contain; mix-blend-mode:screen; }
button { font:inherit; font-style:normal; font-weight:200; }
.exit-arrow { position:fixed; top:18px; left:20px; z-index:40; display:grid; width:36px; height:36px; place-items:center; border:0; background:transparent; box-shadow:none; color:#fff; font-size:22px; line-height:1; text-decoration:none; transition:transform .2s ease; }
.exit-arrow:hover,.exit-arrow:focus-visible { transform:translate(-2px,-2px); }
.floating-nav { position:fixed; top:18px; left:50%; z-index:40; transform:translateX(-50%); }
.room-sound-toggle { position:fixed; top:20px; right:20px; z-index:42; width:34px; height:34px; display:grid; place-items:center; padding:7px; border:0; background:transparent; box-shadow:none; color:#fff; cursor:pointer; }
.room-sound-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.room-sound-toggle:hover,.room-sound-toggle:focus-visible { transform:scale(1.05); }
.room-menu-toggle { position:fixed; top:20px; right:20px; z-index:72; display:grid; width:34px; height:34px; padding:0; place-items:center; border:0; background:transparent; color:#fff; box-shadow:none; cursor:pointer; font-size:24px; line-height:1; }
.room-sound-toggle:has(~ .room-menu-toggle),body:has(.room-menu-toggle) .room-sound-toggle { right:64px; }
.room-menu { position:fixed; inset:0 0 0 auto; z-index:71; width:min(520px,100%); padding:34px clamp(26px,6vw,72px); background:#171614; color:#fff; box-shadow:-18px 0 52px rgba(0,0,0,.34); transform:translateX(100%); transition:transform .6s cubic-bezier(.76,0,.24,1); }
.room-menu.is-open { transform:none; }
.room-menu-close { float:right; border:0; background:transparent; color:#fff; cursor:pointer; font:inherit; }
.room-menu nav { clear:both; display:flex; flex-direction:column; padding-top:14vh; text-align:left; }
.room-menu nav a { padding:16px 0; color:#fff; font-size:clamp(1.1rem,3vw,2rem); text-decoration:none; }
.wordmark { display:block; padding:9px 15px; border:0; border-radius:999px; background:color-mix(in srgb,var(--backdrop) 82%,transparent); box-shadow:0 8px 24px rgba(0,0,0,.14); color:var(--ink); font-size:14px; font-style:normal; font-weight:200; letter-spacing:-.06em; text-decoration:none; backdrop-filter:blur(12px); }
.wordmark span { color:#d75b4a; }
.love-letter { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:clamp(14px,2.5vh,24px); width:min(100% - 40px,820px); height:100dvh; margin:0 auto; padding:64px 0 clamp(14px,2.5vh,24px); overflow:hidden; }
.love-letter.is-empty { grid-template-rows:1fr; place-items:center; }
.love-letter.is-empty .artwork-details { align-self:center; }
.love-letter.is-empty .artwork-prose { opacity:.55; }
.artwork-stage { position:relative; display:grid; min-height:0; place-items:center; }
.artwork-image { display:block; width:auto; max-width:min(78vw,680px); max-height:min(52dvh,560px); border:0; border-radius:0; background:transparent; box-shadow:0 16px 42px rgba(0,0,0,.18); object-fit:contain; opacity:1; filter:blur(0); transform:scale(1); transition:opacity .62s ease,filter .62s ease,transform .72s cubic-bezier(.22,.61,.36,1); }
.r3-room .artwork-stage { isolation:isolate; padding:clamp(24px,4vh,44px) clamp(28px,5vw,58px); overflow:hidden; border-radius:32px; }
.r3-room .artwork-stage::before { content:""; position:absolute; inset:clamp(18px,3vh,34px) clamp(24px,4vw,48px); z-index:-2; border-radius:32px; background-image:var(--artwork-image); background-position:center; background-repeat:no-repeat; background-size:contain; opacity:.2; filter:blur(28px); transform:scale(1.04); }
.r3-room .artwork-stage::after { content:""; position:absolute; inset:clamp(12px,2vh,26px) clamp(18px,3vw,38px); z-index:-1; border-radius:32px; background:radial-gradient(ellipse at center,transparent 46%,color-mix(in srgb,var(--backdrop) 76%,transparent) 100%); box-shadow:inset 0 0 34px color-mix(in srgb,var(--backdrop) 82%,transparent); pointer-events:none; }
.r3-room .artwork-image { max-width:min(66vw,520px); max-height:min(46dvh,490px); padding:clamp(10px,1.8vh,20px); border-radius:26px; box-shadow:0 24px 58px rgba(0,0,0,.34); filter:drop-shadow(0 26px 42px rgba(0,0,0,.58)) drop-shadow(0 7px 14px rgba(0,0,0,.42)); }
.next-work { position:fixed; top:50%; right:20px; z-index:45; width:48px; height:48px; padding:0; border:0; background:transparent; color:var(--ink); box-shadow:none; cursor:pointer; font-size:32px; line-height:1; transform:translateY(-50%); transition:transform .2s ease; }
.next-work:hover,.next-work:focus-visible { transform:translateY(-50%) translateX(4px); }
.artwork-details { width:min(100%,620px); margin:0 auto; text-align:center; opacity:1; filter:blur(0); transform:translateY(0); transition:opacity .52s ease,filter .52s ease,transform .62s cubic-bezier(.22,.61,.36,1); }
.artwork-kicker { margin:0 0 12px; color:var(--muted); font-size:11px; letter-spacing:.14em; }
.love-letter.is-editorial { display:block; overflow-y:auto; padding:86px 24px 56px; }
.love-letter.is-editorial .artwork-stage { min-height:58px; }
.love-letter.is-editorial .artwork-details { width:min(100%,760px); }
.love-letter.is-editorial .artwork-prose { max-width:64ch; font-size:clamp(11px,1.5vw,14px); line-height:1.75; }
.love-letter.is-changing .artwork-image { opacity:0; filter:blur(9px); transform:scale(.985); }
.love-letter.is-changing .artwork-details { opacity:0; filter:blur(5px); transform:translateY(8px); }
.intermission-note { margin:0 0 7px; color:var(--muted); font-size:9px; letter-spacing:.08em; }
.artwork-details h1 { margin:0; font-size:clamp(18px,2.4vw,25px); font-weight:200; line-height:1.25; }
.artwork-prose { max-width:58ch; margin:10px auto 0; color:var(--muted); font-size:clamp(10px,1.25vh,13px); line-height:1.55; white-space:pre-line; }
.audio-button { display:grid; width:38px; height:38px; margin:18px auto 0; padding:0 0 0 2px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:#171614; color:#fff; cursor:pointer; font-size:12px; line-height:1; }
.audio-button.is-playing { padding-left:0; font-size:10px; }
.size-pills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; width:min(100%,360px); margin:14px auto 0; }
.size-pills.is-grouped { display:grid; grid-template-columns:1fr; gap:11px; width:min(100%,360px); }
.format-group { display:grid; gap:6px; }
.format-group-label { margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.format-group-pills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.size-pills:has(.size-pill:only-child) { grid-template-columns:minmax(0,1fr); width:min(100%,260px); }
.size-pills.is-static { display:block; width:auto; margin-top:13px; }
.single-format { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.size-pill { min-width:0; padding:8px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:#171614; color:#fff; box-shadow:0 9px 22px rgba(0,0,0,.34); cursor:pointer; font-size:10px; white-space:nowrap; }
.size-pill.is-selected { border-color:rgba(255,255,255,.72); background:#244c3c; color:#fff; box-shadow:0 11px 26px rgba(0,0,0,.4); }
.add-to-cart,.checkout-button { margin-top:11px; padding:10px 18px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:#171614; color:#fff; box-shadow:0 9px 22px rgba(0,0,0,.34); cursor:pointer; font-size:11px; }
.floating-cart { position:fixed; top:18px; right:20px; z-index:50; width:min(340px,calc(100% - 40px)); max-height:calc(100dvh - 36px); padding:12px 14px; overflow:hidden; border:0; border-radius:18px; background:var(--paper); color:#171614; box-shadow:0 14px 38px rgba(0,0,0,.28); text-align:left; }
.cart-summary { display:flex; width:100%; justify-content:space-between; padding:9px 12px; border:0; border-radius:999px; background:#171614; color:#fff; cursor:pointer; font-size:12px; }
.cart-drawer { padding-top:16px; }
.cart-items { display:grid; gap:10px; max-height:min(38dvh,260px); overflow:auto; overscroll-behavior:contain; }
.cart-item { display:grid; grid-template-columns:1fr auto; gap:8px 16px; color:#77736d; font-size:10px; line-height:1.45; }
.cart-item strong { color:#171614; font-weight:200; }
.cart-item button { grid-column:2; padding:0; border:0; background:transparent; color:#77736d; cursor:pointer; }
.checkout-button { width:100%; margin-top:18px; background:#171614; color:var(--paper); }
.checkout-button:disabled { opacity:.45; cursor:wait; }
.cart-status { min-height:1.4em; margin:10px 0 0; font-size:10px; opacity:.68; }
:focus-visible { outline:2px solid #b65b43; outline-offset:4px; }
.collection-entrance { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; background:#0d0d0c; color:#fff; opacity:1; transition:opacity .8s ease,visibility .8s ease; }
.collection-entrance.is-leaving { opacity:0; visibility:hidden; pointer-events:none; }
.collection-entrance::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58)); }
.entrance-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; filter:saturate(.72) brightness(.72); transform:scale(1.01); }
.collection-entrance--gods .entrance-image,.collection-entrance--r3 .entrance-image { object-fit:contain; opacity:.72; filter:none; }
.collection-entrance--gods { place-items:center; overflow:hidden; }
.collection-entrance--gods::after { background:radial-gradient(circle at center,rgba(0,0,0,.18),rgba(0,0,0,.56)); transition:background 3.8s ease; }
.collection-entrance--gods.sound-has-entered::after { background:radial-gradient(circle at center,rgba(0,0,0,.62),rgba(0,0,0,.82)); }
.collection-entrance--gods .entrance-image { position:absolute; width:100%; height:100%; object-position:center; opacity:.96; transform:scale(1.025); transition:opacity 3.8s ease,transform 12s cubic-bezier(.2,.65,.3,1),filter 3.8s ease; }
.collection-entrance--gods.sound-has-entered .entrance-image { opacity:.34; filter:brightness(.55); transform:scale(1); }
.entrance-copy--gods { display:grid; width:100%; height:100%; padding:clamp(44px,7vh,78px) clamp(34px,8vw,120px); place-items:center; }
.gods-typed { width:min(82vw,760px); min-height:min(72vh,620px); margin:0; display:grid; place-content:center; color:rgba(255,255,255,0); font-size:clamp(10px,1.12vw,15px) !important; line-height:1.58 !important; letter-spacing:.025em; white-space:pre-line; text-align:center; text-transform:none; text-shadow:0 2px 20px rgba(0,0,0,.96); transition:color 1.6s ease; }
.collection-entrance--gods.is-typing .gods-typed { color:rgba(255,255,255,.94); }
.entrance-arrow { display:grid; width:58px; height:58px; margin:34px 0 0; padding:0; place-items:center; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:32px; line-height:1; }
.collection-entrance--gods .entrance-arrow { position:fixed; right:clamp(28px,5vw,72px); bottom:28px; z-index:3; margin:0; }
.collection-entrance--gods .entrance-proceed { position:fixed; bottom:24px; left:50%; z-index:3; margin:0; padding:7px 12px; border:0; border-radius:999px; background:#a89d8c; color:#171614; box-shadow:0 8px 22px rgba(0,0,0,.28); font-size:8px; letter-spacing:.04em; transform:translateX(-50%); }
.collection-entrance--gods .entrance-proceed.is-pulsing { animation:gods-proceed-pulse 1.3s ease-in-out 3; }
@keyframes gods-proceed-pulse { 0%,100% { opacity:.62; transform:translateX(-50%) scale(.94); box-shadow:0 6px 18px rgba(0,0,0,.22); } 50% { opacity:1; transform:translateX(-50%) scale(1.05); box-shadow:0 10px 30px rgba(168,157,140,.42); } }
body.is-entering > .exit-arrow,body.is-entering > .floating-nav,body.is-entering > .room-sound-toggle,body.is-entering > .room-menu-toggle { opacity:0; pointer-events:none; }
.collection-entrance--lagos .entrance-image { object-fit:contain; opacity:.78; filter:saturate(.8) brightness(.78); }
.entrance-copy { position:relative; z-index:1; width:min(90vw,680px); padding:28px; text-align:center; text-shadow:0 2px 22px rgba(0,0,0,.9); }
.entrance-copy h1 { margin:8px 0 12px; font-size:clamp(34px,7vw,82px); font-weight:200; line-height:1; letter-spacing:-.06em; }
.entrance-copy p { margin:0; font-size:clamp(10px,1.2vw,14px); line-height:1.65; }
.entrance-kicker { letter-spacing:.08em; }
.entrance-button { margin-top:26px; padding:12px 20px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:#171614; color:#fff; cursor:pointer; font-size:11px; box-shadow:0 12px 32px rgba(0,0,0,.34); }
.collection-entrance--gods .entrance-arrow { border:0; border-radius:0; background:transparent; box-shadow:none; }
.collection-entrance--lagos .entrance-button { background:#39785c; border-color:#39785c; color:#fff; }
.collection-entrance--lagos .entrance-button:hover,.collection-entrance--lagos .entrance-button:focus-visible { background:#4b8d6e; border-color:#4b8d6e; }
.collection-entrance--lagos::after { background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5)); }
.entrance-copy--lagos { align-self:end; padding-bottom:clamp(58px,11vh,120px); }
.entrance-typing { min-height:1.15em; color:#39ff78; font-size:clamp(46px,10vw,128px) !important; letter-spacing:-.08em !important; text-shadow:0 4px 32px rgba(0,0,0,.9); }
.entrance-typing::after { content:""; display:inline-block; width:.55ch; height:.85em; margin-left:.12em; border-right:2px solid currentColor; vertical-align:-.06em; animation:entrance-caret .72s steps(1) infinite; }
@keyframes entrance-caret { 50% { opacity:0; } }
@media(max-width:760px) {
  .floating-nav { top:12px; }
  .exit-arrow { top:12px; left:12px; }
  .room-sound-toggle { top:13px; right:12px; }
  .room-menu-toggle { top:13px; right:12px; }
  body:has(.room-menu-toggle) .room-sound-toggle { right:56px; }
  .love-letter { width:min(100% - 32px,820px); padding:60px 0 12px; gap:12px; }
  .artwork-stage { min-height:0; padding-right:28px; }
  .aog-room .artwork-stage { padding-right:0; }
  .aog-room .love-letter { padding-top:82px; gap:9px; }
  .aog-room .artwork-stage { padding:12px 0 0; }
  .artwork-image { max-width:calc(100% - 10px); max-height:44dvh; border-radius:0; }
  .aog-room .artwork-image { max-width:min(64vw,430px); max-height:38dvh; transform:translateY(-3px); }
  .aog-room .wearable-preview { width:min(60vw,440px); max-height:39dvh; transform:translateY(-3px); }
  .r3-room .artwork-stage { padding:24px 30px; border-radius:24px; }
  .r3-room .artwork-image { max-width:100%; max-height:42dvh; padding:12px; border-radius:22px; }
  .next-work { right:12px; width:44px; height:44px; }
  .artwork-details h1 { font-size:16px; }
  .artwork-prose { margin-top:8px; font-size:9px; line-height:1.45; }
  .aog-room .artwork-details { width:min(94%,520px); }
  .aog-room .artwork-prose { max-width:44ch; margin-top:5px; font-size:8px; line-height:1.28; }
  .aog-room .audio-button { width:32px; height:32px; margin-top:10px; font-size:10px; }
  .size-pills { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; }
  .size-pills.is-grouped { grid-template-columns:1fr; gap:8px; }
  .format-group { gap:4px; }
  .format-group-pills { gap:6px; }
  .aog-room .size-pills.is-grouped { width:min(82%,320px); margin-top:11px; gap:7px; }
  .aog-room .format-group { gap:3px; }
  .aog-room .format-group-label { font-size:8px; line-height:1.2; }
  .aog-room .format-group-pills { gap:6px; }
  .size-pill { width:100%; padding:7px 3px; font-size:8px; }
  .aog-room .size-pill { padding:5px 7px; font-size:7px; }
  .add-to-cart { margin-top:9px; padding:9px 16px; font-size:10px; }
  .aog-room .add-to-cart { margin-top:7px; padding:7px 13px; font-size:8px; }
  .floating-cart { top:58px; right:12px; width:min(170px,calc(100% - 92px)); }
  .floating-cart:has(.cart-drawer:not([hidden])) { width:calc(100% - 24px); }
  .collection-entrance--gods { display:grid; }
  .collection-entrance--gods .entrance-image { position:absolute; width:100%; height:100%; }
  .entrance-copy--gods { width:100%; margin:0; padding:52px 24px 66px; }
  .gods-typed { width:92vw; min-height:74vh; font-size:clamp(9px,2.5vw,12px) !important; line-height:1.5 !important; }
  .collection-entrance--gods .entrance-arrow { right:18px; bottom:18px; margin:0; }
  .collection-entrance--gods .entrance-proceed { bottom:18px; }
}
@media(max-height:700px) {
  .love-letter { padding-top:54px; gap:9px; }
  .artwork-image { max-height:43dvh; }
  .artwork-details h1 { font-size:15px; }
  .artwork-prose { margin-top:6px; font-size:9px; line-height:1.4; }
  .size-pills { margin-top:9px; }
  .size-pill { padding-block:6px; font-size:8px; }
  .add-to-cart { margin-top:8px; padding-block:8px; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .next-work,.artwork-image,.artwork-details,.collection-entrance { transition:none; } .entrance-typing::after,.collection-entrance--gods .entrance-proceed.is-pulsing { animation:none; } }