/* Halden Reed Photography — first-party photographer template (S115).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.

   Voice: GALLERY / EXHIBITION. Deep charcoal and warm bone with one muted clay accent, LIGHT
   headings with wide tracking (the register of an exhibition caption), minimal 4px frames and big
   plates — deliberately unlike vowbarn's romantic serif editorial, fernwild's rose serif and
   haulwell's heavy indigo caps. A photographer's site should get out of the way of the pictures.

   ⚠ This template is the one where the CSS art is MOST temporary: a photographer sells on their
   actual photographs. The panels here are honest placeholders (portrait, landscape, couple,
   aperture, film strip) and DEPLOY.md makes swapping them step one, not step three.

   Signature tool: a PACKAGE COMPARISON (packages.js) — pick the shoot and the coverage you need and
   it recommends a package, shows all three side by side and totals the extras. Client-side only. */

:root {
  --char: #26252a;
  --char-soft: #3b3941;
  --bone: #f0ece5;
  --bone-deep: #e2dbd0;
  --clay: #b56b4a;
  --clay-deep: #96543a;
  --card: #fbf9f5;
  --line: #ddd5c8;
  --ink: #26252a;
  --muted: #6d6862;
  --radius: 4px;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --assistant-accent: #26252a;
  --assistant-accent-ink: #f0ece5;
  --assistant-panel: #fbf9f5;
  --assistant-ink: #26252a;
  --assistant-muted: #6d6862;
  --assistant-soft: #e9e3d9;
  --assistant-line: #ddd5c8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--bone); }
h1, h2, h3 { font-weight: 300; line-height: 1.15; letter-spacing: 0.01em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 12; background: var(--char); color: var(--bone); padding: 0.55rem 1.1rem; border-radius: 0 0 4px 4px; text-decoration: none; font-weight: 600; transition: top 0.15s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.6rem; background: var(--bone); border-bottom: 1px solid var(--line); position: relative; }
.wordmark { font-size: 1.15rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--char); white-space: nowrap; }
.wordmark span[aria-hidden] { color: var(--clay); }
.nav-disclosure summary { list-style: none; cursor: pointer; user-select: none; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 1rem; border: 1px solid var(--char); border-radius: 2px; color: var(--char); }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--char); color: var(--bone); }
.nav-disclosure nav { position: absolute; right: 1.6rem; left: 1.6rem; top: calc(100% + 0.5rem); z-index: 9; display: flex; flex-direction: column; gap: 0.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 0.9rem; box-shadow: 0 18px 38px rgba(38, 37, 42, 0.18); }
.nav-disclosure nav a:not(.button) { text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 0.8rem; color: var(--char); }
.nav-disclosure nav a:not(.button):hover { background: var(--bone-deep); }
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav { position: static; flex-direction: row; align-items: center; gap: 0.7rem; background: none; border: 0; padding: 0; box-shadow: none; }
.nav-disclosure.nav-inline nav a { padding: 0.4rem 0.2rem; }
.header-call { display: none; }
@media (max-width: 799px) { .site-header { gap: 0.6rem; padding: 1rem 1.1rem; } .header-call { display: inline-block; margin-left: auto; } }
@media (max-width: 479px) { .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; } .wordmark { font-size: 0.95rem; letter-spacing: 0.16em; } .header-call { font-size: 0.88rem; } .nav-disclosure summary { padding: 0.42rem 0.8rem; font-size: 0.78rem; } }

/* ---------- Buttons ---------- */
.button { display: inline-block; text-decoration: none; text-align: center; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--char); color: var(--bone); border: 1px solid var(--char); border-radius: 2px; padding: 0.85rem 1.9rem; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease; }
.button:hover { background: var(--char-soft); border-color: var(--char-soft); transform: translateY(-1px); }
.button-small { padding: 0.5rem 1.05rem; font-size: 0.78rem; }
.button-outline { background: transparent; color: var(--char); border-color: var(--char); }
.button-outline:hover { background: var(--char); color: var(--bone); }
.button-clay { background: var(--clay); color: #fff; border-color: var(--clay); }
.button-clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.button-light { background: var(--bone); color: var(--char); border-color: var(--bone); }
.button-light:hover { background: #fff; border-color: #fff; }
.call-link { font-weight: 600; color: var(--clay-deep); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { background: var(--bone); padding: 3.2rem 1.6rem 2.6rem; }
.hero-inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1fr 1.15fr; gap: 3.2rem; } }
.eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--clay-deep); margin-bottom: 1.2rem; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--clay-deep); }
.hero-sub { margin-top: 1.2rem; font-size: 1.1rem; max-width: 44ch; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; }
.hero-badges li { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--char); padding-left: 1.1rem; position: relative; }
.hero-badges li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: var(--clay); }
.hero-plate { height: clamp(280px, 42vw, 440px); border-radius: var(--radius); display: block; width: 100%; object-fit: cover;}

/* ---------- Notice strip ---------- */
.notice { background: var(--char); color: var(--bone); padding: 1.15rem 1.6rem; }
.notice p { max-width: 72rem; margin: 0 auto; text-align: center; font-size: 0.94rem; letter-spacing: 0.02em; }
.notice strong { color: #e0a483; font-weight: 600; }

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 72rem; margin: 0 auto; padding: 3.2rem 1.6rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.section-intro { margin-top: 0.7rem; max-width: 54ch; color: var(--muted); }
.filter-count { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-deep); }
.strip { background: var(--bone-deep); padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end; }
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--char); }
.filter-form select { width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.8rem; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 2px; }

