/* ==========================================================
   CORK STUDIO — STYLE
   Tokens
   ========================================================== */
:root{
  --ivory:      #F1ECE1;
  --ivory-dim:  #E9E3D5;
  --black:      #0B0B0A;
  --black-soft: #141412;
  --white:      #FAF8F3;
  --grey:       #8C8676;
  --grey-dim:   #B7B0A0;
  --line:       #D9D2C0;
  --line-dark:  rgba(250,248,243,0.16);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;

  --edge: clamp(20px, 5vw, 64px);
  --nav-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--black);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }

.serif{ font-family:var(--serif); font-weight:400; }

/* subtle film grain, purely decorative */
.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.045; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mobile-only{ display:none; }

/* ==========================================================
   REVEAL / SCROLL ANIMATION PRIMITIVES
   ========================================================== */
.reveal-fade{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.reveal-fade.is-visible{ opacity:1; transform:translateY(0); }

.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

.reveal-line{ display:block; overflow:hidden; }
.reveal-word{
  display:inline-block;
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.reveal-word.is-visible{ transform:translateY(0); }

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--edge);
  height:var(--nav-h);
  color:var(--black);
  background:rgba(244,241,234,0.0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:color .45s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav--scrolled{
  background:rgba(244,241,234,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav--dark{
  color:var(--white);
}
.nav--dark.nav--scrolled{
  background:rgba(17,17,17,0.55);
}
.nav__logo{
  font-size:15px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
}
.nav__links{ display:flex; gap:36px; }
.nav__links a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  position:relative; padding-bottom:3px;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__location{
  font-size:11px; letter-spacing:.04em; text-align:right; line-height:1.5;
  text-transform:uppercase; opacity:.9;
}
.nav__location span{ display:block; color:var(--grey-dim); }

@media (max-width:820px){
  .nav{ padding:20px var(--edge); }
  .nav__location{ display:none; }
  .nav__links{ gap:16px; }
  .nav__links a{
    font-size:11px;
    /* invisible padding enlarges the tap target to a comfortable size
       without shifting layout — negative margin cancels it out */
    padding:13px 2px;
    margin:-13px -2px;
  }
  .nav__logo{
    display:inline-block;
    padding:10px 0;
    margin:-10px 0;
  }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--edge);
  position:relative;
}
.hero__inner{ padding-top:var(--nav-h); }
.hero__title{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:.34em;
  font-family:var(--sans);
  font-weight:800;
  font-style:normal;
  font-size:clamp(2.75rem, 11.4vw, 11.5rem);
  line-height:.9;
  letter-spacing:-.025em;
  margin:0 0 .22em -.01em;
  width:100%;
  white-space:nowrap;
}
.hero__title .reveal-line{ overflow:hidden; display:block; }
.hero__title .reveal-word{ display:inline-block; }

.hero__sub{
  display:flex;
  flex-direction:column;
  gap:.18em;
  font-size:clamp(1.15rem, 1.85vw, 1.65rem);
  color:var(--black);
  max-width:26ch;
  line-height:1.4;
  margin-left:0;
}
.hero__sub-serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:.001em;
}
.hero__sub-sans{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.002em;
}

.scroll-indicator{
  position:absolute; left:var(--edge); bottom:44px;
  display:flex; align-items:center; gap:12px;
}
.scroll-indicator__line{
  width:1px; height:52px; background:var(--grey-dim);
  position:relative; overflow:hidden;
}
.scroll-indicator__line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--black);
  animation:scrollLine 2.6s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}
.scroll-indicator__text{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  writing-mode:vertical-rl;
}

@media (max-width:820px){
  .hero{ min-height:92svh; }
  .hero__title{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    white-space:normal;
    font-size:clamp(3.4rem, 17vw, 6rem);
  }
  .scroll-indicator{ display:none; }
}

/* ==========================================================
   SECTION HEAD / SHARED
   ========================================================== */
