/* =================================================================
   A PHOTOGRAPHER — A GOOD WEBSITE COMPANY DEMO
   Shared stylesheet for every page (home, photos, packages, about, book).
   Same tokens, type, and components across the whole site.
   ================================================================= */

/* =================================================================
   1. TOKENS — photographic palette + type
   ================================================================= */
:root{
  --ink-green:   #1C1A18;   /* primary: warm near-black ink */
  --ink-deep:    #121110;   /* footer / deepest accents / scrim */
  --moss:        #4A3F4D;   /* plum-slate — reserved decorative only */
  --slate:       #4A3F4D;   /* plum-slate — labels, rules, CTA, form */
  --slate-deep:  #4A2E44;   /* deep aubergine — Send fill, hero scrim (AA w/ light text) */
  --bark:        #2C2622;   /* warm near-black body text (never pure black) */
  --bark-soft:   #6A5D52;   /* lighter warm grey — AA-safe secondary on paper */
  --paper:       #EFEAE1;   /* alabaster gallery-wall ground */
  --paper-2:     #E5DFD4;   /* alternate section ground — a step deeper */
  --paper-lt:    #F6F3EC;   /* quietest highlight on darks */
  --stone:       #8A8079;   /* dividers, fine rules, captions */
  --stone-2:     rgba(44,38,34,.20);  /* hairline rule on paper */

  /* THE COUNTER-NOTE: a single "focus aubergine/plum" — used only for the
     in-focus confirm dot, active crop corners, and the sent stamp. */
  --focus:       #5D3A54;   /* aubergine accent */
  --focus-lt:    #A06B94;   /* brighter plum for on-dark only (AA on ink) */
  --gold-leaf:   #A98742;   /* sparing metallic frame detail only */

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 34rem;
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --nav-h: 70px;
  --rule: 1px solid var(--stone-2);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* =================================================================
   2. RESET / BASE / MOTION SAFETY
   ================================================================= */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.js [data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); will-change: opacity, transform; }
html.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js [data-reveal="2"]{ transition-delay:.07s; }
html.js [data-reveal="3"]{ transition-delay:.14s; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--bark);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.04rem;
  line-height: 1.72;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.04; text-wrap: balance; }
p{ margin: 0 0 1.25em; text-wrap: pretty; }
::selection{ background: var(--slate); color: var(--paper-lt); }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }
[id]{ scroll-margin-top: calc(var(--nav-h) + 18px); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--ink-deep); color:var(--paper-lt); font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.04em; padding:12px 18px; border-radius:10px; text-decoration:none; transition:top .2s var(--ease); }
.skip:focus{ top:12px; }

/* serif italic — pull quotes + asides */
.aside{ font-family: var(--serif); font-style: italic; color: var(--bark-soft); }

