/* ===========================================================================
   ILY Pets
   ---------------------------------------------------------------------------
   The brief came as their own flyer: hot pink, turquoise, sunshine yellow,
   hibiscus, starfish, a beach. Tropical Miami, and unmistakably warm.

   What is taken from it: the palette, the roundness, the friendliness.
   What is not: the clutter. The flyer has six decorative motifs competing with
   the dog. Here the warmth comes from shape and colour -- big radii, soft
   pink-tinted shadows, a rounded display face -- so the photographs of the
   dogs can be the only busy thing on the page. On a grooming site the
   photographs are the product; anything else fighting them is working against
   the business.
   ========================================================================= */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted. Loading these from fonts.googleapis.com would put two
   third-party origins in front of the first paint -- one connection for the
   stylesheet, another to fonts.gstatic.com for the files it names. Variable
   fonts, so one file per family covers every weight used.

   Not preloaded: font-display:swap paints text immediately in the fallback, so
   they are off the critical path, while the hero photograph is on it. The
   latin-ext files are declared but only fetched when a character in that range
   appears -- which matters here, because Spanish names and words carry
   accents and this site is meant to serve them properly. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/nunitosans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/nunitosans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --pink:      #ef4a97;
  --pink-deep: #c92a74;
  --pink-soft: #ffe7f2;
  --teal:      #14b0b0;
  --teal-soft: #dff6f6;
  --yellow:    #ffc93c;
  --yellow-soft:#fff2cf;

  --cream:  #fff8f3;
  --panel:  #ffffff;
  --ink:    #3a2a3f;
  --ink-mid:#6b5a70;
  --ink-dim:#8d7f91;
  --line:   #f0e2e8;

  --wrap: 1140px;
  --gutter: clamp(18px, 4vw, 40px);
  --r: 22px;
  --r-lg: 32px;
  --shadow: 0 10px 30px rgba(239, 74, 151, .10);
  --shadow-lg: 0 18px 48px rgba(239, 74, 151, .16);

  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
}

