/* ==========================================================================
   Heritage Hall — 13833 Richmond Avenue, Houston
   Mobile-first. One webfont. No framework.
   ========================================================================== */

:root{
  --ink:      #100F0D;
  --ink-soft: #2A2824;
  --muted:    #6E6A62;
  --cream:    #F7F3EC;
  --paper:    #FFFDFA;
  --gold:     #A8813C;
  --gold-lt:  #C6A25C;
  --gold-dim: rgba(168,129,60,.30);
  --rule:     rgba(16,15,13,.13);
  --rule-dk:  rgba(255,253,250,.16);

  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 2rem);
  --gap: clamp(2.5rem, 7vw, 5.5rem);
  --max: 1220px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
[id]{ scroll-margin-top:96px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

/* ---------- type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}
/* display sizes need tighter leading than body-scale headings */
h1{ line-height:.95; }
h2{ line-height:1.0; }
h1{ font-size:clamp(3rem, 13vw, 6.5rem); }
h2{ font-size:clamp(2.1rem, 6.5vw, 3.4rem); }
h3{ font-size:clamp(1.5rem, 4vw, 2rem); }
h4{ font-size:1.25rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  display:block;
}
.eyebrow--muted{ color:var(--muted); }

.lede{
  font-size:clamp(1.05rem, 2.6vw, 1.25rem);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:34em;
}
.note{ font-size:.8125rem; line-height:1.55; color:var(--muted); }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* ---------- layout -------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

.section{ padding-block:var(--gap); }
.section--tight{ padding-block:clamp(2rem,5vw,3.5rem); }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--ink); color:var(--cream); }
.section--dark .lede{ color:rgba(247,243,236,.78); }
.section--dark .note{ color:rgba(247,243,236,.55); }
.section--dark .rule{ background:var(--rule-dk); }

.section__head{ max-width:44rem; margin-bottom:clamp(2rem,5vw,3.25rem); }

/* ---------- buttons ------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.9rem 1.6rem;
  font-family:var(--sans); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--ink); background:var(--ink); color:var(--cream);
  cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn--gold:hover{ background:transparent; color:var(--gold); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--onDark{ background:transparent; border-color:rgba(247,243,236,.45); color:var(--cream); }
.btn--onDark:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--wide{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.textlink{
  display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--gold);
  border-bottom:1px solid var(--gold-dim);
  transition:border-color .25s;
}
/* the underline should hug the text, not the 44px hit area */
.textlink{ padding-bottom:0; align-items:flex-end; padding-top:1.1rem; }
.textlink:hover{ border-color:var(--gold); }
.textlink::after{ content:"\2192"; transition:transform .25s; }
.textlink:hover::after{ transform:translateX(4px); }

/* ---------- header -------------------------------------------------------- */

.header{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.header__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  min-height:66px;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; padding-block:.6rem; min-width:0; }
.header__bar > .brand{ flex:1 1 auto; min-width:0; }
.brand__mark{ width:clamp(32px,9vw,42px); height:auto; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:clamp(.95rem,3.6vw,1.15rem); font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
}
.brand__sub{
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-top:.32rem; white-space:nowrap;
}
@media (max-width:360px){
  .brand__sub{ letter-spacing:.12em; font-size:.5rem; }
  /* icon-only toggle so the header stays on one row on very narrow phones */
  .nav-toggle__label{ display:none; }
  .nav-toggle{ min-width:44px; justify-content:flex-end; }
}

.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  min-height:44px; background:none; border:0; padding:.6rem 0 .6rem .5rem; cursor:pointer;
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.nav-toggle__bars{ display:block; width:22px; height:9px; position:relative; }
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:var(--ink);
  transition:transform .3s, top .3s;
}
.nav-toggle__bars::before{ top:0; }
.nav-toggle__bars::after{ top:8px; }
[aria-expanded="true"] .nav-toggle__bars::before{ top:4px; transform:rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after{ top:4px; transform:rotate(-45deg); }

.nav{
  display:none;
  flex:0 0 100%; width:100%;
  border-top:1px solid var(--rule);
  padding-block:.5rem 1.5rem;
}
.nav[data-open="true"]{ display:block; }
.nav__list{ list-style:none; margin:0; padding:0; }
.nav__list a{
  display:block; padding:.85rem 0;
  font-size:.8125rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--rule);
}
.nav__list a[aria-current="page"]{ color:var(--gold); }
.nav__cta{ margin-top:1.5rem; display:grid; gap:.6rem; }

