/* LuckyNhiev / ShotByLucky.

   Lifted out of index.html on 20 October so more than one page can use it.
   It was a single file site until the brief asked for About, Socials and a
   More LuckyNhiev page, and four copies of the same stylesheet is three
   copies too many to keep in step. */
/* Single dark theme on purpose: the subject is a stadium at night. Every colour
   is painted explicitly so the page holds on any host ground. */
:root{
  --night:#0B0F16;
  --deck:#121A24;
  --deck-2:#18222E;
  --line:rgba(242,245,247,.10);
  --line-2:rgba(242,245,247,.06);
  --chalk:#F2F5F7;
  --dusk:#75879C;
  --dusk-2:#4E5E71;
  --floodlight:#FFC145;
  --turf:#3E7C5C;
  --turf-lit:#5FBF8B;

  --pad:clamp(20px,5vw,64px);
  --stack:clamp(56px,8vw,104px);
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--night);
  color:var(--chalk);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}

/* Uppercase condensed label, used for every eyebrow and every stat caption. */
.tag{
  font-family:var(--cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--floodlight);
}
.tag.quiet{color:var(--dusk-2)}

/* ---------- HERO: the floodlight is off frame, top right, and the type sits
     in its spill. Two stacked radial gradients, warm core and cold falloff. */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,11vw,132px) 0 clamp(40px,6vw,64px);
  border-bottom:1px solid var(--line-2);
}
/* The photograph behind the headline.
   A photographer's site opening on type alone is the one thing a visitor
   notices before reading a word, and this page had no pictures on it at all.
   It sits under two layers of darkening rather than at low opacity, because
   fading the picture makes it look like a cheap stock texture, while darkening
   it keeps the blacks black and the floodlights bright. The gradient is
   heaviest on the left, which is where the text is. */