.section-head{
  padding:140px var(--edge) 56px;
}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-bottom:18px;
}
.eyebrow--light{ color:var(--grey-dim); }
.section-title{
  font-size:clamp(1.8rem, 3.4vw, 3rem);
  font-weight:400; font-style:italic; line-height:1.15;
  max-width:16ch;
}

@media (max-width:820px){
  .section-head{ padding:96px var(--edge) 40px; }
}
.section-head--work{ padding-bottom:8px; }

/* ==========================================================
   SELECTED WORK — editorial composition
   Nazaré runs full-width as the cinematic centerpiece; the two
   Foodies Guide edits sit together beneath it as a curated pair.
   ========================================================== */
.work{ padding-bottom:min(12vh, 120px); }

.project{
  position:relative;
}
.project--portrait .project__frame{ aspect-ratio:9/16; }
.project--landscape .project__frame{ aspect-ratio:16/9; }

.project__frame{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--ivory-dim);
  border:1px solid var(--line);
  cursor:pointer;
}

.project__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease);
}
.project:hover .project__media{ transform:scale(1.08); }

.project__placeholder{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:20px;
}
.project__placeholder-index{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2.4rem, 5vw, 4rem);
  color:var(--grey-dim);
  line-height:1;
  display:block;
}
.project__placeholder-hint{
  display:block;
  margin-top:10px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--grey-dim);
  opacity:.85;
}
.project__placeholder-tag{
  position:absolute; top:22px; left:22px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey-dim);
  border:1px solid var(--line);
  padding:5px 9px;
}

/* subtle sound indicator — small, discreet, corner-positioned;
   dim by default, fully visible on hover/focus or once sound is on */
.project__sound{
  position:absolute; top:20px; right:20px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); background:rgba(17,17,17,0.55);
  padding:7px 11px;
  opacity:.6;
  transition:opacity .3s var(--ease), background-color .3s var(--ease);
  font-weight:600;
  pointer-events:none;
  z-index:2;
}
.project:hover .project__sound,
.project:focus-within .project__sound{ opacity:.9; }
.project__sound.is-on{
  opacity:1;
  background:rgba(17,17,17,0.72);
}

.project__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px;
  margin-top:16px;
  padding-bottom:16px;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.project:hover .project__meta{ border-color:var(--line); }

.project__title{
  font-size:clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing:.01em;
  font-weight:600;
  text-transform:uppercase;
}
.project__category{
  font-size:12px; color:var(--grey); letter-spacing:.02em;
  text-align:right;
  white-space:nowrap;
}

/* -- Nazaré: cinematic centerpiece, curated rather than full-bleed —
   78% width on desktop, left-aligned so negative space frames it
   on the right; full width on mobile where space is limited -- */
.work-feature{
  padding:0 var(--edge);
  margin-bottom:clamp(64px, 9vw, 130px);
}
.work-feature .project{
  width:78%;
  margin:0 auto;
}
.work-feature .project__title{ font-size:clamp(1.1rem, 1.6vw, 1.4rem); }

/* -- Foodies pair: two curated portrait pieces, centered together -- */
.work-pair{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:clamp(40px, 6vw, 96px);
  padding:0 var(--edge) 40px;
}
.work-pair .project{
  width:clamp(220px, 26vw, 380px);
}

@media (max-width:640px){
  .work-feature{ padding:0 var(--edge); margin-bottom:56px; }
  .work-feature .project{ width:100%; }
  .work-pair{ flex-direction:column; align-items:center; gap:52px; padding:0 var(--edge) 20px; }
  .work-pair .project{ width:100%; }
  /* no hover on touch — keep the sound indicator a little more visible by default */
  .project__sound{ opacity:.8; }
}

/* ==========================================================
   SHOWREEL MOMENT
   ========================================================== */
