/* ============================================================
   Framing Feathers
   Light teal-gray palette. Contrast verified against #eff2ef:
   ink 14.6:1 · body 7.2:1 · meta 4.8:1 · sage 5.0:1 · ember 4.5:1
   ============================================================ */

:root{
  --ground:#eff2ef;
  --sunk:#e4e9e5;
  --raised:#ffffff;
  --ink:#18211f;
  --body:#44534e;
  --meta:#5e6d66;
  --accent:#55702c;          /* sage — links, labels, active states */
  --ember:#a35d18;           /* warm — primary calls to action only */
  --ember-hi:#8f5014;
  --rule:#ccd6d0;
  --go:#55702c; --wait:#845a19; --stop:#8f4b4a;

  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,64px);
  --maxw:1140px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:500; margin:0; text-wrap:balance; letter-spacing:-.01em;}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.05;}
h2{font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.14;}
h3{font-size:1.25rem; line-height:1.28;}
h4{font-size:1.05rem;}
p{margin:0;}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--ink);}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px;}
strong{color:var(--ink); font-weight:600;}
ul.plain{list-style:none; margin:0; padding:0;}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ground); padding:10px 16px; z-index:100;}
.skip:focus{left:0;}

/* Read aloud by a screen reader, invisible on screen. Used on the outbound
   links to say "(opens in a new tab)" — a sighted visitor sees the tab appear,
   someone listening gets no such clue unless we say so. Not display:none,
   which would hide it from screen readers too. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.wrap.narrow{max-width:760px;}
.measure{max-width:64ch;}
.small{font-size:.9rem;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.stack{display:flex; flex-direction:column; gap:18px;}
.stack.narrow{max-width:700px;}
.eyebrow{font-family:var(--sans); font-size:.66rem; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); font-weight:600; margin:0;}
.lede{font-size:1.08rem; color:var(--meta);}
.pull{border-left:2px solid var(--accent); padding:4px 0 4px 18px;}

/* ---------- header ---------- */
.siteheader{border-bottom:1px solid var(--rule); background:var(--ground); position:sticky; top:0; z-index:40;}
.headrow{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:15px; padding-bottom:15px; flex-wrap:wrap;}
.brand{display:block; line-height:0; text-decoration:none;}
.headrow .brand img{width:auto; height:26px;}
@media (max-width:680px){ .headrow .brand img{height:22px;} }
.footgrid .brand img{height:24px; width:auto;}
.sitenav{display:flex; gap:24px;}
.sitenav a{font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--meta); text-decoration:none;}
.sitenav a:hover,.sitenav a[aria-current]{color:var(--accent);}
.navtoggle{display:none; background:transparent; border:1px solid var(--rule); color:var(--meta); font:inherit; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:8px 13px; cursor:pointer;}
@media (max-width:680px){
  .navtoggle{display:block;}
  .sitenav{display:none; width:100%; flex-direction:column; gap:0; border-top:1px solid var(--rule); margin-top:12px;}
  .sitenav.open{display:flex;}
  .sitenav a{padding:13px 0; border-bottom:1px solid var(--rule);}
}

/* ---------- hero ---------- */
.hero,.pagehead{position:relative; border-bottom:1px solid var(--rule); overflow:hidden;}
.heroimg{position:absolute; inset:0;}
/* --focus comes from the photograph's `focus:` line in data/images.js; the
   bespoke crops further down still override it, being more specific. */
.heroimg img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,center);}
.heroin{position:relative; z-index:2;}

/* HOME HERO — the photograph carries it, so the type sits ON the image in
   light ink with a scrim only where the words are. Works with any frame
   whose subject sits right of centre; swap in a new one and it still reads. */
/* Height tracks the viewport, not the text. Without this the hero collapses
   to whatever the headline needs (~450px), and on a wide screen `cover` then
   crops the photograph to a thin middle band. */
.hero{
  --hero-ink:#f6f9f6;
  min-height:clamp(460px, 62vh, 1000px);
  display:flex; align-items:center;
}
/* Bias the crop upward — birds carry their interest in the top half, so
   losing the bottom of the body reads better than losing the head. */