.hero .shot{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(100deg, rgba(10,13,18,.96) 0%, rgba(10,13,18,.86) 38%, rgba(10,13,18,.52) 72%, rgba(10,13,18,.62) 100%),
    linear-gradient(0deg, rgba(10,13,18,.9) 0%, transparent 42%),
    url("photos/hero-banner-run.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,62% 38%;
}
@media (max-width:760px){
  /* On a phone the text column is the whole width, so the picture has to go
     further back or the headline sits on top of a crowd. */
  .hero .shot{
    background-image:
      linear-gradient(180deg, rgba(10,13,18,.88) 0%, rgba(10,13,18,.93) 55%, rgba(10,13,18,.97) 100%),
      url("photos/hero-banner-run.jpg");
    background-size:cover,cover;
    background-position:center,62% 38%;
  }
}
.hero::before,
.hero::after{content:"";position:absolute;pointer-events:none;inset:0}
.hero::before{
  background:
    radial-gradient(58% 44% at 88% -6%, rgba(255,193,69,.22) 0%, rgba(255,193,69,.06) 42%, transparent 72%),
    radial-gradient(90% 70% at 74% -20%, rgba(126,169,214,.10) 0%, transparent 66%);
}
/* A hint of the lamp itself, clipped by the section edge. */
.hero::after{
  background:radial-gradient(9px 9px at 88% -1%, rgba(255,225,170,.95) 0%, rgba(255,193,69,.35) 45%, transparent 70%);
}
.hero .wrap{position:relative}

.hero h1{
  font-family:var(--display);
  font-size:clamp(52px,12.5vw,116px);
  line-height:.9;
  letter-spacing:-.025em;
  margin:18px 0 0;
  text-wrap:balance;
}
.hero h1 .lit{color:var(--floodlight)}
.hero .real{
  font-family:var(--cond);
  font-weight:600;
  font-size:clamp(17px,2.4vw,21px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dusk);
  margin:22px 0 0;
}
.hero .pitch-sub{
  font-family:var(--cond);font-weight:600;
  font-size:clamp(15px,2vw,18px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dusk-2);margin:10px 0 0;
}
.hero .pitch{
  max-width:34ch;
  margin:26px 0 0;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.45;
  color:#CFD8E1;
}
.hero .pitch b{color:var(--chalk);font-weight:600}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--cond);font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border-radius:3px;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn.solid{background:var(--floodlight);color:#1A1204;border:1px solid var(--floodlight)}
.btn.solid:hover{background:#FFD077;transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--line);color:var(--chalk)}
.btn.ghost:hover{border-color:var(--floodlight);color:var(--floodlight)}
.btn:focus-visible{outline:2px solid var(--floodlight);outline-offset:3px}

/* ---------- SCOREBOARD: real numbers, tabular, condensed, on a dark plate. */
.board{
  margin-top:clamp(40px,6vw,60px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(180deg,var(--deck) 0%,rgba(18,26,36,.55) 100%);
  overflow:hidden;
}
.board div{padding:22px 24px;border-right:1px solid var(--line-2)}
.board div:last-child{border-right:0}
.board .n{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(36px,5.4vw,46px);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--chalk);
}
.board .k{
  font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dusk-2);
  margin-top:9px;
}

/* ---------- Yard line divider: hash marks, not a rule. */
.hash{
  height:1px;background:var(--line-2);
  margin:0;position:relative;
}
.hash::after{
  content:"";position:absolute;left:0;right:0;top:-4px;height:9px;
  background:repeating-linear-gradient(90deg,
    var(--line) 0 1px, transparent 1px 46px);
  opacity:.55;
}

section.band{padding:var(--stack) 0}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head h2{
  font-family:var(--display);
  font-size:clamp(28px,4.6vw,42px);
  line-height:1.02;letter-spacing:-.02em;margin:12px 0 0;
  text-wrap:balance;
}
.head p{margin:14px 0 0;color:var(--dusk);max-width:56ch}

/* ---------- CLIPS: his own "POV:" convention is the structure. */
.clips{
  display:grid;gap:14px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.clip{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:236px;padding:22px;
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(165deg,var(--deck-2) 0%,var(--deck) 100%);
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.clip:hover{border-color:rgba(255,193,69,.45);transform:translateY(-2px)}
.clip:focus-visible{outline:2px solid var(--floodlight);outline-offset:3px}
.clip .pov{
  font-family:var(--cond);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--floodlight);
}
.clip .where{
  font-family:var(--display);font-size:23px;line-height:1.12;
  letter-spacing:-.015em;margin:12px 0 0;
}
.clip .foot{display:flex;align-items:baseline;gap:9px;margin-top:26px}
.clip .views{
  font-family:var(--cond);font-weight:700;font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--chalk);
}
.clip .unit{
  font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dusk-2);
}
/* The two that carry the reel: a light bar along the top edge. */
.clip.top{border-color:rgba(255,193,69,.3)}
.clip.top::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--floodlight),transparent);
}

/* ---------- GATES: the links, as wide plates rather than pills. */
.gates{display:grid;gap:10px;margin-top:38px}
.gate{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:19px 22px;border:1px solid var(--line);border-radius:4px;
  background:var(--deck);text-decoration:none;
  transition:background .16s ease,border-color .16s ease;
}
.gate:hover{background:var(--deck-2);border-color:rgba(255,193,69,.4)}
.gate:focus-visible{outline:2px solid var(--floodlight);outline-offset:3px}
.gate .h{
  font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dusk-2);min-width:104px;
}
.gate .n{font-weight:600;font-size:17px}
.gate .n span{display:block;font-size:14.5px;color:var(--dusk);font-weight:400;margin-top:2px}
.gate .go{
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--floodlight);white-space:nowrap;
}

/* ---------- BOOKING: the one thing the page is actually for. */
.book{
  margin-top:38px;padding:clamp(26px,4.4vw,44px);
  border:1px solid rgba(255,193,69,.28);border-radius:4px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,193,69,.10) 0%, transparent 62%),
    var(--deck);
}
.book h3{
  font-family:var(--display);font-size:clamp(24px,3.6vw,34px);
  line-height:1.06;letter-spacing:-.02em;margin:12px 0 0;text-wrap:balance;
}
.book p{margin:14px 0 0;color:#C4CFDA;max-width:52ch}

/* ---------- GAMING: a different audience, so a different temperature. */
.gaming{
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(62,124,92,.07) 0%,transparent 58%);
}
.gaming .tag{color:var(--turf-lit)}
.gaming .rigs{display:grid;gap:10px;margin-top:34px}
.gaming .gate:hover{border-color:rgba(95,191,139,.45)}
.gaming .gate .go{color:var(--turf-lit)}

