/* NISKA Wingshooting — clean, white, black type. Nothing extra. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Expanded:wght@500;600;700&display=swap');

:root {
  --ink: #111112;
  --paper: #ffffff;
  --wash: #F7F7F5;
  --line: #E3E3E0;
  --grey: #6E6E74;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Archivo', sans-serif; background: var(--paper); color: var(--ink);
  line-height: 1.65; font-size: 16.5px; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); }
::selection { background: var(--ink); color: #fff; }

h1, h2, h3, .disp {
  font-family: 'Archivo Expanded', 'Archivo', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.06;
}
h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.7rem); }
h3 { font-size: 1.02rem; letter-spacing: .12em; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

.kicker {
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--grey); font-weight: 600; margin-bottom: 16px;
}
.grey { color: var(--grey); }

.btn {
  display: inline-block; padding: 15px 34px; font-family: 'Archivo Expanded', sans-serif;
  font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; cursor: pointer; border: 0; transition: all .15s;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #333; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn:disabled { opacity: .5; cursor: wait; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; max-width: 1100px; margin: 0 auto; }
.nav img { height: 60px; width: auto; }
@media (max-width: 760px) { .nav img { height: 48px; } }
.nav ul { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav a.nl { color: var(--grey); text-decoration: none; font-size: .76rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 500; }
.nav a.nl:hover, .nav a.nl.on { color: var(--ink); }
.nav .book { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; text-decoration: none; font-size: .76rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }

/* Mobile hamburger */
.nav-burger { display: none; width: 46px; height: 42px; background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
@media (max-width: 760px) {
  .nav-burger { display: flex; }
  .nav ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.98); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); padding: 6px 24px 16px;
  }
  .nav.open ul { display: flex; }
  .nav ul li a { display: block; padding: 15px 0; font-size: .86rem; border-bottom: 1px solid var(--line); }
  .nav ul li:last-child a { border-bottom: 0; padding-bottom: 4px; }
  .nav .book { border-bottom: 1px solid var(--line); }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Hero — flock photo behind the logo, kept black & white */
.hero { position: relative; padding: 110px 0 100px; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1) contrast(1.05); }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,12,14,.42), rgba(12,12,14,.68)); }
.hero .container { position: relative; }
.hero h1 { color: #fff; }
.hero-logo { width: min(340px, 62vw); margin: 0 auto 30px; }
.hero .sub { max-width: 560px; margin: 24px auto 0; text-align: center; color: #D9D9DC; font-size: 1.05rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero .btn-ink { background: #fff; color: var(--ink); }
.hero .btn-ink:hover { background: #e8e8e6; }
.hero .btn-ghost { color: #fff; border-color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); }

/* Photo hero for inner pages */
.page-hero { position: relative; border-bottom: 1px solid var(--line); }
.page-hero img.bg { width: 100%; height: min(46vh, 420px); object-fit: cover; }
.page-hero .titles { padding: 44px 0 10px; text-align: center; }

/* State cards */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.state { background: var(--paper); text-decoration: none; color: var(--ink); display: block; transition: background .15s; }
.state:hover { background: var(--wash); }
.state img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(1); transition: filter .2s; }
.state:hover img { filter: grayscale(0); }
.state .in { padding: 26px 26px 30px; }
.state .tag { display: inline-block; font-family: 'Archivo Expanded', sans-serif; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--ink); padding: 5px 10px; margin-bottom: 14px; }
.state .tag.soft { border-color: var(--line); color: var(--grey); }
.state p { color: var(--grey); font-size: .94rem; margin-top: 10px; }
.state .go { display: inline-block; margin-top: 16px; font-family: 'Archivo Expanded', sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 860px) { .states { grid-template-columns: 1fr; } }

/* Editorial rows */
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ed-row img { border: 1px solid var(--line); width: 100%; }
@media (max-width: 860px) {
  .ed-row { grid-template-columns: 1fr; gap: 24px; }
  .ed-row > img { order: 2; }
}

/* Info list (what's included) */
.plain-list { list-style: none; margin: 20px 0; }
.plain-list li { padding: 10px 0 10px 26px; position: relative; color: var(--grey); font-size: .97rem; border-bottom: 1px solid var(--line); }
.plain-list li::before { content: '—'; position: absolute; left: 0; color: var(--ink); }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 10px; margin-top: 40px; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); }
.photo-grid img.wide { grid-column: span 2; }
@media (max-width: 760px) { .photo-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } }

/* Contact band */
.contact-band { background: var(--ink); color: #fff; text-align: center; }
.contact-band h2, .contact-band a { color: #fff; }
.contact-band .phone { font-family: 'Archivo Expanded', sans-serif; font-size: clamp(1.5rem, 5vw, 2.6rem); letter-spacing: .04em; text-decoration: none; display: inline-block; margin-top: 18px; }
.contact-band p { color: #b9b9bd; }
.contact-band .btn-ghost { color: #fff; border-color: #fff; }
.contact-band .btn-ghost:hover { background: #fff; color: var(--ink); }

/* Forms */
label { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin: 20px 0 8px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 14px 16px; background: var(--paper); border: 1px solid #C9C9C5;
  color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 1rem; border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111112' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.check-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; cursor: pointer; }
.check-row input { width: auto; margin-top: 4px; accent-color: var(--ink); }
.check-row span { font-size: .95rem; color: var(--grey); text-transform: none; letter-spacing: 0; }
.msg-ok { color: #1E7A4E; font-weight: 600; }
.msg-bad { color: #B3261E; font-weight: 600; }

/* FAQ */
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 22px 0; font-family: 'Archivo Expanded', sans-serif; font-size: .93rem; text-transform: uppercase; letter-spacing: .08em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.3rem; }
details[open] summary::after { content: '–'; }
details p { padding: 0 0 22px; color: var(--grey); max-width: 640px; }

footer { border-top: 1px solid var(--line); padding: 46px 0 32px; background: var(--wash); }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.foot-inner img { height: 52px; width: auto; }
.foot-inner a { color: var(--grey); }
.foot-note { text-align: center; color: #B9B9B5; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-top: 30px; }

/* ============================================================
   REFINEMENT PASS — 2026-08-23
   Pre-launch polish for huntniska.com.

   THE BRIEF IS UNCHANGED: "clean, white, black type. Nothing extra."
   So this adds no shadows, no gradients, no colour, no rounded corners,
   no texture. Every change below is craft inside the existing system:
   optical typography, fluid rhythm, photographic discipline, and motion
   slow enough that you notice the site feels considered rather than
   noticing the animation.

   If you're tempted to add a box-shadow here, don't. That's the whole
   point of this design.
   ============================================================ */

/* ---------- rhythm ----------
   Was a flat 80px everywhere. Fluid spacing gives the page a sense of
   scale on a large monitor and stops it feeling airy-to-the-point-of-
   empty on a phone. */
section { padding: clamp(56px, 8vw, 108px) 0; }
section.tight { padding: clamp(40px, 5vw, 68px) 0; }

/* ---------- optical typography ----------
   Archivo Expanded at 5rem needs negative tracking; the same value that
   reads well at 1rem looks loose and amateur at display size. */
h1 { letter-spacing: -.015em; }
h2 { letter-spacing: -.008em; }
@media (max-width: 620px) { h1, h2 { letter-spacing: 0; } }

/* A reading measure. Long single-column paragraphs across 1100px are the
   fastest way to make good copy feel unread. ~68 characters. */
section p:not(.kicker):not(.sub):not(.foot-note) { max-width: 68ch; }
.contact-band p, .page-hero p, section[style*="text-align:center"] p { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* The kicker already carries the brand's letterspacing. Give it a hairline
   so it reads as a label rather than as small text. */
.kicker { display: flex; align-items: center; gap: 14px; }
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.contact-band .kicker::after { background: rgba(255,255,255,.22); }
/* Centered contexts get no trailing rule — it reads lopsided against
   centered type. The attribute selector catches the inline text-align:center
   containers used on the home, friends and taxidermy pages without needing a
   class added to each one. */
.kicker.center,
[style*="text-align:center"] .kicker,
.contact-band .kicker,
.page-hero .kicker { justify-content: center; }
.kicker.center::after,
[style*="text-align:center"] .kicker::after,
.contact-band .kicker::after,
.page-hero .kicker::after { display: none; }

/* ---------- buttons ----------
   Crisp invert, no movement. `transition: all` was also animating layout
   properties it didn't need to. */
.btn { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.btn-ink:hover { background: #000; }

/* ---------- focus ----------
   The form inputs killed the default outline and replaced it with a border
   colour change, which a keyboard user can barely see and a screen-reader
   user gets nothing from. Real focus ring, in the one style this palette
   allows. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink);
}
.hero :focus-visible, .contact-band :focus-visible { outline-color: #fff; }

/* ---------- nav ----------
   A hairline that draws in, matching the underline the Book link already
   has. Colour-shift alone read as slightly dead. */
.nav a.nl { position: relative; padding-bottom: 3px; }
.nav a.nl::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink); transition: right .24s ease;
}
.nav a.nl:hover::after, .nav a.nl.on::after { right: 0; }
@media (max-width: 760px) { .nav a.nl::after { display: none; } }

/* ---------- photography ----------
   The grayscale-to-colour reveal already in the state cards is the single
   best idea in this design. Extend it to the photo grid so the whole site
   behaves the same way, and let the image move *inside* a fixed frame —
   editorial, and impossible to mistake for a card lifting off the page. */
.state, .photo-grid img, .ed-row img { overflow: hidden; }
.state img { transition: filter .35s ease, transform .7s ease; }
.state:hover img { transform: scale(1.03); }

.photo-grid img {
  filter: grayscale(1);
  transition: filter .35s ease, transform .7s ease;
}
.photo-grid img:hover { filter: grayscale(0); transform: scale(1.03); }

.ed-row img { filter: grayscale(1); transition: filter .45s ease; }
.ed-row:hover img { filter: grayscale(0); }

/* ---------- hero ----------
   A drift slow enough (24s) to register as the photograph breathing rather
   than as an animation. Paired back hard under reduced-motion. */
.hero-bg { animation: niskaDrift 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes niskaDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.09); }
}

/* Hairline scroll cue. No arrow, no bounce — just a rule that breathes. */
.hero .cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-weight: 600;
}
.hero .cue::after {
  content: ''; width: 1px; height: 34px; background: rgba(255,255,255,.5);
  animation: niskaCue 2.6s ease-in-out infinite; transform-origin: top;
}
@keyframes niskaCue {
  0%, 100% { transform: scaleY(.4); opacity: .35; }
  50%      { transform: scaleY(1);  opacity: .9; }
}
@media (max-width: 620px) { .hero .cue { display: none; } }

/* ---------- reveal ----------
   Opacity only. No lift, no slide, no stagger — a fade is the only motion
   that belongs in a design this severe. */
.rv { opacity: 0; transition: opacity .8s ease; }
.rv.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transition: none; }
  .hero-bg { animation: none; }
  .hero .cue::after { animation: none; }
  .state:hover img, .photo-grid img:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- detail ---------- */
.plain-list li { transition: color .2s ease; }
.plain-list li:hover { color: var(--ink); }

.state .go { position: relative; transition: letter-spacing .2s ease; }
.state:hover .go { letter-spacing: .26em; }

summary { transition: opacity .18s ease; }
summary:hover { opacity: .62; }

.contact-band .phone { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.contact-band .phone:hover { border-bottom-color: #fff; }

/* Tabular figures for the phone number and any pricing — stops digits
   jittering and reads as deliberate. */
.contact-band .phone, .price, td, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- mount gallery (taxidermy) ----------
   Same rules as everything else: hairline grid, grayscale until hover,
   image moves inside a fixed frame. Portrait crops because most of these
   are flying mounts shot vertically on a wall. */
.mounts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: 34px;
}
.mounts figure { margin: 0; background: var(--paper); overflow: hidden; }
.mounts img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
  filter: grayscale(1); transition: filter .35s ease, transform .7s ease;
}
.mounts figure:hover img { filter: grayscale(0); transform: scale(1.03); }
.mounts figcaption {
  padding: 14px 18px 18px;
  font-family: 'Archivo Expanded', sans-serif; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
/* The gadwall pair is landscape and has detail worth the width. */
.mounts figure.wide { grid-column: span 2; }
.mounts figure.wide img { aspect-ratio: 16 / 10; }

/* Two-up on tablets. */
@media (max-width: 900px) {
  .mounts { grid-template-columns: repeat(2, 1fr); }
  .mounts figure.wide { grid-column: span 2; }
}

/* One photo wide on phones — 760px is the site's own mobile breakpoint (the
   same one that swaps the nav to a burger), so the gallery switches at the
   same moment everything else does.

   The gadwall pair KEEPS its 16:10 ratio here. Forcing a landscape two-bird
   shot into a 4:5 portrait crop cuts both birds out of frame, which is the
   opposite of what a mount gallery is for. */
@media (max-width: 760px) {
  .mounts { grid-template-columns: 1fr; }
  .mounts figure.wide { grid-column: span 1; }
  .mounts img { aspect-ratio: 4 / 5; }
  .mounts figure.wide img { aspect-ratio: 16 / 10; }
}