@media (min-width:1000px){
  .nav-toggle{ display:none; }
  .nav{ display:flex !important; flex:0 1 auto; width:auto; align-items:center; border:0; padding:0; }
  .header__bar{ min-height:88px; }
  .nav__list{ display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2rem); }
  .nav__list a{ padding:.4rem 0; border:0; font-size:.6875rem; letter-spacing:.18em; position:relative; }
  .nav__list a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
    background:var(--gold); transition:right .3s;
  }
  .nav__list a:hover::after, .nav__list a[aria-current="page"]::after{ right:0; }
  .nav__cta{ display:flex; align-items:center; gap:1.25rem; margin:0 0 0 clamp(1.1rem,2.2vw,2rem); }
  .nav__cta .btn{ min-height:44px; padding:.65rem 1.25rem; }
  .nav__phone{
    font-size:.75rem; font-weight:600; letter-spacing:.08em;
    text-decoration:none; white-space:nowrap;
  }
  .nav__phone:hover{ color:var(--gold); }
}
@media (max-width:999px){ .nav__phone{ display:none; } }

/* ---------- hero ---------------------------------------------------------- */

.hero{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,15,13,.72) 0%, rgba(16,15,13,.5) 45%, rgba(16,15,13,.88) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-block:clamp(2.25rem,7vw,6rem); }
.hero h1{ margin:0 0 1.25rem; }
.hero .lede{ color:rgba(247,243,236,.82); }
.hero .eyebrow{ color:var(--gold-lt); }

.hero--page{ min-height:clamp(320px,52vw,460px); display:flex; align-items:flex-end; }
.hero--page .hero__media::after{
  background:linear-gradient(180deg, rgba(16,15,13,.55) 0%, rgba(16,15,13,.55) 35%, rgba(16,15,13,.9) 100%);
}
.hero--page .hero__inner{ width:100%; padding-block:clamp(2.5rem,7vw,4.5rem); }
.hero--page h1{ font-size:clamp(2.5rem,8.5vw,4.75rem); }

/* stat row */
.stats{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--rule-dk);
}
.stats li{ padding:1rem 0; }
.stats li + li{ padding-left:clamp(.75rem,3vw,2rem); border-left:1px solid var(--rule-dk); }
.stats--2{ grid-template-columns:repeat(2,1fr); }
.stats--2 li{ padding-block:1.15rem; }
.stats--2 li:nth-child(odd){ padding-left:0; border-left:0; }
.stats--2 li:nth-child(n+3){ border-top:1px solid var(--rule-dk); }
.stats__n{
  display:block; font-family:var(--serif); font-size:clamp(1.65rem,5.5vw,2.75rem);
  font-weight:300; line-height:1; color:var(--gold-lt);
}
.stats__l{
  display:block; margin-top:.45rem; text-wrap:balance;
  font-size:clamp(.5625rem,1.8vw,.6875rem); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,243,236,.62);
}

/* ---------- inquiry card -------------------------------------------------- */

.inquiry{
  background:var(--paper); color:var(--ink);
  padding:clamp(1.5rem,5vw,2.25rem);
  border-top:3px solid var(--gold);
}
.inquiry h2{ font-size:clamp(1.75rem,5vw,2.15rem); margin-bottom:.4rem; }
.inquiry .note{ margin-bottom:1.5rem; }

.field{ margin-bottom:1rem; }
.field label{
  display:block; margin-bottom:.4rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
.field input,.field select{
  width:100%; min-height:50px; padding:.75rem .9rem;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:0;
  appearance:none; transition:border-color .2s;
}
.field input:focus,.field select:focus{ outline:0; border-color:var(--gold); }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A8813C' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
  padding-right:2.5rem;
}
.field-pair{ display:grid; gap:0 1rem; }
@media (min-width:460px){ .field-pair{ grid-template-columns:1fr 1fr; } }