/* [hidden] is a browser default at the lowest possible specificity, so any
   author rule setting display beats it and the element stays visible while the
   code believes it is gone. Settled once, globally, before it can happen. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

* { box-sizing: border-box; }

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

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12;
             letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(38px, 6vw, 62px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--pink);
              color: #fff; padding: .7rem 1rem; border-radius: 999px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

/* The labelling voice: small, round, coloured. */
.eyebrow {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pink-deep); background: var(--pink-soft);
  padding: .3rem .85rem; border-radius: 999px; margin-bottom: 1rem;
}
.eyebrow--light { color: #fff; background: rgba(255, 255, 255, .22); }

.lede { font-size: clamp(17px, 1.7vw, 19.5px); color: var(--ink-mid); max-width: 58ch; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-family: var(--display); font-weight: 600; font-size: 15.5px;
  padding: .72rem 1.35rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn--lg { font-size: 17px; padding: .95rem 1.8rem; }
.btn--pink { background: var(--pink); color: #fff; box-shadow: var(--shadow); }
.btn--pink:hover { background: var(--pink-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--yellow { background: var(--yellow); color: #4a3512; }
.btn--yellow:hover { transform: translateY(-2px); }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--pink); color: var(--pink-deep); transform: translateY(-2px); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.actions--center { justify-content: center; }

.link { font-family: var(--display); font-weight: 600; color: var(--pink-deep);
        text-decoration: none; border-bottom: 2px solid var(--pink-soft); }
.link:hover { border-bottom-color: var(--pink); }

/* ------------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255, 248, 243, .92);
       backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; }

.brand { font-family: var(--display); font-weight: 600; font-size: 25px;
         text-decoration: none; letter-spacing: -.02em; }
.brand__ily { color: var(--teal); }
.brand__pets { color: var(--pink); margin-left: .18em; }

.nav { display: flex; gap: .35rem; margin-left: auto; }
.nav a { font-family: var(--display); font-weight: 500; font-size: 15.5px;
         text-decoration: none; padding: .5rem .85rem; border-radius: 999px; color: var(--ink-mid); }
.nav a:hover { background: var(--pink-soft); color: var(--pink-deep); }
.nav a[aria-current="page"] { background: var(--pink-soft); color: var(--pink-deep); }

.top__cta { margin-left: .5rem; }

.burger { display: none; margin-left: auto; background: none; border: 0; padding: 8px;
          cursor: pointer; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--ink);
               border-radius: 2px; margin: 5px 0; }

/* -------------------------------------------------------------------- hero */
.hero { padding-block: clamp(36px, 6vw, 76px); }
.hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px);
            align-items: center; }
.hero h1 { margin-bottom: 1.1rem; }
.hero__es { margin-top: 1.5rem; font-size: 15.5px; color: var(--ink-mid); }
.hero__es strong { color: var(--teal); }
.hero__img img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------- the strip */
.strip { background: var(--teal); color: #fff; }
/* Five promises now, not four, so the last one no longer sits alone on a
   second row. auto-fit rather than a fixed five: at tablet width five columns
   would squeeze "Safe, caring environment" onto three lines each. */
.strip__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: .8rem 1rem; padding-block: 1.4rem; text-align: center; }
.strip b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; }
.strip span { font-size: 13.5px; opacity: .85; }

/* ----------------------------------------------------------------- section */
.sec { padding-block: clamp(46px, 7vw, 86px); }
.sec__head { margin-bottom: 2.4rem; }
.sec__head .lede { margin-top: .6rem; }

.phead { padding-block: clamp(40px, 6vw, 72px) clamp(10px, 2vw, 20px); }
.phead .lede { margin-top: 1rem; }
.phead--wed { background: linear-gradient(180deg, var(--pink-soft), transparent); }

/* ------------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card { background: var(--panel); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px);
        box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px;
              border-radius: 16px; margin-bottom: 1.1rem; }
.card__icon svg { width: 26px; height: 26px; }
.card--pink .card__icon { background: var(--pink-soft); color: var(--pink-deep); }
.card--teal .card__icon { background: var(--teal-soft); color: var(--teal); }
.card--yellow .card__icon { background: var(--yellow-soft); color: #a8720a; }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-mid); font-size: 16px; }
.card .link { margin-top: auto; align-self: flex-start; }

.ticks { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: 15.5px;
            color: var(--ink-mid); margin-bottom: .35rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em;
                    width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.ticks--two { columns: 2; column-gap: 1.5rem; }

/* ----------------------------------------------------- wedding day feature */
.feature { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
           color: #fff; }
.feature__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px);
               align-items: center; padding-block: clamp(46px, 7vw, 84px); }
.feature h2 { margin-bottom: 1rem; }
.feature .lede { color: rgba(255, 255, 255, .92); }
.feature__img img { width: 100%; border-radius: var(--r-lg); }

/* ---------------------------------------------------------------- promises */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 1.1rem; }
.promise { background: var(--panel); border-radius: var(--r); padding: 1.5rem;
           border: 2px solid var(--line); min-width: 0; }
.promise h3 { font-size: 18px; margin-bottom: .4rem; color: var(--teal); }
.promise p { margin: 0; font-size: 15.5px; color: var(--ink-mid); }

/* -------------------------------------------------------------------- menu */
.menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.menu__block { background: var(--panel); border-radius: var(--r-lg);
               padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow); min-width: 0; }
.menu__top { display: flex; align-items: baseline; justify-content: space-between;
             gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.menu__top h2 { font-size: clamp(22px, 2.4vw, 27px); }
.price { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--pink-deep); }
.menu__block > p { color: var(--ink-mid); font-size: 16px; }
.note { font-size: 14.5px; color: var(--ink-dim); margin-bottom: 0; }
/* margin-bottom: 0 above means two notes in a row butt straight into each
   other and read as one run-on paragraph. They are separate thoughts. */
.note + .note { margin-top: .7rem; }
.menu__block--wed { grid-column: 1 / -1; background: var(--yellow-soft); box-shadow: none; }

/* ------------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.step { background: var(--panel); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px);
        box-shadow: var(--shadow); min-width: 0; }
.step__n { display: inline-grid; place-items: center; width: 42px; height: 42px;
           border-radius: 50%; background: var(--pink); color: #fff;
           font-family: var(--display); font-weight: 600; font-size: 20px; margin-bottom: 1rem; }
.step h3 { margin-bottom: .45rem; }
.step p { margin: 0; color: var(--ink-mid); font-size: 15.5px; }

/* ---------------------------------------------------------------------- qa */
.qa { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-lg);
      overflow: hidden; border: 1px solid var(--line); }