.hero .heroimg img{object-position:50% 32%;}
/* The scrim follows the centred content column rather than the viewport, so
   the headline stays on darkness at any width — including ultrawide, where a
   percentage-based gradient would fade out before the text does. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right,
    rgba(10,17,15,.90) 0,
    rgba(10,17,15,.82) calc(50% - 430px),
    rgba(10,17,15,.56) calc(50% - 80px),
    rgba(10,17,15,.16) calc(50% + 180px),
    rgba(10,17,15,0)   calc(50% + 430px));
}
.hero .heroin{
  padding:clamp(48px,6vw,90px) var(--gutter);
  max-width:min(var(--maxw), 100%);
  width:100%;
}
.hero .heroin > *{max-width:min(30ch, 100%);}
.hero .eyebrow{color:#c9dba6;}
.hero h1{color:var(--hero-ink); text-shadow:0 1px 24px rgba(0,0,0,.28);}
.hero .lede{color:rgba(246,249,246,.9); max-width:min(46ch,100%);}
.hero .btn.ghost{color:#dbe8c6; border-color:#dbe8c6;}
.hero .btn.ghost:hover{background:#dbe8c6; color:#18211f;}

/* On narrow screens there is no room beside the bird — show the photograph,
   then the words beneath it on the page ground. */
@media (max-width:720px){
  /* stacked, so children must fill the width — not be centred as flex items */
  .hero{flex-direction:column; align-items:stretch; min-height:0;}
  .hero .heroimg{position:relative; inset:auto; aspect-ratio:4/3;}
  /* A 4:3 box keeps only the middle ~52% of a wide banner, which cut the
     sabrewing in half. Bias the crop to where the bird is instead — the
     subject sits right of centre, same assumption the desktop scrim makes. */
  .hero .heroimg img{object-position:80% 45%;}
  .hero::after{display:none;}
  .hero .heroin{padding:30px var(--gutter) 40px;}
  .hero .heroin > *{max-width:none;}
  .hero h1{color:var(--ink); text-shadow:none;}
  .hero .eyebrow{color:var(--accent);}
  .hero .lede{color:var(--meta);}
  .hero .btn.ghost{color:var(--accent); border-color:var(--accent);}
  .hero .btn.ghost:hover{background:var(--accent); color:var(--ground);}
}

/* Inner page heads keep the pale wash — their images are decorative backdrops. */
.tourhead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(95deg,var(--ground) 22%,color-mix(in srgb,var(--ground) 82%,transparent) 58%,color-mix(in srgb,var(--ground) 38%,transparent));
}
.pagehead .wrap,.pagehead .heroin{padding-top:clamp(44px,7vw,84px); padding-bottom:clamp(32px,5vw,60px);}
.hero h1{margin:.2em 0 .34em;}
.pagehead h1{margin:.18em 0 .3em;}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.crumb{font-family:var(--mono); font-size:.72rem; color:var(--meta); margin-bottom:14px;}
.crumb a{color:var(--meta);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--ember); color:#fff; border:1px solid var(--ember);
  font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  padding:12px 22px; text-decoration:none; transition:background .18s ease, transform .18s ease;
}
.btn:hover{background:var(--ember-hi); border-color:var(--ember-hi); color:#fff; transform:translateY(-1px);}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--accent);}
.btn.ghost:hover{background:var(--accent); color:var(--ground);}
@media (prefers-reduced-motion:reduce){ .btn{transition:none;} .btn:hover{transform:none;} }

/* ---------- bands ---------- */
.band{padding:clamp(48px,7vw,84px) 0; border-bottom:1px solid var(--rule);}
.band.alt{background:var(--sunk);}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,5vw,56px); align-items:center;}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px;}

