/* ════════════════════════════════════════════════════════════
   TAIVEN Studio — editorial luxury
   Ivory / espresso / bronze · Instrument Serif + Instrument Sans
   ════════════════════════════════════════════════════════════ */

:root{
  --ivory:      #F4F0E8;
  --ivory-deep: #ECE6DA;
  --ink:        #2C2721;
  --ink-soft:   #6F675A;
  --bronze:     #99805F;
  --dark:       #211C16;
  --dark-soft:  #B9AC99;
  --line:       rgba(44,39,33,.16);
  --line-light: rgba(244,240,232,.18);

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", sans-serif;
  --wide:  "Jost", "Instrument Sans", sans-serif;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --ease: cubic-bezier(.22,.9,.28,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* faint paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1000; pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--bronze); color:var(--ivory); }

/* ── small-caps label utility ── */
.sect-label{
  display:flex; align-items:baseline; gap:1.25rem;
  font-family:var(--wide); font-weight:400;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:clamp(3rem,7vh,5.5rem);
}
.sect-label span:first-child{ color:var(--bronze); letter-spacing:.2em; }
.sect-label::after{
  content:""; flex:1; height:1px; background:var(--line);
  transform-origin:left; transform:scaleX(0); transition:transform 1.4s var(--ease) .3s;
}
.sect-label.is-in::after{ transform:scaleX(1); }
.sect-label--light{ color:var(--dark-soft); }
.sect-label--light::after{ background:var(--line-light); }

/* ════════ HEADER ════════ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease, transform .5s var(--ease);
}
.site-head.is-scrolled{
  background:color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:.9rem var(--gutter);
  box-shadow:0 1px 0 var(--line);
}
.site-head.is-hidden{ transform:translateY(-110%); }

.wordmark{ display:flex; flex-direction:column; line-height:1; }
.wordmark__name{
  font-family:var(--wide); font-weight:300;
  font-size:1.05rem; letter-spacing:.5em; margin-right:-.5em;
}
.wordmark__sub{
  font-family:var(--wide); font-weight:400;
  font-size:.5rem; letter-spacing:.62em; margin-right:-.62em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:.42em;
  align-self:center;
}
.site-nav{ display:flex; gap:2.4rem; }
.site-nav a, .head-cta{
  font-family:var(--wide); font-size:.7rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  position:relative; padding:.25rem 0;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.head-cta{
  border:1px solid var(--line); border-radius:999px;
  padding:.7rem 1.5rem; transition:background .45s ease, color .45s ease, border-color .45s ease;
}
.head-cta:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

/* ════════ HERO ════════ */
.hero{ padding:clamp(8rem,16vh,12rem) var(--gutter) 0; }
.hero__meta{
  display:flex; justify-content:space-between;
  font-family:var(--wide); font-size:.68rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:1.8rem; border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,6vh,4.5rem);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.4rem, 11.5vw, 10.5rem);
  line-height:.98; letter-spacing:-.015em;
}
.hero__title em{ color:var(--bronze); }
.line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.line > span{ display:block; transform:translateY(115%); }
.line--indent > span{ padding-left:clamp(3rem, 14vw, 16rem); }
.is-loaded .line > span{
  animation:lineUp 1.3s var(--ease) forwards;
}
.is-loaded .line:nth-child(2) > span{ animation-delay:.12s; }
.is-loaded .line:nth-child(3) > span{ animation-delay:.24s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero__row{
  display:flex; justify-content:flex-end; align-items:flex-end; gap:4rem;
  margin:clamp(2.5rem,6vh,4rem) 0 clamp(3rem,8vh,5rem);
}
.hero__lede{
  max-width:34ch; font-size:1.05rem; color:var(--ink-soft);
}
.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--wide); font-size:.62rem; letter-spacing:.45em;
  text-transform:uppercase; color:var(--ink-soft);
}
.hero__scroll i{
  width:1px; height:64px; background:var(--ink-soft); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--ivory);
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%{ transform:translateY(-100%); } 55%{ transform:translateY(100%); } 100%{ transform:translateY(100%); }
}
.hero__figure{ margin:0 calc(var(--gutter) * -1) 0; }
.hero__figure .frame{ aspect-ratio:16/8.2; }
.hero__caption{
  font-family:var(--wide); font-size:.66rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--ink-soft);
  padding:1.1rem var(--gutter) 0; text-align:right;
}

