/* ==========================================================
   LEE HYEONCHANG — photography portfolio
   Base: clean editorial (Mitch Epstein / Kinoseido lineage)
   Seasoning: a single navigator's-log motif — small mono
   coordinate/date stamps — used sparingly, never decorative.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Work+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#141414;
  --paper:#ffffff;
  --mist:#f2f1ee;      /* footer band */
  --rule:#e6e4de;      /* hairlines */
  --slate:#6b6b66;     /* secondary text */
  --stamp:#8a6a4b;     /* single warm accent, used only for stamps/links */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.mono{font-family:'JetBrains Mono', monospace;}

h1,h2,h3,.serif{font-family:'EB Garamond', serif; font-weight:400; letter-spacing:0.01em;}

a:focus-visible, button:focus-visible{outline:2px solid var(--stamp); outline-offset:3px;}

/* ---------- layout shell ---------- */
.wrap{max-width:1400px; margin:0 auto; padding:0 48px;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

/* ---------- nav ---------- */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 48px;
  border-bottom:1px solid var(--rule);
}
header.site .brand{
  font-family:'EB Garamond', serif;
  font-size:20px;
  letter-spacing:0.08em;
}
header.site nav{display:flex; gap:36px; font-size:14.5px; color:var(--ink);}
header.site nav a{position:relative; padding-bottom:3px;}
header.site nav a.active{border-bottom:1px solid var(--ink);}
header.site nav a:hover{opacity:0.6;}
@media (max-width:640px){
  header.site{padding:18px 22px;}
  header.site .brand{font-size:16px;}
  header.site nav{gap:18px; font-size:12.5px;}
}

/* ---------- footer ---------- */
footer.site{
  background:linear-gradient(180deg, #faf9f4 0%, #f4f1e8 100%);
  padding:44px 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  font-size:13px;
  color:var(--slate);
}
footer.site .tag{font-family:'EB Garamond', serif; font-style:italic; color:var(--ink); justify-self:start;}
footer.site .socials{display:flex; gap:12px; justify-self:center;}
footer.site .socials a{
  width:34px; height:34px; border:1px solid var(--rule); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
footer.site .socials a:hover{border-color:var(--ink);}
footer.site .copyright{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--slate); justify-self:end; text-align:right; white-space:nowrap;}
@media (max-width:820px){
  footer.site{grid-template-columns:1fr; text-align:left;}
  footer.site .tag, footer.site .socials, footer.site .copyright{justify-self:start; text-align:left; white-space:normal;}
}

/* ---------- log stamp (the one signature element) ---------- */
.stamp{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--stamp);
}
.stamp .sep{color:var(--rule); margin:0 8px;}

/* ---------- placeholder frames (until real photos are added) ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(20,20,20,0.045) 0 2px, transparent 2px 13px),
    #f6f5f2;
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  color:var(--slate);
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  text-align:center;
  padding:16px;
}

/* ---------- real photo frame ---------- */
.photo{
  overflow:hidden;
  background:#f6f5f2;
  border:1px solid var(--rule);
}
.photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- next project navigation ---------- */
.next-project-nav{
  padding:80px 0 96px;
  border-top:1px solid var(--rule);
}
.next-project-nav .credit{
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--slate);
  margin-bottom:64px;
}
.next-link{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:26px;
  text-decoration:none;
  color:var(--ink);
}
.next-link .arrow-line{
  flex:0 0 auto;
  width:96px;
  height:1px;
  background:var(--ink);
  position:relative;
  transition:background .2s, width .2s;
}
.next-link .arrow-line::after{
  content:'';
  position:absolute; right:0; top:50%;
  width:9px; height:9px;
  border-top:1px solid var(--ink);
  border-right:1px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
  transition:border-color .2s;
}
.next-link .next-text{display:flex; flex-direction:column; align-items:flex-start;}
.next-link .next-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--slate);
  margin-bottom:8px;
}
.next-link .next-title{font-size:30px; transition:color .2s;}
.next-link:hover .arrow-line{background:var(--stamp); width:118px;}
.next-link:hover .arrow-line::after{border-color:var(--stamp);}
.next-link:hover .next-title{color:var(--stamp);}

.next-link.prev{justify-content:flex-start;}
.next-link.prev .arrow-line::after{content:none;}
.next-link.prev .arrow-line::before{
  content:'';
  position:absolute; left:0; top:50%;
  width:9px; height:9px;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
  transform:translateY(-50%) rotate(-45deg);
  transition:border-color .2s;
}
.next-link.prev:hover .arrow-line::before{border-color:var(--stamp);}
@media (max-width:640px){
  .next-link .arrow-line{width:56px;}
  .next-link:hover .arrow-line{width:70px;}
}
.text-link{border-bottom:1px solid var(--rule); transition:border-color .2s;}
.text-link:hover{border-color:var(--ink);}