/* ---------- plates ---------- */
.frame{margin:0;}
.plate{position:relative; border:1px solid var(--rule); overflow:hidden;
  background:linear-gradient(140deg,#dfe6df,#cfdad2 55%,#c3d0c8);}
/* Default: the frame takes the photograph's own shape, so nothing is cropped.
   A ratio class opts into a fixed shape and crops to fill it — right for a
   hero or a card, wrong for a gallery of mixed portrait and landscape. */
.plate img{width:100%; height:auto; display:block;}
.r4x5{aspect-ratio:4/5;} .r3x2{aspect-ratio:3/2;} .r16x9{aspect-ratio:16/9;} .r1x1{aspect-ratio:1/1;}
.r4x5 img,.r3x2 img,.r16x9 img,.r1x1 img{height:100%; object-fit:cover; object-position:var(--focus,center);}
.speclabel{border-top:1px solid var(--rule); padding-top:10px; margin-top:10px; display:flex; flex-direction:column; gap:3px;}
.speclabel .nm{font-family:var(--serif); color:var(--ink); font-size:1.02rem; line-height:1.22;}
/* Sex, age or plumage, sitting inline after the species name. Mono and meta
   rather than serif and ink, because that is where this file already puts
   factual detail — the exif line and the credit. The shift in face is doing
   the work: the serif is the bird's NAME, the mono says which one of them
   this is. nowrap so "(immature)" never breaks off its own bracket. */
.speclabel .qual{font-family:var(--mono); font-size:.68rem; color:var(--meta);
  letter-spacing:.03em; margin-left:4px; white-space:nowrap;}
.speclabel .sci{font-style:italic; color:var(--meta); font-size:.84rem;}
.speclabel .exif{font-family:var(--mono); font-size:.7rem; color:var(--meta); font-variant-numeric:tabular-nums; display:flex; flex-wrap:wrap; gap:0 11px;}
.speclabel .cap{font-size:.95rem; color:var(--ink); line-height:1.45;}
.speclabel .credit{font-family:var(--mono); font-size:.68rem; color:var(--meta); letter-spacing:.03em;}
.speclabel.doc{border-top-color:var(--accent);}
/* MASONRY. Every frame keeps its own proportions and the columns fill
   independently, so a wide bird stays wide and a tall one stays tall.
   Multi-column rather than grid: `grid-template-rows:masonry` is still
   behind a flag in every browser, and columns has worked for fifteen years.
   The trade is reading order — it runs DOWN each column, not across the
   row. A gallery has no order to lose, so that costs nothing here.
   Column width matches the old minmax() so the count is unchanged. */
.plategrid{column-width:228px; column-gap:28px;}
.plategrid .frame{break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:28px;}

/* ---------- departure cards ---------- */
.depgrid{display:flex; flex-direction:column; gap:26px;}
.depcard{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); border:1px solid var(--rule); background:var(--raised); overflow:hidden;}
@media (max-width:740px){ .depcard{grid-template-columns:1fr;} }
.depcard .pic{display:block; position:relative; min-height:220px; background:linear-gradient(140deg,#dfe6df,#c3d0c8);}
.depcard .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus,center);}
.depcard .txt{padding:26px; display:flex; flex-direction:column; gap:13px;}
.depcard h3{font-size:1.45rem;}
.depcard h3 a{color:var(--ink); text-decoration:none;}
.depcard h3 a:hover{color:var(--accent);}
.cardtop{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0;}
.dates{font-size:.74rem; color:var(--meta);}
.facts{display:flex; flex-wrap:wrap; gap:2px 18px; font-family:var(--mono); font-size:.74rem; color:var(--meta); margin:0;}
/* The departure's route, on its card. Sans rather than mono — these are place
   names with accents, and tabular figures do nothing for them. */
.depcard .route{font-size:.8rem; line-height:1.55; color:var(--meta); margin:0;}
.depcard .route span{font-size:.62rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent); font-weight:600; margin-right:9px;}
.blurb{font-size:.94rem; line-height:1.6;}
.cardfoot{margin:auto 0 0; padding-top:8px; display:flex; gap:11px; flex-wrap:wrap;}

.badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; padding:4px 9px; border:1px solid currentColor; text-transform:uppercase;}
.badge::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor;}
.s-open{color:var(--go);} .s-planning,.s-waitlist{color:var(--wait);} .s-full{color:var(--stop);} .s-completed{color:var(--meta);}

