@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --teal:#00CED1;
  --teal-deep:#006e73;
  --teal-ink:#003f45;
  --orange:#FF8C00;
  --pink:#FF69B4;
  --gold:#D4AF37;
  --sand:#efe5d2;
  --ivory:#fffaf1;
  --ink:#17383a;
  --muted:#667675;
  --line:rgba(23,56,58,.18);
  --shadow:0 28px 80px rgba(16,66,68,.16);
  --radius:clamp(22px,3vw,44px);
  --pad:clamp(1.2rem,3vw,3rem);
  --gutter:clamp(1.15rem,4vw,5.5rem);
  --max:1540px;
  --font-display:"Gloock","Bodoni 72","Didot","Times New Roman",serif;
  --font-ui:"Space Grotesk","Avenir Next","Avenir","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(0,206,209,.08), transparent 26rem),
    linear-gradient(180deg,#fffdf8 0%,#fffaf1 45%,#f6ecdc 100%);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a{font:inherit}
button{color:inherit}
::selection{background:var(--pink);color:#321126}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.skip-link{
  position:fixed;left:1rem;top:1rem;z-index:300;
  background:var(--ivory);border:1px solid var(--ink);padding:.7rem 1rem;
  transform:translateY(-180%);transition:.2s ease
}
.skip-link:focus{transform:none}

.site-header{
  position:fixed;z-index:200;top:0;left:0;right:0;
  padding:.75rem var(--gutter);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--ivory) 92%,transparent);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(0,63,69,.14);
}
.site-header.is-hidden{transform:translateY(-110%)}
.nav-shell{
  max-width:var(--max);margin:auto;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:2rem;min-height:58px
}
.brand-logo{display:flex;align-items:center;gap:.8rem}
.brand-logo img{width:clamp(116px,10vw,158px);height:auto}
.brand-logo small{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.primary-nav{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,2.1vw,2.2rem);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.primary-nav a{position:relative;padding:.6rem 0}
.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.22rem;height:2px;background:var(--teal);transition:right .25s}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{right:0}
.lang-link{
  border:1px solid var(--teal-ink);border-radius:99px;padding:.56rem .8rem;
  font-size:.73rem;font-weight:700;letter-spacing:.11em
}
.menu-button{
  display:none;background:transparent;border:0;padding:.4rem;cursor:pointer
}
.menu-button span{display:block;width:28px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

.mobile-drawer{
  position:fixed;inset:0;z-index:190;background:rgba(255,250,241,.98);
  padding:7.5rem var(--gutter) 3rem;display:none
}
.mobile-drawer.is-open{display:block}
.mobile-drawer nav{display:grid;gap:.75rem}
.mobile-drawer a{font-family:var(--font-display);font-size:clamp(2.2rem,10vw,4rem);line-height:1}
.mobile-drawer .drawer-meta{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.2rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}

main{min-height:70vh}
.wrap{width:min(calc(100% - var(--gutter) - var(--gutter)),var(--max));margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--teal-deep)
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--orange)}
.display{
  margin:.3rem 0 1.2rem;font-family:var(--font-display);
  font-size:clamp(3.1rem,8vw,9.2rem);line-height:.84;letter-spacing:-.045em;font-weight:400
}
.section-title{
  margin:.5rem 0 1.2rem;font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,6.2rem);line-height:.93;letter-spacing:-.035em;font-weight:400
}
.lede{font-size:clamp(1.05rem,1.5vw,1.4rem);max-width:64ch;color:#35595a}
.copy{max-width:66ch}
.copy p{margin:.7rem 0 1.1rem}
.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.9rem 1.18rem;border-radius:999px;border:1px solid var(--teal-ink);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  transition:transform .2s,background .2s,color .2s,box-shadow .2s
}
.btn.primary{background:var(--teal-ink);color:var(--ivory);border-color:var(--teal-ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,63,69,.14)}
.btn.primary:hover{background:var(--pink);border-color:var(--pink);color:#2f1830}
.btn.ghost:hover{background:var(--ivory)}

.hero{
  min-height:100svh;overflow:clip;padding:7rem var(--gutter) 2rem;position:relative;display:flex;align-items:end
}
.hero-grid{
  width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr);
  gap:clamp(1rem,3vw,3.5rem);align-items:end
}
.hero-copy{position:relative;z-index:4;padding-bottom:clamp(1rem,5vw,5rem)}
.hero .display{font-size:clamp(4rem,9vw,9.8rem)}
.hero-copy .lede{max-width:46ch}
.hero-media{
  min-height:min(78vh,860px);position:relative;border-radius:62% 18% 38% 18%/26% 20% 36% 28%;
  overflow:hidden;box-shadow:var(--shadow);isolation:isolate;background:var(--sand)
}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 48%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(145deg,transparent 60%,rgba(255,140,0,.18)),linear-gradient(15deg,rgba(0,206,209,.2),transparent 40%);
  pointer-events:none
}
.hero-orbit{
  position:absolute;width:38vw;max-width:520px;aspect-ratio:1;border:3px solid rgba(0,206,209,.55);
  border-radius:50%;right:-7vw;top:10vh;z-index:-1
}
.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border-radius:50%;inset:9%;border:1px solid rgba(255,105,180,.5)}
.hero-orbit::after{inset:20%;border-color:rgba(212,175,55,.6)}
.vertical-note{
  position:absolute;right:clamp(.4rem,1vw,1.1rem);bottom:2rem;z-index:5;
  writing-mode:vertical-rl;text-orientation:mixed;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)
}