footer{border-top:1px solid var(--line-2);padding:38px 0 54px}
.fine{
  font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dusk-2);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

@media (max-width:560px){
  .gate{grid-template-columns:1fr auto;row-gap:4px}
  .gate .h{grid-column:1 / -1;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- The booking form.
   Built from the page's own tokens rather than a form library: floodlight on
   focus, deck for the fields, chalk for what you type. A form that looks
   borrowed reads as less trustworthy than the page around it, and this one is
   asking a stranger to write to somebody they have never met. */
.booking{margin-top:30px;display:flex;flex-direction:column;gap:14px}
/* align-items:end so the two inputs in a row line up with each other even
   when one label wraps to a second line and the other does not. Without it the
   longer label shoves its own field down and the row reads as broken. */
.booking .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.booking label{display:flex;flex-direction:column;gap:7px;min-width:0}
.booking label>span{
  font-family:var(--cond);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dusk);
}
.booking label>span i{font-style:normal;color:var(--dusk-2);letter-spacing:.06em}
.booking select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dusk) 50%),linear-gradient(135deg,var(--dusk) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:40px;cursor:pointer;
}
.booking input,.booking select,.booking textarea{
  font-family:var(--body);font-size:17px;color:var(--chalk);
  background:var(--deck-2);border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;width:100%;
  /* iOS zooms the page in on focus for anything under 16px. */
  min-height:48px;
}
.booking textarea{min-height:92px;resize:vertical;line-height:1.5}
.booking input:focus,.booking select:focus,.booking textarea:focus{
  outline:none;border-color:var(--floodlight);
  box-shadow:0 0 0 3px rgba(255,193,69,.16);
}
/* Only after a submit attempt, so nothing is red before you have typed. */
.booking.tried input:invalid,.booking.tried select:invalid,.booking.tried textarea:invalid{border-color:#E26D6D}
.booking button.btn{font:inherit;cursor:pointer}
.booking button.btn[disabled]{opacity:.6;cursor:progress}
.booking .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:14px;font-size:15px;color:var(--dusk)}
.formnote.bad{color:#E8A0A0}
.formalt{margin-top:6px;font-size:15px;color:var(--dusk-2)}
.formalt a{color:var(--dusk);text-decoration:underline}
/* The thank you. Replaces the form rather than sitting under it, so there is
   no half second where it looks like it might need sending again. */
.booking.done{
  border:1px solid rgba(95,191,139,.45);background:rgba(62,124,92,.14);
  border-radius:10px;padding:26px 24px;
}
.booking.done h4{font-family:var(--display);font-size:26px;color:var(--chalk)}
.booking.done p{margin-top:10px;font-size:17px;color:var(--dusk);line-height:1.55}

@media (max-width:640px){
  .booking .row2{grid-template-columns:1fr}
}

/* The work itself.
   Masonry by column count rather than a strict grid, because his frames are a
   mix of wide action and the odd upright, and forcing every one into the same
   box crops the subject out of half of them. CSS columns keep each picture its
   own shape, which is the whole point of showing a photographer's work. */
/* ---------- The portfolio grid.

   A real grid rather than the masonry the old gallery used, because the set
   changed shape. Thirty four of these thirty five are portrait at 4:5, which
   is what comes out of his phone edit, so masonry would spend its cleverness
   arranging columns that are all the same height anyway. A fixed 4:5 cell is
   honest about that and reads as deliberate instead of accidental.

   No captions. He asked for none, and the pictures carry his watermark. */
.folio{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.folio figure{
  margin:0;position:relative;aspect-ratio:4/5;
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.02);cursor:zoom-in;
}
.folio img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease, opacity .3s ease;
}
.folio figure:hover img{transform:scale(1.035)}
/* The one landscape frame in the set would letterbox badly against a 4:5
   cell, so it takes two columns and keeps its own shape. */
