@font-face{
  font-family:"Libre Franklin";
  src:url("font/librefranklin-latin-var.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#E3E0D8;
  --panel:#D3CFC4;
  --ink:#191916;
  --accent:#5A2D82;
  --rule:#B6B1A3;

  /* type ladder, seven steps, written before markup */
  --t1:12px;
  --t2:15px;
  --t3:18px;
  --t4:23px;
  --t5:34px;
  --t6:52px;
  --t7:68px;
}

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

html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Libre Franklin",Helvetica,Arial,sans-serif;
  font-size:var(--t3);
  font-weight:400;
  line-height:1.62;
  font-synthesis-weight:none;
}

img{width:100%;height:auto;display:block}

h1,h2,h3{margin:0;font-weight:800;line-height:1.06;letter-spacing:-0.018em}
p{margin:0}
table{border-collapse:collapse;width:100%}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}

a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--ground);
  padding:14px 20px;font-size:var(--t2);font-weight:600;text-decoration:none
}
.skip:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px
}

/* ---------- mockup banner ---------- */

.mockup{
  background:var(--ink);
  color:var(--ground);
  border-bottom:2px solid var(--ink);
}
.mockup p{
  max-width:1120px;margin:0 auto;padding:11px 24px;
  font-size:var(--t2);line-height:1.5
}
.mockup strong{font-weight:800}

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

.hdr{
  background:var(--ground);
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:40
}
.hdr-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:12px;padding-bottom:12px
}
.hdr-name{
  font-size:var(--t2);font-weight:800;
  text-transform:uppercase;letter-spacing:0.09em;line-height:1.3
}
.hdr-sub{
  display:block;font-weight:400;letter-spacing:0.09em;font-size:var(--t1)
}
.hdr-tel{
  font-size:var(--t4);font-weight:800;text-decoration:none;
  letter-spacing:-0.01em;white-space:nowrap;
  border-bottom:3px solid var(--accent);padding-bottom:2px
}
.hdr-tel:hover{background:var(--panel)}

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

.hero{position:relative;isolation:isolate;background:var(--ink)}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right,
      rgba(25,25,22,0.94) 0px,
      rgba(25,25,22,0.94) max(58%, 750px),
      rgba(25,25,22,0.34) max(72%, 890px),
      rgba(25,25,22,0.05) 100%),
    linear-gradient(to top,
      rgba(25,25,22,0.42) 0%,
      rgba(25,25,22,0.40) 60%,
      rgba(25,25,22,0.10) 86%,
      rgba(25,25,22,0) 100%)
}
.hero-copy{
  position:relative;z-index:2;color:var(--ground);
  padding-top:190px;padding-bottom:64px;max-width:1120px
}
.hero-copy > *{max-width:620px}
.eyebrow{
  font-size:var(--t1);font-weight:800;text-transform:uppercase;
  letter-spacing:0.09em;margin-bottom:20px
}
.hero h1{font-size:var(--t7);max-width:16ch}
.hero-line{
  font-size:var(--t4);line-height:1.45;max-width:34ch;
  margin-top:24px;font-weight:400
}
.hero-act{margin-top:32px}

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

.btn{
  display:inline-block;
  background:var(--accent);color:var(--ground);
  font-size:var(--t3);font-weight:800;text-decoration:none;
  padding:16px 26px;min-height:48px;
  border:2px solid var(--accent)
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ---------- intro ---------- */

.intro{padding:56px 0 8px}
.intro-in{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.intro-lead{font-size:var(--t5);font-weight:800;line-height:1.14;letter-spacing:-0.018em}
.intro-body{font-size:var(--t3);max-width:56ch}

.rule-hard{border:0;border-top:2px solid var(--ink);margin:44px auto 0}

/* ---------- the spine ---------- */

.spine{padding:0 0 8px}

.ex{position:relative;padding-top:38px;padding-bottom:38px}
.ex::after{content:"";position:absolute;left:24px;right:24px;bottom:0;border-bottom:1px solid var(--rule)}
.ex:last-of-type::after{display:none}

.ex-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;padding-bottom:18px;border-bottom:2px solid var(--ink)
}
.ex-obj{font-size:var(--t6);max-width:20ch}
.ex-time{
  font-size:var(--t1);font-weight:800;text-transform:uppercase;
  letter-spacing:0.09em;white-space:nowrap;text-align:right;line-height:1.4
}

.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:0;align-items:start}
.ex-bring{padding:24px 40px 24px 0}
.ex-leave{padding:24px 26px;background:var(--panel)}

