/* ============================================================
   REBECCA CHINN — personal site
   Tokens
   ============================================================ */
:root{
  --ink: #17140F;
  --ink-soft: #211c15;
  --ink-line: #3a332755;
  --paper: #F2ECDD;
  --paper-dim: #E7DFC9;
  --lacquer: #A81628;
  --lacquer-deep: #7C0E1D;
  --brass: #B9944C;
  --brass-bright: #D8BC7E;
  --slate: #3E5A64;
  --text-on-dark: #F1EDE3;
  --text-on-dark-soft: #C9C2AE99;
  --text-on-dark-soft-solid: #b9b19c;
  --text-on-light: #201B14;
  --text-on-light-soft: #5b5142;
  --radius: 2px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-on-dark);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass-bright);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--brass-bright);display:inline-block;}

/* ============================================================
   Nav
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(23,20,15,.96);
  border-bottom:1px solid var(--ink-line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--text-on-dark);
  font-weight:500;
}
.brand span{color:var(--lacquer);}
.nav-links{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-on-dark-soft-solid);
  position:relative;
  padding-bottom:4px;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--text-on-dark);}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-toggle{display:none;}

@media (max-width: 720px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--ink);
    flex-direction:column; padding:32px; gap:22px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:16px;}
  .nav-toggle{
    display:block; background:none; border:none; color:var(--text-on-dark);
    font-family:'JetBrains Mono',monospace; font-size:20px; cursor:pointer;
  }
}

/* ============================================================
   Brushstroke signature (used as divider / watermark)
   ============================================================ */
.brush{
  width:220px; height:26px;
  -webkit-mask:url('assets/brush.svg') no-repeat center / contain;
  mask:url('assets/brush.svg') no-repeat center / contain;
  background:linear-gradient(90deg, var(--brass), var(--lacquer));
}
.brush.small{width:120px;height:16px;}
.brush.center{margin-inline:auto;}

/* ============================================================
   Buttons / links
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{
  padding:13px 22px; border:1px solid var(--lacquer); border-radius:var(--radius);
  background:var(--lacquer); color:var(--text-on-dark);
}
.btn-solid:hover{background:var(--lacquer-deep); border-color:var(--lacquer-deep);}
.btn-ghost, .btn-ghost-dark{
  padding:6px 0; border:none; border-bottom:1px solid currentColor;
}
.btn-ghost{color:var(--text-on-dark-soft-solid);}
.btn-ghost:hover{color:var(--text-on-dark); border-color:var(--brass-bright);}
.btn-ghost-dark{color:var(--text-on-light-soft);}
.btn-ghost-dark:hover{color:var(--text-on-light); border-color:var(--lacquer);}
.arrow{transition:transform .2s ease; display:inline-block;}
.btn:hover .arrow{transform:translateX(4px);}

/* ============================================================
   Sections & type
   ============================================================ */
section{padding:96px 0;}
.section-light{background:var(--paper); color:var(--text-on-light);}
.section-dark{background:var(--ink); color:var(--text-on-dark);}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  margin:0;
  line-height:1.05;
}
.h-display{font-size:clamp(40px,6vw,74px); font-style:italic; font-weight:500;}
.h-section{font-size:clamp(28px,4vw,44px);}
p{line-height:1.6;}
.lede{font-size:19px; max-width:56ch; color:var(--text-on-light-soft);}
.lede-dark{font-size:19px; max-width:56ch; color:var(--text-on-dark-soft-solid);}

/* ============================================================
   Footer
   ============================================================ */
footer{
  background:var(--ink); border-top:1px solid var(--ink-line);
  padding:48px 0; color:var(--text-on-dark-soft-solid);
}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer a{text-decoration:none; color:var(--text-on-dark-soft-solid); font-family:'JetBrains Mono',monospace; font-size:12px;}
footer a:hover{color:var(--brass-bright);}

/* ============================================================
   Photo helpers
   ============================================================ */
.ph{overflow:hidden; background:#000;}
.ph img{width:100%; height:100%; object-fit:cover; display:block;}