.folio figure.wide{aspect-ratio:3/2;grid-column:span 2}
@media (max-width:1000px){.folio{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.folio{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){
  .folio{grid-template-columns:1fr}
  .folio figure.wide{grid-column:span 1}
}

.takedown{
  margin-top:20px;font-size:15px;line-height:1.6;color:var(--dusk-2);max-width:62ch;
}
.takedown a{color:var(--floodlight)}

/* ---------- Site navigation.

   Added 20 October with the page split. Sticky rather than fixed, so it does
   not eat height on a short phone screen until you have scrolled past the
   headline it is sitting on top of.

   The mobile menu is a checkbox and a label, with no JavaScript at all. A nav
   that depends on a script is a nav that is broken for the half second before
   the script runs, and this one sits above the fold on every page. */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(8,11,17,.82);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.nav .inner{
  max-width:1080px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:18px;min-height:64px;
  flex-wrap:nowrap;
}
.nav .mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;margin-right:auto}
.nav .mark b{font-family:var(--display);font-size:22px;color:var(--chalk);letter-spacing:-.01em}
.nav .mark span{
  font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--floodlight);margin-top:4px;
}
.nav a.link{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dusk);text-decoration:none;
  padding:6px 2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
  /* "More LuckyNhiev" is two words and must never be split across two lines.
     It did exactly that the moment the webfont stopped being render blocking,
     because the fallback is wider than Barlow Condensed. */
  white-space:nowrap;
}
.nav a.link:hover{color:var(--chalk)}
.nav a.link[aria-current="page"]{color:var(--chalk);border-bottom-color:var(--floodlight)}
.nav .book{
  font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  background:var(--floodlight);color:#1a1405;
  padding:10px 16px;border-radius:4px;white-space:nowrap;
}
.nav .toggle,.nav label.burger{display:none}

/* The switch to the burger happens at 1180.

   It was 860 first, which was a guess, and the Book Me button ended up sitting
   on top of the end of "More LuckyNhiev". Then 1080, measured against five
   links. Adding Pricing makes six, so it moves again.

   The lesson rather than the number: this breakpoint is a function of how many
   links there are and how long their labels are, so it gets re-measured every
   time one is added. Below it the menu collapses to the burger, which was
   always the better experience at that width anyway. */
@media (max-width:1179px){
  .nav .inner{flex-wrap:wrap;gap:0;min-height:58px}
  .nav label.burger{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-left:12px;cursor:pointer;
    border:1px solid var(--line);border-radius:6px;color:var(--chalk);
  }
  .nav label.burger span{
    display:block;width:17px;height:1.5px;background:currentColor;position:relative;
  }
  .nav label.burger span::before,.nav label.burger span::after{
    content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor;
  }
  .nav label.burger span::before{top:-5px}
  .nav label.burger span::after{top:5px}
  /* The links sit after the burger in the DOM so that the keyboard reaches
     the button before the menu it opens. On screen they have to go underneath
     it, hence the order, or opening the menu shoves the button down the page
     and you cannot find what you just pressed. */
  .nav label.burger{order:2}
  .nav .links{
    order:3;
    flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    gap:0;padding-bottom:10px;
  }
  .nav .toggle:checked ~ .links{display:flex}
  .nav a.link{padding:13px 2px;border-bottom:1px solid var(--line-2)}
  .nav a.link[aria-current="page"]{border-bottom-color:var(--floodlight)}
  .nav .book{margin-top:12px;text-align:center}
}
@media (min-width:1180px){
  .nav .links{display:flex;align-items:center;gap:20px}
  /* The button never sits straight against the last link, whatever that link
     is called. "More LuckyNhiev" is long and it will not be the last long one. */
  .nav .book{margin-left:12px}
}

/* ---------- Featured slideshow.

   His best frames, on a timer, at the top of the work. Every slide is in the
   DOM and stacked; only opacity changes, so there is no layout work per tick
   and nothing reflows while it runs.

   It honours prefers-reduced-motion by stopping on the first slide. A carousel
   that keeps moving for somebody who asked the operating system to stop moving
   things is not a carousel, it is a problem. */