.smallcaps{
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* The recurring text CTA — a link, not a button */
.text-cta{
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--slate);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.text-cta .arr{ transition: transform .25s var(--ease); }
.text-cta:hover{ color: var(--slate-deep); border-color: var(--slate-deep); }
.text-cta:hover .arr{ transform: translateX(4px); }

/* =================================================================
   3. LAYOUT HELPERS
   ================================================================= */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section--alt{ background: var(--paper-2); }

/* mono-ish label — section eyebrow (NO numbers) */
.label{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  line-height: 1.4;          /* comfortable when it wraps on small screens */
  text-transform: uppercase;
  color: var(--slate);
  display: inline-flex;
  align-items: flex-start;   /* rule pins to the FIRST line — never floats to block-centre when wrapped */
  gap: 0.62rem;
}
/* hairline rule — dropped onto the first line's cap-height optical centre
   (em-based so it tracks the font; a plainly-centred rule reads a touch low) */
.label::before{ content:""; width: 26px; height: 1.5px; background: currentColor; display:inline-block; flex:none; margin-top: 0.46em; }
.on-dark .label{ color: var(--focus-lt); }
.section-head{ max-width: 52rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head h2{ font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--ink-green); margin-top: 1rem; letter-spacing: -0.01em; }
.section-head h2 em{ font-style: italic; color: var(--slate); }

/* hairline registration ticks — derived from the crop-frame mark (no numbers) */
.ticks{
  display:flex; align-items:center; gap: 0.6rem;
  justify-content:center;
  margin-block: clamp(2.25rem, 5vw, 3.75rem);
  color: var(--stone);
}
.ticks::before,.ticks::after{ content:""; height:1px; width: clamp(40px,18vw,150px); background: linear-gradient(90deg, transparent, var(--stone)); }
.ticks::after{ background: linear-gradient(90deg, var(--stone), transparent); }
.ticks .mk{ display:inline-flex; align-items:center; gap:0.55rem; }
.ticks .mk svg{ display:block; }

/* =================================================================
   4. CROP-FRAME WORDMARK MARK
   ================================================================= */
.mark{ flex: none; display:block; }

/* =================================================================
   5. NAV
   ================================================================= */
.nav{
  position: sticky; top: 0; z-index: 60;
  background: rgba(239,234,225,.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.scrolled{ border-bottom-color: var(--stone-2); }
.nav__inner{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-green); }
.brand .word{ display:flex; flex-direction:column; line-height:1; }
.brand .word b{ font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.005em; }
.brand .word b i{ font-style: italic; font-weight: 500; }
.brand .word small{ font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 5px; color: var(--bark-soft); }

.nav-desk{ display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); }
.nav__links{ display: flex; gap: clamp(1.1rem, 2.6vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a{
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--bark); padding: 6px 0; position: relative;
  transition: color .2s var(--ease);
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--slate); transition: width .25s var(--ease); }
.nav__links a:hover{ color: var(--slate); }
.nav__links a:hover::after, .nav__links a:focus-visible::after{ width:100%; }
.nav__links a:focus-visible{ outline:none; }
/* current page marker */
.nav__links a[aria-current="page"]{ color: var(--slate); }
.nav__links a[aria-current="page"]::after{ width:100%; }
/* header phone — tappable on tablet+desktop, next to the Book CTA */
.nav-tel{
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em;
  text-decoration: none; color: var(--bark); white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav-tel svg{ color: var(--slate); flex: none; }
.nav-tel:hover{ color: var(--slate); }
/* drop the digits earlier than the whole desk nav so the bar never crowds */
@media (max-width: 880px){ .nav-tel span{ display: none; } }
@media (max-width: 760px){ .nav-tel{ display: none; } }
.nav-cta{
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--paper-lt);
  background: var(--slate-deep); padding: 0.7rem 1.3rem; border-radius: 999px;
  display: inline-flex; align-items:center; gap:.5rem;
  transition: background-color .22s var(--ease);
}
.nav-cta .arr{ transition: transform .22s var(--ease); }
.nav-cta:hover{ background: var(--ink-green); }
.nav-cta:hover .arr{ transform: translateX(4px); }

/* hamburger */
.nav-toggle{ display:none; width:46px; height:46px; border:none; background:rgba(28,26,24,.08); border-radius:12px; cursor:pointer; align-items:center; justify-content:center; transition: background-color .25s var(--ease); }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink-green); position:relative; transition: background-color .2s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink-green); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* mobile sheet */
.mobile-menu{ position:fixed; inset:0; z-index:55; background: linear-gradient(165deg, var(--ink-green) 0%, var(--ink-deep) 100%); transform: translateY(-100%); transition: transform .45s var(--ease); visibility:hidden; display:flex; flex-direction:column; padding: 92px clamp(24px,7vw,48px) 40px; }
.mobile-menu.open{ transform: translateY(0); visibility:visible; }
.mobile-menu .m-label{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--focus-lt); margin-bottom:24px; }
.mobile-menu a.m-link{ font-family:var(--serif); font-size:clamp(2rem,9vw,2.9rem); color:var(--paper-lt); text-decoration:none; padding:13px 0; border-bottom:1px solid rgba(239,234,225,.16); display:flex; align-items:baseline; gap:14px; }
.mobile-menu a.m-link .crn{ color:var(--focus-lt); font-style:italic; font-size:.55em; opacity:.85; }
.mobile-menu a.m-link[aria-current="page"]{ color: var(--focus-lt); }
.mobile-menu .m-foot{ margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:16px; }
.mobile-menu .m-foot a.m-tel{ color:var(--focus-lt); font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.06em; text-decoration:none; }
.mobile-menu .m-foot .nav-cta{ align-self:flex-start; background: var(--focus); color: var(--paper-lt); }
.mobile-menu .m-foot .nav-cta:hover{ background: var(--focus-lt); }
body.menu-open{ overflow:hidden; }

/* =================================================================
   6. HERO
   ================================================================= */
.hero{
  position: relative; width: 100%;
  min-height: 88svh;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--ink-deep);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:112%; object-fit: cover; object-position: center 32%; will-change: transform; }