.axis{padding:clamp(5rem,11vw,11rem) 0 5rem;overflow:clip}
.axis-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,5rem);align-items:stretch}
.axis-card{
  padding:clamp(1.6rem,4vw,4rem);border-radius:var(--radius);min-height:430px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden
}
.axis-card h3{font-family:var(--font-display);font-size:clamp(3.5rem,7vw,7rem);font-weight:400;line-height:.9;margin:0}
.axis-card ul{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.8rem}
.axis-card li{border-top:1px solid currentColor;padding-top:.7rem}
.axis-card.left{background:var(--orange);color:#49260f;transform:rotate(-1.3deg)}
.axis-card.right{background:var(--teal);color:#003c41;transform:rotate(1.3deg)}
.axis-link{align-self:center;font-family:var(--font-display);font-size:clamp(3rem,7vw,6.5rem);color:var(--pink)}

.manifesto{padding:clamp(4rem,10vw,9rem) 0}
.manifesto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.portrait-arch{
  position:relative;aspect-ratio:4/5;border-radius:50% 50% 14% 14%/22% 22% 10% 10%;overflow:hidden;
  box-shadow:var(--shadow)
}
.portrait-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.stamp{
  position:absolute;right:-1rem;bottom:8%;background:var(--ivory);border:1px solid var(--gold);width:clamp(110px,14vw,190px);
  aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(8deg);box-shadow:0 15px 40px rgba(0,0,0,.1)
}
.manifesto .quote{
  font-family:var(--font-display);font-size:clamp(2.4rem,5vw,5.5rem);line-height:.98;margin:1.5rem 0;color:var(--teal-ink)
}
.manifesto .quote em{font-style:normal;color:var(--pink)}

.world{padding:clamp(5rem,10vw,10rem) 0;background:linear-gradient(180deg,#f5e8d0,#fffaf1)}
.world-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:2.4rem}
.world-head .lede{justify-self:end}
.gallery{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,9vw);gap:clamp(.7rem,1.2vw,1.1rem)
}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:28px;background:var(--sand);cursor:zoom-in}
.gallery figure:nth-child(1){grid-column:span 7;grid-row:span 4}
.gallery figure:nth-child(2){grid-column:span 5;grid-row:span 4}
.gallery figure:nth-child(3){grid-column:span 4;grid-row:span 3}
.gallery figure:nth-child(4){grid-column:span 4;grid-row:span 3}
.gallery figure:nth-child(5){grid-column:span 4;grid-row:span 3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.025)}
.gallery figcaption{
  position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(255,250,241,.92);
  backdrop-filter:blur(12px);border-radius:99px;padding:.62rem .86rem;
  display:flex;justify-content:space-between;gap:1rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em
}

