/* =========================================================
   Clytze Sun — Portfolio
   "Lyric-zine" editorial system: cream paper · chrome yellow ·
   ink black · grain · grotesque + calligraphic script
   ========================================================= */

:root{
  /* Sunflower palette: warm ivory paper · seed-brown text · honey gold + sunflower yellow · muted olive */
  --paper:#fff8e7;        /* warm ivory (textured paper background) */
  --paper-2:#f3e7c4;      /* deeper ivory */
  --paper-3:#fffdf6;      /* near-white (prints / cards / mats) */
  --yellow:#b77815;       /* HONEY GOLD — "creator" & accent lettering, links, emphasis (var name kept) */
  --yellow-deep:#8f5d10;  /* darker honey (hover) */
  --sun:#e9b437;          /* SUNFLOWER YELLOW — buttons & filled tags/chips */
  --olive:#6e7545;        /* MUTED OLIVE — small outlines & secondary accents */
  --ink:#49351f;          /* sunflower-seed brown — headings & text */
  --ink-2:#2a1e10;        /* legacy dark */
  --ink-soft:#5a4426;     /* body (a touch lifted for readability) */
  --ink-faint:#6e7545;    /* secondary small text → muted olive */
  --line:rgba(110,117,69,.32);  /* olive-tinted outlines */
  --line-light:rgba(255,248,231,.2);
  --maxw:1280px;
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background-color:var(--paper);
  background-image:url("../assets/images/paper.webp");
  background-repeat:repeat;background-size:520px 520px;
  color:var(--ink);
  font-family:"Cabin",system-ui,sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.hidden{position:absolute;left:-9999px}

/* (grain overlay removed — the linen texture provides tactility; a fixed
   full-screen mix-blend-mode layer was extremely expensive to composite) */

/* ---------- Type utilities ---------- */
.script{font-family:"Caveat",cursive;font-weight:400;line-height:.9}
.mono{font-family:"Cabin",sans-serif}
.tag{
  font-family:"Cabin",sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);
}
.tag::before{content:"— "}
.tag::after{content:""}
.hl{color:var(--yellow);font-weight:700}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:"Cabin",sans-serif;font-weight:400;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;padding:1em 1.8em;
  border:1.5px solid var(--ink);border-radius:0;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn--solid{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.btn--solid:hover{background:var(--ink);color:var(--paper-3);border-color:var(--ink);transform:translate(-2px,-2px)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px)}