.qa__row { background: var(--panel); padding: clamp(20px, 2.6vw, 28px); }
.qa__row h3 { font-size: 18px; margin-bottom: .45rem; color: var(--teal); }
.qa__row p { margin: 0; color: var(--ink-mid); }

/* ------------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px);
         align-items: start; }
.split img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }

.es-card { background: var(--teal-soft); border-radius: var(--r); padding: 1.4rem 1.6rem;
           margin-top: 1.8rem; }
.es-card h3 { color: var(--teal); font-size: 19px; margin-bottom: .3rem; }
.es-card p { margin: 0; font-size: 15.5px; color: var(--ink-mid); }
.es-card--side { margin-top: 1.6rem; }

/* ----------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px);
           align-items: start; }
.contact__form { background: var(--panel); border-radius: var(--r-lg);
                 padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); }
.contact h2 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: 1.2rem; }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-family: var(--display); font-weight: 500;
                font-size: 14.5px; color: var(--ink-mid); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--cream); border: 2px solid var(--line); border-radius: 14px;
  padding: .7rem .9rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--pink); background: #fff;
}
.notice { margin-top: 1rem; margin-bottom: 0; background: var(--yellow-soft);
          border-radius: 14px; padding: .9rem 1.1rem; font-size: 15px; }

/* The honeypot. Off-screen rather than display:none, because a bot that fills
   it is exactly the bot that checks for display:none first. Out of the tab
   order and hidden from screen readers, so no real person ever meets it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 1rem; min-width: 0;
           padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.rows li:last-child { border-bottom: 0; }
.rows li > span:first-child { font-family: var(--display); font-weight: 500; color: var(--ink-dim); }
.rows a { color: var(--pink-deep); text-decoration: none; font-weight: 700;
          overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- cta */