.shady{padding:clamp(5rem,10vw,9rem) 0}
.shady-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.object-stage{
  position:relative;min-height:620px;border-radius:var(--radius);overflow:hidden;
  background:
   radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(239,229,210,.6) 38%,rgba(0,206,209,.12) 72%),
   var(--sand)
}
.object-stage img{position:absolute;object-fit:contain}
.object-stage .coat{width:72%;height:88%;left:4%;bottom:0}
.object-stage .boot{width:40%;height:48%;right:2%;bottom:0;transform:rotate(7deg)}
.mini-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2rem}
.fact{border-top:1px solid var(--line);padding-top:.75rem}
.fact b{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:400;color:var(--teal-deep)}
.fact span{font-size:.73rem;text-transform:uppercase;letter-spacing:.09em}

.creator-band{
  margin:clamp(4rem,9vw,9rem) auto;width:min(calc(100% - var(--gutter) - var(--gutter)),var(--max));
  display:grid;grid-template-columns:1.2fr .8fr;min-height:580px;border-radius:var(--radius);overflow:hidden;background:var(--teal-ink);color:#fffaf1
}
.creator-band .visual{position:relative;min-height:420px}
.creator-band .visual img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.creator-band .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--teal-ink))}
.creator-band .content{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center}
.creator-band .section-title{color:#fffaf1}
.creator-band .eyebrow{color:var(--teal)}
.creator-band .lede{color:#d3ebeb}
.creator-band .btn{border-color:#fffaf1;color:#fffaf1}

.pattern-break{
  min-height:46vh;background-image:linear-gradient(rgba(255,250,241,.2),rgba(255,250,241,.2)),url("../images/background-psychedelic.webp");
  background-size:cover;background-position:center;display:grid;place-items:center;text-align:center;padding:4rem var(--gutter)
}
.pattern-break blockquote{
  margin:0;background:rgba(255,250,241,.91);backdrop-filter:blur(12px);
  padding:clamp(1.5rem,4vw,4rem);border-radius:var(--radius);max-width:1000px;
  font-family:var(--font-display);font-size:clamp(2.6rem,6vw,6rem);line-height:.95;color:#4d2246
}

.page-hero{padding:10rem 0 4rem}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,7rem);align-items:end}
.page-hero .display{font-size:clamp(4rem,9vw,10rem)}
.creator-visual{
  border-radius:var(--radius);overflow:hidden;min-height:520px;position:relative;
  background:var(--sand)
}
.creator-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.creator-visual::after{
  content:"CREATOR / SYSTEM / IMAGE / LANGUAGE";position:absolute;right:1.2rem;bottom:1.2rem;
  background:var(--ivory);padding:.65rem .9rem;border-radius:99px;font-size:.65rem;font-weight:700;letter-spacing:.12em
}

.creator-story{padding:4rem 0 8rem}
.story-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(2rem,6vw,8rem)}
.side-index{position:sticky;top:120px;align-self:start;border-top:1px solid var(--line);padding-top:1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.long-copy{font-size:clamp(1.05rem,1.4vw,1.32rem);max-width:74ch}
.long-copy h2{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,5rem);line-height:.95;font-weight:400;margin:4rem 0 1rem}
.long-copy h2:first-child{margin-top:0}
.long-copy strong{color:var(--teal-deep)}
.contact-card{
  margin-top:4rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--radius);
  background:var(--orange);color:#4a260f;display:flex;justify-content:space-between;gap:2rem;align-items:center
}
.contact-card a{font-weight:700;text-decoration:underline;text-underline-offset:4px}

