/* Clara Redding — Portfolio
   Fonts: Poppins (headings) + Crimson Text (body)
   Palette based on the Crossways to Life design system */

:root{
  --accent:#C9A24B;
  --teal:#2B4852;
  --ink:#3E3E3E;
  --bg:#F5F5F5;
  --font-head:'Poppins',sans-serif;
  --font-body:'Crimson Text',Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#111;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{border:0}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- Animations ---------- */
@keyframes kenburns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.16) translate(-2.5%,-2%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}
@keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

.page{background:var(--bg);overflow-x:hidden}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px clamp(20px,5vw,64px);
  border-bottom:1px solid rgba(255,255,255,0);
  background:rgba(17,17,17,0);
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
}
.nav.scrolled{
  background:rgba(17,17,17,.92);
  border-bottom-color:rgba(255,255,255,.12);
  padding-top:16px;padding-bottom:16px;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.nav__brand{text-decoration:none;display:flex;align-items:center;gap:12px}
.nav__logo{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.04em;
}
.nav__name{color:#fff;font-family:var(--font-head);font-weight:500;font-size:14px;letter-spacing:.28em;text-transform:uppercase}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.nav__link{
  color:rgba(255,255,255,.82);text-decoration:none;
  font-family:var(--font-head);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:color .2s ease;
}
.nav__link:hover{color:#fff}
.nav__cta{
  color:#fff;text-decoration:none;
  font-family:var(--font-head);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--accent);background:var(--accent);padding:9px 18px;transition:background .2s ease;
}
.nav__cta:hover{background:transparent}

/* Hamburger (mobile only) */
.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer}
.nav__toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .25s ease}
.nav.open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav__toggle span:nth-child(2){opacity:0}
.nav.open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  .nav{flex-wrap:nowrap}
  .nav__toggle{display:flex}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(17,17,17,.97);
    backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
    padding:0 clamp(20px,6vw,64px);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    border-top:1px solid rgba(255,255,255,0);
    transition:max-height .35s ease,opacity .25s ease,padding .35s ease,border-color .35s ease;
  }
  .nav.open .nav__links{max-height:360px;opacity:1;pointer-events:auto;padding:6px clamp(20px,6vw,64px) 20px;border-top-color:rgba(255,255,255,.1)}
  .nav__link{font-size:14px;padding:15px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__cta{font-size:14px;padding:16px 0;width:100%;text-align:left;border:0;background:transparent;color:var(--accent)}
}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#0c0c0c}
.hero__bg{position:absolute;top:-30%;left:0;right:0;height:160%;will-change:transform}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:kenburns 24s ease-in-out infinite alternate;will-change:transform;
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,.15) 34%,rgba(12,12,12,.35) 62%,rgba(12,12,12,.9) 100%)}
.hero__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,84px)}
.hero__eyebrow{
  opacity:0;animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) .15s both;
  font-family:var(--font-head);font-weight:500;font-size:clamp(11px,1.1vw,13px);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.85);display:flex;align-items:center;gap:14px;
}
.hero__eyebrow span{width:34px;height:1px;background:var(--accent);display:inline-block}
.hero__title{
  margin:18px 0 0;font-family:var(--font-head);font-weight:600;line-height:.86;letter-spacing:-.03em;color:#fff;
  font-size:clamp(58px,13.5vw,196px);
}
.hero__title span{display:block}
.hero__title span:nth-child(1){opacity:0;animation:fadeUp 1.05s cubic-bezier(.2,.7,.2,1) .28s both}
.hero__title .stroke{opacity:0;animation:fadeUp 1.05s cubic-bezier(.2,.7,.2,1) .42s both;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.9)}
.hero__sub{
  margin:26px 0 0;max-width:520px;opacity:0;animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) .6s both;
  font-family:var(--font-head);font-weight:300;font-size:clamp(15px,1.5vw,19px);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92);
}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;opacity:0;animation:fadeIn 1s 1.1s both}
.scroll-cue span:first-child{font-family:var(--font-head);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.scroll-cue .cue-line{width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:cue 2s ease-in-out infinite}

/* ---------- Sections ---------- */
.section{padding:clamp(72px,11vh,140px) clamp(20px,6vw,84px);scroll-margin-top:80px}
.section--light{background:var(--bg)}
.section--dark{background:#111;color:#fff}
.section--stone{background:#EDEDEA}
.wrap{max-width:1280px;margin:0 auto}
.eyebrow{
  font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;
}
.eyebrow .num{opacity:.5}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{margin:18px 0 0;font-family:var(--font-head);font-weight:600;font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.02em}
.sec-head .lead{margin:0;max-width:40ch;font-size:clamp(16px,1.3vw,19px);line-height:1.7}
.section--dark .sec-head h2{color:#fff}
.section--dark .sec-head .lead{color:rgba(255,255,255,.7)}
.section--light .sec-head h2,.section--stone .sec-head h2{color:var(--teal)}
.section--light .sec-head .lead,.section--stone .sec-head .lead{color:rgba(62,62,62,.72)}

/* ---------- About ---------- */
.about{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(36px,6vw,84px);align-items:center}
.about__media{position:relative}
.about__media img{width:100%;height:auto;display:block;filter:grayscale(.15)}
.about__badge{position:absolute;left:-14px;bottom:-14px;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:12px 18px}
.about__body h2{margin:20px 0 0;font-family:var(--font-head);font-weight:600;font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--teal)}
.about__copy{margin-top:26px;max-width:56ch;font-size:clamp(17px,1.35vw,20px);line-height:1.75;color:var(--ink)}
.about__copy p{margin:0 0 18px}
.about__copy p:last-child{margin:0}
.tags{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.tag{font-family:var(--font-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(43,72,82,.25);padding:9px 15px}

/* ---------- Galleries ---------- */
.masonry{column-gap:14px}
.masonry--wide{column-width:300px}
.masonry--tight{column-width:270px}
.tile{margin:0 0 14px;break-inside:avoid;overflow:hidden;cursor:pointer;display:block;position:relative;background:#1c1c1c}
.section--light .tile{background:#e6e6e6}
.section--stone .tile{background:#dedcd8}
.tile img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.05)}

/* ---------- Feature (Vigour) ---------- */
.feature{background:var(--teal);color:#fff;padding:clamp(64px,9vh,120px) clamp(20px,6vw,84px)}
.feature__inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(36px,6vw,72px);align-items:center}
.feature__media{margin:0;cursor:pointer;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);background:#1a2c33}
.feature__media img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feature__media:hover img{transform:scale(1.04)}
.feature__eyebrow{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.feature h2{margin:16px 0 0;font-family:var(--font-head);font-weight:600;font-size:clamp(38px,6vw,80px);line-height:.92;letter-spacing:.02em;color:#fff}
.feature__date{margin:8px 0 0;font-family:var(--font-head);font-weight:300;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.feature__copy{margin:28px 0 0;max-width:46ch;font-size:clamp(17px,1.4vw,21px);line-height:1.7;color:rgba(255,255,255,.9)}
.feature__copy strong{color:#fff}
.feature__credit{margin-top:30px;display:inline-flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.feature__credit span{width:30px;height:1px;background:rgba(255,255,255,.4)}

/* ---------- Quote ---------- */
.quote{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0c0c0c}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.quote__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.82) 0%,rgba(12,12,12,.66) 55%,rgba(12,12,12,.5) 100%)}
.quote blockquote{position:relative;margin:0;padding:0 clamp(24px,8vw,120px);max-width:1000px}
.quote p{margin:0;font-family:var(--font-body);font-weight:400;font-style:italic;font-size:clamp(28px,5vw,64px);line-height:1.18;color:#fff;text-wrap:balance}
.quote footer{margin-top:28px;font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}

/* ---------- Contact ---------- */
.contact{padding:clamp(80px,13vh,160px) clamp(20px,6vw,84px)}
.contact__inner{max-width:1120px;margin:0 auto}
.contact h2{margin:20px 0 0;font-family:var(--font-head);font-weight:600;font-size:clamp(38px,7vw,96px);line-height:.98;letter-spacing:-.02em;color:#fff}
.contact__lead{margin:26px 0 0;max-width:52ch;font-size:clamp(17px,1.4vw,21px);line-height:1.7;color:rgba(255,255,255,.72)}
.contact__grid{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.14)}
.contact__card{text-decoration:none;background:#111;padding:34px 30px;display:flex;flex-direction:column;gap:10px;transition:background .2s ease}
.contact__card:hover{background:#181818}
.contact__label{font-family:var(--font-head);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.contact__value{font-family:var(--font-head);font-weight:500;font-size:clamp(16px,1.5vw,20px);color:#fff;word-break:break-word}
.contact__go{color:var(--accent);font-family:var(--font-head);font-size:13px;letter-spacing:.1em}

/* ---------- Footer ---------- */
.footer{background:#0a0a0a;color:rgba(255,255,255,.6);padding:clamp(44px,6vw,64px) clamp(20px,6vw,84px)}
.footer__inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.04em}
.footer__name{color:#fff;font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.footer__meta{font-family:var(--font-head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:4px}
.footer__links{display:flex;align-items:center;gap:24px;font-family:var(--font-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.footer__links a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s ease}
.footer__links a:hover{color:#fff}
.footer__legal{max-width:1120px;margin:28px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--font-head);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.35)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.95);display:none;align-items:center;justify-content:center;padding:clamp(16px,5vh,64px) clamp(16px,6vw,96px);animation:fadeIn .25s ease both}
.lb.open{display:flex}
.lb__close{position:absolute;top:22px;right:24px;background:none;border:0;color:#fff;font-family:var(--font-head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:8px;opacity:.8}
.lb__close:hover{opacity:1}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:52px;height:52px;font-size:22px;cursor:pointer}
.lb__nav:hover{background:rgba(255,255,255,.18)}
.lb__nav--prev{left:14px}
.lb__nav--next{right:14px}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px;animation:lbin .3s cubic-bezier(.2,.7,.2,1) both}
.lb__fig img{max-width:100%;max-height:76vh;object-fit:contain;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lb__cap{display:flex;align-items:center;gap:16px;font-family:var(--font-head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.lb__cap .meta{color:var(--accent)}