.seats{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0;}
.seatrow{display:flex; gap:4px;}
.seat{width:11px; height:11px; border:1px solid var(--rule); background:var(--ground);}
.seat.taken{background:var(--accent); border-color:var(--accent);}
.seats .txt{font-family:var(--mono); font-size:.73rem; color:var(--meta);}

/* ---------- glance bar ---------- */
.glance{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:34px; padding:0;}
.glance>div{background:var(--ground); padding:15px 20px; flex:1 1 130px;}
.gv{font-family:var(--mono); color:var(--ink); font-size:1rem; font-variant-numeric:tabular-nums;}
.gl{font-size:.62rem; text-transform:uppercase; letter-spacing:.15em; color:var(--meta); margin-top:5px;}

/* ---------- tour sections ---------- */
.sects{padding-top:clamp(40px,6vw,68px); padding-bottom:clamp(40px,6vw,72px);}
.sect{padding-bottom:clamp(38px,5vw,58px); margin-bottom:clamp(38px,5vw,58px); border-bottom:1px solid var(--rule); scroll-margin-top:90px;}
.sect:last-child{border-bottom:0; margin-bottom:0;}
.sect>*+*{margin-top:18px;}
.sect h2{margin-bottom:4px;}
/* Narrative sections — see narrativeSection() in build.js. Tighter than a spec
   section and without a rule between them, so a long piece of prose reads as
   one argument rather than as a stack of separate boxes. Only the last one
   closes with a rule, to part it from the sections that follow. */
.sect.narr{padding-bottom:0; margin-bottom:clamp(30px,4vw,46px); border-bottom:0;}
.sect.narr.narrend{padding-bottom:clamp(38px,5vw,58px); border-bottom:1px solid var(--rule);}

.profile{border:1px solid var(--rule); background:var(--raised); padding:22px 20px 14px; overflow-x:auto;}
.profile svg{display:block; min-width:560px; width:100%; height:auto;}
.axis{font-family:var(--mono); font-size:9px; fill:var(--meta);}
.stopname{font-family:var(--serif); font-size:12.5px; fill:var(--ink);}
.stopmeta{font-family:var(--mono); font-size:8.6px; fill:var(--meta);}

/* The "Ask a question" link lands on this fieldset, and .siteheader is sticky,
   so it needs the same clearance .sect gets or the legend hides under the bar. */
#ask{scroll-margin-top:90px;}

.legs{border:1px solid var(--rule); background:var(--raised);}
.leg{display:grid; grid-template-columns:132px minmax(0,1fr); gap:0 24px; padding:22px; border-bottom:1px solid var(--rule);}
.legs .leg:last-child{border-bottom:0;}
@media (max-width:640px){ .leg{grid-template-columns:1fr; gap:10px;} }
.legmeta{display:flex; flex-direction:column; gap:3px;}
.legmeta .el{font-family:var(--mono); font-size:.78rem; color:var(--accent);}
.legmeta .elh{font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--meta);}
.legbody h3{margin-bottom:4px;}
/* .legwhere is an EYEBROW above the town name, not a caption under it. The
   region is the category and the town is the instance, so this is the order
   the two belong in, and the site already speaks this idiom (.eyebrow,
   .depcard .route span). Sized between .eyebrow's .66rem and the old caption
   so it carries more presence than a label without competing with the serif
   h3 below it. */
/* The leg's ecological region and province, under the town name. Sans rather
   than mono for the same reason .depcard .route is: these are place names with
   accents, and tabular figures do nothing for them. It replaced .lodge, which
   styled a field the location rule forbids ever filling in. */
.legbody .legwhere{font-size:.7rem; color:var(--meta); margin:0 0 5px;}
/* The region carries the weight and the province stays quiet, because the
   region is the part that implies different birds and the province is filing.
   Same device as .speclabel .qual, inverted: there the serif name is the
   subject and the mono grey says which one; here the ink is the ecology and
   the grey is the address. SAGE, on Eric's ask for more emphasis, and it is
   safe here for a reason it would not be in body copy: .legmeta .el already
   prints the elevation in sage one column to the left, so sage inside a leg
   reads as "the key fact", not as a link — and the two sage items are now
   exactly the two things this section is about, elevation and region. 5.61:1
   on the white .legs background, measured, so it clears AA.
   UPPERCASE was ruled out: .legmeta .elh already owns that treatment for the
   habitat, and reusing it would put two competing labels on one row. */
