/* =========================================================
   HYOSUN CHO — photographer
   Palette: warm beige paper, espresso ink, sienna whisper
   ========================================================= */

:root{
  --ink:        #E9E0CE;          /* warm beige paper (background) */
  --ink-2:      #E2D7C2;
  --bone:       #2A201A;          /* espresso ink (text) */
  --bone-dim:   #7a6952;          /* secondary text — darkened for legibility on beige */
  --bone-faint: rgba(42,32,26,.40);
  --oxblood:    #8A4B36;          /* burnt sienna accent, used sparingly */
  --line:       rgba(42,32,26,.16);

  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  cursor:none;
}

/* keep native cursor on touch / no-hover devices */
@media (hover:none){ body{ cursor:auto; } .cursor{ display:none; } }

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--oxblood); color:var(--ink); }

img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- atmosphere: vignette + grain ---------- */
.atmos{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 10%, transparent 48%, rgba(74,54,34,.16) 100%),
    radial-gradient(140% 120% at 50% 100%, transparent 62%, rgba(74,54,34,.12) 100%);
}
.grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(2%,4%)} 100%{transform:translate(0,0)}
}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--bone);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease);
  display:grid; place-items:center;
}
.cursor__label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); opacity:0;
  transition:opacity .25s var(--ease); white-space:nowrap;
}
.cursor.is-active{ width:74px; height:74px; background:var(--bone); }
.cursor.is-active .cursor__label{ opacity:1; }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:grid; place-items:center;
}
.loader__inner{ display:grid; gap:14px; justify-items:center; text-align:center; }
.loader__mark{ font-family:var(--font-display); font-size:42px; letter-spacing:.04em; }
.loader__count{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.3em; color:var(--oxblood);
}
.loader__caption{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim);
}

/* ---------- webgl canvas ---------- */
#gl{
  position:fixed; inset:0; z-index:0;
  width:100vw; height:100vh; display:block;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:40;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px var(--pad);
}
.nav__brand{
  font-family:var(--font-display); font-size:20px; font-weight:500; letter-spacing:.02em;
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  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__status{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim);
}
@media (max-width:720px){ .nav__links{ display:none; } }

/* ---------- site wrapper sits above canvas ---------- */
.site{ position:relative; z-index:10; }
/* every section after the hero is opaque so it slides over the canvas */
.statement,.works,.series,.studio,.contact{ background:var(--ink); position:relative; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(40px,7vh,84px);
  background:transparent;            /* canvas shows through */
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:2; max-width:min(92vw,1100px); }
.hero__eyebrow{
  display:flex; gap:26px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-dim);
}
.hero__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(74px,18vw,260px); line-height:.82; letter-spacing:-.01em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title em{ font-style:italic; font-weight:400; }
.hero__lede{
  max-width:40ch; margin-top:26px;
  font-size:clamp(15px,1.5vw,19px); line-height:1.5; color:var(--bone);
}
.hero__cue{
  display:flex; align-items:center; gap:14px; margin-top:34px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
}
.hero__cue-line{
  width:48px; height:1px; background:var(--bone-dim); position:relative; overflow:hidden;
}
.hero__cue-line::after{
  content:""; position:absolute; inset:0; background:var(--oxblood);
  transform:translateX(-100%); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

.hero__meta{
  position:absolute; z-index:2; top:50%;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--bone-faint); line-height:1.6;
}
.hero__meta--l{ left:var(--pad); }
.hero__meta--r{ right:var(--pad); text-align:right; }
@media (max-width:720px){ .hero__meta{ display:none; } }

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{ padding:clamp(110px,18vh,220px) var(--pad); }
.statement__kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oxblood); margin-bottom:38px;
}
.statement__body{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(27px,3.8vw,50px); line-height:1.32; letter-spacing:-.003em;
  max-width:22ch; color:#211810;
}
.statement__body em{ font-style:italic; font-weight:500; }
.statement__body span{ color:#6a5840; }   /* secondary clause — readable, still recessive */

/* =========================================================
   SELECTED WORKS — editorial offset grid + contact-sheet caps
   ========================================================= */
.works{ padding:clamp(40px,6vh,90px) var(--pad) clamp(80px,12vh,150px); }
.works__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:30px; padding-bottom:clamp(50px,8vh,110px); border-bottom:1px solid var(--line);
}
.section-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(48px,9vw,128px); line-height:.86; letter-spacing:-.01em;
}
.works__intro{ max-width:34ch; color:var(--bone-dim); font-size:15px; }