.legal{padding:10rem 0 7rem}
.legal .wrap{max-width:1040px}
.legal h1{font-family:var(--font-display);font-size:clamp(3.8rem,8vw,7.5rem);font-weight:400;line-height:.9}
.legal h2{font-family:var(--font-display);font-size:2.2rem;font-weight:400;margin:2.5rem 0 .8rem}
.placeholder{
  border:2px dashed var(--orange);background:#fff4df;border-radius:18px;padding:1rem 1.2rem;margin:1rem 0;
  font-size:.93rem
}
.placeholder strong{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:#9b5200;margin-bottom:.35rem}
.notice{font-size:.9rem;color:var(--muted);border-left:3px solid var(--teal);padding-left:1rem}

.site-footer{
  padding:4rem var(--gutter) 1.3rem;background:#e7dcc8;color:var(--teal-ink)
}
.footer-grid{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem}
.footer-mark{font-family:var(--font-display);font-size:clamp(3rem,7vw,7rem);line-height:.85}
.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-content:start}
.footer-links strong{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.footer-links a{display:block;margin:.45rem 0}
.footer-credit{
  width:min(100%,var(--max));margin:3rem auto 0;padding-top:1rem;border-top:1px solid rgba(0,63,69,.25);
  font-size:.75rem;letter-spacing:.05em;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:start
}
.footer-credit-main{min-width:0}
.footer-ai{text-align:right;justify-self:end;max-width:64ch;line-height:1.45}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

.lightbox{
  position:fixed;inset:0;z-index:400;background:rgba(0,44,48,.94);display:none;place-items:center;padding:clamp(1rem,4vw,4rem)
}
.lightbox.is-open{display:grid}
.lightbox img{max-height:88vh;max-width:min(92vw,1500px);object-fit:contain;border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.4)}
.lightbox button{position:absolute;top:1rem;right:1rem;border:1px solid #fff;background:transparent;color:#fff;border-radius:999px;padding:.6rem .9rem;cursor:pointer}
.lightbox p{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;max-width:80vw;text-align:center}

@media (max-width:980px){
  .primary-nav,.nav-shell>.lang-link{display:none}
  .nav-shell{grid-template-columns:1fr auto}
  .menu-button{display:block}
  .hero{padding-top:6.5rem;align-items:stretch}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:1rem 0 0}
  .hero-media{min-height:58svh;order:-1}
  .hero .display{font-size:clamp(4rem,13vw,8rem)}
  .axis-grid{grid-template-columns:1fr}
  .axis-card{min-height:auto;transform:none!important}
  .axis-link{text-align:center;transform:rotate(90deg);height:50px}
  .manifesto-grid,.shady-grid,.creator-band,.page-hero-grid,.story-grid{grid-template-columns:1fr}
  .world-head{grid-template-columns:1fr}
  .world-head .lede{justify-self:start}
  .gallery{grid-auto-rows:minmax(120px,18vw)}
  .gallery figure:nth-child(n){grid-column:span 6}
  .gallery figure:nth-child(1),.gallery figure:nth-child(2){grid-row:span 3}
  .gallery figure:nth-child(3),.gallery figure:nth-child(4),.gallery figure:nth-child(5){grid-row:span 2}
  .creator-band .visual::after{background:linear-gradient(0deg,var(--teal-ink),transparent 50%)}
  .side-index{position:static}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--gutter:1rem}
  .site-header{padding:.55rem .8rem}
  .brand-logo img{width:108px}
  .hero{min-height:auto;padding-top:5.5rem}
  .hero-media{min-height:62svh;border-radius:45% 16% 24% 16%/20% 14% 24% 18%}
  .hero .display{font-size:clamp(3rem,15vw,4.8rem);hyphens:auto;overflow-wrap:break-word}
  .hero-copy,.hero-media{min-width:0}
  .display{font-size:clamp(3.2rem,15vw,5rem)}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .gallery figure{flex:0 0 84vw;min-height:64vw;scroll-snap-align:center}
  .gallery figcaption{font-size:.6rem}
  .object-stage{min-height:490px}
  .mini-facts{grid-template-columns:1fr}
  .creator-band{margin-inline:1rem;width:calc(100% - 2rem)}
  .creator-band .visual{min-height:330px}
  .footer-links{grid-template-columns:1fr}
  .footer-credit{grid-template-columns:1fr;gap:.8rem}
  .footer-ai{text-align:left;justify-self:start}
  .contact-card{display:block}
  .contact-card a{display:inline-block;margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}