.cta { background: var(--teal-soft); }
.cta__in { padding-block: clamp(42px, 6vw, 72px); text-align: center; }
.cta h2 { margin-bottom: .5rem; }
.cta p { color: var(--ink-mid); margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--ink); color: #f3ebf5; padding-block: 48px 28px; }
.foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.4rem; }
.foot .brand--foot { font-size: 27px; }
.foot__blurb { margin-top: .8rem; font-size: 15px; color: #c6b6ca; max-width: 34ch; }
.foot__es { font-size: 15px; margin: 0; }
/* The footer lists the grooming week. Daycare and boarding run later, and
   without this line the footer reads as "closed Sunday" for everything. */
.foot__note { margin-top: .7rem; font-size: 14px; color: #c6b6ca; }
.foot__es strong { color: var(--yellow); }
.foot h2 { font-family: var(--display); font-weight: 600; font-size: 14px;
           letter-spacing: .06em; text-transform: uppercase; color: #c6b6ca; margin-bottom: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; min-width: 0; }
.foot a { color: #f3ebf5; text-decoration: none; font-size: 15px; overflow-wrap: anywhere; }
.foot a:hover { color: var(--pink); }
.foot__bottom { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12);
                display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: 13.5px; color: #a394a8; }
.foot__by { margin-left: auto; }
.foot__by a { font-size: 13.5px; color: #a394a8; }

/* ----------------------------------------------------------------- markers */
/* Everything the client has not answered yet.
   Acid lime, on purpose: the brand owns pink, teal and yellow, so a marker in
   any of those reads as part of the design rather than as a hole in it. This
   colour appears nowhere else, so it can only mean "this is missing".
   Black on it measures about 17:1, and it is a filled chip rather than
   coloured text so it does not depend on what sits behind it.
   overflow-wrap matters: a long marker otherwise sets a min-content width its
   grid column cannot shrink below, and the page grows wider than the phone. */
.todo {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: .82em;
  background: #ccff00; color: #000;
  border: 2px dashed #7a9b00; border-radius: 8px;
  padding: .1em .5em; overflow-wrap: break-word;
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 900px) {
  .hero__in, .feature__in, .split, .contact { grid-template-columns: 1fr; }
  .cards, .steps, .menu { grid-template-columns: 1fr; }
  .menu__block--wed { grid-column: auto; }
  .strip__in { grid-template-columns: 1fr 1fr; }
  .foot__in { grid-template-columns: 1fr 1fr; }
}

/* 900, not 760: the menu went from five items to seven, and seven plus the
   logo and the call button stopped fitting well before 760 -- the button ran
   off the right of the page at tablet width. */
@media (max-width: 900px) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--cream);
    border-bottom: 1px solid var(--line); padding: .4rem var(--gutter) 1rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .7rem .5rem; border-radius: 12px; }
  .burger { display: block; }
  .top__cta { display: none; }
  .top__in { position: relative; }
  .ticks--two { columns: 1; }
  .foot__in { grid-template-columns: 1fr; gap: 1.8rem; }
  .foot__by { margin-left: 0; }
}

/* ------------------------------------------------------------ price tables */
/* Her price sheet is the site's biggest advantage over the chains, who all say
   "call for pricing". Two values a row that people scan across to find their
   own dog, which is what a table is for -- not a list. */
.ptable {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 0;
  font-size: 15.5px;
}
.ptable th, .ptable td {
  text-align: left;
  padding: .62rem .8rem;
  border-bottom: 1px solid var(--line);
}
.ptable thead th {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--cream);
  border-bottom: 2px solid var(--line);
}
.ptable tbody th {
  font-weight: 500;
  color: var(--ink-mid);
}
.ptable tbody td {
  font-family: var(--display);
  font-weight: 600;
  color: var(--pink-deep);
  white-space: nowrap;
}
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td { border-bottom: 0; }

/* A tinted band, so eight sections in a row do not read as one long page. */
.sec--alt { background: var(--cream); }

/* The three "what happens next" steps stack in a column beside the form,
   rather than sitting three across as they do on a full-width section. */
.steps--stack { grid-template-columns: 1fr; gap: .9rem; }
.steps--stack .step { padding: 1rem 1.2rem; display: flex; align-items: flex-start; gap: .9rem; }
.steps--stack .step__n { width: 32px; height: 32px; font-size: 16px; margin: 0; flex: none; }
.steps--stack .step p { margin: .3rem 0 0; }

@media (max-width: 720px) {
  .ptable { font-size: 15px; }
  .ptable th, .ptable td { padding: .55rem .6rem; }
}

/* The size guide's second column is a weight, not a price. */
.ptable--plain tbody td { font-family: var(--sans); font-weight: 400; color: var(--ink-mid); }

/* --------------------------------------------------------------- photographs */
/* Her photos are portrait, taken on a phone over a grooming table. A masonry
   column layout suits them better than a fixed grid: it keeps every dog its
   real shape instead of cropping heads off to make squares. */
.shots { columns: 4; column-gap: 1rem; }
.shot {
  break-inside: avoid;
  margin: 0 0 1rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  line-height: 0;
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}
.shot:hover img { transform: scale(1.03); }

/* A short row of four, for a section that is not the gallery. */
.shots--row { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.shots--row .shot { margin: 0; }
.shots--row .shot img { aspect-ratio: 3 / 4; object-fit: cover; }

/* The hero and About photographs sit in their own column, so they get a shape
   rather than filling whatever space is left. */
.hero__img img, .feature__img img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}
.hero__img img { max-width: 420px; margin-inline: auto; }
.feature__img > img { max-width: 460px; }

@media (max-width: 900px) {
  .shots { columns: 3; }
  .shots--row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .shots { columns: 2; column-gap: .7rem; }
  .shot { margin-bottom: .7rem; }
}

/* Footer links were 20px tall on a phone, which is a small target for a thumb
   and the reason a mis-tap opens the wrong page. The text stays the same
   size; the tappable box around it grows. */
.foot__in a { display: inline-block; padding-block: .3rem; }

/* The same trick, for the rest of the links people actually aim at: a link
   sitting on its own line, the phone number and Instagram handle on the
   contact page, and the studio credit in the bottom bar. Vertical padding on
   an inline box grows the hit area without changing the line height, so
   nothing moves except the underline, which drops a couple of pixels.
   Links inside a sentence are deliberately left alone -- padding those would
   open up the spacing of the paragraph around them, and a reader mid-sentence
   is not thumbing for a target. */
.link { padding-block: .35rem; }
.rows a { padding-block: .35rem; }
.foot__by a { display: inline-block; padding-block: .4rem; }

@media (max-width: 620px) {
  .foot__in li { margin-bottom: .15rem; }
  .foot__in a { padding-block: .45rem; }
  .card .link { padding-block: .3rem; }
}