/* ── framed images: mask reveal + slow hover zoom ── */
.frame{ overflow:hidden; position:relative; }
.frame img{
  transform:scale(1.06);
  transition:transform 1.6s var(--ease);
  will-change:transform;
}
.frame:hover img{ transform:scale(1.015); }
/* parallax images are driven by JS — no transform transition, scale set inline */
.frame img[data-parallax]{ transform:none; transition:none; }
.reveal-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.4s var(--ease); }
.reveal-img.is-in{ clip-path:inset(0 0 0% 0); }

/* ── generic reveal ── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-lines{ opacity:0; transform:translateY(34px); transition:opacity 1.1s ease .1s, transform 1.2s var(--ease) .1s; }
.reveal-lines.is-in{ opacity:1; transform:none; }

/* ════════ STUDIO ════════ */
.studio{ padding:clamp(7rem,16vh,12rem) var(--gutter); }
.studio__statement{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 4.6vw, 4rem);
  line-height:1.22; max-width:24ch;
}
.studio__statement em{ color:var(--bronze); }
.studio__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  max-width:62rem; margin-left:auto;
  margin-top:clamp(3rem,7vh,5rem);
  color:var(--ink-soft); font-size:.98rem;
}
.studio__cols p{ max-width:42ch; }

/* ════════ WORK / CHAPTERS ════════ */
.work{ padding:clamp(5rem,10vh,8rem) 0 0; }
.work > .sect-label{ margin-left:var(--gutter); margin-right:var(--gutter); }

.chapter{ padding:clamp(4rem,9vh,7rem) var(--gutter) clamp(5rem,11vh,8rem); }

.chapter__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"index info" "name info";
  column-gap:clamp(2rem,6vw,7rem);
  align-items:end;
  margin-bottom:clamp(3rem,7vh,5rem);
}
.chapter__index{
  grid-area:index;
  font-family:var(--wide); font-size:.72rem; letter-spacing:.4em;
  color:var(--bronze); text-transform:uppercase; margin-bottom:1.6rem;
}
.chapter__name{
  grid-area:name;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(4rem, 12vw, 11rem);
  line-height:.9; letter-spacing:-.01em;
}
.chapter__info{ grid-area:info; max-width:40ch; justify-self:end; }
.chapter__cat{
  display:block; font-family:var(--wide); font-size:.68rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1.2rem;
}
.chapter__info p{ color:var(--ink-soft); font-size:.98rem; }
.chapter__scope{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-family:var(--wide); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* collages — each chapter composed differently */
.collage{ display:grid; }

.collage--forma{
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:min-content;
  gap:clamp(1rem,2.5vw,2.5rem);
}
.collage--forma .collage__a{ grid-column:1/6;  aspect-ratio:3/4;  margin-top:clamp(3rem,8vh,6rem); }
.collage--forma .collage__b{ grid-column:6/13; aspect-ratio:16/10; }
.collage--forma .collage__c{ grid-column:8/12; aspect-ratio:4/5;  margin-top:calc(clamp(2rem,6vh,4rem) * -1); z-index:2; }

.collage--paramo{
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);
}
.collage--paramo .collage__a{ grid-column:1/8; aspect-ratio:1/1; }
.collage--paramo .collage__b{ grid-column:8/13; aspect-ratio:4/5; align-self:end; margin-bottom:clamp(3rem,9vh,6rem); }

.collage--seve{
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);
}
.collage--seve .collage__a{ grid-column:3/9; aspect-ratio:4/5; }
.collage--seve .collage__b{ grid-column:9/12; aspect-ratio:3/4; margin-top:clamp(4rem,10vh,7rem); }
.collage--seve .collage__c{ grid-column:1/3; aspect-ratio:3/4; align-self:start; margin-top:clamp(6rem,14vh,10rem); }

/* dark chapter */
.chapter--paramo{
  background:var(--dark); color:var(--ivory);
  margin-top:clamp(4rem,8vh,6rem);
}
.chapter--paramo .chapter__cat,
.chapter--paramo .chapter__info p,
.chapter--paramo .chapter__scope{ color:var(--dark-soft); }
.chapter--paramo .chapter__scope{ border-top-color:var(--line-light); }
.chapter--paramo .chapter__index{ color:var(--bronze); }