.showreel{
  background:var(--black);
  color:var(--white);
  padding:min(22vh,220px) var(--edge);
  display:flex; flex-direction:column;
  gap:.2em;
}
.showreel__line{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1.8rem, 5vw, 4rem);
  line-height:1.12;
  letter-spacing:-.01em;
  max-width:16ch;
}
.showreel__line--serif{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  color:var(--grey-dim);
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services{ padding-bottom:min(10vh, 100px); }
.service-list{ padding:0 var(--edge) 40px; border-top:1px solid var(--line); }
.service-item{
  padding:clamp(15px, 2.2vw, 27px) 0;
  border-bottom:1px solid var(--line);
  transition:opacity .3s var(--ease);
}
.service-list:hover .service-item{ opacity:.35; }
.service-list .service-item:hover{ opacity:1; }

.service-item__name{
  display:block;
  font-family:var(--sans);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.94;
  font-size:clamp(1.65rem, 2.9vw, 3rem);
  transition:transform .45s var(--ease);
}
.service-item:hover .service-item__name{ transform:translateX(14px); }

@media (max-width:640px){
  .service-item{ padding:14px 0; }
  .service-item__name{ font-size:clamp(1.4rem, 6vw, 1.9rem); }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about{ padding:clamp(110px, 16vw, 200px) var(--edge); }
.about__content{ max-width:58ch; }

.about__lede{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.5rem, 2.7vw, 2.15rem);
  line-height:1.4;
  margin-bottom:.65em;
}
.about__body{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.5rem, 2.7vw, 2.15rem);
  line-height:1.4;
  margin-bottom:clamp(28px, 4vw, 44px);
}
.about__emphasis{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:inherit;
}
.about__location{
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--grey);
  font-weight:600;
}

@media (max-width:900px){
  .about{ padding:80px var(--edge); }
}

/* ==========================================================
   PHILOSOPHY
   ========================================================== */
.philosophy{
  padding:min(20vh,200px) var(--edge);
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.philosophy__line{
  font-size:clamp(1.6rem, 4.2vw, 3.4rem);
  line-height:1.25;
  font-weight:600;
}
.philosophy__line--serif{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--grey);
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact{
  background:var(--black); color:var(--white);
  padding:clamp(120px, 16vw, 200px) var(--edge) clamp(84px, 10vw, 120px);
  text-align:center;
}
.contact__eyebrow{
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:clamp(1.6rem, 3.6vw, 2.8rem);
  line-height:1.2;
  margin-bottom:.55em;
  color:var(--white);
}
.contact__tagline{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--grey-dim);
  font-size:clamp(1.4rem, 2.8vw, 2.25rem);
  line-height:1.32;
  margin-bottom:clamp(48px, 7vw, 84px);
}
.contact__cta{
  display:inline-flex;
  align-items:center;
  gap:.2em;
  font-family:var(--sans);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(2rem, 5.4vw, 4.4rem);
  color:var(--white);
  padding-bottom:.14em;
  border-bottom:1px solid var(--line-dark);
  transition:opacity .35s var(--ease), border-color .35s var(--ease);
}
.contact__cta-arrow{
  display:inline-block;
  transition:transform .35s var(--ease);
}
.contact__cta:hover{ opacity:.7; border-color:var(--white); }
.contact__cta:hover .contact__cta-arrow{ transform:translate(5px, -5px); }

.contact__secondary{
  margin-top:clamp(40px, 6vw, 64px);
  display:flex; align-items:center; justify-content:center;
  gap:14px;
}
.contact__secondary-link{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--grey-dim);
  transition:color .3s var(--ease);
  display:inline-block;
  padding:13px 2px;
  margin:-13px -2px;
}
.contact__secondary-link:hover{ color:var(--white); }
.contact__secondary-divider{ color:var(--grey-dim); font-size:12px; }

.footer{
  background:var(--black); color:var(--grey-dim);
  display:flex; justify-content:space-between;
  padding:26px var(--edge) 34px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}

@media (max-width:640px){
  .footer{ flex-direction:column; gap:6px; text-align:left; }
}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible{
  outline:1px solid var(--black);
  outline-offset:3px;
}
.contact a:focus-visible{ outline-color:var(--white); }