/* ============================================================
   Sey Kim — portfolio prototype
   Design tokens, type scale and interaction timings mirror sey.kim
   ============================================================ */

/* ---------- Fonts ----------
   PP Neue Montreal + PP Editorial Old (Pangram Pangram, licensed).
   Served here from the same CDN the live site uses. To self-host,
   drop the licensed files in /fonts and swap the urls below.       */
@font-face{font-family:Ppneuemontreal;src:url("assets/webflow/659f4af2986ebd0826ad29bb_PPNeueMontreal-Thin.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Ppneuemontreal;src:url("assets/webflow/659f4af2fd68ed48ec8a73d8_PPNeueMontreal-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Ppneuemontreal;src:url("assets/webflow/659f4af3e7f8c478b24b6825_PPNeueMontreal-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Ppneuemontreal;src:url("assets/webflow/659f4af218291548d31ef94a_PPNeueMontreal-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Ppneuemontreal;src:url("assets/webflow/659f4af2aa81500fbbf28413_PPNeueMontreal-SemiBolditalic.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Ppneuemontreal Book";src:url("assets/webflow/659f4af2052b45d52d405101_PPNeueMontreal-Book.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ppeditorialold;src:url("assets/webflow/698b82dedb7f7bf139f4aefe_PPEditorialOld-Ultralight.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Ppeditorialold;src:url("assets/webflow/698b82de5d918c8ccd741ea2_PPEditorialOld-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ppeditorialold;src:url("assets/webflow/698b82de468dc3bde316ca01_PPEditorialOld-UltralightItalic.otf") format("opentype");font-weight:200;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --black:#141414;
  --white-smoke:#eee;
  --grey-800:#3a3a3a;
  --grey-700:#66676d;
  --text-secondary:#46484b;  /* Figma: Site/Text/Secondary */
  --text-tertiary:#6e7174;   /* Figma: Site/Text/Tertiary */
  --border-2:#c4cdd9;        /* Figma: border/2 — card outlines */
  --border-3:#edf0f5;        /* Figma: border/3 — image frames */

  /* Horizontal-track geometry is measured at runtime in app.js so the
     number of project tiles can change freely. The height below is only a
     pre-JS fallback. */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0}
img{max-width:100%;vertical-align:middle;display:inline-block;border:0}
h1,h2,h3,h4,h5{margin:0;font-weight:400}
a{color:inherit;text-decoration:none}

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

/* ---------- Body ---------- */
.body{
  color:var(--black);
  background-color:#fff;
  font-family:"Ppneuemontreal Book",Ppneuemontreal,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:20px;
  letter-spacing:-.04em;
  cursor:none;
  overflow-x:hidden;
  opacity:1;
  transition:opacity .8s ease;
}
.body.is-loading{opacity:0}
.app{cursor:none}

/* ---------- Scroll progress bar ---------- */
.progress-bar{
  z-index:1;
  width:100%;
  height:5px;
  position:fixed;
  inset:auto 0 0;
  pointer-events:none;
}
.progress-bar-fill{
  background-color:var(--black);
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* ---------- Custom cursor ---------- */
.cursor-wrapper{
  z-index:1000;
  pointer-events:none;
  mix-blend-mode:difference;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  display:flex;
  position:fixed;
  inset:0;
}
.cursor-element{
  background-color:var(--white-smoke);
  border-radius:50%;
  width:1rem;
  height:1rem;
  will-change:transform;
  transition:width .3s ease,height .3s ease;
}
.cursor-wrapper.is-hovering .cursor-element{width:1.4rem;height:1.4rem}  /* 1.4x the 1rem base */

/* ---------- Navigation ---------- */
.navigation{
  z-index:9999;
  background-color:#fff;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:0 4vw;
  transition:all .75s;
  position:sticky;
  top:0;
}
.nav-container{
  flex:0 auto;
  justify-content:space-between;
  align-items:center;
  width:100%;
  display:block;
}
.brand-link{color:#333;text-decoration:none}
.nav-menu{justify-content:flex-start;align-items:flex-start}

/* ---------- Sections ---------- */
.section{margin:0;padding:0}
.content-container{padding-left:4vw;padding-right:4vw}

/* ---------- Intro ---------- */
.content-container.intro{
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  height:100vh;
  padding-bottom:20vh;
  display:flex;
}
.heading-2{
  color:var(--white-smoke);
  letter-spacing:-.02em;
  width:100%;
  margin-bottom:20px;
  font-family:"Ppneuemontreal Book",sans-serif;
  font-size:3.5em;
  font-weight:400;
  line-height:1.2em;
}
.text-span{
  color:var(--grey-800);
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:6em;
  line-height:1.2em;
}

/* word-by-word reveal on load */
.heading-2 .word{display:inline-block;overflow:hidden;vertical-align:top}
.heading-2 .word > span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.body.is-revealed .heading-2 .word > span{transform:translateY(0)}

/* ---------- Titles ---------- */
.heading3{
  letter-spacing:-.03em;
  margin:0;
  font-family:Ppeditorialold,Georgia,serif;
  font-size:2.5em;
  font-weight:200;
  line-height:1.3em;
}
.heading3.dark-mode{color:var(--white-smoke);font-weight:200}

/* ---------- Selected work: horizontal scroll track ---------- */
.section.track{height:325vw}
.project-list-horizontal{
  justify-content:space-between;
  align-items:center;
  height:100vh;
  padding-bottom:8vh;
  padding-left:4vw;
  display:flex;
  will-change:transform;
}
/* slow 10s creep in, quick 500ms settle out — matches the live timings */
.portfolio-item:hover .image-108{transform:scale(1.25);transition:transform 10s linear}
.project-title-small_new.dark-mode{
  color:var(--white-smoke);
  align-self:flex-start;
  font-size:2em;
  font-weight:400;
}
.project-title-description_new.dark-mode{color:#fff;font-size:1.2em}

/* ---------- Just for fun ---------- */
.content-container.creative-list{
  background-color:var(--black);
  flex-direction:column;
  justify-content:space-between;
  align-items:stretch;
  height:auto;
  padding-top:10vh;
  display:flex;
}
.skew-element{
  aspect-ratio:1;
  background-position:35%;
  background-size:cover;
  width:100%;
  min-width:100%;
  height:100%;
  min-height:100%;
  display:inline-block;
  cursor:none;
  transform-origin:right center;
  will-change:transform;
}
.skew-element.swanspace{
  background-image:url("assets/webflow/665b37dc60504221e9803f9e_02-ezgif.com-optimize%20(1).gif");
  background-position:50%;
  position:relative;
}
.skew-element.va{background-image:url("assets/webflow/6627ba8c19d784182dfd6239_forGIF-ezgif.com-optimize%20(1).gif")}
.skew-element.sai{background-image:url("assets/webflow/6628078b8ba0bef4848a9f60_website_thumbnail-ezgif.com-video-to-gif-converter.gif")}
.skew-element.soundviz{background-image:url("assets/webflow/65ed3d9665acaa4acb2e9403_soundviz3-ezgif.com-optimize.gif")}
.skew-element:hover .ct_hover{opacity:1}
.skew-element:hover .ct_hover .project-title-small_new,
.skew-element:hover .ct_hover .project-title-description_new{
  opacity:1;
  transform:translateY(0);
}
.img-subtitle-container.home{
  grid-column-gap:2vh;
  grid-row-gap:2vh;
  justify-content:flex-start;
  align-items:center;
}
.caption{
  color:var(--black);
  font-family:"Ppneuemontreal Book",sans-serif;
  font-size:1em;
  line-height:1.2em;
}
.caption.italic{color:var(--grey-800);font-style:italic}
.text-lead{
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:2.5em;
  line-height:1.2em;
}
.text-body{
  font-family:"Ppneuemontreal Book",sans-serif;
  font-size:1.5em;
  line-height:1.4em;
}
.text-body.link{
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:1em;
  font-weight:500;
  text-decoration:underline;
}

/* ---------- Footer ---------- */
.footer{
  color:#ebebeb;
  background-color:#1b1b1b;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  height:auto;
  padding:6vw 4vw;
  display:flex;
}
.div-block-34{align-self:stretch;display:flex}
.footer-inner{
  grid-column-gap:6vh;
  grid-row-gap:6vh;
  text-align:center;
  flex-flow:column;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  margin-bottom:4vw;
  display:flex;
}
.footer-info{
  color:var(--white-smoke);
  text-align:left;
  font-family:"Ppneuemontreal Book",sans-serif;
  font-size:4em;
  font-weight:200;
  line-height:1.2em;
  text-decoration:none;
}
.button1{grid-column-gap:25px;display:flex}
.button-2{
  background-color:var(--white-smoke);
  pointer-events:auto;
  color:var(--black);
  cursor:none;
  border:0;
  border-radius:8px;
  align-self:center;
  padding:.5em 1em;
  font-family:"Ppneuemontreal Book",sans-serif;
  font-size:2em;
  line-height:1.2em;
  transition:background-color .3s ease,color .3s ease;
}
.button-2:hover{background-color:#c9c9c9}
.copyright-container{align-self:flex-end;width:100%}
.body5_new{
  color:var(--white-smoke);
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:1em;
  line-height:1.2em;
}

/* ---------- Copy toast ---------- */
.copy-toast{
  position:fixed;
  left:50%;
  bottom:6vh;
  transform:translate(-50%,1rem);
  background:var(--black);
  color:var(--white-smoke);
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:1rem;
  letter-spacing:0;
  padding:.75rem 1.25rem;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  z-index:10000;
}
.copy-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media screen and (max-width:991px){
  .navigation{padding-left:5%;padding-right:5%}
  .footer-info{font-size:8vw}
  .progress-bar{z-index:9999}
  .cursor-wrapper{display:none}
  .body,.app,.portfolio-item,.button-2,.skew-element{cursor:auto}

  /* horizontal track collapses to a normal vertical list */
  .section.track{height:auto;padding:0}
  .project-list-horizontal{
    flex-flow:column;
    height:auto;
    padding:0 4vw 8vh;
    gap:8vh;
    transform:none !important;
  }
  .text-span{font-size:4em}
}

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media screen and (max-width:479px){
  .navigation{padding-left:2vw}
  .navigation-link{font-size:14px;font-weight:400}
  .navigation-inner{justify-content:center;align-items:center;padding-top:1vh;padding-bottom:1vh}
  .nav-menu{margin-top:auto}
  .logo-text{font-size:1.25em}

  .content-container.intro{
    justify-content:flex-start;
    align-items:flex-start;
    height:auto;
    padding:0 5vw 10vw;
  }
  .intro-col{width:100%}
  .heading-2{color:var(--black);margin-top:20vw;font-size:36px}
  .text-span{font-size:36px}

  .heading3{font-size:2em;line-height:1.2em}

  .project-list-horizontal{padding:0 5vw 10vw;gap:12vw}

  .content-container.creative-list{padding:10vw 5vw}
  .skew-element{border-radius:12px}
  .text-lead{font-size:1.25em}
  .text-body{font-size:1.1em}
  .caption{font-size:11px;line-height:1.2em}

  .footer{width:100vw;padding:4vh 4vw 2vh}
  .footer-inner{grid-column-gap:4vw;grid-row-gap:4vw}
  .footer-info{font-size:1.5em}
  .button-2{font-size:1.5em}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .heading-2 .word > span{transform:none}
}

/* ---------- Footer secondary links ----------
   Sit directly under the "Get in touch" button, laid out in a row.
   Defined here rather than in case-study.css because the home page
   loads only this stylesheet. */
.footer-cta{display:flex;flex-direction:column;align-items:flex-start;gap:2.5vh}
.footer-links{display:flex;flex-flow:row wrap;align-items:center;gap:2vw}
.footer-links a{text-decoration:underline;text-underline-offset:.18em}
.footer-links a:hover{color:#c9c9c9}
@media screen and (max-width:479px){
  .footer-cta{gap:2vh}
  .footer-links{gap:5vw}
}

/* ============================================================
   Home page — built to Figma node 1704:5567 (1440 frame).
   Values below are the design's absolute px, not approximations.
   ============================================================ */

/* Root rhythm: 125px between every major section. */
.home.desktop{
  display:flex;
  flex-direction:column;
  gap:125px;
}

/* Shared 1040px content column (footer uses the same measure). */
.shell{width:min(1040px,100% - 80px);margin-inline:auto}

/* ---------- Nav: full width, 40px padding, 80px item gap ---------- */
.navigation{padding:0}.navigation-inner{justify-content:space-between;align-items:center;width:auto;display:flex;padding:24px 40px}.logo-text{letter-spacing:-1.5px;font-family:Ppeditorialold,Georgia,serif;font-size:41px;font-weight:400;line-height:1}  /* sized to the design's 109x42 wordmark box */
.nav-menu{display:flex;align-items:center;gap:80px}.navigation-link{color:var(--black);margin-left:4vw;font-family:"Ppneuemontreal Book",sans-serif;font-size:20px;font-weight:400;line-height:normal;text-decoration:none;transition:opacity .3s ease;display:inline-block;margin:0;white-space:nowrap}.navigation-link:hover{color:var(--black);opacity:.5}

/* ---------- Hero: 50px Medium in the 1040 column ---------- */
.content-container.intro{
  display:block;height:auto;padding:125px 0 0;
}.intro-col{width:100%;margin-bottom:0;overflow:visible}
.heading-2,.heading-2.text-span{
  width:100%;margin:0;
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:50px;font-weight:500;line-height:normal;
  letter-spacing:normal;color:var(--black);
}

/* ---------- Work sections: 20px between title and grid ---------- */
.work-section-block{display:flex;flex-direction:column;gap:20px;padding:0}
.work-section-head{padding:0}
.work-section-head .heading3{
  margin:0;
  font-family:Ppeditorialold,Georgia,serif;
  font-size:30px;font-weight:400;line-height:normal;letter-spacing:normal;
  color:var(--black);
}

/* ---------- Grid: 2 columns, 20px both axes ---------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px;   /* Figma value, unchanged */
  row-gap:40px;      /* 2x the design's 20px */
  align-items:start;
}

/* ---------- Card: 10px media→text, 4px title→meta ---------- */
.work-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;cursor:none}
.work-card-media{
  aspect-ratio:510 / 342;        /* the design's 510×342 media box */
  border-radius:20px;
  background:#d9d9d9;
  overflow:hidden;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.work-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.work-card:hover .work-card-media{transform:translateY(-.5rem)}
.work-card:hover .work-card-media img{transform:scale(1.05)}

/* Hover thumbnail: desktop (real mouse) only. display:none elsewhere, so a
   lazy-loaded hover image is never fetched on touch devices. */
.work-card-media{position:relative}
.work-card-media .work-card-hover{
  position:absolute;inset:0;display:none;opacity:0;
  transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .work-card-media .work-card-hover{display:block}
  .work-card:hover .work-card-hover{opacity:1}
}

.work-card-text{display:flex;flex-direction:column;gap:4px}
.work-card-title,.work-card-desc,.work-card-meta{
  font-size:20px;line-height:normal;letter-spacing:normal;
  margin:0;
}
.work-card-title{
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-weight:500;                       /* PP Neue Montreal Medium */
  color:var(--black);
}
.work-card-desc{                         /* one-liner under the project name */
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-weight:400;                       /* PP Neue Montreal Book */
  font-size:16px;
  color:var(--black);
}
.work-card-meta{
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-weight:400;                       /* PP Neue Montreal Book */
  font-size:16px;
  color:var(--text-tertiary);
}

/* ---------- Footer: #232627, 80px top/bottom padding ---------- */
.home-footer{
  background:#232627;
  min-height:349px;
  padding:80px 0;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:40px;
}
.footer-email{
  background:#fff;color:#232627;
  border-radius:10px;padding:20px;
  align-self:flex-start;
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:22px;font-weight:500;line-height:normal;   /* matches .btn-outline */
  white-space:nowrap;cursor:none;
  transition:background-color .3s ease;
}
.footer-email:hover{background:#d9d9d9}
.footer-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
}
.footer-row-left{display:flex;align-items:center;gap:40px}
.footer-row a{
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:20px;font-weight:500;line-height:normal;color:#fff;
  white-space:nowrap;transition:opacity .25s ease;
}
.footer-row a:hover{opacity:.55}
.footer-copyright{
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-size:18px;font-weight:400;line-height:normal;color:#fff;   /* PP Neue Montreal Book */
}

/* ---------- Responsive: scale the type, keep the proportions ---------- */
@media screen and (max-width:991px){
  .home.desktop{gap:80px}
  .navigation-inner{padding:24px}
  .nav-menu{gap:32px}
  .navigation-link{font-size:16px}
  .heading-2,.heading-2.text-span{font-size:36px}
  .work-section-head .heading3{font-size:26px}
  .work-card-title{font-size:17px}
  .work-card-desc,.work-card-meta{font-size:14px}
  .footer-row a{font-size:17px}
}
@media screen and (max-width:600px){
  .home.desktop{gap:56px}
  .shell{width:calc(100% - 40px)}
  .work-grid{grid-template-columns:minmax(0,1fr)}
  .heading-2,.heading-2.text-span{font-size:28px}
  .footer-email{font-size:18px;padding:16px}
  .footer-row{flex-direction:column;align-items:flex-start;gap:16px}
}

/* footer content sits in the same 1040 column as everything else */
.home-footer .shell{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:40px}

/* ============================================================
   About page
   ============================================================ */
.about-page{display:flex;flex-direction:column;gap:125px;padding-top:125px}

.about-photo{
  width:347px;max-width:100%;
  aspect-ratio:1 / 1;
  border-radius:20px;
  background:#d9d9d9;
  overflow:hidden;
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}

.about-block{display:flex;flex-direction:column;gap:40px}
.about-heading{
  margin:0;
  font-family:Ppeditorialold,Georgia,serif;
  font-size:30px;font-weight:400;line-height:normal;letter-spacing:normal;
  color:var(--black);
}
.about-body{display:flex;flex-direction:column;gap:24px;max-width:52em}
.about-body p{
  margin:0;
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-size:18px;font-weight:400;line-height:1.5;letter-spacing:normal;
  color:var(--black);
}

/* ---------- Contact ---------- */
.contact-block{display:flex;flex-direction:column;gap:40px}
.contact-lead{
  margin:0;
  font-family:Ppeditorialold,Georgia,serif;
  font-size:30px;font-weight:400;line-height:1.3;letter-spacing:normal;
  color:var(--black);
}
.contact-form{display:flex;flex-direction:column;gap:24px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-size:15px;font-weight:400;color:#8a8c93;letter-spacing:normal;
}
.field input,.field textarea{
  font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-size:17px;letter-spacing:normal;color:var(--black);
  padding:.8em .9em;
  border:1px solid #b8b9bd;border-radius:8px;background:#fff;
  width:100%;
}
.field input{height:52px}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--black);outline-offset:-1px;border-color:var(--black)}

.btn-outline{
  align-self:flex-start;
  font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-size:22px;font-weight:500;letter-spacing:normal;color:var(--black);
  background:#fff;border:1px solid var(--black);border-radius:8px;
  padding:.6em 1.1em;cursor:none;
  transition:background-color .25s ease,color .25s ease;
}
.btn-outline:hover{background:var(--black);color:#fff}
.form-status{
  margin:0;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-size:17px;color:var(--black);letter-spacing:normal;
}
.form-status:empty{display:none}
.form-status.is-error{color:#b3261e}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}   /* spam trap: bots fill it, people never see it */
.btn-outline:disabled{opacity:.5}

@media screen and (max-width:991px){
  .about-page{gap:80px;padding-top:80px}
  .about-heading,.contact-lead{font-size:26px}
  .about-body p{font-size:17px}
}
@media screen and (max-width:600px){
  .about-page{gap:56px;padding-top:56px}
  .about-photo{width:100%}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .about-heading,.contact-lead{font-size:22px}
  .btn-outline{font-size:18px}
}