/* editions chapter — studio concept boards */
.chapter--editions{ background:var(--ivory-deep); margin-top:clamp(4rem,8vh,6rem); }
.chapter__link{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--wide); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--bronze);
  padding-bottom:.45rem; transition:color .45s ease, letter-spacing .6s var(--ease);
}
.chapter__link:hover{ color:var(--bronze); letter-spacing:.42em; }
.strip--editions .frame{
  width:clamp(280px, 34vw, 460px); aspect-ratio:auto;
  background:transparent; overflow:visible;
}
.strip--editions img{
  aspect-ratio:4/5; width:100%; height:auto;
  box-shadow:0 24px 60px -30px rgba(44,39,33,.35);
  transform:none; transition:transform 1s var(--ease);
}
.strip--editions .frame:hover img{ transform:translateY(-8px); }
.strip--editions figcaption{
  font-family:var(--wide); font-size:.62rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft);
  padding-top:1rem;
}

/* horizontal strips */
.strip{ margin-top:clamp(2.5rem,6vh,4rem); overflow-x:auto; scrollbar-width:none; cursor:grab; }
.strip::-webkit-scrollbar{ display:none; }
.strip.is-dragging{ cursor:grabbing; }
.strip__track{ display:flex; gap:clamp(1rem,2vw,1.8rem); width:max-content; padding-right:var(--gutter); }
.strip .frame{ width:clamp(220px, 26vw, 380px); aspect-ratio:4/5; flex:none; }
.strip .frame img{ pointer-events:none; }

/* ════════ SERVICES ════════ */
.services{ padding:clamp(7rem,16vh,12rem) var(--gutter); }
.services__intro{
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.4rem);
  line-height:1.3; max-width:30ch; margin-bottom:clamp(3.5rem,8vh,6rem);
}
.index{ list-style:none; border-top:1px solid var(--line); }
.index__row{
  display:grid;
  grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,4rem); align-items:baseline;
  padding:clamp(1.6rem,3.4vh,2.4rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.index__row:hover{ padding-left:1.4rem; }
.index__no{
  font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--bronze);
}
.index__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 3.6vw, 3rem); line-height:1.1;
  transition:color .5s ease;
}
.index__row:hover .index__name{ color:var(--bronze); }
.index__desc{ color:var(--ink-soft); font-size:.95rem; max-width:46ch; }

/* ════════ PHILOSOPHY ════════ */
.philosophy{
  background:var(--ivory-deep);
  padding:clamp(7rem,16vh,12rem) var(--gutter);
}
.philosophy__quote{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 5.6vw, 5rem); line-height:1.15;
  max-width:18ch; margin:0 auto; text-align:center;
}
.philosophy__quote em{ color:var(--bronze); }
.philosophy__principles{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem);
  max-width:70rem; margin:clamp(4rem,9vh,6.5rem) auto 0;
}
.principle span{
  display:block; font-family:var(--wide); font-size:.66rem;
  letter-spacing:.38em; text-transform:uppercase; color:var(--bronze);
  padding-bottom:1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line);
}
.principle p{ color:var(--ink-soft); font-size:.95rem; max-width:34ch; }

/* ════════ CONTACT ════════ */
.contact{
  background:var(--dark); color:var(--ivory);
  padding:clamp(7rem,16vh,12rem) var(--gutter) clamp(5rem,10vh,7rem);
}
.contact__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(4rem, 14vw, 13rem); line-height:.95; letter-spacing:-.015em;
}
.contact__title em{ color:var(--bronze); }
.contact .line > span{ transform:translateY(115%); }
.contact .line.is-in > span{ animation:lineUp 1.2s var(--ease) forwards; }
.contact .line.is-in:nth-child(2) > span{ animation-delay:.14s; }
.contact__row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(3rem,7vw,7rem); align-items:start;
  margin-top:clamp(3rem,8vh,5rem);
  padding-top:clamp(2.2rem,5vh,3.5rem); border-top:1px solid var(--line-light);
}
.contact__note{ max-width:32ch; color:var(--dark-soft); font-size:.98rem; }