/* ---------- Section framing ---------- */
section{padding:clamp(72px,11vh,140px) var(--gutter);position:relative}
.wrap{max-width:var(--maxw);margin:0 auto}
.section-head{margin-bottom:clamp(36px,6vw,64px)}
.section-head .tag{display:block;margin-bottom:14px}
.section-head__title{
  font-family:"Cabin",sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.02;letter-spacing:.02em;
  text-transform:uppercase;
}
.section-head__title em{
  font-family:"Caveat",cursive;font-weight:600;font-style:normal;
  text-transform:none;color:var(--yellow);
  font-size:1.55em;letter-spacing:0;padding:0 .08em;line-height:.8;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1.5px solid transparent;
}
.nav.is-scrolled{background:var(--paper);border-bottom-color:var(--ink);padding:13px var(--gutter)}
.nav__logo{font-family:"Cabin",sans-serif;font-weight:500;font-size:1.15rem;letter-spacing:-.01em;text-transform:uppercase}
.nav__logo span{color:var(--yellow-deep);font-family:"Caveat",cursive;font-weight:400;text-transform:none;font-size:1.5em}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.nav__links a{
  font-family:"Cabin",sans-serif;font-size:.78rem;letter-spacing:.04em;
  text-transform:lowercase;color:var(--ink);position:relative;padding:2px 0;
}
.nav__links>a::before{content:"";position:absolute;left:0;right:100%;bottom:0;height:.5em;background:var(--sun);z-index:-1;transition:right .28s var(--ease);opacity:.9}
.nav__links>a:hover::before{right:0}
.nav__social{display:flex;gap:14px;align-items:center;padding-left:12px;border-left:1.5px solid var(--line)}
.nav__social a{color:var(--ink);transition:color .25s,transform .25s}
.nav__social a:hover{color:var(--yellow-deep);transform:translateY(-2px)}
.nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:6px;z-index:1100}
.nav__toggle span{width:26px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.nav__toggle.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding-top:clamp(110px,15vh,170px);padding-bottom:clamp(40px,7vh,90px);
}
.hero__inner{width:100%;position:relative;z-index:3}
.hero__text{max-width:min(600px,54%)}
.hero__label{margin-bottom:22px}
.hero__title{
  font-family:"Cabin",sans-serif;font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:clamp(3rem,9.5vw,7.6rem);line-height:.9;letter-spacing:.005em;
}
.hero__roles{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.hero__roles span{
  font-family:"Cabin",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--sun);color:var(--ink);padding:.42em .8em;
}
.hero__roles span:nth-child(2){background:transparent;border:1.5px solid var(--olive);color:var(--ink)}
.hero__roles span:nth-child(3){background:var(--ink);color:var(--paper-3)}
.hero__lede{margin-top:26px;max-width:40ch;font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-soft)}
.hero__cred{margin-top:14px;font-family:"Cabin",sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hero__cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* cut-out figure + oversized script (figure overlaps the word) */
.hero__figure{
  position:absolute;right:clamp(-6px,3vw,60px);bottom:0;z-index:2;
  height:min(72vh,600px);display:flex;align-items:flex-end;pointer-events:none;
}
.hero__word{
  position:absolute;left:34.5%;top:44%;z-index:1;pointer-events:none;
  font-family:"Caveat",cursive;font-weight:700;color:var(--yellow);
  font-size:clamp(4.5rem,9.4vw,9.4rem);line-height:.8;white-space:nowrap;
  transform:translateY(-50%) rotate(-6deg);transform-origin:left center;
}
.hero__cut{
  position:relative;z-index:2;height:100%;width:auto;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 18px 22px rgba(42,32,22,.24));
}
/* mobile-only "creator" that flows under the title (desktop uses .hero__word) */
.hero__word-m{display:none;font-family:"Caveat",cursive;font-weight:700;color:var(--yellow);line-height:.82}
.hero__scroll{
  position:absolute;bottom:24px;left:var(--gutter);z-index:4;
  display:flex;align-items:center;gap:10px;font-family:"Cabin",sans-serif;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.hero__scroll svg{animation:bob 2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* =========================================================
   ABOUT — lyric-booklet spread
   ========================================================= */
.about{background:transparent;border-top:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,72px);align-items:start}
.about__aside{position:sticky;top:110px}
.about__script{font-family:"Caveat",cursive;font-size:clamp(3rem,7vw,5.5rem);color:var(--yellow-deep);line-height:.85;transform:rotate(-4deg);display:inline-block}
.about__intro{
  font-family:"Cabin",sans-serif;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.42;letter-spacing:-.01em;
  margin-bottom:28px;
}
.about__welcome{
  font-family:"Caveat",cursive;font-weight:700;color:var(--yellow);
  font-size:clamp(1.9rem,4vw,3rem);line-height:1;transform:rotate(-2deg);
  transform-origin:left;display:inline-block;margin-bottom:26px;
}
.about__cred{
  font-family:"Cabin",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.roles{display:flex;flex-direction:column}
.role{border-top:1.5px solid var(--line);padding:24px 0;display:grid;grid-template-columns:auto 1fr;gap:20px}
.role:last-child{border-bottom:1.5px solid var(--line)}
.role__index{font-family:"Cabin",sans-serif;color:var(--yellow-deep);font-size:.85rem;padding-top:.4em}
.role__title{font-family:"Cabin",sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.role p{color:var(--ink-soft);font-size:.98rem}

/* =========================================================
   CURRENT PROJECT (Odeum)
   ========================================================= */
.project{background:transparent;border-top:1px solid var(--line)}
.project__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,70px);align-items:center}
.project__title{font-family:"Cabin",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);font-size:clamp(1.9rem,4.5vw,3.1rem);line-height:1.02;margin:14px 0 22px}
.project__title em{font-family:"Caveat",cursive;font-weight:600;font-style:normal;text-transform:none;color:var(--yellow);font-size:1.5em;line-height:.8;padding-left:.06em}
.project__lead{color:var(--ink-soft);font-size:1.04rem;line-height:1.72;margin-bottom:16px;max-width:54ch}
.project__lead em{font-style:italic;color:var(--ink)}
.project__note{font-family:"Caveat",cursive;font-weight:600;color:var(--yellow);font-size:1.55rem;line-height:1.1;margin-bottom:24px;transform:rotate(-1deg);transform-origin:left;display:inline-block}
.project__link{font-family:"Cabin",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--yellow);border-bottom:2px solid var(--yellow);padding-bottom:3px;display:inline-block}
.project__link:hover{color:var(--yellow-deep);border-color:var(--yellow-deep)}
.project__gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.project__shot{margin:0;background:var(--paper-3);padding:9px;box-shadow:0 12px 26px rgba(65,58,51,.24);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.project__shot:nth-child(1){transform:rotate(-2deg)}
.project__shot:nth-child(2){transform:rotate(1.6deg);margin-top:16px}
.project__shot:nth-child(3){transform:rotate(1.4deg)}
.project__shot:nth-child(4){transform:rotate(-1.8deg);margin-top:16px}
.project__shot:hover{transform:rotate(0) scale(1.04);box-shadow:0 20px 40px rgba(65,58,51,.32);z-index:2}
.project__shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

/* =========================================================
   PHOTOGRAPHY — print collage
   ========================================================= */
.photography{background:transparent;border-top:1px solid var(--line)}
.photography .section-head__title em{color:var(--yellow-deep)}
/* scattered "scrapbook" collage — photos lean in from both sides, overlap, rotate */
.masonry{columns:3;column-gap:12px}
.masonry__item{
  break-inside:avoid;margin-bottom:14px;background:var(--paper-3);
  padding:11px 11px 30px;box-shadow:0 12px 26px rgba(65,58,51,.26);
  cursor:zoom-in;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
/* alternating rotations + horizontal nudges (left / right) + occasional overlap */
.masonry__item:nth-child(7n+1){transform:rotate(-3deg) translateX(-10px)}
.masonry__item:nth-child(7n+2){transform:rotate(2.4deg) translateX(10px);margin-top:-18px}
.masonry__item:nth-child(7n+3){transform:rotate(-1.6deg)}
.masonry__item:nth-child(7n+4){transform:rotate(3.2deg) translateX(-12px);margin-top:-22px}
.masonry__item:nth-child(7n+5){transform:rotate(-2.4deg) translateX(8px)}
.masonry__item:nth-child(7n+6){transform:rotate(1.6deg);margin-top:-14px}
.masonry__item:nth-child(7n){transform:rotate(-3.4deg) translateX(-6px)}
.masonry__item:first-child{margin-top:0}
.masonry__item:hover{transform:rotate(0) scale(1.045);box-shadow:0 24px 46px rgba(65,58,51,.34);z-index:5}
.masonry__item img{width:100%;height:auto}
.masonry__item::after{
  content:"№ " attr(data-n);position:absolute;left:12px;bottom:10px;
  font-family:"Cabin",sans-serif;font-size:.68rem;color:var(--ink-soft);letter-spacing:.05em;
}

/* =========================================================
   FILMS — dark spread
   ========================================================= */
.films{background:transparent;border-top:1px solid var(--line)}
.films .section-head__title em{color:var(--yellow-deep)}
.film-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,56px)}
.film{color:inherit;display:block}
.film--wide{grid-column:1 / -1;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3vw,48px);align-items:center}
/* still framed like a print */
.film__frame{position:relative;margin:0;background:var(--paper-3);padding:12px;box-shadow:0 14px 30px rgba(42,32,22,.22);transition:transform .4s var(--ease)}
.film:nth-child(3) .film__frame{transform:rotate(-1.3deg)}
.film:nth-child(4) .film__frame{transform:rotate(1.3deg)}
.film:hover .film__frame{transform:translateY(-5px) rotate(0)}
.film__shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.film__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.05) sepia(.08);transition:transform .5s var(--ease)}
.film:hover .film__shot img{transform:scale(1.05)}
.film__badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(20,14,8,.5);border:1.5px solid var(--paper-3);color:var(--paper-3);display:flex;align-items:center;justify-content:center;font-size:1rem;padding-left:3px;transition:background .3s,color .3s,border-color .3s}
.film:hover .film__badge{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.film__cap{margin-top:10px;display:flex;justify-content:space-between;font-family:"Cabin",sans-serif;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.film__meta h3{font-family:"Cabin",sans-serif;font-weight:500;font-size:1.45rem;letter-spacing:-.005em;margin:18px 0 6px;line-height:1.12}
.film--wide .film__meta h3{margin-top:0;font-size:1.9rem}
.film__credit{font-family:"Cabin",sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:12px}
.film__meta p:last-child{color:var(--ink-soft);font-size:.96rem}

/* --- Films: intro + expandable accordion --- */
.films__intro{font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink-soft);max-width:640px;margin-bottom:clamp(26px,4vw,42px)}
.accordion{border-top:1px solid var(--line)}
.film-item{border-bottom:1px solid var(--line)}
.film-item__row{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2.5vw,30px);padding:22px 2px;transition:padding-left .3s var(--ease)}
.film-item__row::-webkit-details-marker{display:none}
.film-item:hover .film-item__row,.film-item[open] .film-item__row{padding-left:12px}
.film-item__no{font-family:"Cabin",sans-serif;font-weight:700;color:var(--yellow);font-size:.9rem;letter-spacing:.1em}
.film-item__head{display:flex;flex-direction:column;gap:5px}
.film-item__title{font-family:"Cabin",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.15rem,2.4vw,1.75rem);color:var(--ink);line-height:1.05}
.film-item[open] .film-item__title{color:var(--yellow)}
.film-item__credit{font-family:"Cabin",sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.film-item__plus{width:24px;height:24px;position:relative;flex:none}
.film-item__plus::before,.film-item__plus::after{content:"";position:absolute;background:var(--yellow);transition:transform .3s var(--ease)}
.film-item__plus::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.film-item__plus::after{top:0;left:50%;height:100%;width:2px;transform:translateX(-50%)}
.film-item[open] .film-item__plus::after{transform:translateX(-50%) scaleY(0)}
.film-item__body{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;padding:4px 2px 32px}
.film-item[open] .film-item__body{animation:filmOpen .45s var(--ease)}
@keyframes filmOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.film-item__still{position:relative;display:block;background:var(--paper-3);padding:12px;box-shadow:0 14px 30px rgba(65,58,51,.22)}
.film-item__still img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9) contrast(1.03) sepia(.05)}
.film-item__still:hover .film__badge{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.film-item__meta p{color:var(--ink-soft);margin-bottom:20px}
.film-item__watch{font-family:"Cabin",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--yellow);border-bottom:2px solid var(--yellow);padding-bottom:3px;display:inline-block}
.film-item__watch:hover{color:var(--yellow-deep);border-color:var(--yellow-deep)}
.films__awards{margin:clamp(40px,6vw,64px) 0 0;max-width:680px;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.films__awards .hl{margin-right:.3em}
.films__more{margin-top:18px;color:var(--ink-soft);font-size:.95rem}
.films__more a{color:var(--yellow);border-bottom:1px solid transparent;transition:border-color .25s}
.films__more a:hover{border-color:var(--yellow)}

/* =========================================================
   AWARDS
   ========================================================= */
.awards{background:transparent;border-top:1px solid var(--line)}
.awards__intro{font-family:"Cabin",sans-serif;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.4;max-width:640px;margin-bottom:clamp(36px,5vw,56px)}
.award-list{border-top:1.5px solid var(--ink)}
.award-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1.5px solid var(--line);transition:padding-left .35s var(--ease)}
.award-row:hover{padding-left:16px;background:linear-gradient(90deg,rgba(245,197,24,.35),transparent 60%)}
.award-row__name{font-family:"Cabin",sans-serif;font-weight:700;font-size:clamp(1.2rem,2.6vw,1.8rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.award-row__detail{font-family:"Cabin",sans-serif;font-size:.76rem;letter-spacing:.03em;color:var(--ink-faint);margin-top:8px}
.award-row__tag{flex:none;font-family:"Cabin",sans-serif;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);padding:.5em 1em;white-space:nowrap}
.award-row__tag--win{background:var(--yellow);border-color:var(--yellow)}
.awards__note{margin-top:24px;font-family:"Caveat",cursive;font-size:1.6rem;color:var(--ink-soft)}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:transparent;border-top:1px solid var(--line)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:transparent;padding:clamp(28px,4vw,46px);transition:background .35s var(--ease)}
.service:hover{background:var(--yellow)}
.service__num{font-family:"Cabin",sans-serif;font-size:.78rem;letter-spacing:.06em;color:var(--yellow-deep)}
.service:hover .service__num{color:var(--ink)}
.service h3{font-family:"Cabin",sans-serif;font-weight:700;font-size:clamp(1.2rem,2.2vw,1.55rem);text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 12px;line-height:1.1}
.service p{color:var(--ink-soft);font-size:.97rem;max-width:42ch}
.service:hover p{color:var(--ink)}

/* =========================================================
   CONTACT — yellow CTA spread
   ========================================================= */
.contact{background:transparent;border-top:1px solid var(--line)}
.contact .section-head__title em{color:var(--yellow-deep)}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:start}
.contact__intro p{font-size:1.1rem;color:var(--ink);max-width:34ch;margin-bottom:28px}
.contact__email{font-family:"Caveat",cursive;font-size:clamp(2rem,5vw,3.2rem);color:var(--ink);border-bottom:2px solid var(--ink);display:inline-block;line-height:1;padding-bottom:4px;transition:color .25s}
.contact__email:hover{color:var(--paper-3)}
.contact__socials{display:flex;gap:22px;margin-top:28px}
.contact__socials a{font-family:"Cabin",sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid transparent;transition:border-color .25s}
.contact__socials a:hover{border-color:var(--ink)}
.contact__form{display:flex;flex-direction:column;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:"Cabin",sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.field input,.field textarea{background:var(--paper-3);border:1.5px solid var(--olive);border-radius:0;padding:13px 15px;color:var(--ink);font-family:"Cabin",sans-serif;font-size:1rem;transition:box-shadow .2s var(--ease);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:4px 4px 0 var(--ink)}
.contact__form .btn{align-self:flex-start;margin-top:4px}
.contact .btn--solid:hover{background:var(--paper-3);color:var(--ink);border-color:var(--ink)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:transparent;color:var(--ink);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:44px var(--gutter);max-width:var(--maxw);margin:0 auto}
.footer__brand{font-family:"Cabin",sans-serif;font-weight:500;font-size:1.2rem;text-transform:uppercase}
.footer__brand span{font-family:"Caveat",cursive;font-weight:400;text-transform:none;color:var(--yellow-deep);font-size:1.5em}
.footer__meta{display:flex;flex-direction:column;gap:2px;font-family:"Cabin",sans-serif;font-size:.74rem;color:var(--ink-faint);text-align:center}
.footer__top{font-family:"Cabin",sans-serif;font-size:.78rem;text-transform:uppercase;color:var(--ink-soft);transition:color .25s}
.footer__top:hover{color:var(--yellow)}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(14,12,8,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__img{max-width:90vw;max-height:84vh;object-fit:contain;background:var(--paper-3);padding:12px;transform:scale(.96);transition:transform .35s var(--ease)}
.lightbox.is-open .lightbox__img{transform:scale(1)}
.lightbox__close,.lightbox__nav{position:absolute;background:var(--paper-3);border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.lightbox__close{top:24px;right:24px;width:46px;height:46px;font-size:1.1rem}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.8rem;line-height:0}
.lightbox__nav--prev{left:clamp(12px,3vw,40px)}
.lightbox__nav--next{right:clamp(12px,3vw,40px)}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--yellow)}
.lightbox__count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:"Cabin",sans-serif;font-size:.8rem;letter-spacing:.1em;color:var(--paper)}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .masonry{columns:2}
  .hero__text{max-width:62%}
  .hero__figure{height:min(82vh,760px);right:-30px;opacity:.96}
  .about__grid{grid-template-columns:1fr;gap:30px}
  .about__aside{position:static}
  .project__grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  body{font-size:16px}
  /* full-screen: title + tags full width on top; one-liner + bio at left of a large photo */
  .hero{display:block;min-height:100svh;padding-top:92px;padding-bottom:0;overflow:hidden}
  .hero__inner{width:100%;position:relative;z-index:2}
  .hero__text{max-width:100%}
  /* creator sits to the right of FULL STACK */
  .hero__title{display:inline-block;vertical-align:middle;font-size:clamp(2rem,10.5vw,3.5rem)}
  .hero__word{display:none}
  .hero__word-m{display:inline-block;vertical-align:middle;font-size:clamp(1.8rem,9vw,3rem);margin:0 0 0 10px;transform:rotate(-3deg);transform-origin:left center}
  .hero__roles{gap:8px;margin-top:22px}
  .hero__roles span{font-size:.7rem;padding:.4em .68em}
  /* one-liner extends right over the photo's empty area (kept clear of her hair) */
  .hero__lede{font-size:.9rem;line-height:1.5;margin-top:26px;max-width:54vw}
  .hero__cred{font-size:.62rem;margin-top:14px;max-width:40vw}
  .hero__figure{position:absolute;right:0;bottom:0;top:auto;left:auto;width:82vw;max-width:82vw;height:auto!important;max-height:none;display:block!important;overflow:visible;margin:0;z-index:1}
  .hero__cut{width:100%;height:auto!important;object-fit:contain;max-width:none;max-height:none}
  .hero__scroll{display:none}
  .nav__links{position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .45s var(--ease)}
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-size:1.4rem}
  .nav__social{border-left:none;padding-left:0;margin-top:8px}
  .nav__toggle{display:flex}
  .film-grid{grid-template-columns:1fr}
  .film--wide{grid-template-columns:1fr}
  .film-item__body{grid-template-columns:1fr;gap:16px}
  .film--wide .film__meta h3{margin-top:16px;font-size:1.35rem}
  .services-grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .award-row{flex-wrap:wrap;gap:12px}
}
@media (max-width:560px){
  /* clean 2-column gallery — drop the scrapbook offsets that overlap on narrow screens */
  .masonry{columns:2;column-gap:10px}
  .masonry__item{transform:none!important;margin:0 0 10px!important;padding:6px 6px 24px}
  .masonry__item::after{font-size:.58rem;left:8px;bottom:8px}
  .field-row{grid-template-columns:1fr}
  .footer{justify-content:center;text-align:center}
}