.legbody .legwhere .rg{color:var(--accent); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;}
/* A COMMA rather than the usual middot, and both halves unbreakable. Measured
   at 360px (a common Android width, narrower than the 375 preset): the longest
   line, "Talamanca highlands, San José Province", wraps to two lines there and
   will on any narrower phone, so the break has to be graceful rather than
   prevented. nowrap on each half means it can only happen between them, and a
   comma left at the end of a line reads as normal English where a dangling
   middot does not. The middot is the site's LIST separator (.depcard .route,
   the fact strips); this is a place inside a province, which takes a comma. */
.legbody .legwhere .rg,.legbody .legwhere .pv{white-space:nowrap;}
.legbody p{font-size:.94rem;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.tag{font-family:var(--mono); font-size:.66rem; color:var(--meta); border:1px solid var(--rule); padding:2px 8px;}

.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule);}
.tier{background:var(--ground); padding:22px 20px; display:flex; flex-direction:column; gap:10px;}
.tier.lead{background:var(--raised);}
.tn{font-size:.63rem; text-transform:uppercase; letter-spacing:.16em; color:var(--meta); font-weight:600;}
.tp{font-family:var(--serif); font-size:1.95rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;}
.td{font-size:.86rem; line-height:1.55;}

.chk li{padding:8px 0 8px 24px; border-bottom:1px solid var(--rule); position:relative; font-size:.92rem;}
.chk li::before{position:absolute; left:0; font-family:var(--mono);}
.chk.yes li::before{content:"+"; color:var(--accent);}
.chk.no li::before{content:"–"; color:var(--stop);}

/* One paragraph on /booking-terms/ that must not be skimmed: the deposit is
   non-refundable whatever the schedule above it says. Raised panel plus a
   heavier left rule, and the clause itself is <strong> inside it, so the
   emphasis works at both the block and the phrase level. Sage on the rule
   rather than ember: ember is primary buttons only, and this is not a
   thing to click. See the callout block type in data/site.js. */
.keyterm{background:var(--raised); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:15px 20px;}

/* ---------- results & quotes ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule);}
.stat{background:var(--raised); padding:22px 20px;}
.sv{font-family:var(--serif); font-size:2rem; color:var(--accent); line-height:1;}
.sl{font-size:.92rem; color:var(--ink); margin-top:8px;}
.sd{font-size:.8rem; color:var(--meta); margin-top:5px;}
.stats.compact .stat{padding:18px 20px;}
.stats.compact .sv{font-size:1.6rem;}
.band.proof{background:var(--sunk);}
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px;}
.quote{margin:0; border-left:2px solid var(--accent); padding:2px 0 2px 20px;}
.quote p{font-family:var(--serif); font-size:1.08rem; line-height:1.5; color:var(--ink);}
.quote cite{display:block; margin-top:9px; font-style:normal; font-family:var(--mono); font-size:.7rem; color:var(--meta); letter-spacing:.04em;}

/* ---------- archive ---------- */
.archive{border:1px solid var(--rule); background:var(--raised);}
.arow{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:18px; align-items:center; padding:16px 20px; text-decoration:none; border-bottom:1px solid var(--rule);}
.archive li:last-child .arow{border-bottom:0;}
.arow:hover{background:var(--sunk);}
.arow .yr{font-family:var(--mono); color:var(--accent); font-size:.86rem;}
.arow .ti{font-family:var(--serif); color:var(--ink); font-size:1.05rem; display:block;}
.arow .me{font-family:var(--mono); font-size:.72rem; color:var(--meta); display:block; margin-top:2px;}
.arow .go{color:var(--meta); font-size:.9rem;}
@media (max-width:600px){ .arow{grid-template-columns:56px minmax(0,1fr);} .arow .go{display:none;} }

/* ---------- notes ---------- */
/* Home page field notes, laid out like The Approach — see noteFeature() in
   build.js. `.flip` alternates which side the photograph sits on, so two
   consecutive splits don't read as the same band twice. It is a VISUAL swap
   only: the markup keeps the photo first on every note, so the stacked phone
   layout stays photo-then-text throughout. */