/* ── contact form — editorial, hairline fields ── */
.cform__hp{ position:absolute; left:-9999px; }
.cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); }
.cform__field{ display:flex; flex-direction:column; margin-bottom:clamp(1.8rem,4vh,2.6rem); }
.cform__field label{
  font-family:var(--wide); font-size:.62rem; letter-spacing:.38em;
  text-transform:uppercase; color:var(--dark-soft); margin-bottom:.7rem;
}
.cform__field input,
.cform__field select,
.cform__field textarea{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-radius:0;
  border-bottom:1px solid var(--line-light);
  color:var(--ivory);
  font-family:var(--serif); font-size:1.25rem; line-height:1.5;
  padding:.4rem 0 .8rem; width:100%;
  transition:border-color .5s ease;
}
.cform__field textarea{ resize:vertical; min-height:7.5rem; }
.cform__field input::placeholder,
.cform__field textarea::placeholder{ color:rgba(244,240,232,.28); font-style:italic; }
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus{ outline:none; border-bottom-color:var(--bronze); }
.cform__field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ivory);
  -webkit-box-shadow:0 0 0 1000px var(--dark) inset;
  caret-color:var(--ivory);
}
.cform__select{ position:relative; }
.cform__select select{ cursor:pointer; padding-right:2rem; }
.cform__select select:invalid{ color:rgba(244,240,232,.35); font-style:italic; }
.cform__select select option{ background:var(--dark); color:var(--ivory); font-style:normal; }
.cform__select span{
  position:absolute; right:.2rem; top:.4rem;
  color:var(--bronze); pointer-events:none;
  transition:transform .5s var(--ease);
}
.cform__select:hover span{ transform:translateY(3px); }
.cform__foot{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.cform__submit{
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid var(--line-light); border-radius:999px;
  color:var(--ivory);
  font-family:var(--wide); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  padding:1.05rem 2.6rem 1rem;
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.cform__submit:hover{ background:var(--ivory); color:var(--dark); border-color:var(--ivory); }
.cform__submit[disabled]{ opacity:.45; cursor:default; }
.cform__status{
  font-family:var(--wide); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--dark-soft);
}
.cform__status.is-ok{ color:var(--bronze); }

/* ════════ FOOTER ════════ */
.site-foot{
  background:var(--dark); color:var(--dark-soft);
  padding:0 var(--gutter) 2.4rem; overflow:hidden;
}
.site-foot__mark{
  font-family:var(--wide); font-weight:200;
  font-size:clamp(4.5rem, 17vw, 16rem);
  letter-spacing:.28em; margin-right:-.28em;
  text-align:center; line-height:1;
  color:color-mix(in srgb, var(--ivory) 8%, transparent);
  user-select:none; transform:translateY(.18em);
}
.site-foot__row{
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  border-top:1px solid var(--line-light); padding-top:1.6rem;
  font-family:var(--wide); font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
}
.site-foot__row nav{ display:flex; gap:2rem; }
.site-foot__row a{ transition:color .4s ease; }
.site-foot__row a:hover{ color:var(--ivory); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 920px){
  .site-nav{ display:none; }
  .chapter__head{
    grid-template-columns:1fr; grid-template-areas:"index" "name" "info";
    align-items:start;
  }
  .chapter__info{ justify-self:start; margin-top:2rem; }
  .studio__cols{ grid-template-columns:1fr; }
  .philosophy__principles{ grid-template-columns:1fr; }
  .index__row{ grid-template-columns:3rem 1fr; }
  .index__desc{ grid-column:2; }
  .hero__row{ flex-direction:column; align-items:flex-start; }
  .hero__scroll{ display:none; }
  .contact__row{ grid-template-columns:1fr; }
  .cform__grid{ grid-template-columns:1fr; gap:0; }

  .collage--forma .collage__a{ grid-column:1/8; }
  .collage--forma .collage__b{ grid-column:3/13; }
  .collage--forma .collage__c{ grid-column:7/13; }
  .collage--paramo .collage__a{ grid-column:1/11; }
  .collage--paramo .collage__b{ grid-column:5/13; margin-bottom:0; margin-top:-3rem; }
  .collage--seve .collage__a{ grid-column:1/10; }
  .collage--seve .collage__b{ grid-column:7/13; margin-top:2rem; }
  .collage--seve .collage__c{ grid-column:1/5; margin-top:2rem; }
}
@media (max-width: 560px){
  .site-foot__row{ flex-direction:column; gap:1rem; }
  .hero__figure .frame{ aspect-ratio:4/3; }
  .strip .frame{ width:70vw; }
}

/* ════════ REDUCED MOTION ════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001s !important;
    transition-duration:.001s !important;
  }
  .line > span{ transform:none; }
  .reveal, .reveal-lines{ opacity:1; transform:none; }
  .reveal-img{ clip-path:none; }
  .frame img{ transform:none; }
}