/* ===========================================================
   Arcadian Sky — concept stylesheet
   Editorial · literary press · "authored, not assembled"
   =========================================================== */

:root{
  --ink:        #0b1525;   /* deep night */
  --ink-2:      #0d1f3c;
  --ink-deep:   #070e1b;
  --parchment:  #f5f0e4;   /* warm page */
  --parchment-2:#ece4d3;
  --gold:       #c9a86a;
  --gold-deep:  #ad8c4e;
  --on-dark:    #e9e2d2;   /* warm off-white */
  --on-dark-dim:#b9b3a3;
  --on-light:   #20242c;   /* near-ink text on parchment */
  --on-light-dim:#6c6a60;
  --rule:       rgba(201,168,106,.34);

  --serif:  "EB Garamond", Georgia, serif;
  --display:"Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", system-ui, sans-serif;

  --wrap: 1140px;
  --gut: clamp(1.4rem, 5vw, 4rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--on-light);
  font-family:var(--serif);
  font-size:clamp(1.02rem, .55vw + .9rem, 1.18rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--on-dark);
  padding:.6rem 1rem; z-index:100; font-family:var(--sans);
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; color:var(--gold); margin:0;
}
.eyebrow--ink{ color:var(--gold-deep); }

.ornament{ font-family:var(--display); color:var(--gold); font-size:1.4rem; margin:0 0 1.2rem; }

.link-underline{
  font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; text-decoration:none; color:var(--gold-deep);
  padding-bottom:.35rem; position:relative; display:inline-block;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-deep); transform:scaleX(.0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-block:1.4rem;
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; }
.nav__mark{
  font-family:var(--display); font-size:1.5rem; font-weight:500; letter-spacing:.02em;
  color:var(--on-dark); text-decoration:none; transition:color .5s ease;
}
.nav__links{ display:flex; gap:clamp(1.2rem,3vw,2.6rem); }
.nav__links a{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark); text-decoration:none; opacity:.82;
  position:relative; padding-bottom:.25rem; transition:opacity .4s ease, color .5s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); }

/* solid state after scroll */
.nav.is-stuck{
  background:rgba(11,21,37,.92);
  backdrop-filter:blur(8px);
  padding-block:.9rem;
  border-bottom-color:var(--rule);
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--ink-deep); }
.hero__media{
  position:absolute; inset:0;
  background:url("../assets/hero.png") center 38% / cover no-repeat;
  transform:scale(1.04);
  animation:slowdrift 22s ease-in-out infinite alternate;
}
@keyframes slowdrift{ to{ transform:scale(1.10); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,14,27,.74) 0%, rgba(7,14,27,.22) 32%, rgba(7,14,27,.30) 64%, rgba(7,14,27,.86) 100%);
}
.hero__content{ position:relative; text-align:center; color:var(--on-dark); padding-top:14vh; padding-bottom:10vh; }
.hero__content .eyebrow{ margin-bottom:1.6rem; }
.hero__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.9rem, 8.5vw, 6.6rem);
  line-height:1.02; letter-spacing:.01em; margin:0 auto;
  text-wrap:balance;
}
.hero__lede{
  max-width:33em; margin:1.8rem auto 0; color:var(--on-dark);
  font-size:clamp(1.06rem,.5vw+1rem,1.3rem); line-height:1.75; opacity:.92;
  font-style:italic;
}
.hero__cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:.8rem;
  margin-top:3.4rem; text-decoration:none; color:var(--on-dark);
  font-family:var(--sans); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; opacity:.8;
}
.hero__cue i{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); display:block; }
.hero__cue:hover{ opacity:1; }

/* ===========================================================
   INTRO
   =========================================================== */
.intro{ background:var(--parchment); padding-block:clamp(5rem,12vw,9rem); }
.intro__inner{ max-width:46rem; text-align:center; margin-inline:auto; }
.intro__head{
  font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,4.5vw,3.2rem);
  line-height:1.15; margin:0 0 1.4rem; color:var(--on-light); text-wrap:balance;
}
.intro__body{ color:var(--on-light-dim); font-size:1.14rem; margin:0; }

/* ===========================================================
   WORKS
   =========================================================== */
.works{ background:var(--parchment); padding-bottom:clamp(2rem,6vw,5rem); }
.cat{ padding-block:clamp(2.6rem,6vw,4.4rem); border-top:1px solid var(--rule); }
.cat__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.cat__head .eyebrow{ margin-bottom:.8rem; }
.cat__note{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--on-light);
  font-weight:400; line-height:1.3; margin:0; max-width:30em; font-style:italic; }