.plate{ display:grid; gap:20px; margin-top:clamp(60px,10vh,140px); }
.plate__fig{ overflow:hidden; position:relative; }
.plate__fig img{
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:grayscale(.32) contrast(1.02);
}
.plate__fig:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.05); }
.plate__cap{
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--bone-dim);
}
.plate__no{ color:var(--oxblood); }
.plate__title{
  font-family:var(--font-display); font-size:19px; letter-spacing:0;
  color:var(--bone); text-transform:none;
}
.plate__exif{ margin-left:auto; }

/* offset widths to feel curated, not gridded */
.plate__fig{ aspect-ratio:3/4; }
.plate--a{ width:min(46%,620px); }
.plate--b{ width:min(62%,860px); margin-left:auto; }
.plate--c{ width:min(40%,520px); margin-left:8%; }
.plate--d{ width:min(54%,720px); margin-left:auto; }
@media (max-width:720px){
  .plate--a,.plate--b,.plate--c,.plate--d{ width:100%; margin:60px 0 0; }
}

/* =========================================================
   SERIES INDEX
   ========================================================= */
.series{ padding:clamp(90px,14vh,180px) var(--pad); }
.series__h{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(30px,5vw,68px); margin-bottom:14px; color:var(--bone);
}
.series__sub{
  max-width:42ch; margin-bottom:48px; color:var(--bone-dim); font-size:15px;
}
.index{ list-style:none; border-top:1px solid var(--line); }
.index__row{ border-bottom:1px solid var(--line); }
.index__link{
  display:grid; grid-template-columns:48px 1fr auto auto 24px; align-items:baseline;
  gap:24px; padding:clamp(20px,3.4vh,38px) 0;
  transition:padding .55s var(--ease), color .55s var(--ease);
}
.index__row:hover .index__link{ padding-left:26px; padding-right:6px; color:#1a120c; }
.index__num{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--oxblood); align-self:center;
}
.index__name{
  font-family:var(--font-display); font-size:clamp(26px,4.4vw,56px);
  font-weight:500; line-height:1;
}
.index__client,.index__yr{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone-dim); align-self:center;
}
.index__yr{ text-align:right; }
.index__arrow{
  font-size:20px; align-self:center; text-align:right; color:var(--oxblood);
  transform:translateX(-6px); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.index__row:hover .index__arrow{ opacity:1; transform:translateX(0); }
@media (max-width:560px){
  .index__link{ grid-template-columns:36px 1fr auto; gap:14px; }
  .index__client, .index__arrow{ display:none; }
}

/* =========================================================
   STUDIO
   ========================================================= */
.studio{
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(40px,8vw,140px);
  padding:clamp(90px,14vh,180px) var(--pad); border-top:1px solid var(--line);
}
.studio__kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oxblood); margin-bottom:32px;
}
.studio__bio{
  font-family:var(--font-display); font-size:clamp(22px,2.5vw,32px);
  line-height:1.4; font-weight:500; margin-bottom:26px; color:#211810;
}
.studio__bio--dim{ font-size:clamp(16px,1.6vw,20px); color:var(--bone-dim); }
.clients{ list-style:none; display:grid; gap:14px; }
.clients li{
  font-family:var(--font-display); font-size:clamp(20px,2.2vw,30px);
  padding-bottom:13px; border-bottom:1px solid var(--line);
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.clients li:hover{ color:#1a120c; transform:translateX(8px); }
@media (max-width:820px){ .studio{ grid-template-columns:1fr; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  padding:clamp(90px,16vh,200px) var(--pad) clamp(40px,6vh,70px);
  border-top:1px solid var(--line);
}
.contact__kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oxblood); margin-bottom:40px;
}
.contact__headline{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(46px,11vw,168px); line-height:.92; letter-spacing:-.01em;
  transition:color .5s var(--ease);
}
.contact__headline:hover{ font-style:italic; color:#1a120c; }
.contact__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  margin-top:clamp(60px,9vh,120px); padding-top:36px; border-top:1px solid var(--line);
}
.contact__lbl{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:14px;
}
.contact__grid a, .contact__grid span{ display:block; font-size:16px; line-height:1.7; }
.contact__grid a{ position:relative; width:max-content; }
.contact__grid a::after{
  content:""; position:absolute; left:0; bottom:1px; width:0; height:1px;
  background:var(--bone); transition:width .4s var(--ease);
}
.contact__grid a:hover::after{ width:100%; }
@media (max-width:640px){ .contact__grid{ grid-template-columns:1fr; gap:24px; } }

.colophon{
  display:flex; flex-wrap:wrap; gap:8px 30px; justify-content:space-between;
  margin-top:clamp(60px,10vh,120px);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-dim);
}

