/* ============================================================
   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;}
.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);}

.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;}
.legbody .lodge{font-family:var(--mono); font-size:.74rem; color:var(--meta); margin-bottom:6px;}
.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);}

/* ---------- 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 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);}

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