:root{
    --black:#050505;
    --panel:#0b0b0b;
    --hairline:#232323;
    --ink:#ECE8E1;
    --ink-dim:#8f8b83;
    --brass:#B79A61;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{
    background:var(--black);
    color:var(--ink);
    overflow-x:hidden;
  }

  html{
    height:100%;
  }

  body{
    font-family:'Space Grotesk', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--brass); color:var(--black); }

  a{ color:inherit; text-decoration:none; }

  /* ---------- top mark ---------- */
  .mark{
    position:fixed;
    top:0; left:0; right:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px clamp(24px, 5vw, 64px);
    z-index:20;
    font-size:13px;
    letter-spacing:0.02em;
    color:var(--ink-dim);
    opacity:0;
    animation: markIn 0.8s var(--ease) forwards;
    animation-delay: 2.6s;
    pointer-events:none;
  }
  @keyframes markIn{ to{ opacity:1; } }
  .mark span:last-child{ color:var(--ink); }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:grid;
    grid-template-columns: minmax(280px, 42%) 1fr;
    align-items:stretch;
  }

  .photo-stage{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }

  .photo-wrap{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    transform:translateX(-130%);
    animation: photoSlide 1.3s var(--ease) forwards;
    animation-delay:0.15s;
    will-change:transform;
  }

  @keyframes photoSlide{
    to{ transform:translateX(0); }
  }

  .photo-wrap img{
    max-height:96vh;
    width:auto;
    max-width:none;
    height:100%;
    object-fit:contain;
    object-position:bottom center;
    /* organic curved crop, echoes the sketch's rounded sweep */
    clip-path: path('M0,0 L100%,0 L100%,88% C 88% 100%, 30% 100%, 0 96% Z');
    transition: transform 1.4s var(--ease);
    transform-origin:bottom center;
    filter:saturate(1.02) contrast(1.03);
  }

  .photo-stage:hover .photo-wrap img{
    transform:scale(1.015);
  }

  .photo-floor{
    position:absolute;
    left:0; right:0; bottom:0;
    height:18%;
    background:linear-gradient(to top, var(--black) 0%, rgba(5,5,5,0) 100%);
    pointer-events:none;
  }

  /* ---------- content ---------- */
  .content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(22px, 3vh, 34px);
    padding:clamp(32px, 6vw, 90px) clamp(28px, 6vw, 96px);
  }

  .content-inner{
    opacity:0;
    max-width:560px;
  }

  .content.is-ready .content-inner{
    animation: textSlide 1s var(--ease) forwards;
  }

  .content .line{
    opacity:0;
    transform:translateX(-46px);
  }

  .content.is-ready .line{
    animation: lineSlide 0.95s var(--ease) forwards;
  }

  .content.is-ready .line:nth-child(1){ animation-delay:0s; }
  .content.is-ready .line:nth-child(2){ animation-delay:0.08s; }
  .content.is-ready .line:nth-child(3){ animation-delay:0.16s; }
  .content.is-ready .line:nth-child(4){ animation-delay:0.24s; }
  .content.is-ready .line:nth-child(5){ animation-delay:0.32s; }

  @keyframes lineSlide{
    to{ opacity:1; transform:translateX(0); }
  }
  @keyframes textSlide{ to{ opacity:1; } }

  .name{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(42px, 6vw, 74px);
    line-height:0.98;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .role-line{
    margin-top:14px;
    font-size:clamp(15px, 1.6vw, 18px);
    color:var(--ink-dim);
    font-weight:300;
    line-height:1.5;
  }
  .role-line b{
    font-weight:500;
    color:var(--ink);
  }

  .desc{
    margin-top:22px;
    font-size:clamp(15px, 1.5vw, 17px);
    line-height:1.65;
    color:var(--ink-dim);
    max-width:44ch;
  }

  /* ---------- showreel button ---------- */
  .showreel-btn{
    margin-top:34px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    align-self:flex-start;
    padding:16px 26px;
    border:1px solid var(--hairline);
    border-radius:2px;
    background:transparent;
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    letter-spacing:0.03em;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
  }

  .showreel-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--brass);
    transform:translateY(101%);
    transition: transform 0.55s var(--ease);
    z-index:0;
  }

  .showreel-btn span, .showreel-btn svg{
    position:relative;
    z-index:1;
    transition: color 0.5s var(--ease), stroke 0.5s var(--ease);
  }

  .showreel-btn:hover{
    border-color:var(--brass);
  }
  .showreel-btn:hover::before{
    transform:translateY(0%);
  }
  .showreel-btn:hover span,
  .showreel-btn:hover svg{
    color:var(--black);
    stroke:var(--black);
  }

  .showreel-btn svg{
    width:14px; height:14px;
    stroke:var(--ink);
    fill:none;
    stroke-width:1.6;
  }

  /* ---------- video frame ---------- */
  .reel-frame{
    margin-top:12px;
    width:100%;
    max-width:460px;
    aspect-ratio:16/10;
    position:relative;
    background:var(--panel);
    border:1px solid var(--hairline);
    overflow:hidden;
  }

  .reel-frame video{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  .reel-fallback{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:20px;
    background:
      radial-gradient(circle at 30% 20%, rgba(183,154,97,0.08), transparent 60%),
      var(--panel);
  }

  .reel-fallback .ring{
    width:52px; height:52px;
    border-radius:50%;
    border:1px solid var(--hairline);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .reel-fallback svg{
    width:14px; height:14px;
    fill:var(--ink);
  }
  .reel-fallback p{
    font-size:12.5px;
    color:var(--ink-dim);
    letter-spacing:0.02em;
    max-width:26ch;
  }

  .reel-frame.is-playing .reel-fallback{
    display:none;
  }

  /* ---------- work / portfolio section ---------- */
  .work{
    position:relative;
    padding:clamp(90px, 12vh, 150px) clamp(28px, 6vw, 96px) clamp(100px, 14vh, 160px);
    border-top:1px solid var(--hairline);
  }

  .work-head{
    max-width:640px;
    margin-bottom:clamp(48px, 7vh, 76px);
  }

  .work-head h2{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(32px, 4.4vw, 52px);
    line-height:1.05;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .work-head p{
    margin-top:16px;
    font-size:15px;
    color:var(--ink-dim);
    max-width:44ch;
    line-height:1.6;
  }

  .work-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(20px, 3vw, 40px);
  }

  .reel-card{
    position:relative;
    opacity:0;
    transform:translateY(34px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }

  .reel-card.in-view{
    opacity:1;
    transform:translateY(0);
  }

  .reel-card:nth-child(1){ transition-delay:0s; }
  .reel-card:nth-child(2){ transition-delay:0.1s; }
  .reel-card:nth-child(3){ transition-delay:0.2s; }
  .reel-card:nth-child(4){ transition-delay:0.3s; }

  .reel-card-media{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--panel);
    cursor:pointer;
  }

  .reel-poster{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition: transform 1.1s var(--ease);
    will-change:transform;
  }

  .reel-card-media:hover .reel-poster{
    transform:scale(1.045);
  }

  .reel-poster::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
  }

  .reel-play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(1);
    width:74px; height:74px;
    border-radius:50%;
    border:1px solid rgba(236,232,225,0.55);
    background:rgba(5,5,5,0.35);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
    z-index:2;
  }

  .reel-play svg{
    width:20px; height:20px;
    fill:var(--ink);
    margin-left:3px;
  }

  .reel-card-media:hover .reel-play{
    transform:translate(-50%,-50%) scale(1.08);
    border-color:var(--brass);
    background:rgba(5,5,5,0.5);
  }

  .reel-meta{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    gap:3px;
    z-index:2;
  }

  .reel-meta .tag{
    font-size:11.5px;
    letter-spacing:0.03em;
    color:var(--brass);
  }

  .reel-meta .title{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:19px;
    color:var(--ink);
  }

  .reel-card-media video{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    background:#000;
  }

  .reel-card-media.is-playing .reel-poster,
  .reel-card-media.is-playing .reel-play,
  .reel-card-media.is-playing .reel-meta{
    opacity:0;
    pointer-events:none;
  }

  .reel-poster, .reel-play, .reel-meta{
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
  }

  /* ---------- responsive ---------- */
  @media (max-width: 860px){
    .hero{
      grid-template-columns:1fr;
    }
    .photo-stage{
      min-height:62vh;
    }
    .photo-wrap{
      height:100%;
    }
    .photo-wrap img{
      max-height:62vh;
      clip-path: path('M0,0 L100%,0 L100%,92% C 82% 100%, 22% 100%, 0 94% Z');
    }
    .content{
      padding:44px 26px 64px;
      text-align:left;
    }
    .reel-frame{ max-width:100%; }
    .mark{ padding:20px 22px; }
    .work-grid{
      grid-template-columns:1fr;
    }
    .work{
      padding:70px 22px 90px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .photo-wrap{ animation:none !important; transform:translateX(0) !important; }
    .content-inner, .line{ animation:none !important; opacity:1 !important; transform:none !important; }
    .mark{ animation:none !important; opacity:1 !important; }
    .photo-wrap img, .showreel-btn, .showreel-btn::before{ transition:none !important; }
    .reel-card{ opacity:1 !important; transform:none !important; transition:none !important; }
    .reel-poster, .reel-card-media:hover .reel-poster{ transition:none !important; transform:none !important; }
  }
  /* ---------- experience / timeline ---------- */
  .experience{
    position:relative;
    padding:clamp(90px, 12vh, 140px) clamp(28px, 6vw, 96px) clamp(60px, 10vh, 120px);
    border-top:1px solid var(--hairline);
    --rail: 16px;
  }

  .exp-head{
    text-align:center;
    margin-bottom:clamp(60px, 9vh, 110px);
  }

  .exp-head h2{
    font-family:'Space Grotesk', sans-serif;
    font-weight:500;
    font-size:clamp(34px, 6vw, 58px);
    letter-spacing:0.01em;
    color:var(--ink);
  }

  .exp-head p{
    margin-top:14px;
    font-size:14px;
    color:var(--ink-dim);
  }

  .exp-track{
    position:relative;
    max-width:760px;
    margin:0 auto;
  }

  .exp-line, .exp-progress{
    position:absolute;
    top:0;
    left:var(--rail);
    width:2px;
    height:100%;
    transform-origin:top center;
  }

  .exp-line{
    background:var(--hairline);
  }

  .exp-progress{
    background:linear-gradient(to bottom, #fff, #d8d3c8);
    transform:scaleY(0);
    box-shadow:0 0 14px rgba(255,255,255,0.35);
    will-change:transform;
  }

  .exp-item{
    position:relative;
    min-height:clamp(280px, 34vh, 360px);
    display:flex;
    align-items:center;
  }

  .exp-item:last-child{
    min-height:clamp(200px, 24vh, 260px);
  }

  .exp-dot{
    position:absolute;
    left:var(--rail);
    top:50%;
    width:13px; height:13px;
    border-radius:50%;
    background:var(--black);
    border:2px solid var(--hairline);
    transform:translate(-50%,-50%) scale(1);
    transition: background 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
    z-index:2;
  }

  .exp-dot::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.0);
    transition: border-color 0.6s var(--ease), opacity 0.6s var(--ease);
    opacity:0;
  }

  .exp-item.is-passed .exp-dot{
    background:#fff;
    border-color:#fff;
    box-shadow:0 0 16px rgba(255,255,255,0.45);
  }

  .exp-item.is-current .exp-dot{
    transform:translate(-50%,-50%) scale(1.15);
  }

  .exp-item.is-current .exp-dot::after{
    opacity:1;
    border-color:rgba(255,255,255,0.35);
    animation: dotPulse 1.8s var(--ease) infinite;
  }

  @keyframes dotPulse{
    0%{ transform:scale(0.85); opacity:0.7; }
    70%{ transform:scale(1.6); opacity:0; }
    100%{ transform:scale(1.6); opacity:0; }
  }

  .exp-card{
    margin-left:calc(var(--rail) + 44px);
    max-width:420px;
    opacity:0;
    transform:translateX(28px) scale(0.96);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .exp-item.is-passed .exp-card{
    opacity:1;
    transform:translateX(0) scale(1);
  }

  .exp-card .exp-period{
    font-size:12px;
    letter-spacing:0.03em;
    color:var(--brass);
  }

  .exp-card .exp-role{
    margin-top:10px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:clamp(21px, 2.4vw, 27px);
    color:var(--ink);
    line-height:1.15;
  }

  .exp-card .exp-company{
    margin-top:6px;
    font-size:14px;
    color:var(--ink-dim);
  }

  .exp-card .exp-desc{
    margin-top:14px;
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:38ch;
  }

  @media (max-width: 860px){
    .experience{
      --rail: 10px;
      padding:60px 18px 40px;
    }
    .exp-head{ text-align:left; }
    .exp-track{ max-width:none; }
    .exp-card{
      margin-left:calc(var(--rail) + 30px);
      max-width:none;
      width:calc(100% - var(--rail) - 46px);
    }
    .exp-item{ min-height:clamp(230px, 30vh, 300px); }
  }

  @media (prefers-reduced-motion: reduce){
    .exp-card{ transition:none !important; }
    .exp-dot{ transition:none !important; }
    .exp-dot::after{ animation:none !important; }
    .exp-progress{ transition:none !important; }
  }

  /* ---------- contact ---------- */
  .contact{
    position:relative;
    padding:clamp(90px, 13vh, 150px) clamp(28px, 6vw, 96px) clamp(60px, 8vh, 100px);
    border-top:1px solid var(--hairline);
  }

  .contact-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:clamp(40px, 7vw, 100px);
    align-items:start;
  }

  .contact-left{
    max-width:480px;
  }

  .contact-heading{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(38px, 5.6vw, 66px);
    line-height:1.02;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .contact-line{
    margin-top:20px;
    font-size:16px;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:40ch;
  }

  .contact-portrait-wrap{
    margin:38px 0;
    width:220px;
    max-width:60%;
    opacity:0;
    transform:translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }

  .contact-portrait-wrap.in-view{
    opacity:1;
    transform:translateY(0);
  }

  .contact-portrait-frame{
    overflow:hidden;
    border-radius:14px 14px 30px 14px;
    transition: transform 0.6s var(--ease);
  }

  .contact-portrait-wrap:hover .contact-portrait-frame{
    transform:scale(1.03);
  }

  .contact-portrait-frame img{
    display:block;
    width:100%;
    height:auto;
  }

  .contact-info{
    margin-top:6px;
  }

  .contact-info .label{
    display:block;
    font-size:11.5px;
    letter-spacing:0.03em;
    color:var(--ink-dim);
    margin-bottom:8px;
  }

  .contact-info a.email{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:clamp(19px, 2.2vw, 23px);
    color:var(--ink);
    border-bottom:1px solid var(--hairline);
    padding-bottom:3px;
    transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
  }

  .contact-info a.email:hover{
    border-color:var(--brass);
    color:var(--brass);
  }

  .contact-social{
    margin-top:34px;
    display:flex;
    gap:24px;
    flex-wrap:wrap;
  }

  .contact-social a{
    font-size:13px;
    color:var(--ink-dim);
    position:relative;
    padding-bottom:3px;
    transition: color 0.4s var(--ease);
  }

  .contact-social a::after{
    content:"";
    position:absolute;
    left:0; right:100%; bottom:0;
    height:1px;
    background:var(--ink);
    transition: right 0.45s var(--ease);
  }

  .contact-social a:hover{
    color:var(--ink);
  }
  .contact-social a:hover::after{
    right:0;
  }

  /* form */
  .contact-form{
    display:flex;
    flex-direction:column;
    gap:30px;
  }

  .field{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .field label{
    font-size:11.5px;
    letter-spacing:0.03em;
    color:var(--ink-dim);
    transition: color 0.4s var(--ease);
  }

  .field.is-focused label{
    color:var(--ink);
  }

  .field input,
  .field textarea{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--hairline);
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    font-size:16px;
    font-weight:300;
    padding:6px 2px 12px;
    transition: border-color 0.45s var(--ease);
    resize:none;
  }

  .field input:focus,
  .field textarea:focus{
    outline:none;
    border-color:#fff;
  }

  .field.has-error input,
  .field.has-error textarea{
    border-color:#8a5a4d;
  }

  .field-error{
    font-size:12px;
    color:#a97b6c;
    min-height:14px;
    opacity:0;
    transform:translateY(-4px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }

  .field.has-error .field-error{
    opacity:1;
    transform:translateY(0);
  }

  .send-btn{
    margin-top:6px;
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:none;
    border:none;
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    letter-spacing:0.03em;
    cursor:pointer;
    padding-bottom:6px;
    border-bottom:1px solid var(--ink);
    transition: gap 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
  }

  .send-btn svg{
    width:14px; height:14px;
    stroke:var(--ink);
    fill:none;
    stroke-width:1.6;
    transition: transform 0.4s var(--ease), stroke 0.4s var(--ease);
  }

  .send-btn:hover{
    gap:18px;
    border-color:var(--brass);
    color:var(--brass);
  }
  .send-btn:hover svg{
    transform:translate(3px,-3px);
    stroke:var(--brass);
  }

  .contact-success{
    display:none;
    opacity:0;
    transform:translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  .contact-success.is-shown{
    display:block;
    opacity:1;
    transform:translateY(0);
  }

  .contact-success h3{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:clamp(24px, 3vw, 30px);
    color:var(--ink);
  }

  .contact-success p{
    margin-top:10px;
    font-size:15px;
    color:var(--ink-dim);
  }

  /* ---------- footer ---------- */
  .site-footer{
    border-top:1px solid var(--hairline);
    padding:34px clamp(28px, 6vw, 96px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }

  .footer-id{
    display:flex;
    flex-direction:column;
    line-height:1.4;
  }

  .footer-id .footer-name{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:15px;
    color:var(--ink);
  }

  .footer-id .footer-role{
    font-size:11px;
    letter-spacing:0.04em;
    color:var(--ink-dim);
  }

  .footer-copy{
    font-size:12px;
    color:var(--ink-dim);
  }

  .back-to-top{
    background:none;
    border:none;
    color:var(--ink-dim);
    font-family:'Space Grotesk', sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
    cursor:pointer;
    padding:4px 0;
    transition: color 0.4s var(--ease);
  }

  .back-to-top:hover{
    color:var(--ink);
  }

  @media (max-width: 860px){
    .contact-grid{
      grid-template-columns:1fr;
      gap:44px;
    }
    .contact{
      padding:70px 22px 50px;
    }
    .contact-portrait-wrap{
      width:150px;
      max-width:48%;
    }
    .site-footer{
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .contact-portrait-wrap{ transition:none !important; opacity:1 !important; transform:none !important; }
    .contact-portrait-frame{ transition:none !important; }
    .contact-success{ transition:none !important; }
  }