/* =========================================================
   PLACE PAGE  (place.html)
   ========================================================= */
.nav__back{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav__back::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__back:hover::after{ width:100%; }

.place{ position:relative; z-index:1; }

.place-hero{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:end;
  gap:clamp(30px,5vw,80px);
  padding:clamp(140px,20vh,220px) var(--pad) clamp(50px,8vh,90px);
}
.place-hero__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(64px,11vw,168px); line-height:.86; letter-spacing:-.01em;
}
.place-hero__country{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.4vw,32px); color:var(--bone-dim); margin-top:10px;
}
.place-hero__note{
  max-width:40ch; margin-top:26px; font-size:clamp(15px,1.5vw,18px);
  line-height:1.55;
}
.place-hero__count{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oxblood); margin-top:24px;
}
.place-hero__fig{
  aspect-ratio:4/5; overflow:hidden; align-self:stretch; min-height:60vh;
}
.place-hero__fig img{ filter:grayscale(.28) contrast(1.02); }
@media (max-width:820px){
  .place-hero{ grid-template-columns:1fr; }
  .place-hero__fig{ min-height:0; aspect-ratio:4/5; order:-1; }
}

.place-gallery{
  padding:clamp(40px,7vh,90px) var(--pad) clamp(60px,10vh,120px);
  display:flex; flex-direction:column; gap:clamp(56px,9vh,130px);
}
.pframe{ display:grid; gap:18px; margin:0; }
.pframe__fig{ overflow:hidden; aspect-ratio:4/5; }
.pframe__fig img{
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:grayscale(.3) contrast(1.02);
}
.pframe__fig:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.05); }
.pframe__cap{
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--bone-dim);
}
.pframe__no{ color:var(--oxblood); }
.pframe__title{
  font-family:var(--font-display); font-size:19px; color:var(--bone); letter-spacing:0;
}
.pframe__exif{ margin-left:auto; }
/* curated offset rhythm */
.pframe:nth-child(6n+1){ width:min(58%,760px); }
.pframe:nth-child(6n+2){ width:min(42%,560px); margin-left:auto; }
.pframe:nth-child(6n+3){ width:min(50%,660px); margin-left:9%; }
.pframe:nth-child(6n+4){ width:min(60%,800px); margin-left:auto; }
.pframe:nth-child(6n+5){ width:min(40%,520px); }
.pframe:nth-child(6n+6){ width:min(54%,720px); margin-left:auto; }
.pframe:nth-child(3n+2) .pframe__fig{ aspect-ratio:3/4; }
.pframe:nth-child(3n) .pframe__fig{ aspect-ratio:1/1; }
@media (max-width:720px){
  .place-gallery{ gap:54px; }
  .pframe{ width:100% !important; margin:0 !important; }
  .pframe__fig{ aspect-ratio:4/5 !important; }
}

.place-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--line); margin:0 var(--pad);
}
.place-nav__a{
  display:grid; gap:8px; padding:clamp(34px,6vh,64px) var(--pad);
  background:var(--ink); transition:background .4s var(--ease), padding .4s var(--ease);
}
.place-nav__a--next{ text-align:right; }
.place-nav__a:hover{ background:var(--ink-2); }
.place-nav__dir{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oxblood);
}
.place-nav__name{
  font-family:var(--font-display); font-size:clamp(28px,4vw,52px); font-weight:500; line-height:1;
}
.place-nav__c{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-dim);
}
@media (max-width:600px){ .place-nav{ grid-template-columns:1fr; } .place-nav__a--next{ text-align:left; } }

.place-contact{ border-top:none; }
.place-contact .colophon a{ position:relative; }
.place-contact .colophon a:hover{ color:var(--bone); }

/* =========================================================
   motion-in states (set by JS / GSAP) + reduced motion
   ========================================================= */
[data-reveal]{ will-change:transform,opacity; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .cursor{ display:none; } body{ cursor:auto; }
}