.hero__scrim{
  position: absolute; inset: 0; z-index:1;
  background:
    linear-gradient(180deg, rgba(18,17,16,.46) 0%, rgba(18,17,16,0) 26%, rgba(18,17,16,.06) 54%, rgba(18,17,16,.82) 100%),
    radial-gradient(120% 80% at 18% 96%, rgba(18,17,16,.55) 0%, rgba(18,17,16,0) 60%);
}
.grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; background-image: radial-gradient(rgba(255,255,255,.9) .5px, transparent .6px); background-size: 3px 3px; z-index:2; }
.hero__inner{ position:relative; z-index:3; width:100%; padding-bottom: clamp(3.25rem, 7vh, 6rem); padding-top: 110px; }
.hero .label{ color: var(--focus-lt); }
.hero h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 0.92; letter-spacing: -0.02em;
  color: var(--paper-lt);
  margin: 1.25rem 0 0;
  text-shadow: 0 2px 36px rgba(10,9,8,.55);
  max-width: 14ch;
}
.hero h1 .we{ display:block; font-size: 0.4em; font-weight: 400; font-style: italic; letter-spacing: 0; color: rgba(239,234,225,.82); margin-bottom: 0.5em; }

/* "FRAME THE SUBJECT" — the punch word sits inside the crop-frame mark,
   pulling focus (blur->sharp) as the frame closes in on load */
.hero h1 .shot{ position: relative; display: inline-block; line-height: 0.82; }
.hero h1 .shot__word{ display: inline-block; }
.hero h1 .shot__crop{ position: absolute; inset: -0.12em -0.16em -0.18em; pointer-events: none; }
.hero h1 .shot__crop .c{ position: absolute; width: 0.3em; height: 0.3em; }
.hero h1 .shot__crop .c::before,
.hero h1 .shot__crop .c::after{ content:""; position:absolute; background: var(--paper-lt); box-shadow: 0 1px 12px rgba(10,9,8,.5); }
.hero h1 .shot__crop .c::before{ width: 100%; height: 3px; }
.hero h1 .shot__crop .c::after{ width: 3px; height: 100%; }
.hero h1 .shot__crop .tl{ top:0; left:0; }
.hero h1 .shot__crop .tr{ top:0; right:0; } .hero h1 .shot__crop .tr::before{ right:0; } .hero h1 .shot__crop .tr::after{ right:0; }
.hero h1 .shot__crop .bl{ bottom:0; left:0; } .hero h1 .shot__crop .bl::before{ bottom:0; }
.hero h1 .shot__crop .br{ bottom:0; right:0; } .hero h1 .shot__crop .br::before{ bottom:0; right:0; } .hero h1 .shot__crop .br::after{ bottom:0; right:0; }

/* on load: word pulls focus, the frame closes in around it */
@keyframes shotFocus{ 0%{ filter: blur(16px); opacity:0; } 55%{ filter: blur(2px); opacity:1; } 100%{ filter: blur(0); opacity:1; } }
@keyframes cropClose{ 0%{ opacity:0; transform: scale(1.14); } 100%{ opacity:1; transform: scale(1); } }
html.js .hero h1 .shot__word{ animation: shotFocus .9s var(--ease-out) .45s both; }
html.js .hero h1 .shot__crop{ transform-origin: center; animation: cropClose .7s var(--ease-out) .95s both; }
@media (prefers-reduced-motion: reduce){
  html.js .hero h1 .shot__word, html.js .hero h1 .shot__crop{ animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
}
.hero .lede{ margin-top: 1.4rem; max-width: 38ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(239,234,225,.94); text-shadow: 0 1px 18px rgba(10,9,8,.5); }
.hero-cta{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 2rem; align-items:center; }
.btn-primary{
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--paper-lt);
  background: var(--focus); padding: 1rem 1.8rem; border-radius: 999px; border: 0; cursor: pointer;
  display: inline-flex; align-items:center; gap:.6rem;
  transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.btn-primary .arr{ transition: transform .22s var(--ease); }
.btn-primary:hover{ background: var(--focus-lt); }
.btn-primary:hover .arr{ transform: translateX(4px); }
.btn-primary:active{ transform: translateY(1px); }
.btn-quiet{
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--paper-lt);
  border: 1.5px solid rgba(239,234,225,.4); padding: 1rem 1.6rem; border-radius: 999px;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.btn-quiet:hover{ border-color: var(--paper-lt); background: rgba(239,234,225,.08); }
.hero-meta{ display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 2.2rem; font-family: var(--sans); font-weight:500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(239,234,225,.88); }
.hero-meta span{ display:inline-flex; align-items:center; gap: 9px; }
.hero-meta .dot{ width:7px; height:7px; border-radius:50%; background: var(--focus-lt); box-shadow: 0 0 10px var(--focus-lt); flex:none; }

/* =================================================================
   6b. INTERIOR PAGE HEAD — a quieter title band for non-home pages.
       Same ink ground + grain + crop mark, no full-bleed photo.
   ================================================================= */
.pagehead{
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--ink-green) 0%, var(--ink-deep) 100%);
  color: var(--paper-lt);
  padding-block: clamp(7rem, 14vh, 11rem) clamp(2.75rem, 6vw, 4.5rem);
}
.pagehead .grain{ opacity:.06; }
.pagehead__inner{ position: relative; z-index: 3; max-width: 56rem; }
.pagehead .label{ color: var(--focus-lt); }
.pagehead h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.98; letter-spacing: -0.015em;
  color: var(--paper-lt); margin: 1.1rem 0 0; max-width: 18ch;
}
.pagehead h1 em{ font-style: italic; color: var(--focus-lt); }
.pagehead .lede{ margin: 1.4rem 0 0; max-width: 46ch; color: rgba(239,234,225,.92); font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
.pagehead__crop{ position:absolute; right: clamp(-30px, -2vw, 0px); top: 50%; transform: translateY(-50%); z-index:2; opacity:.18; pointer-events:none; }
@media (max-width: 720px){ .pagehead__crop{ display:none; } }

/* =================================================================
   7. TONE STATEMENT
   ================================================================= */
.tone{ text-align: center; }
.tone p{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.4;
  color: var(--ink-green); max-width: 26ch; margin: 0 auto;
  text-wrap: balance;
}

/* =================================================================
   8. SECTION INTRO COPY
   ================================================================= */
.lede{
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.2vw, 1.4rem);
  line-height: 1.6; color: var(--ink-green); max-width: 46ch;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

/* =================================================================
   9. WORK GRID — framed cards with focus-pull reveal
   ================================================================= */
.projects{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem);
}
.card__frame{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2);
}
.card__frame img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.55) contrast(1.02);
  transform: scale(1.02);
  transition: filter .65s var(--ease), transform 1.1s var(--ease);
}
.card__frame::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(18,17,16,.34) 0%, rgba(18,17,16,.02) 55%); }
/* the focus-pull: develop to full colour once revealed */
.card[data-reveal].is-in .card__frame img{ filter: saturate(1) contrast(1); transform: scale(1); }
.card:hover .card__frame img{ transform: scale(1.045); }

/* hairline crop corners that draw in on reveal */
.card__corners{ position:absolute; inset:12px; z-index:2; pointer-events:none; transition: inset .5s var(--ease); }
.card__corners span{ position:absolute; width:20px; height:20px; opacity:0; transition: opacity .5s var(--ease) .12s; }
/* hover: the crop frame opens wider and the corners lock in sharp */
.card:hover .card__corners{ inset: 8px; }
.card:hover .card__corners span{ opacity: 1; }
.card__corners span::before,.card__corners span::after{ content:""; position:absolute; background: var(--paper-lt); box-shadow: 0 0 6px rgba(0,0,0,.25); }
.card__corners span::before{ width:20px; height:2px; }
.card__corners span::after{ width:2px; height:20px; }
.card__corners .tl{ top:0; left:0; } .card__corners .tr{ top:0; right:0; } .card__corners .tr::before{ right:0; } .card__corners .tr::after{ right:0; }
.card__corners .bl{ bottom:0; left:0; } .card__corners .bl::before{ bottom:0; } .card__corners .bl::after{ bottom:0; }
.card__corners .br{ bottom:0; right:0; } .card__corners .br::before{ bottom:0; right:0; } .card__corners .br::after{ bottom:0; right:0; }
.card[data-reveal].is-in .card__corners span{ opacity:.9; }
/* active "in-focus" amber dot, bottom-left of frame */
.card__focus{ position:absolute; left:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color: var(--paper-lt); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.card__focus i{ width:7px; height:7px; border-radius:50%; background: var(--focus-lt); box-shadow: 0 0 8px var(--focus-lt); flex:none; }
.card__kind{
  position:absolute; right:0; top:0; z-index:3;
  background: var(--ink-green); color: var(--paper-lt);
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 6px 11px;
}
.card__name{ font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink-green); margin: 1.1rem 0 0.1rem; line-height: 1.2; }
.card__sub{ font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--bark-soft); margin: 0 0 0.7rem; }
.card__note{ font-family: var(--sans); font-weight: 400; font-size: 0.93rem; line-height: 1.6; color: var(--bark); max-width: 42ch; border-top: var(--rule); padding-top: 0.7rem; }
.card__note .aside{ font-size: 0.97em; }

/* =================================================================
   9b. PROJECT SETS + GALLERY + LIGHTBOX (photos page)
   ================================================================= */
.project{ margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.project:last-child{ margin-bottom: 0; }
.project__head{ max-width: 52rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.project__title{ font-size: clamp(1.8rem, 4vw, 2.9rem); color: var(--ink-green); margin-top: 0.9rem; letter-spacing: -0.01em; }
.project__title em{ font-style: italic; color: var(--slate); }
.project__note{ font-family: var(--serif); font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--bark-soft); max-width: 48ch; margin: 0.9rem 0 0; }

/* masonry-ish grid: a wide cover tile + smaller frames */
.gallery{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.shot-tile{
  position: relative; display: block; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 3 / 2; background: var(--paper-2); border-radius: 2px;
}
.shot-tile--wide{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.shot-tile img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) contrast(1.02); transform: scale(1.02);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}
.project[data-reveal].is-in .shot-tile img{ filter: saturate(1) contrast(1); transform: scale(1); }
.shot-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(18,17,16,.22), rgba(18,17,16,0) 50%); opacity:0; transition: opacity .3s var(--ease); }
.shot-tile:hover img{ transform: scale(1.05); }
.shot-tile:hover::after{ opacity:1; }
.shot-tile:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }
/* tiny zoom affordance, bottom-right, only on hover/focus */
.shot-tile::before{
  content:""; position:absolute; right:10px; bottom:10px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(18,17,16,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F6F3EC' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity:0; transform: scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.shot-tile:hover::before, .shot-tile:focus-visible::before{ opacity:1; transform: scale(1); }
@media (max-width: 620px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .shot-tile--wide{ grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
}

/* lightbox */
.lb-scrim{
  position: fixed; inset: 0; z-index: 95; background: rgba(12,11,10,.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 48px);
}
.lb-scrim.open{ opacity: 1; visibility: visible; }
.lb{ position: relative; width: min(100%, 1100px); display: flex; align-items: center; justify-content: center; gap: 8px; }
.lb-figure{ margin: 0; max-width: 100%; text-align: center; }
.lb-figure img{
  max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto;
  border-radius: 3px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.lb-figure figcaption{
  margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: rgba(239,234,225,.82); text-wrap: balance;
}
.lb-close{
  position: fixed; top: 18px; right: 18px; z-index: 2; width: 46px; height: 46px;
  border-radius: 12px; border: 1px solid rgba(239,234,225,.28); background: rgba(18,17,16,.6);
  color: var(--paper-lt); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lb-close:hover{ background: rgba(18,17,16,.9); border-color: var(--focus-lt); }
.lb-nav{
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(239,234,225,.24); background: rgba(18,17,16,.5);
  color: var(--paper-lt); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lb-nav:hover{ background: rgba(18,17,16,.85); border-color: var(--focus-lt); }
.lb-close:focus-visible, .lb-nav:focus-visible, .shot-tile:focus-visible{ outline-offset: 3px; }
@media (max-width: 620px){
  .lb{ flex-direction: column; gap: 0; }
  .lb-nav{ position: fixed; bottom: 20px; z-index: 2; }
  .lb-prev{ left: 18px; } .lb-next{ right: 18px; }
  .lb-figure img{ max-height: 70vh; }
}

/* =================================================================
   10. APPROACH (prose)
   ================================================================= */
.prose{ max-width: var(--measure); }
.prose p{ margin-bottom: 1.4em; }
.prose p:first-of-type::first-letter{
  font-family: var(--serif); font-size: 3.4em; font-weight: 500; line-height: 0.78;
  float: left; padding: 0.06em 0.12em 0 0; color: var(--ink-green);
}
/* no drop cap variant — for short connective prose blocks */
.prose.no-cap p:first-of-type::first-letter{ font-size: inherit; float: none; padding: 0; line-height: inherit; }

/* =================================================================
   10b. STEP LIST — "How It Works" as numbered-free framed steps
   ================================================================= */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step{ border-top: 2px solid var(--slate); padding-top: 1.1rem; }
.step .step__crn{ color: var(--slate); display:block; margin-bottom: .6rem; }
.step h3{ font-family: var(--serif); font-size: 1.45rem; color: var(--ink-green); margin: 0 0 .5rem; }
.step p{ font-family: var(--sans); font-size: 0.97rem; line-height: 1.65; color: var(--bark); margin: 0; max-width: 34ch; }
@media (max-width: 760px){ .steps{ grid-template-columns: 1fr; } }

/* =================================================================
   11. PACKAGES — dot-leader list with deadpan flat prices
   ================================================================= */
.packages{ max-width: 52rem; }
.pkg{
  display:flex; align-items: baseline; gap: 0.7rem;
  padding-block: 0.7rem; border-bottom: 1px solid var(--stone-2);
}
.pkg:last-child{ border-bottom: 0; }
/* small group heading inside the dot-leader list — keeps the aesthetic, adds guidance */
.pkg-group{
  font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate);
  margin: 1.9rem 0 0.4rem; padding-bottom: 0; line-height: 1.4;
}
.pkg-group:first-child{ margin-top: 0; }
/* recommended row — a quiet fill + tag, no new visual language */
.pkg--pick{ background: rgba(93,58,84,.06); border-bottom-color: var(--stone-2); margin-inline: -0.9rem; padding-inline: 0.9rem; border-radius: 8px; }
.pkg__tag{
  display: inline-block; margin-left: 0.55rem; vertical-align: 1px;
  font-family: var(--sans); font-weight: 600; font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-lt); background: var(--focus);
  padding: 2px 7px; border-radius: 999px;
}
.pkg__name{ flex: 0 0 auto; font-family: var(--sans); font-weight: 500; font-size: 1.02rem; color: var(--bark); }
.pkg__dots{ flex: 1 1 auto; min-width: 14px; border-bottom: 1.5px dotted var(--stone); transform: translateY(-0.35em); }
.pkg__spec{ flex: 0 0 auto; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--bark-soft); white-space: nowrap; }
.pkg__price{ flex: 0 0 auto; font-family: var(--sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--slate); white-space: nowrap; min-width: 11ch; text-align: right; }
@media (max-width: 560px){
  .pkg{ flex-wrap: wrap; gap: 0.2rem 0.7rem; }
  .pkg__name{ flex: 1 1 100%; font-weight: 500; }
  .pkg__dots{ order: 3; }
  .pkg__spec{ order: 2; }
  .pkg__price{ order: 4; min-width: 0; }
}

/* =================================================================
   12. ABOUT (2-column) — real photographer portrait
   ================================================================= */
.about-grid{ display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about__img{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.about__img img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.about__img .card__corners span{ opacity:.85; }
.about__quote{
  margin: 2rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5;
  color: var(--ink-green); border-left: 3px solid var(--slate); padding-left: 1.25rem;
}
.about__quote cite{ display: block; margin-top: 0.7rem; font-style: normal; font-variant: small-caps; font-size: 0.85rem; letter-spacing: 0.14em; color: var(--bark-soft); }

/* =================================================================
   13. BOOK + FORM
   ================================================================= */
.book-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.form{ font-family: var(--sans); }
.field{ margin-bottom: 1.6rem; }
.field label, .field .legend{ display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.55rem; }
.field input[type="text"], .field input[type="email"], .field textarea, .field select{
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--stone);
  padding: 0.8rem 0; font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--bark);
  border-radius: 0; transition: border-color .25s var(--ease);
}
.field textarea{ resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.field select{
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A3F4D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 1.6rem;
}
.field input[type="date"]{ cursor: pointer; }
.field .opt{ font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--bark-soft); }
.check--inline{ font-size: 0.9rem; color: var(--bark-soft); }
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-bottom-color: var(--slate); }
.field input::placeholder, .field textarea::placeholder{ color: var(--stone); }
fieldset{ border:0; margin:0; padding:0; }
.checks{ display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.check{ display: flex; align-items: center; gap: 0.55rem; font-weight: 400; font-size: 0.96rem; color: var(--bark); cursor: pointer; }
.check input{ accent-color: var(--slate); width: 16px; height: 16px; }
.btn-send{
  margin-top: 0.5rem; display: inline-flex; align-items:center; gap:.6rem;
  background: var(--slate-deep); color: var(--paper-lt); border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1rem 2.2rem; cursor: pointer; transition: background-color .25s var(--ease), transform .22s var(--ease);
}
.btn-send .arr{ transition: transform .22s var(--ease); }
.btn-send:hover{ background: var(--ink-green); }
.btn-send:hover .arr{ transform: translateX(4px); }
.btn-send:active{ transform: translateY(1px); }
.form-trust{ margin-top: 1.1rem; font-size: 0.85rem; color: var(--bark-soft); display:flex; align-items:flex-start; gap:.5rem; line-height:1.6; }
.form-trust svg{ flex:none; margin-top:3px; color: var(--slate); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-bottom-color: #b94a3a; }
#formErrors:not(:empty){ position:static; width:auto; height:auto; margin:0 0 1rem; clip:auto; white-space:normal; font-size:0.88rem; color:#b94a3a; font-weight:500; }

/* =================================================================
   14. SENT DIALOG (clean, centered, focus-trapped)
   ================================================================= */
.dialog-scrim{ position: fixed; inset: 0; z-index: 90; background: rgba(18,17,16,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; display: flex; align-items: center; justify-content: center; padding: clamp(14px,4vw,28px); }
.dialog-scrim.open{ opacity: 1; visibility: visible; }
.dialog{ width: min(100%, 440px); max-height: min(90vh, 680px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper-lt); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(18,17,16,.7); border: 1px solid var(--stone-2); transform: translateY(16px) scale(.98); transition: transform .35s var(--ease-out); padding: clamp(28px,5vw,40px) clamp(24px,5vw,36px); text-align: center; }
.dialog-scrim.open .dialog{ transform: none; }
.dialog-close{ position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--stone-2); background: transparent; cursor: pointer; color: var(--bark); display: flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease); }
.dialog-close:hover{ background: rgba(44,38,34,.06); }
.dialog .stamp{ width: 76px; height: 76px; margin: 0 auto 1.4rem; }
.dialog .d-label{ font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-deep); }
.dialog h3{ font-size: 1.7rem; color: var(--ink-green); margin-top: 0.5rem; }
.dialog h3 em{ font-style: italic; color: var(--slate); }
.dialog p{ margin-top: 0.9rem; color: var(--bark-soft); font-size: 1.02rem; max-width: 32ch; margin-inline: auto; }
.dialog .recap{ margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--stone-2); font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink-green); }
.dialog .btn-send{ margin-top: 1.6rem; background: var(--slate-deep); }

