/* IKON — editorial studio site */
:root {
  --green: #1F3D2C;
  --deep: #132A1E;
  --pistachio: #DDE7C7;
  --ivory: #F4F2E8;
  --sage: #9BB089;
  --ink: var(--green);
  --paper: var(--ivory);
  /* Editorial serif. To go back to the narrower one: 'Instrument Serif' (and its font link). */
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --logo: 'Bodoni Moda', serif;
  --sans: 'Jost', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --pad: clamp(18px, 2.4vw, 36px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--pistachio); color: var(--green); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* Film grain over everything, very subtle */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 30% { transform: translate(-3%, 2%); } 60% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* ---------- Top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--pad); color: var(--bar, var(--green)); transition: color .6s var(--ease); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--barbg, var(--paper)) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .4s var(--ease), background .4s; }
.topbar.scrolled::before { opacity: 1; }
@media (max-width: 820px) { .topbar { padding: 12px var(--pad); } }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .04em; background: color-mix(in srgb, currentColor 9%, transparent); backdrop-filter: blur(10px); text-decoration: none; transition: background .3s; }
.pill:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.cta { background: var(--green); color: var(--ivory); }
.cta:hover { background: var(--deep); }
.wordmark { font: 500 26px/1 var(--logo); letter-spacing: .32em; padding-left: .32em; text-decoration: none; }
.topbar .right { justify-self: end; display: flex; align-items: center; gap: 14px; font: 400 13px/1 var(--sans); letter-spacing: .03em; }
.clock { opacity: .75; font-variant-numeric: tabular-nums; }
.icon-btn { width: 38px; padding: 0; justify-content: center; }
@media (max-width: 820px) { .clock { display: none; } .wordmark { font-size: 22px; } }

/* ---------- Menu overlay ---------- */
.menu { position: fixed; inset: 0; z-index: 35; background: var(--pistachio); color: var(--green); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: var(--pad); padding: calc(var(--pad) * 3.4) var(--pad) var(--pad);
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.menu nav { align-self: center; display: grid; gap: 4px; }
.menu .orb { width: 100%; height: 100%; min-height: 0; opacity: 0; transition: opacity 1.2s var(--ease) .3s; }
.menu.open .orb { opacity: 1; }
.menu .foot { grid-column: 1 / -1; display: flex; gap: 28px; flex-wrap: wrap; font: 400 13px/1.4 var(--sans); opacity: .75; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.menu .foot a { text-decoration: none; }
.menu .foot a:hover { text-decoration: underline; }
.menu .foot span { margin-left: auto; }
@media (max-width: 820px) {
  .menu { grid-template-columns: 1fr; }
  .menu nav { position: relative; z-index: 1; }
  .menu .orb { position: absolute; right: -20vw; bottom: 8vh; width: 90vw; height: 90vw; opacity: 0; }
  .menu.open .orb { opacity: .45; }
  .menu .foot span { margin-left: 0; }
}
.menu.open { clip-path: inset(0 0 0 0); }
.menu nav a { display: flex; gap: 18px; align-items: baseline; font: 400 clamp(38px, 4.6vw, 72px)/1.12 var(--serif); text-decoration: none; transform: translateY(40px); opacity: 0; transition: transform .8s var(--ease), opacity .6s; }
.menu nav a small { font: 500 12px/1 var(--sans); letter-spacing: .1em; opacity: .55; }
.menu nav a:hover { font-style: italic; }
.menu.open nav a { transform: none; opacity: 1; }
.menu.open nav a:nth-child(2) { transition-delay: .05s; } .menu.open nav a:nth-child(3) { transition-delay: .1s; } .menu.open nav a:nth-child(4) { transition-delay: .15s; } .menu.open nav a:nth-child(5) { transition-delay: .2s; }

/* ---------- Intro curtain ---------- */
.intro { position: fixed; inset: 0; z-index: 80; background: var(--deep); color: var(--pistachio); display: grid; place-items: center; transition: clip-path 1s var(--ease) .1s; clip-path: inset(0 0 0 0); }
.intro.done { clip-path: inset(0 0 100% 0); }
.intro .word { display: flex; font: 500 clamp(64px, 12vw, 180px)/1 var(--logo); letter-spacing: .28em; padding-left: .28em; overflow: hidden; }
.intro .word span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease) forwards; }
.intro .word span:nth-child(2) { animation-delay: .08s; } .intro .word span:nth-child(3) { animation-delay: .16s; } .intro .word span:nth-child(4) { animation-delay: .24s; }
.intro small { position: absolute; bottom: 12vh; font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: fade .8s .5s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: .7; } }

/* Line-by-line reveal used across pages */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.in .reveal-line > span, .reveal-line.in > span { transform: none; }
.fade-up { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.in .fade-up, .fade-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .intro { display: none; }
  .reveal-line > span, .fade-up { transform: none !important; opacity: 1 !important; transition: none; }
}