@media (min-width:680px){ .split.flip > :first-child{order:2;} }
.notepic{display:block; line-height:0;}
.notesband > .wrap + .wrap{margin-top:clamp(34px,5vw,60px);}
.notesband h3 a{color:var(--ink); text-decoration:none;}
.notesband h3 a:hover{color:var(--accent);}
.note .wrap{padding-top:clamp(36px,6vw,64px);}
/* The note's photograph keeps its own shape, so a portrait frame would
   otherwise run 1263px tall at full content width — taller than a laptop
   screen, and the essay would start below the fold. Cap it and centre it;
   the label stays with the picture because the cap is on the whole figure. */
.note .frame{max-width:620px; margin-inline:auto;}
.notebody{padding-bottom:clamp(44px,7vw,84px);}
.notebody p{margin-top:20px; font-size:1.04rem; line-height:1.75;}
.notebody p:first-child{margin-top:26px;}
/* Subheadings inside a note — see noteBlock() in build.js. Sized well below
   the h1 so the title still owns the page, and given more space above than
   below so each one reads as belonging to what follows it. */
.notebody h2{font-size:1.16rem; margin:40px 0 0; letter-spacing:0;}
.notebody h2 + p{margin-top:12px;}
/* A photograph placed mid-essay gets room to breathe on both sides. */
.notebody .frame{margin:34px auto;}

/* ---------- forms ---------- */
.interest{border:1px solid var(--rule); background:var(--raised); padding:26px; display:flex; flex-direction:column; gap:18px; max-width:640px;}
.formnote{font-size:.85rem; color:var(--meta); border-left:2px solid var(--wait); padding-left:14px;}
.formnote code{font-family:var(--mono); font-size:.9em; color:var(--ink);}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0;}
.formstatus{font-size:.9rem; margin:0;}
.formstatus.ok{color:var(--accent);}
.formstatus.err{color:var(--stop);}
.field{display:flex; flex-direction:column; gap:7px; border:0; padding:0; margin:0;}
.field label,.field legend{font-size:.63rem; text-transform:uppercase; letter-spacing:.15em; color:var(--meta); padding:0;}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--ground);
  border:1px solid var(--rule); padding:11px 13px; width:100%;
}
.field textarea{resize:vertical;}
.opt{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; text-transform:none; letter-spacing:0; color:var(--body); margin-right:16px;}
.opt input{accent-color:var(--accent);}
fieldset.field{display:flex; flex-direction:column; gap:8px;}
fieldset.field>div,fieldset.field .opt{margin:0;}

/* ---------- footer ---------- */
.sitefooter{border-top:1px solid var(--rule); background:var(--sunk); padding:clamp(38px,6vw,60px) 0 40px;}
.footgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:32px;}
/* `.brand` sets line-height:0 so the header logo <img> sits flush — correct
   there, wrong here, because the footer's brand is text. A zero-height box put
   the margin in the wrong place: the glyphs overflowed it and the descenders
   of "Framing Feathers" landed on the paragraph below with a real gap of zero,
   while every other footer column had 13px. Restored for the text form only,
   so an <img> version of this would still sit flush. */
.footgrid p.brand{line-height:1.25;}
.footgrid .brand{display:block; margin-bottom:12px;}
.footnote{font-size:.88rem; color:var(--meta); max-width:38ch;}
.sitefooter ul{display:flex; flex-direction:column; gap:7px; margin-top:10px;}
.sitefooter a{font-size:.9rem; text-decoration:none;}
.sitefooter a:hover{text-decoration:underline;}
.copyright{margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); font-size:.78rem; color:var(--meta);}
/* The seller-of-travel line sits UNDER the copyright, not as a second
   block: `.copyright` carries the rule and the 34px gap that separate the
   bar from the columns above, and a second one would draw both again. */
.legalnote{margin-top:9px; padding-top:0; border-top:0; max-width:70ch;}

@media print{ .siteheader,.sitefooter,.btnrow,.interest{display:none;} }