/* ---------- Cards (gallery plates) ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(38, 37, 42, 0.16); }
.card-body { padding: 1.1rem 1.25rem 1.35rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.1rem; font-weight: 400; letter-spacing: 0.03em; }
.card-where { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-deep); white-space: nowrap; }
.card-meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.93rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.card-tags li { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--bone-deep); border-radius: 2px; padding: 0.22rem 0.6rem; }
.card-art { height: 240px; display: block; width: 100%; object-fit: cover;}
.filter-empty { margin-top: 2rem; padding: 1.5rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (honest placeholders for real photographs) ----------
   Round things are DISCRETE radial-gradients sized in PIXELS; glows need a GRADUAL falloff; parts
   of a subject must TOUCH or they read as unrelated marks. */
.art-portrait, .art-landscape, .art-couple, .art-aperture, .art-filmstrip { background-repeat: no-repeat; background-color: #ded7cc; }

/* Studio portrait: head and shoulders against a lit backdrop with a soft vignette.
   The head is sized and placed so it OVERLAPS the shoulders — sized apart they read as a ball
   floating above a box rather than a person. */
/* Landscape: sun low over hills, water below a graded sky. */
/* Two figures at golden hour — a couple. Each head sits on its OWN body and overlaps it; one
   shared block with two heads above it reads as two balls over a box, not two people. */
/* Lens aperture: blades inside a dark barrel ring.
   ⚠ Layer ORDER is load-bearing: a conic-gradient paints its whole box, so the circular mask must
   sit ABOVE it in the stack to clip it. Listed below the conic it does nothing and the "lens"
   renders as a square — which is exactly what happened first time. The mask does double duty here,
   clipping the blades AND drawing the barrel ring in one radial. */
/* Film strip: a dark band with sprocket holes top and bottom and lighter frames between. */
/* ---------- The package comparison — this template's signature tool ---------- */
.packages { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; margin-top: 2rem; }
.packages h3 { font-size: 1.3rem; }
.packages > p { color: var(--muted); margin-top: 0.5rem; max-width: 58ch; }
.pk-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 680px) { .pk-controls { grid-template-columns: 1fr 1fr; } }
.pk-controls .field label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-controls input, .pk-controls select { width: 100%; margin-top: 0.4rem; padding: 0.72rem 0.8rem; font: inherit; color: var(--ink); background: var(--bone); border: 1px solid var(--line); border-radius: 2px; }
.pk-extras { margin-top: 1.2rem; }
.pk-extras legend { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.pk-check { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.pk-check label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; }
.pk-check input { width: auto; margin: 0; accent-color: var(--clay); }
.pk-note { margin-top: 1.4rem; font-size: 0.95rem; font-weight: 600; color: var(--char); }
.pk-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1rem; }
@media (min-width: 720px) { .pk-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pk-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem 1.35rem; background: var(--bone); }
.pk-card.is-pick { border-color: var(--clay); border-width: 2px; background: var(--card); }
.pk-card h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pk-card .pk-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--clay); border-radius: 2px; padding: 0.16rem 0.5rem; margin-bottom: 0.5rem; }
.pk-card .pk-price { font-size: 1.5rem; font-weight: 300; margin-top: 0.3rem; }
.pk-card .pk-hours { font-size: 0.86rem; color: var(--muted); margin-top: 0.15rem; }
.pk-card ul { margin-top: 0.8rem; display: grid; gap: 0.3rem; }
.pk-card li { font-size: 0.9rem; color: var(--muted); padding-left: 1rem; position: relative; }
.pk-card li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.45rem; height: 1px; background: var(--clay); }
.pk-caveat { margin-top: 1.3rem; font-size: 0.92rem; color: var(--muted); max-width: 64ch; }

/* ---------- Feature grid + bands ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.feature-grid h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.45rem; }
.feature-grid p { color: var(--muted); font-size: 0.95rem; }
.band { background: var(--char); color: var(--bone); padding: 3.6rem 1.6rem; text-align: center; }
.band h2 { color: var(--bone); }
.band p { max-width: 52ch; margin: 0.9rem auto 1.8rem; color: #b3ada4; }

/* ---------- Interior pages ---------- */
.page { max-width: 72rem; margin: 0 auto; padding: 1.6rem 1.6rem 3rem; }
.breadcrumb a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--clay-deep); }
.page-hero { padding: 1.6rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-hero p { margin-top: 0.9rem; max-width: 56ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start; }
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.label-optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; margin-top: 0.4rem; padding: 0.72rem 0.8rem; font: inherit; color: var(--ink); background: var(--bone); border: 1px solid var(--line); border-radius: 2px; }
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--clay-deep); min-height: 1.4em; }
.panel { background: var(--bone-deep); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; align-self: start; }
.panel h2 { font-size: 1.25rem; }
.steps { counter-reset: step; margin-top: 1.3rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.3rem 3rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -0.05rem; width: 2rem; height: 2rem; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: var(--bone); background: var(--char); border-radius: 2px; }
.steps h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.03em; }
.steps p { color: var(--muted); font-size: 0.94rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.93rem; max-width: 62ch; }

/* ---------- Footer ---------- */
footer { background: var(--char); color: #a49e96; padding: 2.8rem 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; }
.wordmark-footer { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); margin-bottom: 0.6rem; }
footer .call-link { color: #e0a483; }
.footer-truth { max-width: 36ch; font-size: 0.86rem; color: #79736c; align-self: end; }
.footer-powered { margin-top: 0.9rem; font-size: 0.84rem; color: #79736c; }
.footer-powered a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: #e0a483; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .button:hover, .card:hover { transform: none; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}