.cat__head--center{ text-align:center; }
.cat__head--center .cat__note{ margin-inline:auto; }
.cat__note--light{ color:var(--on-dark); }

.work__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.15; margin:0 0 .35rem; color:var(--on-light); letter-spacing:.005em; }
.work__kind{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1rem; }
.work__summary{ color:var(--on-light-dim); margin:0; max-width:40em; }
.work__status{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-light-dim); margin:1.1rem 0 0; }
.work__status::before{ content:"— "; color:var(--gold); }

/* featured (Toothland) */
.work--feature{ display:grid; grid-template-columns:1fr auto; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.work__plate{
  width:clamp(110px,16vw,190px); aspect-ratio:3/4; flex:none;
  background:linear-gradient(160deg,var(--ink-2),var(--ink-deep));
  border:1px solid var(--rule); border-radius:2px;
  display:grid; place-items:center;
  box-shadow:0 24px 50px -28px rgba(7,14,27,.6);
}
.work__plate span{ font-family:var(--display); font-style:italic; font-size:clamp(3rem,6vw,4.5rem); color:var(--gold); opacity:.85; }

/* lead work in a category */
.work--lead{ margin-bottom:clamp(2rem,4vw,3rem); }
.work--lead .work__summary{ font-size:1.12rem; }

/* two-up row */
.work__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem);
  padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--rule); }

/* ===========================================================
   IN DEVELOPMENT  (dark editorial band)
   =========================================================== */
.dev{ background:var(--ink); color:var(--on-dark); padding-block:clamp(5rem,12vw,9rem);
  position:relative; }
.dev::before, .dev::after{ content:""; position:absolute; left:0; right:0; height:1px; background:var(--rule); }
.dev::before{ top:0; } .dev::after{ bottom:0; }
.dev .cat__head{ margin-bottom:clamp(2.6rem,6vw,4rem); }
.dev .work__title{ color:var(--on-dark); }
.dev .work__summary{ color:var(--on-dark-dim); }
.dev .work__kind{ color:var(--gold); }
.dev__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); }
.dev__item{ background:var(--ink); padding:clamp(1.8rem,3.5vw,2.8rem);
  transition:background .5s ease; }
.dev__item:hover{ background:var(--ink-2); }

/* ===========================================================
   SUBMISSIONS
   =========================================================== */
.subs{ background:var(--parchment-2); padding-block:clamp(5rem,13vw,9.5rem); }
.subs__inner{ max-width:42rem; margin-inline:auto; text-align:center; }
.subs__inner .eyebrow{ margin-bottom:1.4rem; }
.subs__head{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem);
  margin:0 0 1.4rem; color:var(--on-light); }
.subs__body{ color:var(--on-light-dim); margin:0 0 2.4rem; font-size:1.12rem; }

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{ background:var(--ink-deep); color:var(--on-dark); padding-block:clamp(4rem,9vw,6.5rem); }
.foot__inner{ text-align:center; }
.foot__star{ color:var(--gold); font-size:1.3rem; margin:0 0 1.6rem; }
.foot__line{ font-family:var(--display); font-style:italic; font-size:clamp(1.4rem,3.2vw,2.1rem);
  line-height:1.35; max-width:24em; margin:0 auto clamp(2.6rem,6vw,4rem); color:var(--on-dark); }
.foot__meta{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--rule); }
.foot__mark{ font-family:var(--display); font-size:1.25rem; }
.foot__nav{ display:flex; gap:1.6rem; }
.foot__nav a{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim); text-decoration:none; transition:color .4s; }
.foot__nav a:hover{ color:var(--gold); }
.foot__rights{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--on-dark-dim); }

/* ===========================================================
   REVEAL MOTION
   =========================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal.is-in{ opacity:1; transform:none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:760px){
  .nav{ padding-block:1rem; }
  .nav__inner{ flex-direction:column; gap:.55rem; }
  .nav__mark{ font-size:1.35rem; }
  .nav__links{ gap:1.5rem; }
  .nav__links a{ font-size:.66rem; letter-spacing:.16em; }
  .nav.is-stuck{ padding-block:.7rem; }
  .hero__content{ padding-top:20vh; }
  .work--feature{ grid-template-columns:1fr; }
  .work__plate{ order:-1; }
  .work__row,.dev__grid{ grid-template-columns:1fr; }
  .foot__meta{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}