.lbl{
  font-size:var(--t1);font-weight:800;text-transform:uppercase;
  letter-spacing:0.09em;margin-bottom:12px
}
.ex-line{font-size:var(--t4);font-weight:600;line-height:1.34}
.ex-note{font-size:var(--t3);margin-top:16px;max-width:52ch}
.ex-price{font-size:var(--t2);margin-top:16px;font-weight:600}
.illus{font-weight:400;text-transform:uppercase;letter-spacing:0.09em;font-size:var(--t1)}

/* ---------- figures ---------- */

.fig{padding-top:10px;padding-bottom:22px}
.fig > *{max-width:660px}
.fig.fig-r > *{margin-left:auto}
.fig img{border:2px solid var(--ink)}
.fig figcaption{
  font-size:var(--t2);margin-top:12px;max-width:60ch;font-weight:600
}

/* ---------- storm band ---------- */

.storm{position:relative;isolation:isolate;background:var(--ink);margin-top:40px}
.storm-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0
}
.storm-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,
    rgba(25,25,22,0.955) 0%,
    rgba(25,25,22,0.95) 56%,
    rgba(25,25,22,0.66) 74%,
    rgba(25,25,22,0.22) 92%,
    rgba(25,25,22,0.08) 100%)
}
.storm-copy{
  position:relative;z-index:2;color:var(--ground);
  padding-top:84px;padding-bottom:84px
}
.storm h2{font-size:var(--t5);max-width:30ch}
.storm p{font-size:var(--t3);max-width:52ch;margin-top:22px}

/* ---------- if it is not on the shelf ---------- */

.miss{padding:60px 0 68px}
.miss-in{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start}
.miss h2{font-size:var(--t5);max-width:10ch}
.miss p{font-size:var(--t3);max-width:56ch}
.miss-body p + p{margin-top:20px}

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

.foot{background:var(--ink);color:var(--ground);padding-top:64px}
.foot-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.foot h2{font-size:var(--t5);margin-bottom:24px}
.foot-addr{font-size:var(--t4);font-weight:600;line-height:1.36}
.foot-note{font-size:var(--t2);margin-top:18px;max-width:44ch}
.foot-act{margin-top:28px}
.foot .btn{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.foot .btn:hover{background:var(--accent);color:var(--ground);border-color:var(--accent)}

.hours th,.hours td{
  text-align:left;font-size:var(--t2);font-weight:400;
  padding:12px 0;border-bottom:1px solid rgba(227,224,216,0.34)
}
.hours th{font-weight:800;padding-right:24px}
.hours td{text-align:right;white-space:nowrap}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}

.foot-legal{padding-top:52px;padding-bottom:48px}
.foot-legal p{font-size:var(--t2);max-width:96ch}
.foot-legal{margin-top:0}
.foot-legal > p{border-top:0}
.foot-rule{border:0;border-top:2px solid var(--ground);margin:0 0 24px}
.foot-legal strong{font-weight:800}

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

.reveal{opacity:0;transform:translateY(14px)}
.reveal.shown{opacity:1;transform:none;transition:opacity .62s ease,transform .62s ease}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- narrow ---------- */

@media (max-width:900px){
  .intro-in,.miss-in,.foot-in{grid-template-columns:1fr;gap:32px}
  .ex-grid{grid-template-columns:1fr}
  .ex-bring{padding:24px 0}
  .ex-leave{padding:24px}
  .hero h1{font-size:var(--t5)}
  .hero-copy > *{max-width:none}
  .hero-scrim{
    background:linear-gradient(to top,
      rgba(25,25,22,0.955) 0%,
      rgba(25,25,22,0.95) 78%,
      rgba(25,25,22,0.62) 88%,
      rgba(25,25,22,0.14) 96%,
      rgba(25,25,22,0) 100%)
  }
  .ex-obj{font-size:var(--t5);max-width:none}
  .intro-lead{font-size:var(--t4)}
  .storm-scrim{
    background:linear-gradient(to top,
      rgba(25,25,22,0.955) 0%,
      rgba(25,25,22,0.945) 82%,
      rgba(25,25,22,0.72) 92%,
      rgba(25,25,22,0.45) 100%)
  }
  .storm-copy{padding-top:72px;padding-bottom:72px}
}

@media (max-width:620px){
  .hdr-in{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-copy{padding-top:150px;padding-bottom:48px}
  .hero-line{font-size:var(--t3)}
  .ex-head{flex-direction:column;gap:10px;align-items:flex-start}
  .ex-time{text-align:left}
  .ex-line{font-size:var(--t3);font-weight:800}
  .foot h2,.miss h2,.storm h2{font-size:var(--t4)}
  .ex,.intro{padding-top:48px;padding-bottom:48px}
  .ex-time{white-space:normal}
  .btn{width:100%;text-align:center}
  .hours th,.hours td{display:block;text-align:left;white-space:normal;width:100%}
  .hours th{padding:12px 0 0;border-bottom:0}
  .hours td{padding:2px 0 12px}
}