/* spam trap: off-screen rather than display:none, which some bots skip */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field input[data-touched]:invalid,
.field select[data-touched]:invalid{ border-color:#9A3B29; }
.field__err{ display:none; margin-top:.35rem; font-size:.75rem; color:#9A3B29; }
.field input[data-touched]:invalid ~ .field__err,
.field select[data-touched]:invalid ~ .field__err{ display:block; }

.form-status{ margin-top:1rem; font-size:.875rem; line-height:1.5; }
.form-status[data-state="ok"]{ color:#2F6B45; }
.form-status[data-state="error"]{ color:#9A3B29; }

@media (min-width:960px){
  .hero--home .hero__inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
  .hero--home .inquiry{ align-self:center; }
}

/* ---------- full-bleed film ---------------------------------------------- */

.film{ width:100%; background:var(--ink); position:relative; overflow:hidden; }
.film video, .film img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.film__cap{
  position:absolute; left:var(--pad); bottom:1rem; z-index:2;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,243,236,.75); text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ---------- cards --------------------------------------------------------- */

.grid{ display:grid; gap:clamp(1.5rem,4vw,2.5rem); }
@media (min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

.card{ display:flex; flex-direction:column; text-decoration:none; }
.card__media{ position:relative; overflow:hidden; background:var(--cream); aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
a.card:hover .card__media img{ transform:scale(1.04); }
.card__cap{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--paper); color:var(--ink);
  padding:.45rem .8rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
}
.card__body{ padding-top:1.15rem; }
.card__body h3{ margin-bottom:.5rem; }
.card__body p{ color:var(--ink-soft); font-size:.9375rem; }
.card .textlink{ margin-top:1rem; }

.taglist{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.taglist li{
  font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--rule); padding:.3rem .6rem;
}
.section--dark .taglist li{ color:rgba(247,243,236,.7); border-color:var(--rule-dk); }

/* ---------- alternating space rows --------------------------------------- */

.space{ padding-block:var(--gap); border-top:1px solid var(--rule); }
.space:first-of-type{ border-top:0; }
.space__grid{ display:grid; gap:clamp(1.75rem,5vw,3.5rem); align-items:center; }
@media (min-width:900px){
  .space__grid{ grid-template-columns:1.05fr .95fr; }
  .space:nth-of-type(even) .space__media{ order:2; }
}
.space__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.space__cap{
  display:flex; align-items:baseline; gap:.75rem; margin-bottom:1.1rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--rule);
}
.space__n{ font-family:var(--serif); font-size:clamp(2.75rem,9vw,4rem); font-weight:300; line-height:.9; color:var(--gold); }
.space__u{ font-size:.6875rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }
.space__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.5rem; }
.space__thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; cursor:zoom-in; }

.speclist{ list-style:none; margin:1.4rem 0 0; padding:0; }
.speclist li{
  display:flex; gap:1rem; padding:.7rem 0; border-top:1px solid var(--rule);
  font-size:.9375rem;
}
.speclist dt,.speclist b{
  flex:0 0 8.5rem; font-size:.6875rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-top:.2rem;
}

/* ---------- gallery ------------------------------------------------------- */

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filters button{
  background:none; border:1px solid var(--rule); color:var(--muted);
  min-height:44px; padding:.6rem 1rem; cursor:pointer;
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  transition:color .2s, border-color .2s, background .2s;
}
.filters button:hover{ color:var(--ink); border-color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.masonry{ columns:2 160px; column-gap:.75rem; }
@media (min-width:900px){ .masonry{ columns:3 260px; column-gap:1rem; } }
.masonry figure{ margin:0 0 .75rem; break-inside:avoid; }
@media (min-width:900px){ .masonry figure{ margin-bottom:1rem; } }
.masonry img{ width:100%; cursor:zoom-in; background:var(--cream); }
.masonry figure[hidden]{ display:none; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(10,9,8,.94); padding:1rem;
  align-items:center; justify-content:center;
}
.lightbox[data-open="true"]{ display:flex; }
.lightbox img{ max-width:100%; max-height:82vh; object-fit:contain; }
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:2.6rem; text-align:center;
  color:rgba(247,243,236,.72); font-size:.8125rem; padding-inline:4rem;
}
.lightbox__count{
  position:absolute; left:0; right:0; bottom:1.1rem; text-align:center;
  color:rgba(247,243,236,.42); font-size:.6875rem; letter-spacing:.18em;
}
.lightbox img{ touch-action:pan-y; user-select:none; -webkit-user-drag:none; }
.lightbox__btn{
  position:absolute; background:rgba(16,15,13,.45); border:0; cursor:pointer;
  color:var(--cream); font-size:1.75rem; line-height:1;
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  transition:background .2s;
}
.lightbox__btn:hover{ background:rgba(16,15,13,.8); }
.lightbox__btn:hover{ color:var(--gold-lt); }
.lb-close{ top:.5rem; right:.5rem; }
.lb-prev{ left:.25rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:.25rem; top:50%; transform:translateY(-50%); }

/* ---------- faq ----------------------------------------------------------- */

.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.15rem,3.2vw,1.4rem); font-weight:400;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__a{ padding:0 0 1.5rem; max-width:52em; color:var(--ink-soft); font-size:.9375rem; }

.todo{
  display:inline-block; margin-left:.4rem; padding:.15rem .5rem;
  background:#FDF3D8; border:1px solid #E3C46A; color:#7A5C10;
  font-family:var(--sans); font-size:.625rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; vertical-align:middle;
}

/* ---------- tour booking -------------------------------------------------- */

#cal-embed{ width:100%; min-height:640px; overflow:hidden; background:var(--paper); }
#cal-embed iframe{ width:100% !important; border:0; }

.tour-steps{ list-style:none; margin:2rem 0 0; padding:0; counter-reset:s; }
.tour-steps li{
  position:relative; padding:.85rem 0 .85rem 3rem; border-top:1px solid var(--rule);
  font-size:.9375rem; counter-increment:s;
}
.tour-steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.9rem;
  font-family:var(--serif); font-size:1.15rem; color:var(--gold);
}