/* =================================================================
   14b. TRUST — proof bar + named testimonials
   ================================================================= */
.proof-bar{
  display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1.5rem, 5vw, 3.5rem);
  align-items: baseline; margin-bottom: clamp(2.25rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem); border-bottom: var(--rule);
}
.proof-stat{ display: inline-flex; align-items: baseline; gap: 0.55rem; }
.proof-stat b{ font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--ink-green); line-height: 1; }
.proof-stat span{ font-family: var(--sans); font-size: 0.92rem; color: var(--bark-soft); max-width: 16ch; line-height: 1.35; }

.quotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.quote{ border-top: 2px solid var(--slate); padding-top: 1.1rem; }
.quote p{ font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.5; color: var(--ink-green); margin: 0 0 1rem; }
.quote .stars{ display: inline-flex; gap: 2px; color: var(--focus); margin-bottom: 0.7rem; }
.quote cite{ display: block; font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.quote cite span{ display: block; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.82rem; color: var(--bark-soft); margin-top: 3px; }
@media (max-width: 760px){ .quotes{ grid-template-columns: 1fr; gap: 1.8rem; } }

/* =================================================================
   15. FRAMING LINE (intentional-demo note)
   ================================================================= */
.framing-line{ background: var(--paper-2); border-top: var(--rule); border-bottom: var(--rule); }
.framing-line .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding-block: 22px; }
.framing-line .fl-seal{ flex:none; }
.framing-line p{ font-family: var(--sans); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.01em; line-height: 1.7; color: var(--bark-soft); flex:1; min-width: 260px; margin: 0; }
.framing-line p b{ color: var(--ink-green); font-weight: 600; }
.framing-line p a{ color: var(--slate); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* =================================================================
   15b. CROSS-PAGE CTA BAND — closes each interior page with a route
        to the next step. Same ink ground as footer.
   ================================================================= */
.cta-band{ background: var(--ink-deep); color: var(--paper-lt); text-align:center; }
.cta-band .wrap{ max-width: 46rem; }
.cta-band .label{ color: var(--focus-lt); justify-content:center; }
.cta-band h2{ font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 3rem); color: var(--paper-lt); margin: 1rem 0 0; }
.cta-band h2 em{ font-style: italic; color: var(--focus-lt); }
.cta-band p{ margin: 1.1rem auto 0; max-width: 40ch; color: rgba(239,234,225,.86); }
.cta-band .cta-row{ display:flex; flex-wrap:wrap; gap: 14px; justify-content:center; margin-top: 2rem; }

/* =================================================================
   16. FOOTER
   ================================================================= */
.footer{ background: var(--ink-deep); color: var(--paper); position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
.footer .footer-mark{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer .footer-mark b{ font-family: var(--serif); font-weight: 500; font-size: 1.6rem; color: var(--paper-lt); }
.footer .footer-mark b i{ font-style: italic; }
.footer .footer-mark small{ font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--focus-lt); }
.footer__cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); border-top: 1px solid rgba(239,234,225,.16); border-bottom: 1px solid rgba(239,234,225,.16); padding-block: clamp(2.25rem, 4vw, 3rem); }
.footer__col h4{ font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--focus-lt); margin: 0 0 1.1rem; }
.footer__col p, .footer__col li{ font-weight: 400; font-size: 0.96rem; line-height: 1.68; color: rgba(239,234,225,.86); }
.footer__col ul{ list-style: none; margin: 0; padding: 0; }
.footer__col li{ margin-bottom: 0.7rem; }
.footer__col .item{ font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--paper-lt); }
.footer__col .byline{ display: block; font-size: 0.86rem; color: rgba(239,234,225,.66); }
.footer__col a{ color: var(--paper-lt); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.footer__col a:hover{ border-color: var(--focus-lt); }
.footer .smallcaps{ color: rgba(239,234,225,.7); }
.colophon{ text-align: center; padding-block: clamp(2.25rem, 4vw, 3rem); font-size: 0.82rem; color: rgba(239,234,225,.6); letter-spacing: 0.03em; }
.colophon p{ margin: 0.3rem 0; }

/* =================================================================
   17. RESPONSIVE
   ================================================================= */
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .book-grid{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .nav-desk{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .projects{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr; gap: 2rem; }
  body{ font-size: 1rem; }
}
@media (max-width: 540px){
  .hero{ min-height: 84svh; }
  .prose p:first-of-type::first-letter{ font-size: 3em; }
}
@media (max-width: 430px){ .brand .word small{ display:none; } }
/* keep the long hero eyebrow on a single confident line on phones */
@media (max-width: 440px){
  .hero .label{ font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* =================================================================
   18. DEMO ATTRIBUTION CHIP (number-free, keeps GWC globe seal)
   ================================================================= */
.specimen{
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 14px 9px 11px; border-radius: 14px;
  background: rgba(18,17,16,.88);
  backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px);
  border: 1px solid rgba(239,234,225,.3); color: var(--paper-lt); text-decoration: none;
  box-shadow: 0 18px 40px -26px rgba(10,9,8,.7);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.specimen:hover{ transform: translateY(-2px); border-color: var(--focus-lt); }
.specimen .seal{ flex: none; }
.specimen .stxt{ display: flex; flex-direction: column; line-height: 1.25; font-family: var(--sans); }
.specimen .stxt b{ font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--focus-lt); }
.specimen .stxt small{ font-size: 10.5px; letter-spacing: 0.02em; color: rgba(239,234,225,.74); margin-top: 2px; }
@media (max-width: 540px){ .specimen{ left: 10px; bottom: 10px; padding: 8px 12px; } .specimen .stxt small{ display: none; } }
@media print{ .specimen{ display: none; } }

/* seal settle (one-time) */
@keyframes sealsettle{ 0%{ transform: rotate(-8deg) scale(.9); opacity:0; } 60%{ transform: rotate(2deg) scale(1.02); } 100%{ transform: rotate(0) scale(1); opacity:1; } }
html.js .seal-anim{ animation: sealsettle .9s var(--ease-out) .3s both; }
@media (prefers-reduced-motion: reduce){ html.js .seal-anim{ animation: none; } }