/* ==========================================================================
   JACOB CLARK — jacobclark.ca
   Weddings, elopements and engagements. Calgary, Alberta.

   Shared design system with humankindproductions.ca. Same tokens, same
   scale, same primitives, same 90-degree corners. Jacob Clark diverges
   warm: bone paper, serif display type, softer rhythm.

   Sections
   01  Tokens
   02  Reset & base
   03  Layout primitives
   04  Typography
   05  Buttons & links
   06  Header
   07  Hero
   08  Figures
   09  Swipe gallery
   10  Grid gallery
   11  Collections / pricing
   12  What it's like
   13  About
   14  Booking
   15  Footer + sister-studio link
   16  Sticky CTA (mobile)
   17  Motion
   ========================================================================== */

/* 01 — TOKENS ============================================================= */
:root{
  /* Colour — every pair below is verified 4.5:1+ against its surface */
  --ink:#1C1714;
  --ink-2:#574C42;          /* 7.48:1 on paper */
  --ink-3:#6E5340;          /* 6.33:1 on paper — the warm accent */
  --ink-3-on-ink:#AB876E;   /* 5.43:1 on ink — same 25° hue, lightened so the
                               accent survives a dark surface. --ink-3 itself
                               is only 2.52:1 there. Used by the Calendly
                               embed; keep it in step with data-booking-primary
                               in index.html. */
  --paper:#F6F2EC;
  --paper-2:#EBE3D8;
  --on-ink:#F6F2EC;         /* 15.93:1 on ink */
  --on-ink-2:#B9AFA3;       /* 8.23:1 on ink  */
  --rule:rgba(28,23,20,.16);
  --rule-2:rgba(28,23,20,.30);
  --rule-on-ink:rgba(246,242,236,.24);

  /* Type — same families as Humankind, opposite emphasis */
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",Times,serif;

  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;
  --t-lead:clamp(1.125rem,1.02rem + .45vw,1.375rem);
  --t-h3:clamp(1.25rem,1.12rem + .6vw,1.625rem);
  --t-h2:clamp(2rem,1.5rem + 2.2vw,3.5rem);
  --t-display:clamp(2.35rem,1.6rem + 3.4vw,5rem);
  --t-price:clamp(2.5rem,1.9rem + 2.6vw,4rem);

  /* Space */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --section:clamp(4rem,10vw,8rem);
  --maxw:78rem;
  --maxw-wide:92rem;
  --measure:58ch;
  --tap:44px;
  --radius:0;
}

/* 02 — RESET & BASE ======================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;overflow-x:clip;
}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--paper-2)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible{outline-color:var(--on-ink)}
::selection{background:var(--ink);color:var(--paper)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--gutter);top:-100vh;z-index:100;
  background:var(--ink);color:var(--on-ink);
  padding:var(--s3) var(--s5);font-size:var(--t-sm);letter-spacing:.04em;
}
.skip-link:focus{top:var(--s4)}

/* 03 — LAYOUT PRIMITIVES ================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:44rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--paper2{background:var(--paper-2)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* 04 — TYPOGRAPHY ========================================================= */
.eyebrow{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;line-height:1.4;
}
.eyebrow--on-ink{color:var(--on-ink-2)}

h1,.h1{
  font-family:var(--serif);font-weight:400;
  font-size:var(--t-display);line-height:1.03;letter-spacing:-.018em;
  text-wrap:balance;
}
h2,.h2{
  font-family:var(--serif);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:-.014em;
  text-wrap:balance;
}
h3,.h3{
  font-family:var(--sans);font-weight:500;
  font-size:var(--t-h3);line-height:1.25;letter-spacing:-.012em;
}
.italic{font-style:italic}
.lead{
  font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);
  max-width:36ch;text-wrap:pretty;
}
.body{max-width:var(--measure);color:var(--ink-2);text-wrap:pretty}
.body--ink{color:var(--ink)}
.body + .body{margin-top:var(--s5)}
.meta{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}

/* 05 — BUTTONS & LINKS ==================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:var(--tap);padding:var(--s3) var(--s6);
  background:var(--ink);color:var(--on-ink);
  text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius);
  font-size:var(--t-base);font-weight:500;
  transition:background .2s ease,color .2s ease;cursor:pointer;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--on-ink)}
.btn--on-ink{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn--on-ink:hover{background:transparent;color:var(--on-ink)}
.btn--wide{width:100%}

.link{
  display:inline-flex;align-items:center;gap:.45em;min-height:var(--tap);
  text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px;
  transition:border-color .2s ease;
}
.link:hover{border-bottom-color:currentColor}
.link__arrow{transition:transform .2s ease}
.link:hover .link__arrow{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}

/* 06 — HEADER ============================================================= */
.site-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5) 0;
}
.wordmark{
  font-family:var(--serif);font-size:var(--t-h3);letter-spacing:-.01em;
  text-decoration:none;line-height:1;
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.site-head__sister{
  display:none;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;
}
.site-head__sister:hover{color:var(--ink)}

/* 07 — HERO ===============================================================
   Image leads. Type follows. CTA sits low, inside the thumb zone.        */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
/* The photograph is taken out of flow and stretched over its grid area.
   If it stays in flow its intrinsic height drives the row, the hero grows
   past one screen, and the CTA drops below the fold. Absolute positioning
   makes the row exactly the space that is left — no more, no less. */
.hero__figure{
  margin:0;grid-row:2;
  position:relative;overflow:hidden;
  min-height:32svh;
}
.hero__figure picture{position:absolute;inset:0;display:block}
/* FOCAL POINT, NOT A COMPOSITION GUESS.
   The couple sit in the bottom-left corner of both frames, and the desktop
   figure is a tall box fed a landscape file, so `cover` throws away up to
   half the width. Centre-cropping ate them.

   object-position is therefore set TO the couple, not near them. Setting it
   to a focal point's own coordinates keeps that point inside the box at
   every crop ratio: the visible window is [f(1-r), f(1-r)+r] in image
   fractions, and f=p satisfies both bounds for any r. Their bounding box
   needs a little more than the centre point, so the exact figures below
   were solved against the two hero frames and then checked by brute force
   over every viewport from 320x560 to 3840x2160.
     portrait file  — couple at x 19-28%, y 74-92%  ->  24% 90%
     landscape file — couple at x 11-18%, y 76-96%  ->  11% 93% (below)
   The couple survive whole at all but the most extreme letterbox windows
   (a ~440px-tall browser, where the figure strip is shorter than they are
   and no value can save it). The old `center 70%` cut them at roughly
   three quarters of desktop sizes.

   These are measurements of the photographs, not taste. RE-MEASURE both if
   either hero image is ever replaced, or the couple will drift out again. */
.hero__figure img{width:100%;height:100%;object-fit:cover;object-position:24% 90%}
.hero__type{
  padding-block:var(--s5);
  padding-bottom:max(var(--s5),calc(env(safe-area-inset-bottom,0px) + var(--s4)));
}
.hero__h1{margin-block:var(--s3) var(--s4)}
.hero__lead{margin-bottom:var(--s5)}

/* 08 — FIGURES ============================================================ */
.figure-bleed{margin:0}
.figure-bleed img{width:100%}
.figure-cap{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--gutter) 0;font-size:var(--t-sm);color:var(--ink-3);
}
figure figcaption{font-size:var(--t-sm);color:var(--ink-3);padding-top:var(--s3)}

/* Photographer credits. Deliberately quiet — smaller than body copy, warm
   grey, no rule. They sit under the frame they belong to. --credit is the
   only line on the site smaller than --t-sm; at 13px on paper --ink-3 is
   still 6.33:1, so it clears AA comfortably despite the size. */
.credit{
  font-size:.8125rem;line-height:1.4;letter-spacing:.01em;
  color:var(--ink-3);padding-top:var(--s3);
}
/* Under a full-bleed frame the caption would otherwise start at the very
   edge of the viewport. Pull it in to the gutter so it aligns with the
   copy above and below. */
.credit--bleed{padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto}

/* 09 — SWIPE GALLERY ======================================================
   Native scroll-snap. Real momentum, no library, no lightbox, no traps.
   Slides keep their own aspect ratio and sit on a shared baseline.       */
.swipe{
  display:grid;grid-auto-flow:column;grid-auto-columns:84vw;
  gap:var(--s4);
  align-items:end;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  padding-inline:var(--gutter);
  padding-bottom:var(--s3);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.swipe::-webkit-scrollbar{display:none}
.swipe > figure{scroll-snap-align:start;margin:0}
.swipe img{width:100%;user-select:none;-webkit-user-drag:none}

/* The photographs are NOT a drag handle. Dragging an image is invisible
   affordance — there is nothing to tell you it will work, and it steals a
   plain click. The scrubber below the track is the handle instead: it is
   visible, it shows where you are, and it is the thing that moves.
   Mid-scrub the track is positioned by hand, so smooth scrolling would
   fight it. */
.swipe[data-dragging]{scroll-behavior:auto}

.swipe-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-inline:var(--gutter);margin-top:var(--s5);
}

/* THE SCRUBBER.
   Was a 1px hairline with a 3px thumb — honest as an indicator, far too fine
   to grab. Now 6px, with an invisible ±13px hit area on top and bottom, so
   the real target is 32px tall while the drawn line stays quiet. */
.swipe-progress{
  position:relative;flex:1 1 auto;
  height:6px;background:var(--rule);
  /* Horizontal gestures are ours; vertical still scrolls the page, so a
     thumb landing here by accident never traps the visitor. */
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.swipe-progress::before{content:"";position:absolute;inset:-13px 0}
.swipe-progress::after{
  content:"";position:absolute;left:0;top:0;height:100%;
  width:calc(var(--seg,.3) * 100%);
  transform:translateX(calc(var(--p,0) * (100% / var(--seg,.3) - 100%)));
  background:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .swipe-progress{cursor:grab}
  .swipe-progress[data-dragging]{cursor:grabbing}
}
.swipe-hint{font-size:var(--t-sm);color:var(--ink-3);flex:0 0 auto}
.swipe-nav{display:none;gap:var(--s2);flex:0 0 auto}
.swipe-nav button{
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule-2);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.swipe-nav button:hover:not(:disabled){background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.swipe-nav button:disabled{opacity:.35;cursor:default}

/* 10 — GRID GALLERY ======================================================= */
.grid-gallery{display:grid;gap:var(--s5)}
.grid-gallery figure{margin:0}
.grid-gallery img{width:100%}

/* 11 — COLLECTIONS / PRICING ==============================================
   Three tiers, ascending. The middle one is inverted, taller, carries a
   recommendation and the only price-difference cue on the page. That is
   where the anchor lives.                                                */
.tiers{display:grid;gap:var(--s6)}

.tier{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
  padding-top:var(--s5);
  padding-bottom:var(--s6);
}
.tier__label{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);min-height:1.4em;
}
.tier__name{font-family:var(--sans);font-size:var(--t-h3);font-weight:500;margin-bottom:var(--s3)}
.tier__price{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);
  line-height:1;letter-spacing:-.02em;margin-bottom:var(--s5);
}
.tier__list{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.tier__list li{position:relative;padding-left:1.25em;color:var(--ink-2)}
.tier__list li::before{
  content:"";position:absolute;left:0;top:.75em;width:.6em;height:1px;background:var(--rule-2);
}
.tier__cta{margin-top:auto}

/* The anchor. */
.tier--anchor{
  background:var(--ink);color:var(--on-ink);
  border-top:0;
  padding:var(--s6) var(--s5) var(--s7);
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.tier--anchor .tier__label{color:var(--on-ink);font-weight:500}
.tier--anchor .tier__price{font-size:var(--t-price)}
.tier--anchor .tier__list li{color:var(--on-ink-2)}
.tier--anchor .tier__list li::before{background:var(--rule-on-ink)}
/* Rationale paragraph. Base case is a light tier (Collection One); the
   anchor overrides the colour below. */
.tier__why{
  color:var(--ink-2);font-size:var(--t-base);
  margin-bottom:var(--s5);max-width:38ch;
}
.tier--anchor .tier__why{
  color:var(--on-ink-2);
}
.tier__delta{
  display:inline-block;
  font-size:var(--t-sm);color:var(--on-ink-2);
  border-top:1px solid var(--rule-on-ink);
  padding-top:var(--s3);margin-bottom:var(--s5);
}
.tbd{
  color:var(--ink-3);
  border-bottom:1px dashed var(--rule-2);
}
.tier--anchor .tbd{color:var(--on-ink-2);border-bottom-color:var(--rule-on-ink)}

.includes{
  border-top:1px solid var(--rule);
  margin-top:var(--s7);padding-top:var(--s6);
}
.includes__list{display:grid;gap:var(--s4);margin-top:var(--s5)}
.includes__list li{position:relative;padding-left:1.25em;color:var(--ink-2)}
.includes__list li::before{
  content:"";position:absolute;left:0;top:.78em;width:.6em;height:1px;background:var(--rule-2);
}

/* 12 — WHAT IT'S LIKE ===================================================== */
.steps{display:grid;gap:var(--s7);counter-reset:step}
.step{display:grid;gap:var(--s3);counter-increment:step}
.step__n{
  font-family:var(--serif);font-size:var(--t-h3);color:var(--ink-3);line-height:1;
}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--ink-2);max-width:46ch}

/* 13 — ABOUT ============================================================== */
.about{display:grid;gap:var(--s7)}
.about__figure{margin:0}

/* 13b — TESTIMONIALS ======================================================
   Four real quotes. All sit in the DOM; JS crossfades between them, CSS
   alone just shows the first and hides the rest via [hidden]. */
.testimonials{position:relative;margin-top:var(--s5)}
.testimonial{margin:0}
.testimonial[hidden]{display:none}
/* Once JS takes over it stacks the slides instead of relying on [hidden],
   so it can crossfade; .is-active is the only one visible at full opacity. */
.testimonials[data-active] .testimonial{
  display:block;position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease;
}
.testimonials[data-active] .testimonial.is-active{
  position:relative;opacity:1;visibility:visible;
}
@media (prefers-reduced-motion:reduce){
  .testimonials[data-active] .testimonial{transition:none}
}

/* 14 — BOOKING ============================================================ */
.booking{background:var(--ink);color:var(--on-ink)}
.booking__head{max-width:40rem;margin-bottom:var(--s7)}
.booking__head .lead{color:var(--on-ink-2)}
/* No card. The Calendly iframe is themed to --ink to match this section, so
   a background or border here would only draw an edge around something that
   is already the same colour. Everything inside is therefore on ink. */

/* EMBED HEIGHT.
   A scrollbar inside an iframe is a dead end — two nested scroll areas, and
   on a trackpad or a phone the outer one usually wins, so the bottom of the
   calendar becomes unreachable. The frame is therefore always taller than
   the page inside it. It used to be a flat 720px, which was fine on a
   desktop and cut the calendar in half on a phone.

   Calendly reflows at its own internal breakpoint, on IFRAME width, not
   viewport width: narrow, it stacks the meeting details above a full-width
   calendar and runs very tall; wide, it goes two-column and needs far less.
   The frame here is a --wrap child, so iframe width is roughly the viewport
   minus two gutters — hence the offsets in the queries below.

   These numbers only ever have to be too generous, never too tight:
   site.js replaces them with the exact height the moment Calendly posts
   one, and until then the slack is invisible, because the frame and this
   section are both --ink. */
.embed{
  background:transparent;
  --embed-h:1180px;
}
@media (min-width:600px){ .embed{--embed-h:1140px} }
@media (min-width:900px){ .embed{--embed-h:900px}  }
@media (min-width:1200px){.embed{--embed-h:820px}  }

/* display:block kills the inline-element baseline gap underneath. */
.embed iframe{
  display:block;width:100%;border:0;
  height:var(--embed-h);
}
.embed__fallback{
  display:grid;gap:var(--s5);place-content:center;justify-items:center;
  text-align:center;padding:var(--s8) var(--s5);min-height:32rem;
  color:var(--on-ink);
}
.embed__fallback p{color:var(--on-ink-2);max-width:34ch}
.booking__alt{
  margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid var(--rule-on-ink);
  display:grid;gap:var(--s4);max-width:40rem;
}
.booking__alt p{color:var(--on-ink-2)}
.booking__alt a{color:var(--on-ink)}

/* 14b — INQUIRY FORM (on-ink) ==============================================
   Second, lower-commitment door in alongside the booked call. Same field
   pattern as Humankind's form, restyled for the dark booking section this
   one lives inside. Validates in the browser (site.js), submits over fetch
   so nobody leaves the page, degrades to a native POST with JS off. */
.booking__alt .h3{color:var(--on-ink);margin-top:var(--s2)}
.form{display:grid;gap:var(--s5);margin-top:var(--s5)}
.field{display:grid;gap:var(--s2)}
.field > label{
  font-size:var(--t-sm);font-weight:500;letter-spacing:.01em;color:var(--on-ink);
}
.field__hint{font-size:var(--t-sm);color:var(--on-ink-2)}
.field input,.field select,.field textarea{
  width:100%;
  min-height:var(--tap);
  padding:var(--s3) var(--s4);
  background:transparent;
  color:var(--on-ink);
  border:1px solid var(--rule-on-ink);
  border-radius:var(--radius);
  font-size:1rem;                 /* 16px — stops iOS zoom-on-focus */
  line-height:1.5;
  transition:border-color .15s ease;
  -webkit-appearance:none;appearance:none;
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-ink-2);opacity:1}
.field textarea{min-height:7.5rem;resize:vertical}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--on-ink) 50%),
                   linear-gradient(135deg,var(--on-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:var(--s8);
}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--on-ink)}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--on-ink);border-width:2px}
.field__error{
  font-size:var(--t-sm);color:var(--on-ink);font-weight:500;
  display:none;
}
.field[data-invalid="true"] .field__error{display:block}
.form__status{font-size:var(--t-base);color:var(--on-ink-2);min-height:1.5em}
.form__status[data-state="error"]{color:var(--on-ink);font-weight:500}
.form__foot{display:grid;gap:var(--s4)}
/* Honeypot: off-screen, never visible, never reachable by tab. Real
   visitors never know it's there; bots that fill every field trip it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-done{
  border-top:1px solid var(--rule-on-ink);
  padding-top:var(--s6);margin-top:var(--s5);
}
.form-done h3{color:var(--on-ink);margin-bottom:var(--s3)}
.form-done .body{color:var(--on-ink-2)}
.form-done .link{color:var(--on-ink)}

/* 15 — FOOTER + SISTER STUDIO ============================================= */
.site-foot{
  background:var(--paper-2);color:var(--ink);
  padding-block:var(--s9) var(--s7);
}
.foot__grid{display:grid;gap:var(--s8)}
.foot__label{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);
}
.foot__contact{display:grid;gap:var(--s3);font-size:var(--t-lead)}
.foot__contact a{
  text-decoration:none;border-bottom:1px solid var(--rule);
  padding-block:var(--s2);display:inline-block;
}
.foot__contact a:hover{border-bottom-color:var(--ink)}

.sister{border:1px solid var(--rule);padding:var(--s6) var(--s5);max-width:26rem}
.sister__label{
  font-family:var(--serif);font-style:italic;font-size:var(--t-h3);
  line-height:1.15;margin-bottom:var(--s3);
}
.sister__body{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s5);max-width:30ch}
.sister__link{
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);
  font-size:var(--t-base);text-decoration:none;border-bottom:1px solid var(--rule-2);
}
.sister__link:hover{border-bottom-color:var(--ink)}

.foot__base{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--rule);
  margin-top:var(--s8);padding-top:var(--s5);
  font-size:var(--t-sm);color:var(--ink-3);
}
.foot__base a{
  text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.foot__base a:hover{border-bottom-color:var(--ink-3)}

/* 16 — STICKY CTA (MOBILE) ================================================ */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--gutter);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--rule-2);
  transform:translateY(101%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.cta-bar[data-visible="true"]{transform:translateY(0)}
.cta-bar__note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.3;max-width:14ch}
.cta-bar__link{
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);
  padding-inline:var(--s2);font-size:var(--t-base);font-weight:500;
  text-decoration:none;border-bottom:1px solid var(--ink);flex:0 0 auto;
}
body[data-cta="on"]{padding-bottom:4.5rem}

/* 17 — MOTION ============================================================= */
.reveal{opacity:0;transform:translateY(14px)}
.reveal[data-shown="true"]{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .cta-bar{transition:none}
  .swipe{scroll-behavior:auto}
}

/* 18 — SUBPAGES ============================================================
   Location pages (Banff, Canmore, destination) and the FAQ. Added Batch 3.
   Reuses every existing token, primitive and type rule above; nothing here
   overrides anything the homepage depends on. */
.page-head{padding-block:var(--s8) var(--s6)}
.page-head .eyebrow{margin-bottom:var(--s4)}
.page-head h1{margin-bottom:var(--s5)}

.back-link{
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);
  font-size:var(--t-sm);color:var(--ink-3);text-decoration:none;margin-bottom:var(--s5);
}
.back-link:hover{color:var(--ink)}

/* Venue lists (Banff / Canmore) */
.venue-list{display:grid;gap:var(--s6);margin-top:var(--s6)}
.venue{border-top:1px solid var(--rule);padding-top:var(--s4)}
.venue__name{font-family:var(--sans);font-weight:500;font-size:var(--t-h3);margin-bottom:var(--s2)}
.venue__note{color:var(--ink-2);max-width:var(--measure)}

/* FAQ — native <details>/<summary>, no JS required, keyboard and screen
   reader accessible by default. Consistent with the rest of the site's
   "everything degrades" approach. */
.faq-cat{margin-top:var(--s8)}
.faq-cat:first-child{margin-top:0}
.faq-cat > .eyebrow{margin-bottom:var(--s2)}
.faq-list{margin-top:var(--s5);border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:500;font-size:var(--t-base);
  min-height:var(--tap);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:0 0 auto;font-family:var(--serif);font-size:1.5rem;line-height:1;
  color:var(--ink-3);
}
.faq-item[open] summary::after{content:"\2212"}
.faq-item__body{padding-bottom:var(--s5);max-width:var(--measure);color:var(--ink-2)}
.faq-item__body p + p{margin-top:var(--s4)}

/* Cross-page footer navigation. Deliberately small and low-contrast (--ink-3)
   so it never competes with the primary CTA, same reasoning DESIGN-NOTES.md
   already applies to the sister-studio link. */
.subnav{
  border-top:1px solid var(--rule);
  margin-top:var(--s7);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
}
.subnav a{
  font-size:var(--t-sm);text-decoration:none;color:var(--ink-3);
  display:inline-flex;align-items:center;min-height:var(--tap);
  border-bottom:1px solid transparent;
}
.subnav a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (min-width:480px){
  .swipe{grid-auto-columns:min(74vw,26rem)}
}

@media (min-width:768px){
  .hero__lead{max-width:42ch}

  .swipe{grid-auto-columns:min(52vw,30rem);gap:var(--s5)}
  .swipe-nav{display:flex}
  .swipe-hint{display:none}

  .grid-gallery{grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5)}
  .grid-gallery figure:nth-child(1){grid-column:1 / span 7}
  .grid-gallery figure:nth-child(2){grid-column:9 / span 4;align-self:end}
  .grid-gallery figure:nth-child(3){grid-column:1 / span 4}
  .grid-gallery figure:nth-child(4){grid-column:6 / span 7;align-self:center}
  .grid-gallery figure:nth-child(5){grid-column:2 / span 4}
  .grid-gallery figure:nth-child(6){grid-column:7 / span 6;align-self:end}

  /* Three columns at this width would be 200px each and 900px tall. Keep
     them stacked and centred until there is room to do it properly. */
  .tiers{max-width:36rem;margin-inline:auto}
  .tier--anchor{margin-inline:0;padding-inline:var(--s5)}

  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s7)}

  .about{grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}

  .foot__grid{grid-template-columns:1fr 1fr}
  .sister{justify-self:end}

  .venue-list{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s7)}
}

@media (min-width:1024px){
  .site-head__sister{display:inline-block;min-height:var(--tap);line-height:var(--tap)}

  .hero{
    min-height:100svh;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  }
  .hero > .wrap:first-child{grid-column:1 / -1}
  .hero__figure{grid-column:2;grid-row:2;height:100%}
  /* The landscape file takes over from the portrait one at this width. */
  .hero__figure img{object-position:11% 93%}
  .hero__type{
    grid-column:1;grid-row:2;
    align-self:end;
    padding-block:var(--s8) var(--s9);
    padding-inline:var(--gutter);
    max-width:40rem;justify-self:end;width:100%;
  }

  .swipe{grid-auto-columns:min(34vw,32rem)}

  /* The anchor gets a wider column and breaks the top and bottom line of
     the row, so it reads as the one on the table before anyone has read
     a word of it. */
  .tiers{
    max-width:none;
    grid-template-columns:1fr 1.2fr 1fr;
    gap:var(--s5);align-items:stretch;
  }
  .tier{padding-inline:var(--s2)}
  .tier--anchor{
    padding-inline:var(--s6);
    margin-block:calc(var(--s7) * -1) calc(var(--s6) * -1);
    padding-block:var(--s7) var(--s8);
  }

  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s7) var(--s5)}

  .cta-bar{display:none}
  body[data-cta="on"]{padding-bottom:0}
}

@media (min-width:1280px){
  .grid-gallery{gap:var(--s9) var(--s6)}
  .tiers{gap:var(--s6)}
}

/* Short viewports: never let the hero trap the CTA off-screen */
@media (max-height:700px) and (max-width:1023px){
  .hero{min-height:auto}
  .hero__figure{max-height:44svh}
  .hero__type{padding-block:var(--s5)}
}

@media print{
  .cta-bar,.skip-link,.swipe-nav{display:none}
  body{background:#fff;color:#000}
}