/* ---------- map / location ------------------------------------------------ */

.map{ border:0; width:100%; height:clamp(280px,45vw,420px); filter:grayscale(1) contrast(1.05); }
.map-wrap{ background:var(--cream); }

.directions{ list-style:none; margin:0; padding:0; }
.directions li{ padding:.9rem 0; border-top:1px solid var(--rule); font-size:.9375rem; }
.directions b{
  display:block; font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.25rem;
}
.section--dark .directions li{ border-color:var(--rule-dk); }

/* ---------- pull quote ---------------------------------------------------- */

.pull{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.75rem,5.5vw,3rem); line-height:1.2;
  max-width:20em; margin:0;
}

/* ---------- footer -------------------------------------------------------- */

.footer{ background:var(--ink); color:rgba(247,243,236,.72); padding-block:clamp(3rem,7vw,4.5rem) 2rem; }
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--gold-lt); }
.footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer h2{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin-bottom:1.1rem;
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.6rem; font-size:.9375rem; }
.footer .brand__name{ color:var(--cream); }
.footer .brand__sub{ color:rgba(247,243,236,.5); }
.footer__base{
  margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:1.75rem;
  border-top:1px solid var(--rule-dk);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-size:.75rem; color:rgba(247,243,236,.5);
}

/* ---------- sticky mobile call bar --------------------------------------- */

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule-dk);
  transform:translateY(100%); transition:transform .3s;
}
.callbar[data-show="true"]{ transform:none; }
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:56px; text-decoration:none;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
}
.callbar a:first-child{ background:var(--ink); color:var(--cream); }
.callbar a:last-child{ background:var(--gold); color:#fff; }
@media (min-width:1000px){ .callbar{ display:none; } }
@media (max-width:999px){ body{ padding-bottom:56px; } }

/* ---------- reveal -------------------------------------------------------- */

[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; }
  .card__media img{ transition:none; }
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.75rem 1.25rem;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }