:root{
    --basalt: #1b1d1c;
    --basalt-soft: #262924;
    --bone: #e7e2d3;
    --mist: #f2efe6;
    --juniper: #5c6b54;
    --juniper-dim: #7c8873;
    --ember: #9c4b2e;
    --ember-bright: #b85a37;
    --ash: #8b887d;
    --line: rgba(27,29,28,0.14);
    --line-dark: rgba(231,226,211,0.16);
    --max: 1280px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bone);
    color:var(--basalt);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- JOURNAL PAPER TREATMENT ----------
     Layered, CSS-only (no image files needed):
     1. a fine fractal-noise grain via an inline SVG filter (paper tooth)
     2. faint horizontal ruled lines
     3. a soft vignette so pages feel like physical sheets, not flat color
  */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      repeating-linear-gradient(180deg,
        transparent 0px,
        transparent 31px,
        rgba(92,107,84,0.055) 31px,
        rgba(92,107,84,0.055) 32px),
      radial-gradient(ellipse 120% 100% at 50% 0%,
        transparent 60%,
        rgba(27,29,28,0.05) 100%);
  }
  /* Everything renders above the paper layer */
  body > *{position:relative; z-index:1;}

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

  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    margin:0;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}

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

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 64px);
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:20px clamp(20px, 5vw, 64px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--mist);
    transition:background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
  }
  header.site-nav.solid{
    background:rgba(27,29,28,0.92);
    backdrop-filter:blur(6px);
    padding-top:14px;
    padding-bottom:14px;
    box-shadow:0 1px 0 var(--line-dark);
  }
  .nav-mark{
    display:flex;
    align-items:center;
    line-height:0;
  }
  .nav-wordmark{
    display:block;
    height:52px;
    width:auto;
  }
  @media (max-width:760px){
    .nav-wordmark{height:42px;}
  }
  .nav-links{
    display:flex;
    gap:clamp(16px, 2.4vw, 34px);
    list-style:none;
    margin:0; padding:0;
    font-size:0.82rem;
  }
  .nav-links a{
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-family:'IBM Plex Mono', monospace;
    opacity:0.85;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:opacity 0.2s, border-color 0.2s;
  }
  .nav-links a:hover{opacity:1; border-color:var(--ember-bright);}
  .nav-toggle{display:none;}

  @media (max-width:760px){
    .nav-links{
      position:fixed;
      inset:0 0 0 auto;
      width:min(78vw, 320px);
      background:var(--basalt);
      flex-direction:column;
      justify-content:center;
      gap:26px;
      padding:0 36px;
      transform:translateX(100%);
      transition:transform 0.35s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{font-size:0.95rem;}
    .nav-toggle{
      display:block;
      background:none; border:none; color:var(--mist);
      font-family:'IBM Plex Mono', monospace;
      font-size:0.8rem; letter-spacing:0.08em;
      text-transform:uppercase;
      cursor:pointer;
      z-index:110;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    color:var(--mist);
    overflow:hidden;
  }
  .hero-frame{
    position:absolute; inset:0;
    background:linear-gradient(160deg, #2c3226 0%, #1b1d1c 55%, #120f0d 100%);
  }
  .hero-frame img{
    width:100%; height:100%; object-fit:cover;
    position:absolute; inset:0;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,16,14,0.15) 0%, rgba(15,16,14,0.65) 100%);
    pointer-events:none;
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding:0 clamp(20px, 5vw, 64px) clamp(40px, 6vw, 72px);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
  }
  .hero h1{
    font-size:clamp(2.6rem, 8vw, 6rem);
    line-height:0.96;
    max-width:14ch;
  }
  .hero-coords{
    font-size:0.78rem;
    text-align:right;
    opacity:0.8;
    line-height:1.6;
  }
  .hero-scroll{
    position:absolute;
    bottom:22px; left:50%;
    transform:translateX(-50%);
    z-index:2;
    font-size:0.68rem;
    color:var(--mist);
    opacity:0.7;
    text-transform:uppercase;
    letter-spacing:0.16em;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .hero-scroll .stem{
    width:1px; height:34px;
    background:var(--mist);
    opacity:0.5;
    animation:stem 2.4s ease-in-out infinite;
  }
  @keyframes stem{
    0%,100%{transform:scaleY(1); opacity:0.5;}
    50%{transform:scaleY(0.5); opacity:0.9;}
  }

  /* ---------- STATEMENT ---------- */
  .statement{
    position:relative;
    overflow:hidden;
    background:var(--basalt);
    color:var(--mist);
    padding:clamp(56px, 8vw, 96px) 0;
    text-align:center;
  }
  /* Topographic contour rings, echoing a field map — pure CSS, two
     offset ring sets at low opacity so they read as texture, not decor */
  .statement::before{
    content:"";
    position:absolute; inset:-20%;
    background:
      repeating-radial-gradient(circle at 12% 30%,
        transparent 0px, transparent 42px,
        rgba(124,136,115,0.13) 42px, rgba(124,136,115,0.13) 43px),
      repeating-radial-gradient(circle at 88% 75%,
        transparent 0px, transparent 56px,
        rgba(184,90,55,0.10) 56px, rgba(184,90,55,0.10) 57px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.8 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events:none;
  }
  .statement .wrap{position:relative; z-index:1;}
  /* Viewfinder corner brackets framing the quote */
  .statement .vf{
    position:relative;
    max-width:760px;
    margin:0 auto;
    padding:clamp(30px, 5vw, 52px) clamp(24px, 5vw, 56px);
  }
  .statement .vf::before, .statement .vf::after,
  .statement .vf .vf-b::before, .statement .vf .vf-b::after{
    content:"";
    position:absolute;
    width:26px; height:26px;
    border:1px solid rgba(184,90,55,0.75);
  }
  .statement .vf::before{top:0; left:0; border-right:none; border-bottom:none;}
  .statement .vf::after{top:0; right:0; border-left:none; border-bottom:none;}
  .statement .vf .vf-b::before{bottom:0; left:0; border-right:none; border-top:none;}
  .statement .vf .vf-b::after{bottom:0; right:0; border-left:none; border-top:none;}
  .statement .rule{
    width:48px; height:1px;
    background:var(--ember-bright);
    margin:0 auto 26px;
  }
  .statement blockquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.4rem, 3.2vw, 2.1rem);
    line-height:1.45;
    max-width:34ch;
    margin:0 auto;
  }
  .statement .exif-line{
    margin-top:26px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--juniper-dim);
  }
  .statement cite{
    display:block;
    margin-top:28px;
    font-style:normal;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    opacity:0.6;
  }

  /* ---------- CHAPTER HEADERS ---------- */
  .chapter{
    padding:clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 60px);
  }
  .chapter-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:clamp(40px, 6vw, 64px);
    border-bottom:3px double rgba(27,29,28,0.28);
    padding-bottom:28px;
  }
  .chapter-head h2{
    font-size:clamp(2.2rem, 5vw, 3.6rem);
  }
  .chapter-tag{
    font-size:0.78rem;
    text-align:right;
    color:var(--ash);
    line-height:1.7;
    max-width:34ch;
  }

  /* ---------- GALLERY / FIELD ENTRIES ---------- */
  .entry{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:clamp(24px, 4vw, 56px);
    align-items:center;
    margin-bottom:clamp(56px, 8vw, 100px);
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .entry.in{opacity:1; transform:translateY(0);}
  .entry:nth-child(even){grid-template-columns:1fr 1.5fr;}
  .entry:nth-child(even) .frame{order:2;}
  .entry:nth-child(even) .tag{order:1;}

  .frame{
    position:relative;
    aspect-ratio:4/3;
    overflow:visible;
    background:#fff;
    padding:10px 10px 12px;
    box-shadow:
      0 1px 2px rgba(27,29,28,0.18),
      0 6px 18px rgba(27,29,28,0.12);
    transform:rotate(-0.6deg);
  }
  .entry:nth-child(even) .frame{transform:rotate(0.5deg);}
  .frame::before, .frame::after{
    /* pieces of translucent tape at the top corners */
    content:"";
    position:absolute;
    top:-10px;
    width:64px;
    height:22px;
    background:rgba(240,235,214,0.65);
    border:1px solid rgba(27,29,28,0.07);
    box-shadow:0 1px 2px rgba(27,29,28,0.08);
    z-index:3;
  }
  .frame::before{left:14px; transform:rotate(-5deg);}
  .frame::after{right:14px; transform:rotate(4deg);}
  .frame-inner{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:linear-gradient(135deg, #cfc8ae 0%, #b7ae94 45%, #8f9280 100%);
  }
  .frame.wild .frame-inner{background:linear-gradient(135deg, #4a4020 0%, #2e2a18 55%, #1c1d15 100%);}
  .frame img{
    width:100%; height:100%; object-fit:cover;
    position:absolute; inset:0;
    transition:transform 0.8s ease;
  }
  .entry:hover .frame img{transform:scale(1.045);}
  .frame .fallback-label{
    position:absolute; inset:0;
    display:flex;
    align-items:flex-end;
    padding:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    color:rgba(255,255,255,0.75);
    letter-spacing:0.04em;
  }
  .frame img.loaded ~ .fallback-label{display:none;}

  .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    line-height:1.9;
    position:relative;
    padding-left:18px;
  }
  /* red margin rule, like a notebook's left margin line */
  .tag::before{
    content:"";
    position:absolute;
    left:0; top:4px; bottom:4px;
    width:1px;
    background:rgba(156,75,46,0.4);
  }
  .tag .entry-no{
    display:inline-block;
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ember);
    border:1px solid rgba(156,75,46,0.45);
    padding:3px 8px;
    margin-bottom:12px;
    transform:rotate(-1.2deg);
    background:rgba(156,75,46,0.05);
  }
  .tag .subject{
    font-family:'Fraunces', serif;
    font-size:1.6rem;
    font-style:italic;
    font-weight:500;
    margin-bottom:10px;
    color:var(--basalt);
  }
  .tag .field-row{
    display:flex;
    gap:10px;
    color:var(--ash);
  }
  .tag .field-row span:first-child{
    color:var(--juniper);
    min-width:6.2em;
    text-transform:uppercase;
    font-size:0.72rem;
    letter-spacing:0.06em;
    padding-top:2px;
  }
  .tag p.note{
    margin-top:14px;
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
    line-height:1.6;
    color:#4b4c46;
  }

  @media (max-width:720px){
    .entry, .entry:nth-child(even){grid-template-columns:1fr;}
    .entry:nth-child(even) .frame{order:0;}
    .entry:nth-child(even) .tag{order:0;}
  }

  .gallery-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    text-decoration:none;
    color:var(--ember);
    border-bottom:1px solid var(--ember);
    padding-bottom:3px;
    transition:opacity 0.2s;
  }
  .gallery-link:hover{opacity:0.7;}

  /* ---------- TRUST STRIP ---------- */
  .trust{
    background:var(--mist);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:34px 0;
  }
  .trust .wrap{
    display:flex;
    align-items:center;
    gap:clamp(20px, 4vw, 50px);
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .trust-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--ash);
    white-space:nowrap;
  }
  .trust-marks{
    display:flex;
    gap:clamp(20px, 4vw, 46px);
    flex-wrap:wrap;
  }
  .trust-marks span{
    font-family:'Fraunces', serif;
    font-size:1.05rem;
    color:var(--basalt);
    opacity:0.72;
  }

  /* ---------- ABOUT ---------- */
  .about{
    padding:clamp(80px, 10vw, 140px) 0;
  }
  .about .wrap{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(40px, 6vw, 80px);
    align-items:start;
  }
  .about-portrait{
    aspect-ratio:4/5;
    background:#fff;
    padding:10px 10px 12px;
    position:relative;
    overflow:visible;
    box-shadow:
      0 1px 2px rgba(27,29,28,0.18),
      0 6px 18px rgba(27,29,28,0.12);
    transform:rotate(-0.8deg);
  }
  .about-portrait::before{
    content:"";
    position:absolute;
    top:-10px; left:50%;
    transform:translateX(-50%) rotate(-2deg);
    width:70px; height:22px;
    background:rgba(240,235,214,0.65);
    border:1px solid rgba(27,29,28,0.07);
    box-shadow:0 1px 2px rgba(27,29,28,0.08);
    z-index:3;
  }
  .about-portrait img{
    position:absolute;
    top:10px; left:10px;
    width:calc(100% - 20px);
    height:calc(100% - 22px);
    object-fit:cover;
  }
  .about h2{font-size:clamp(2rem, 4vw, 2.8rem); margin-bottom:22px;}
  .about p{
    font-size:1.05rem;
    line-height:1.75;
    color:#3a3b35;
    max-width:56ch;
    margin:0 0 20px;
  }
  .credentials{
    margin-top:32px;
    border-top:1px solid var(--line);
    padding-top:24px;
  }
  .credentials li{
    display:flex;
    gap:16px;
    font-size:0.9rem;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .credentials li:last-child{border-bottom:none;}
  .credentials .yr{
    font-family:'IBM Plex Mono', monospace;
    color:var(--ember);
    min-width:4.4em;
  }
  .credentials ul{list-style:none; margin:0; padding:0;}

  /* ---------- PRINTS / LICENSING ---------- */
  .offer{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.8 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    background:var(--basalt);
    color:var(--mist);
    padding:clamp(80px, 10vw, 140px) 0;
  }
  .offer-head{
    max-width:46ch;
    margin-bottom:clamp(48px, 6vw, 72px);
  }
  .offer-head h2{font-size:clamp(2.2rem, 5vw, 3.2rem); color:var(--mist);}
  .offer-head p{
    color:var(--ash);
    font-size:1.05rem;
    margin-top:16px;
    line-height:1.7;
  }
  .offer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line-dark);
  }
  .offer-card{
    background:var(--basalt);
    padding:clamp(32px, 4vw, 48px);
  }
  .offer-card .mono{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--ember-bright);
  }
  .offer-card h3{
    font-size:1.6rem;
    color:var(--mist);
    margin:14px 0 14px;
  }
  .offer-card p{
    color:var(--ash);
    font-size:0.98rem;
    line-height:1.65;
    margin:0 0 26px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:none;
    border:1px solid var(--ember-bright);
    color:var(--mist);
    padding:13px 22px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
  }
  .btn:hover{background:var(--ember-bright); color:var(--basalt);}

  @media (max-width:700px){
    .offer-grid{grid-template-columns:1fr;}
  }

  /* ---------- CONTACT ---------- */
  .contact{
    padding:clamp(80px, 10vw, 140px) 0;
  }
  .contact .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 6vw, 80px);
  }
  .contact h2{font-size:clamp(2rem, 4vw, 2.8rem); margin-bottom:18px;}
  .contact p.lead{font-size:1.05rem; line-height:1.7; color:#3a3b35; max-width:42ch;}
  form{display:flex; flex-direction:column; gap:16px;}
  label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--juniper);
  }
  input, textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(27,29,28,0.35);
    padding:10px 2px;
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
    color:var(--basalt);
  }
  input:focus, textarea:focus{
    outline:none;
    border-bottom:2px solid var(--juniper);
  }
  .field{display:flex; flex-direction:column; gap:6px;}
  .contact .btn{
    align-self:flex-start;
    border-color:var(--ember);
    color:var(--basalt);
    background:none;
  }
  .contact .btn:hover{background:var(--ember); color:var(--mist);}
  .form-note{font-size:0.8rem; color:var(--ash); margin-top:-4px;}

  /* ---------- GALLERY PAGE HEADER ---------- */
  .gallery-header{
    position:relative;
    overflow:hidden;
    background:var(--basalt);
    color:var(--mist);
    padding:clamp(120px, 16vw, 180px) 0 clamp(48px, 6vw, 72px);
  }
  .gallery-header-bg{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .gallery-header-bg img{
    width:100%; height:100%;
    object-fit:cover;
    filter:brightness(0.32) saturate(0.85) blur(2px);
    transform:scale(1.04); /* hides blur edge fringing */
    opacity:0;
    transition:opacity 1.2s ease;
  }
  .gallery-header-bg img.loaded{opacity:1;}
  .gallery-header::after{
    /* keeps text legible over any backdrop + settles into the page below */
    content:"";
    position:absolute; inset:0;
    z-index:1;
    background:linear-gradient(180deg,
      rgba(15,16,14,0.55) 0%,
      rgba(15,16,14,0.25) 45%,
      rgba(15,16,14,0.75) 100%);
    pointer-events:none;
  }
  .gallery-header .wrap{position:relative; z-index:2;}
  .log-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px 0;
    margin-top:30px;
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--bone);
    opacity:0.85;
  }
  .log-stats span{white-space:nowrap;}
  .log-stats .sep{
    margin:0 14px;
    color:var(--ember-bright);
  }
  .gallery-header .eyebrow{
    display:block;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--ember-bright);
    margin-bottom:16px;
  }
  .gallery-header h1{
    font-size:clamp(2.6rem, 7vw, 4.6rem);
    color:var(--mist);
  }
  .gallery-header p{
    margin-top:18px;
    max-width:52ch;
    color:var(--ash);
    font-size:1.02rem;
    line-height:1.7;
  }

  /* ---------- GALLERY CONTROLS ---------- */
  .gallery-controls{
    background:rgba(242,239,230,0.92);
    backdrop-filter:blur(4px);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    position:sticky;
    top:0;
    z-index:40;
  }
  .gallery-controls .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .filter-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .filter-chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    background:none;
    border:1px solid var(--line);
    color:var(--ash);
    padding:8px 14px;
    cursor:pointer;
    transition:background 0.2s, color 0.2s, border-color 0.2s;
  }
  .filter-chip:hover{border-color:var(--juniper);}
  .filter-chip.active{
    background:var(--basalt);
    border-color:var(--basalt);
    color:var(--mist);
  }
  .sort-control{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .sort-control label{
    font-size:0.72rem;
    color:var(--ash);
  }
  .sort-control select{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem;
    background:var(--mist);
    border:1px solid var(--line);
    padding:8px 10px;
    color:var(--basalt);
  }

  /* ---------- GALLERY GRID ---------- */
  .gallery-grid-wrap{padding:clamp(40px, 6vw, 64px) 0 clamp(90px, 10vw, 130px);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:clamp(14px, 2vw, 22px);
  }
  .gallery-empty{
    grid-column:1/-1;
    text-align:center;
    padding:60px 0;
    color:var(--ash);
    font-size:0.85rem;
  }
  .tile{
    position:relative;
    display:block;
    width:100%;
    padding:8px 8px 10px;
    border:none;
    background:#fff;
    cursor:pointer;
    text-align:left;
    box-shadow:
      0 1px 2px rgba(27,29,28,0.16),
      0 4px 12px rgba(27,29,28,0.1);
    transform:rotate(0deg);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .tile:nth-child(3n+1){transform:rotate(-0.7deg);}
  .tile:nth-child(3n+2){transform:rotate(0.5deg);}
  .tile:nth-child(4n+3){transform:rotate(-0.3deg);}
  .tile:hover, .tile:focus-visible{
    transform:rotate(0deg) translateY(-3px);
    box-shadow:
      0 2px 4px rgba(27,29,28,0.18),
      0 10px 24px rgba(27,29,28,0.16);
    z-index:2;
  }
  .tile-frame{
    position:relative;
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    background:linear-gradient(135deg, #cfc8ae 0%, #b7ae94 45%, #8f9280 100%);
  }
  .tile-frame img{
    width:100%; height:100%; object-fit:cover;
    position:absolute; inset:0;
    transition:transform 0.5s ease;
  }
  .tile:hover .tile-frame img{transform:scale(1.05);}
  .tile-frame .fallback-label{
    position:absolute; inset:0;
    display:flex; align-items:flex-end;
    padding:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.65rem;
    color:rgba(255,255,255,0.75);
  }
  .tile-frame img.loaded ~ .fallback-label{display:none;}
  .tile-overlay{
    position:absolute; inset:8px 8px 10px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:14px;
    background:linear-gradient(180deg, rgba(15,16,14,0) 40%, rgba(15,16,14,0.82) 100%);
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .tile:hover .tile-overlay, .tile:focus-visible .tile-overlay{opacity:1;}
  .tile-subject{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:1.05rem;
    color:var(--mist);
  }
  .tile-meta{
    font-size:0.68rem;
    color:var(--bone);
    opacity:0.8;
    margin-top:4px;
  }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0;
    z-index:200;
    background:rgba(15,16,14,0.96);
    display:none;
    align-items:center;
    justify-content:center;
    padding:clamp(20px, 5vw, 60px);
  }
  .lightbox.open{display:flex;}
  .lightbox-inner{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:clamp(20px, 3vw, 44px);
    max-width:1200px;
    width:100%;
    max-height:88vh;
  }
  .lightbox-frame{
    position:relative;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    max-height:88vh;
    overflow:hidden;
  }
  .lightbox-frame img{max-width:100%; max-height:88vh; object-fit:contain; position:static;}
  .lightbox-tag{color:var(--mist); align-self:center;}
  .lightbox-tag .subject{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:1.6rem;
    margin-bottom:14px;
  }
  .lightbox-tag .field-row{
    display:flex; gap:10px;
    font-size:0.82rem;
    color:var(--ash);
    padding:6px 0;
    border-bottom:1px solid var(--line-dark);
  }
  .lightbox-tag .field-row span:first-child{
    color:var(--juniper-dim);
    min-width:6.2em;
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:0.06em;
  }
  .lightbox-tag .note{
    margin-top:16px;
    font-family:'Work Sans', sans-serif;
    font-size:0.92rem;
    line-height:1.6;
    color:var(--bone);
  }
  .lightbox-close, .lightbox-prev, .lightbox-next{
    position:absolute;
    background:none;
    border:1px solid var(--line-dark);
    color:var(--mist);
    font-family:'IBM Plex Mono', monospace;
    cursor:pointer;
    transition:background 0.2s;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,0.1);}
  .lightbox-close{top:20px; right:20px; width:40px; height:40px; font-size:1rem;}
  .lightbox-prev, .lightbox-next{
    top:50%; transform:translateY(-50%);
    width:44px; height:64px; font-size:1.4rem;
  }
  .lightbox-prev{left:20px;}
  .lightbox-next{right:20px;}

  @media (max-width:820px){
    .lightbox-inner{grid-template-columns:1fr; overflow-y:auto;}
    .lightbox-frame{max-height:50vh;}
    .lightbox-frame img{max-height:50vh;}
    .lightbox-prev, .lightbox-next{width:36px; height:52px; font-size:1.1rem;}
  }

  /* ---------- CROSSBRAND (ParkAir Vision) ---------- */
  .crossbrand{
    background:linear-gradient(180deg, #14181f 0%, #1b1d1c 100%);
    color:var(--mist);
    padding:clamp(64px, 9vw, 110px) 0;
    border-bottom:1px solid var(--line-dark);
  }
  .crossbrand-wrap{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:clamp(32px, 5vw, 72px);
    align-items:center;
  }
  .crossbrand .eyebrow{
    display:block;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:#7d93b8;
    margin-bottom:14px;
  }
  .crossbrand h2{
    font-size:clamp(2rem, 4.5vw, 3rem);
    color:var(--mist);
  }
  .crossbrand p{
    margin:18px 0 28px;
    font-size:1.02rem;
    line-height:1.7;
    color:var(--ash);
    max-width:52ch;
  }
  .crossbrand-btn{
    border-color:#7d93b8;
  }
  .crossbrand-btn:hover{
    background:#7d93b8;
    color:#14181f;
  }
  .crossbrand-panel{
    display:flex;
    flex-direction:column;
    gap:0;
    font-size:0.78rem;
    letter-spacing:0.1em;
    color:#9aa7bb;
  }
  .crossbrand-panel div{
    padding:16px 0;
    border-bottom:1px solid rgba(125,147,184,0.22);
  }
  .crossbrand-panel div:first-child{border-top:1px solid rgba(125,147,184,0.22);}
  @media (max-width:760px){
    .crossbrand-wrap{grid-template-columns:1fr;}
  }

  /* ---------- FIELD NOTES ---------- */
  .notes-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:clamp(24px, 3vw, 40px);
    padding:clamp(40px, 6vw, 64px) 0 clamp(90px, 10vw, 130px);
  }
  .note-card{
    background:#fff;
    padding:12px 12px 20px;
    box-shadow:0 1px 2px rgba(27,29,28,0.16), 0 5px 16px rgba(27,29,28,0.1);
    transform:rotate(-0.4deg);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration:none;
    color:var(--basalt);
    display:block;
  }
  .note-card:nth-child(even){transform:rotate(0.4deg);}
  .note-card:hover{
    transform:rotate(0deg) translateY(-4px);
    box-shadow:0 2px 4px rgba(27,29,28,0.18), 0 12px 28px rgba(27,29,28,0.16);
  }
  .note-card-img{
    aspect-ratio:16/10;
    overflow:hidden;
    background:linear-gradient(135deg, #cfc8ae 0%, #8f9280 100%);
    margin-bottom:16px;
  }
  .note-card-img img{width:100%; height:100%; object-fit:cover;}
  .note-card .stamp{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ember);
  }
  .note-card h3{
    font-family:'Fraunces', serif;
    font-size:1.45rem;
    font-weight:500;
    margin:8px 0 10px;
    line-height:1.25;
  }
  .note-card p{
    font-size:0.92rem;
    line-height:1.6;
    color:#4b4c46;
    margin:0;
  }
  .note-card .readmore{
    display:inline-block;
    margin-top:14px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ember);
    border-bottom:1px solid var(--ember);
    padding-bottom:2px;
  }

  /* Article page */
  .note-article{
    max-width:680px;
    margin:0 auto;
    padding:clamp(56px, 8vw, 96px) clamp(20px, 5vw, 40px) clamp(60px, 8vw, 100px);
  }
  .note-article .backlink{
    display:inline-block;
    margin-bottom:clamp(40px, 6vw, 64px);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--juniper);
    text-decoration:none;
    opacity:0.8;
    transition:opacity 0.2s;
  }
  .note-article .backlink:hover{opacity:1;}
  /* Centered editorial masthead */
  .note-masthead{
    text-align:center;
    max-width:34ch;
    margin:0 auto clamp(36px, 5vw, 52px);
  }
  .note-article .stamp{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ember);
  }
  .note-article h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(2.1rem, 4.6vw, 3.1rem);
    line-height:1.14;
    margin:18px 0 22px;
  }
  .note-masthead .byline{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem;
    letter-spacing:0.04em;
    color:var(--ash);
    margin:0;
  }
  .note-masthead .byline::before,
  .note-masthead .byline::after{
    content:"";
    width:24px; height:1px;
    background:var(--line);
  }
  /* Hero: full content-width, no tilt, quiet framing */
  .note-article .note-hero{
    margin:0 0 clamp(40px, 6vw, 60px);
  }
  .note-article .note-hero img{
    width:100%;
    display:block;
    border-radius:2px;
  }
  .note-article .note-hero figcaption{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.03em;
    color:var(--ash);
    text-align:center;
    padding-top:14px;
  }
  .note-article p{
    font-size:1.12rem;
    line-height:1.9;
    color:#33342f;
    margin:0 0 28px;
  }
  .note-article p:first-of-type::first-letter{
    font-family:'Fraunces', serif;
    font-size:3.2em;
    float:left;
    line-height:0.82;
    padding:6px 12px 0 0;
    color:var(--ember);
  }

  /* --- Behind-the-scenes "field snapshots": smaller, taped-in look ---
     Use a single .snapshot for one image, or wrap two in .snapshot-row
     to place them side by side. Each gets the journal taped-print frame. */
  .note-article .snapshot{
    background:#fff;
    padding:9px 9px 11px;
    box-shadow:0 1px 2px rgba(27,29,28,0.16), 0 5px 15px rgba(27,29,28,0.1);
    transform:rotate(-0.6deg);
    margin:8px auto 34px;
    max-width:420px;
  }
  .note-article .snapshot:nth-of-type(even){transform:rotate(0.6deg);}
  .note-article .snapshot img{width:100%; display:block;}
  .note-article .snapshot figcaption{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.02em;
    color:var(--ash);
    text-align:center;
    padding-top:10px;
  }
  .note-article .snapshot-row{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    margin:8px 0 34px;
  }
  .note-article .snapshot-row .snapshot{
    margin:0;
    flex:1 1 260px;
    max-width:340px;
  }
  /* three-up variant */
  .note-article .snapshot-row.three .snapshot{
    flex:1 1 180px;
    max-width:240px;
  }
  @media (max-width:520px){
    .note-article .snapshot-row{gap:14px;}
  }

  /* Email signup block */
  .signup{
    background:var(--basalt);
    color:var(--mist);
    padding:clamp(48px, 7vw, 80px) 0;
  }
  .signup .wrap{
    max-width:640px;
    text-align:center;
  }
  .signup h2{
    font-size:clamp(1.6rem, 3.5vw, 2.2rem);
    color:var(--mist);
  }
  .signup p{
    color:var(--ash);
    font-size:0.98rem;
    line-height:1.7;
    margin:14px auto 28px;
    max-width:44ch;
  }
  .signup form{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .signup input[type="email"]{
    flex:1 1 280px;
    max-width:340px;
    background:rgba(242,239,230,0.08);
    border:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
    padding:13px 14px;
    color:var(--mist);
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
  }
  .signup input[type="email"]::placeholder{color:var(--ash);}
  .signup input[type="email"]:focus{outline:2px solid var(--ember-bright); border-color:transparent;}
  .signup .btn{border-color:var(--ember-bright); color:var(--mist);}
  .signup .btn:hover{background:var(--ember-bright); color:var(--basalt);}
  .signup .fine{
    font-size:0.72rem;
    color:var(--ash);
    margin-top:16px;
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--basalt);
    color:var(--ash);
    padding:44px 0 32px;
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  footer .mono{font-size:0.75rem;}
  footer .social{display:flex; gap:20px;}
  footer .social a{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    text-decoration:none;
    opacity:0.75;
    border-bottom:1px solid transparent;
  }
  footer .social a:hover{opacity:1; border-color:var(--ember-bright);}