/* ==========================================================================
   Kesnel Samuel Jean Philippe — Personal Site
   "The Field Archive" — an editorial, naturalist's-notebook identity: warm
   paper, deep forest ink, and a rust-copper signature accent that shows up
   as hard "stamped" offset shadows instead of soft blur. Newsreader serif
   for display, Work Sans for body, Space Mono for labels and data.
   Signature motifs: a single confident ink-stroke underline, and recurring
   "specimen tag" labels on flagship photography (Fig. 01, Fig. 02…).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');


:root{
  --bg:#fff;
  --bg-alt:#f8f5ec;
  --surface:#ffffff;
  --ink:#000000;
  --ink-soft:#585f61;
  --ink-faint:#b9b7b1;
  --line: rgba(24,42,32,0.16);
  --line-strong: rgba(24,42,32,0.34);

  --gold:#266c3a;
  --gold-soft:#6E8F71;
  --gold-tint:#DCE6DA;
  --sage:#2397b4;
  --sage-tint:#daf8ff;
  --brick:#ff540b;
  --brick-tint:#f7f2ef;

  --font-display:'Merriweather', serif;
  --font-body:'Playpen Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'Playpen Sans', monospace;

  --container: 1180px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --shadow-soft: 5px 5px 0 var(--brick-tint);
  --shadow-lift: 7px 7px 0 var(--brick-tint);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Actual rendered .site-header height, so .main-app's clearance never
     drifts out of sync with it — redefined per breakpoint below instead of
     hardcoded, since .nav's own padding changes at 600px. */
  --header-height: 108px;
}
@media (max-width: 900px){
  :root{ --header-height: 89px; }
}
@media (max-width: 600px){
  :root{ --header-height: 81px; }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
html,body{ background: var(--brick)!important; }
html{ overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  font-family:var(--font-body);
  font-size: 18px;
  line-height:1.;
  display: block;
  -webkit-font-smoothing:antialiased;
}

.main-app{
  padding-top: var(--header-height);
  background: var(--bg)!important;
  height: 100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }

:focus-visible{
  outline: 2.5px solid var(--brick);
  outline-offset: 3px;
  border-radius: 3px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
@media (max-width: 1180px){
  .container{ padding:0 28px; }
  .container.not_wide{padding-left: 0; padding-right: 0;}
  .inmo_con{padding-left: 28px; padding-right: 28px;}
}

section{ position:relative; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); }
h4{ font-size:1.15rem; font-weight:600; }
p{ margin:0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold);
}

.lede{
  font-size:1.2rem;
  color:var(--ink-soft);
  max-width:60ch;
}

/* ---------- Signature ink-stroke underline ---------- */
.squiggle{
  position:relative;
  white-space:nowrap;
  font-style:italic;
  color:var(--brick);
}
.squiggle svg{
  position:absolute;
  left:-2%; bottom:-0.16em;
  width:104%; height:0.5em;
  overflow:visible;
}
.squiggle svg path{
  fill:none;
  stroke:var(--brick);
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:260;
  stroke-dashoffset:260;
  transition:stroke-dashoffset 0.9s var(--ease);
}
.squiggle.in-view svg path{ stroke-dashoffset:0; }

/* ---------- Signature: specimen tag (site's recurring photo label) ---------- */
.specimen-tag{
  position:absolute;
  z-index:3;
  bottom:16px; left:16px;
  background:var(--surface);
  border:1px solid var(--ink);
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink);
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--brick);
  pointer-events:none;
}
.specimen-tag.right{ left:auto; right:16px; transform:rotate(2deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 24px;
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-primary{
  background:var(--ink);
  color:var(--bg);
  box-shadow:4px 4px 0 var(--brick);
}
.btn-primary:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--brick); }
.btn-primary:active{ transform:translate(0,0); box-shadow:0 0 0 var(--brick); }
.btn-outline{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-outline:hover{ border-color:var(--ink); background:var(--surface); box-shadow:4px 4px 0 var(--gold-tint); transform:translate(-2px,-2px); }
.btn-gold{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--surface);
  box-shadow:4px 4px 0 var(--sage-tint);
}
.btn-gold:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--sage-tint); }
.btn-sm{ padding:10px 16px; font-size:0.7rem; }
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:absolute;
  width: 100%;
  top:0;
  z-index:200;
  background: var(--ink);
  color: var(--bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-strong);
}
.nav{
  max-width:var(--container);
  margin:0 auto;
}
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{background: var(--bg);}

/* ---------- Desktop / large screens (>900px): the original layout — logo
   left, horizontal nav-links, Newsletter button right ---------- */
.nav-desktop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 30px 28px;
}
.nav-mobile{ display:none; }
.nav-desktop .brand{
  font-family:var(--font-mono);
  font-size: 1rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap: 0px;
  margin-left: -10px;
}
.nav-desktop .brand .mark{ width: 70px; height:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-links a{
  display:inline-block;
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size: .9rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--bg);
  border-bottom:1.5px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav-links a:hover, .nav-links a.active{
  border-color:var(--brick);
  opacity: 1;
}

/* ---------- Mobile / tablet / mini laptop (≤900px): hamburger left,
   centered logo, Contact button right, full-screen overlay nav ---------- */
@media (max-width: 900px){
  .nav-desktop{ display:none; }
  .nav-mobile{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding: 24px 28px;
  }
}
@media (max-width: 600px){
  .nav-mobile{ padding: 20px; }
}
.nav-mobile .brand{
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
}
.nav-mobile .brand .mark{
  width: 56px; height:auto;
}
.nav-mobile .nav-cta{ grid-column:3; justify-self:end; }
.nav-toggle{
  grid-column:1;
  justify-self:start;
  display:flex;
  background:none; border:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index:210;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  display:block;
  width:20px; height:2px;
  background:var(--bg);
  position:relative;
  transition:transform .3s, opacity .3s;
}
.nav-toggle span::before{ position:absolute; top:-7px; transition:top .2s .2s, transform .2s; }
.nav-toggle span::after{ position:absolute; top:7px; transition:top .2s .2s, transform .2s; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ top:0; transform:rotate(45deg); transition:top .2s, transform .2s .2s; }
.nav-toggle.open span::after{ top:0; transform:rotate(-45deg); transition:top .2s, transform .2s .2s; }

/* Full-screen nav — the header bar above stays put (locked body scroll)
   and this panel fades in to fill everything below it. */
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:190;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  padding:130px 28px 40px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-16px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  overflow-y:auto;
}
.nav-overlay.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.nav-overlay-links{
  display:flex;
  flex-direction:column;
  max-width:var(--container);
  margin:0 auto;
  width:100%;
}
.nav-overlay-links a{
  display:block;
  padding:20px 4px;
  font-family:var(--font-mono);
  font-size:1.5rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--bg);
  border-bottom:1px solid rgba(244,239,226,0.14);
  transition:color .2s, padding-left .2s;
}
.nav-overlay-links a:hover, .nav-overlay-links a.active{
  color:var(--brick);
  padding-left:14px;
}
.nav-overlay-newsletter{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:var(--container);
  margin:28px auto 0;
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1.5px solid var(--bg);
  border-radius:var(--radius-sm);
  padding:17px 24px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:transform .2s, box-shadow .2s;
}
.nav-overlay-newsletter:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.35); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding-top: 80px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 480px at 12% -12%, rgba(156,75,42,0.22), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(110,143,113,0.22), transparent 55%),
    var(--ink);
    color:var(--bg);
}
.footer-cta-wrap{ padding-block:84px 0; }
.footer-cta{
  position:relative;
  border:1px solid rgba(242, 236, 221,0.14);
  border-top:3px solid var(--brick);
  border-radius:var(--radius-lg);
  background:rgba(242, 236, 221,0.05);
  padding:52px 56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.footer-cta h2{ color:var(--bg); max-width:16ch; margin:8px 0 30px 0; }
.footer-cta .lede{ color:rgba(242, 236, 221,0.72); margin:0; }
.footer-cta .btn-primary{ background:var(--bg); color:var(--ink); }
.footer-cta .btn-primary:hover{ background:var(--brick-tint); }
.footer-main{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
  padding-block:130px 80px;
}
.footer-brand-block{ max-width:380px; }
.footer-logo{ width:130px; height:auto; margin-bottom:20px; margin-left: -20px; pointer-events: none;}
.footer-brand{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:12px; }
.footer-about{ color:rgba(242, 236, 221,0.65); font-size:0.95rem; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col-title{
  display:block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:rgba(242, 236, 221,0.42);
  margin-bottom:16px;
}
.footer-nav{ display:flex; flex-direction:column; gap:11px; }
.footer-nav a{ color:rgba(242, 236, 221,0.72); font-size:0.95rem; transition:color .2s; }
.footer-nav a:hover{ color:var(--brick-tint); }
.footer-bottom-simple{
  position:relative;
  border-top:1px solid rgba(242, 236, 221,0.14);
  padding-block:22px 26px;
  font-size:0.82rem;
  color:rgba(242, 236, 221,0.5);
}
@media (max-width: 640px){
  .footer-cta{ padding:38px 28px; }
  .footer-main{ flex-direction:column; gap:34px; }
  .footer-cols{ gap:40px; }
}

/* ---------- Real-photo helper (used inside .ph frames) ---------- */
.ph.has-photo{ background:none; }
.ph.has-photo::after{ content:none; }
img.fill,
video.fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Monogram avatar (used instead of a stock face) ---------- */
.avatar-mono{
  border-radius:50%;
  background:var(--ink);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  flex-shrink:0;
}

/* ==========================================================================
   Image placeholders
   ========================================================================== */
.ph{
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(42,35,24,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--bg-alt), var(--gold-tint));
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-faint);
}
.ph::after{
  content: attr(data-label);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:rgba(255,253,249,0.85);
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.ph svg{ position:absolute; opacity:0.35; width:38%; }

/* ==========================================================================
   Reveal-on-scroll utility
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.08s; }
.reveal-delay-2.in-view{ transition-delay:.16s; }
.reveal-delay-3.in-view{ transition-delay:.24s; }

/* ==========================================================================
   Quote blocks
   ========================================================================== */
.quote-block{
  position:relative;
  padding-block:100px;
  text-align:center;
}
.quote-block .mark{
  font-family:var(--font-display);
  font-size:7rem;
  color:var(--gold-soft);
  line-height:0.4;
  display:block;
  font-style:italic;
  margin-bottom:18px;
}
.quote-block blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight:500;
  max-width:26ch;
  margin:0 auto;
  color:var(--ink);
}
.quote-block cite{
  display:block;
  margin-top:22px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ==========================================================================
   Pills / tags / labels
   ========================================================================== */
.tag{
  display:inline-block;
  padding:5px 12px;
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid var(--line-strong);
  color:var(--ink-soft);
}
.tag.gold{ background:var(--gold-tint); border-color:transparent; color:var(--gold); }
.tag.sage{ background:var(--sage-tint); border-color:transparent; color:var(--sage); }
.tag.brick{ background:var(--brick-tint); border-color:transparent; color:var(--brick); margin-right: 5px;}

/* ==========================================================================
   Page hero (shared, non-home pages)
   ========================================================================== */
.page-hero{ padding-block:104px 80px; }
@media (max-width: 860px){
  .page-hero{ padding-block:78px 40px; }
}
.page-hero h1{ margin-top:22px; }
.page-hero .lede{ margin-top:24px; }

/* ==========================================================================
   Section spacing
   ========================================================================== */
.section{ padding-block:120px; }
.section-tight{ padding-block:78px; }
.section-alt{ background:var(--bg-alt); }
.section-ink{ background:var(--ink); color:var(--bg); }
.section-ink .quote-block .mark{ color:var(--brick-tint); }
.section-ink .quote-block blockquote{ color:var(--bg); }
.section-ink .quote-block cite{ color:rgba(242,236,221,0.65); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:50px;
  flex-wrap:wrap;
}
.section-head h2{ margin-top:14px; }

hr.rule{ border:none; border-top:1px solid var(--line); margin:0; }

/* Scrollbar polish for internal scroll panes */
.scroll-pane::-webkit-scrollbar{ width:8px; }
.scroll-pane::-webkit-scrollbar-track{ background:transparent; }
.scroll-pane::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:10px; }