.feature{
  position:relative;border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;background:#000;aspect-ratio:16/9;
}
.feature .slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
}
.feature .slide.on{opacity:1}
.feature .slide img{width:100%;height:100%;object-fit:cover;display:block}
.feature .cap{
  position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;
  font-family:var(--cond);font-size:16px;letter-spacing:.04em;color:var(--chalk);
  background:linear-gradient(0deg,rgba(8,11,17,.9) 0%,transparent 100%);
}
.feature .dots{
  position:absolute;right:14px;bottom:14px;display:flex;gap:7px;align-items:center;
}
.feature .dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);background:transparent;
}
.feature .dots button[aria-current="true"]{background:var(--floodlight);border-color:var(--floodlight)}
.feature .pause{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk);cursor:pointer;
  background:rgba(8,11,17,.6);border:1px solid var(--line);border-radius:4px;
  padding:6px 10px;
}
@media (prefers-reduced-motion:reduce){.feature .slide{transition:none}}

/* ---------- Full screen photo viewer. */
.viewer{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(5,7,11,.96);
  align-items:center;justify-content:center;
}
.viewer.open{display:flex}
.viewer img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px}
.viewer .vcap{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-family:var(--cond);font-size:16px;letter-spacing:.04em;color:var(--dusk);
  padding:0 20px;
}
.viewer button{
  position:absolute;cursor:pointer;color:var(--chalk);
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  width:46px;height:46px;border-radius:50%;font-size:20px;line-height:1;
}
.viewer .vclose{top:18px;right:18px}
.viewer .vprev{left:18px;top:50%;transform:translateY(-50%)}
.viewer .vnext{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:620px){
  .viewer .vprev{left:10px}
  .viewer .vnext{right:10px}
  .viewer button{width:40px;height:40px}
}

/* ---------- Long form text, for About and More LuckyNhiev. */
.prose{margin-top:28px;max-width:66ch}
.prose p{font-size:18px;line-height:1.68;color:var(--dusk);margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.prose .sig{
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--floodlight);
}
.subhead{
  font-family:var(--display);font-size:clamp(22px,3.4vw,30px);
  color:var(--chalk);margin:46px 0 18px;
}
.hero .pitch a.more{
  color:var(--floodlight);text-decoration:none;
  border-bottom:1px solid rgba(255,193,69,.4);white-space:nowrap;
}
.hero .pitch a.more:hover{border-bottom-color:var(--floodlight)}

/* Footer links. The footer was two bits of text; with four pages it has to
   actually get you somewhere. */
footer .flinks{display:flex;flex-wrap:wrap;gap:4px 18px}
footer .flinks a{color:var(--dusk);text-decoration:none}
footer .flinks a:hover{color:var(--chalk)}
@media (max-width:620px){
  footer .fine{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- Pricing.

   Built 21 October from Devonte's own pricing guide. The numbers and the rules
   are his; the job here is only to make them readable on a phone, because a
   parent deciding whether to spend ten dollars is doing it one handed in a
   stand, not at a desk. */
.packs{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.pack{
  display:flex;align-items:flex-start;gap:22px;
  border:1px solid var(--line-2);border-radius:12px;
  background:rgba(255,255,255,.022);padding:22px 24px;
}
.pack .amt{
  font-family:var(--display);font-size:clamp(30px,5vw,40px);line-height:1;
  color:var(--floodlight);flex:0 0 auto;min-width:92px;
}
.pack h3{font-family:var(--cond);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)}
.pack p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--dusk)}
@media (max-width:560px){
  .pack{flex-direction:column;gap:10px}
  .pack .amt{min-width:0}
}

/* The rule box, used for the things that are policy rather than price. */
.rule{
  margin-top:22px;border:1px solid var(--line);border-radius:12px;
  background:rgba(95,191,139,.07);padding:20px 22px;
}
.rule h4{
  font-family:var(--cond);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--floodlight);margin-bottom:9px;
}
.rule p{font-size:16px;line-height:1.6;color:var(--dusk)}

/* The distance table. Wrapped so it scrolls sideways rather than squashing the
   numbers into two characters a column on a narrow phone. */
.ratewrap{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.rates{border-collapse:collapse;width:100%;min-width:520px}
table.rates th,table.rates td{
  text-align:left;padding:13px 16px;font-size:16px;
  border-bottom:1px solid var(--line-2);white-space:nowrap;
}
table.rates th{
  font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dusk-2);border-bottom-color:var(--line);
}
table.rates td{color:var(--dusk)}
table.rates td:first-child{color:var(--chalk);font-weight:600}
table.rates td.price{color:var(--floodlight);font-weight:600}
table.rates tbody tr:nth-child(odd){background:rgba(255,255,255,.018)}

/* Terms. Dense by nature, so they get room to breathe rather than a wall. */
.terms{margin-top:28px;display:flex;flex-direction:column;gap:26px;max-width:72ch}
.terms h3{
  font-family:var(--cond);font-size:17px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--floodlight);margin-bottom:8px;
}
.terms p{font-size:17px;line-height:1.62;color:var(--dusk)}
.season{
  display:inline-block;margin-top:14px;
  font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#1a1405;background:var(--floodlight);
  padding:6px 12px;border-radius:4px;
}

/* ---------- Availability calendar.

   Read only on purpose. His booking rules say a request never confirms itself,
   so this shows what is open and then hands you to the request form. It does
   not take a booking, and it must never show who booked a day: the data file
   behind it is public, so it carries a status and nothing else.

   One month at a time rather than his sketch's three, because three months side
   by side on a phone is three unreadable months. Arrows instead. */
.cal{margin-top:28px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.cal .bar{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.022);
}
.cal .bar h3{
  font-family:var(--cond);font-size:18px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk);margin-right:auto;
}
.cal .bar button{
  width:36px;height:36px;cursor:pointer;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--chalk);font-size:17px;line-height:1;
}
.cal .bar button:disabled{opacity:.3;cursor:default}

.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);padding:12px 10px 4px}
.cal .dow span{
  text-align:center;font-family:var(--cond);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dusk-2);
}
.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:6px 10px 14px}

.cal .day{
  min-height:58px;border-radius:8px;border:1px solid transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:15px;color:var(--dusk);
}
.cal .day.pad{visibility:hidden}
.cal .day .lbl{
  font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
}
/* Open days are buttons. Everything else is not, because there is nothing to
   press on a day he cannot work. */
.cal button.day{
  cursor:pointer;background:rgba(255,255,255,.035);
  border-color:var(--line-2);color:var(--chalk);font-family:inherit;
}
.cal button.day:hover{border-color:var(--floodlight);color:var(--floodlight)}
.cal .day.booked{background:rgba(226,109,109,.14);border-color:rgba(226,109,109,.3);color:#E9A3A3}
.cal .day.pending{background:rgba(255,193,69,.13);border-color:rgba(255,193,69,.3);color:#E9C77F}
.cal .day.past{opacity:.28}

.cal .key{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--line-2);
  font-family:var(--cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dusk-2);
}
.cal .key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.cal .key .k-open{background:rgba(255,255,255,.14);border:1px solid var(--line-2)}
.cal .key .k-pend{background:rgba(255,193,69,.4)}
.cal .key .k-book{background:rgba(226,109,109,.45)}

@media (max-width:560px){
  .cal .day{min-height:46px;font-size:14px}
  .cal .grid{gap:4px;padding:4px 7px 12px}
  .cal .bar h3{font-size:16px}
}

/* A note tied to the fields above it rather than to the whole form, so the
   travel explanation sits where somebody is actually typing an address. */
.booking .fieldnote{
  /* max-width:52ch is set on every p inside .book, which is right for the
     intro paragraph and wrong for a note that belongs to the full width row
     above it. Overridden rather than loosened, so the intro keeps its measure. */
  max-width:none;
  margin:-4px 0 0;font-size:14px;line-height:1.55;color:var(--dusk-2);
  border-left:2px solid var(--line);padding-left:12px;
}