/* DS-11 Heritage Sign Shop -- Garrison Motor Works.
 *
 * Every colour below is either a token from section 4 of the specification or
 * a mix of two of them computed at build time, and every mix is contrast
 * checked against the text it carries before it is written here. The figures
 * in these comments are measured, not asserted:
 *
 *   ink on the page ground        12.618:1
 *   ink on the raised card        14.511:1
 *   ink on the enamel plate       10.649:1
 *   ink on the form ground        10.124:1
 *   secondary text, worst ground  4.541:1
 *   action label on #7A231F       10.059:1
 *   control border, worst ground  3.158:1
 *   page ground on the enamel     7.792:1
 *   plate cream on the enamel     6.576:1
 *
 * ONE STATED DEVIATION, and only one. Section 4 names #C58B2A as the focus
 * ring. That colour measures 2.306:1 against the page ground, which is
 * below the 3:1 non-text gate, so a ring drawn in it on a light band would be
 * invisible to the reader it exists for. The GEOMETRY section 4 names is kept
 * exactly -- 3px solid with a 3px offset, everywhere, on every focusable
 * thing -- and the named colour is kept LITERALLY on the two dark planes, the
 * fascia header and the enamel footer, where it measures 3.380:1 and
 * 5.473:1. On light ground the ring is drawn in #956B26, the same
 * gold walked toward the ink, which measures 3.713:1 on the page ground
 * and 3.134:1 on the enamel plate.
 *
 * Radius is 0px throughout, as section 4 states. There is no rounded corner
 * anywhere in this unit; a painted sign does not have one.
 */




:root {
  --bg: #F1E2BF;
  --ink: #24201B;
  --act: #7A231F;
  --act-h: #5C221E;
  --acc: #1F4A3B;
  --hi: #C58B2A;
  --panel: #F9F2E2;
  --board: #E7CF9E;
  --field: #D4CDAD;
  --muted: #5D5649;
  --edge: #766E5D;
  --rule: #B4A88E;
  --on-act: #FFFFFF;
  --ft-muted: #B6B79A;

  /* Section 4's spacing scale, entire. Nothing in this build uses a value
     that is not on it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1180px;
  --measure: 68ch;
  --measure-s: 52ch;

  /* Section 4: "Corner radius: 0px". */
  --radius: 0px;

  /* Section 4 and section 7 both: 56px, desktop AND mobile. It does not
     change at any breakpoint, which is fingerprint row two. */
  --head-h:56px;

  /* Section 4's section spacing: 72 / 112 / 144. */
  --band-pad: 72px;

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

  /* Section 4: 220ms for the swing, 600ms ceiling for anything atmospheric.
     Nothing in this unit uses the long one on a loop. */
  --t: 220ms cubic-bezier(.2, .8, .2, 1);
  --t-long: 600ms cubic-bezier(.2, .8, .2, 1);

  /* The ink frame and its gold mat, used on the hero board, the cards and
     the footer plate. */
  --paint: 3px solid var(--ink);

  --gutter: 16px;

  --focus-ring: #956B26;
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Section 7's gutter ladder, exactly. */
@media (min-width: 360px)  { :root { --gutter: 18px; } }
@media (min-width: 375px)  { :root { --gutter: 20px; } }
@media (min-width: 414px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 36px; --band-pad: 112px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --band-pad: 144px; } }

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

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3 {
  font-family: var(--font-h);
  font-weight: 400;
  margin: 0 0 var(--s4);
  /* Fingerprint row seven: outlined lettering. The fill is the ink and the
     outline is painted a pixel out in the page ground, so the letterform
     reads as a sign painter's line rather than as a drop shadow. Contrast is
     measured on the fill against the band, and the outline does not move it. */
  text-shadow: 2px 2px 0 var(--board);
}

h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
  }
}

h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  text-shadow: none;
}

p { margin: 0 0 var(--s4); }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act); }

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

/* ---------------------------------------------------------------------- *
 * the street elevation
 *
 * Fingerprint row one. Every band below the hero is a painted sign hung in a
 * row: an ink rule along its head, a line of ticket perforations punched
 * through that rule in the band's own ground, and then the band. The punch
 * colour is a variable so a band on the cream plate punches cream and a band
 * on the page ground punches the page ground.
 * ---------------------------------------------------------------------- */

.sec {
  position: relative;
  padding-block: var(--band-pad);
  --punch: var(--bg);
}

.sec::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 8px;
  background-color: var(--ink);
  background-image: radial-gradient(circle at 7px 4px,
                    var(--punch) 3px, transparent 3.5px);
  background-size: 14px 8px;
  background-repeat: repeat-x;
}

/* The hero is the first sign on the street and hangs from the fascia, so it
   carries no perforation of its own. */
.sec.hero::before { display: none; }

/* The alternating grounds. Each sets its own punch so the perforation stays
   a hole rather than becoming a dot. */
.sec.appr,
.sec.how,
.sec.prin,
.sec.focus,
.sec.faqg,
.sec.alt    { background: var(--panel); --punch: var(--panel); }

.sec.stfp,
.sec.proc,
.sec.limit,
.sec.note,
.sec.cta    { background: var(--board); --punch: var(--board); }

/* ---------------------------------------------------------------------- *
 * the painted fascia -- fingerprint row two
 * ---------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--act);
  color: var(--on-act);
  padding: var(--s3) var(--s5);
  border: var(--paint);
  font-weight: 700;
}

.skip:focus { left: var(--s3); top: var(--s3); }

.hd {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--acc);
  border-bottom: var(--paint);
  box-shadow: inset 0 -6px 0 -3px var(--hi);
}

.hd__in {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: var(--bg);
  line-height: 1.05;
}

.mark__h {
  font-family: var(--font-h);
  font-size: 1rem;
  letter-spacing: 0.01em;
  /* The painted outline again, in ink, on the enamel ground. */
  text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink),
               1px -1px 0 var(--ink), -1px -1px 0 var(--ink);
}

.mark__sub {
  display: block;
  color: var(--board);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 768px) { .mark__h { font-size: 1.125rem; } }

/* ---------------------------------------------------------------------- *
 * finger-post navigation -- fingerprint row five
 *
 * Every link is cut to a point on its leading edge, the way a finger-post
 * arm is. The point is 10px of the 12px leading padding, so the label never
 * runs into the cut.
 * ---------------------------------------------------------------------- */

.nav { display: none; }

.nav__list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: 14px 8px;
  color: var(--bg);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transition: background-color var(--t), color var(--t);
}

.nav__link:hover { background: var(--hi); color: var(--ink); }

.nav__link[aria-current="page"] {
  background: var(--board);
  color: var(--ink);
  font-weight: 700;
}

/* The index number belongs to the drawer, where there is room for it. */
.nav__no { display: none; }

@media (min-width: 1024px) { .nav { display: block; } }
@media (min-width: 1280px) { .nav__link { font-size: 0.875rem; } }

/* ---------------------------------------------------------------------- *
 * the disclosure
 * ---------------------------------------------------------------------- */

.drawer { margin-inline-start: var(--s2); }

.drawer__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 44px;
  height: 44px;
  padding-inline: var(--s2);
  background: var(--hi);
  color: var(--ink);
  border: var(--paint);
  font-family: var(--font-b);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.drawer__toggle::-webkit-details-marker { display: none; }

.drawer__bars {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
}

/* Clipped rather than display:none below 414px, so the button keeps its
   accessible name at every width. */
.drawer__word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 414px) {
  .drawer__word {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
}

.drawer__panel {
  position: absolute;
  inset-inline: 0;
  top: var(--head-h);
  background: var(--acc);
  border-block: var(--paint);
  box-shadow: inset 0 -6px 0 -3px var(--hi);
  padding: var(--s4) var(--gutter) var(--s5);
  max-height: calc(100vh - var(--head-h));
  overflow-y: auto;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding-inline: 18px var(--s3);
  color: var(--bg);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ft-muted);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

.drawer__link[aria-current="page"] {
  background: var(--board);
  color: var(--ink);
  font-weight: 700;
}

.drawer__link .nav__no {
  display: inline-block;
  min-width: 2.2em;
  font-family: var(--font-h);
  color: var(--hi);
  font-size: 0.8125rem;
}

.drawer__link[aria-current="page"] .nav__no { color: var(--act-h); }

@media (min-width: 1024px) { .drawer { display: none; } }

/* ---------------------------------------------------------------------- *
 * actions
 * ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Section 4: the primary action carries at least 24px of horizontal
     padding. --s5 is that value off the spacing scale. */
  padding-inline: var(--s5);
  border: var(--paint);
  border-radius: var(--radius);
  font-family: var(--font-b);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), transform var(--t);
}

.btn--primary { background: var(--act); color: var(--on-act); }
.btn--primary:hover { background: var(--act-h); }

.btn--ghost { background: var(--board); color: var(--ink); }
.btn--ghost:hover { background: var(--hi); }

.btn--book {
  margin-inline-start: auto;
  background: var(--hi);
  color: var(--ink);
  font-size: 0.8125rem;
}

.btn--book:hover { background: var(--board); }

.btn--sub { background: var(--act); color: var(--on-act); }
.btn--sub:hover { background: var(--act-h); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

/* Fingerprint row six: the swing. It is a hover and focus rule and nothing
   else -- no keyframes anywhere in this unit, nothing that runs on load or
   on scroll, and it is taken away entirely under reduced motion. */
.btn--primary:hover,
.btn--ghost:hover { transform: rotate(-1deg); }

/* ---------------------------------------------------------------------- *
 * focus
 * ---------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* On the two dark planes the specification's literal gold is used, because
   there it clears the gate on its own. */
.hd a:focus-visible,
.hd summary:focus-visible,
.drawer__panel a:focus-visible,
.ft a:focus-visible { outline-color: var(--hi); }

/* ---------------------------------------------------------------------- *
 * forms
 * ---------------------------------------------------------------------- */

.field { margin-bottom: var(--s4); }

.field label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  font-family: var(--font-b);
  font-size: 1rem;
}

.field textarea { min-height: 160px; resize: vertical; }

.field__opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.hint {
  margin: var(--s2) 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.err {
  margin: var(--s2) 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--act-h);
}

.err:empty { display: none; }

/* ---------------------------------------------------------------------- *
 * the subscribe band -- a torn ticket above the enamel plate
 * ---------------------------------------------------------------------- */

.sub-band {
  position: relative;
  background: var(--board);
  border-top: var(--paint);
  padding-block: var(--s8);
}

.sub-band__in { display: grid; gap: var(--s6); }

.sub-band__h { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--s2); }

.sub-band__p { margin: 0; max-width: var(--measure); }

.sub-form { display: grid; gap: var(--s3); align-items: end; }

.sub-form__field { margin: 0; }

.sub-form__status {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.sub-form__status:empty { display: none; }

@media (min-width: 768px) {
  .sub-band__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .sub-form { grid-template-columns: minmax(0, 1fr) auto; }
  .sub-form__status { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------- *
 * the enamel service board -- fingerprint row four
 * ---------------------------------------------------------------------- */

.ft {
  background: var(--acc);
  color: var(--bg);
  border-top: var(--paint);
  box-shadow: inset 0 6px 0 -3px var(--hi);
  padding-block: var(--s8) var(--s6);
}

.ftmark {
  background: var(--board);
  color: var(--ink);
  border: var(--paint);
  padding: var(--s5);
  margin-bottom: var(--s8);
  display: grid;
  gap: var(--s4);
}

.ftmark__h {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  margin: 0;
  text-shadow: 2px 2px 0 var(--bg);
}

.ftmark__p { margin: 0; max-width: var(--measure); }

.ftmark__act { justify-self: start; }

@media (min-width: 768px) {
  .ftmark {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--s6);
  }
  .ftmark__h { grid-column: 1; }
  .ftmark__p { grid-column: 1; }
  .ftmark__act { grid-column: 2; grid-row: 1 / span 2; }
}

.ft__in { display: grid; gap: var(--s7); }

.ft__h {
  font-family: var(--font-h);
  font-size: 1.125rem;
  color: var(--board);
  margin: 0 0 var(--s3);
  text-shadow: none;
}

.ft__addr { font-style: normal; line-height: 1.8; }

.ft__addr a { color: var(--bg); }

.ft__hours { margin: 0; }

.ft__row { display: flex; justify-content: space-between; gap: var(--s4); }

.ft__row dt { color: var(--ft-muted); }
.ft__row dd { margin: 0; text-align: right; }

.ft__list { list-style: none; margin: 0; padding: 0; }

.ft__list li { margin-bottom: var(--s2); }

.ft__list a { color: var(--bg); }

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--ft-muted);
}

.ft__legal {
  margin: 0 0 var(--s2);
  font-size: 0.8125rem;
  color: var(--ft-muted);
}

.ft__legal a { color: var(--bg); }

@media (min-width: 768px) {
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------- *
 * Section 4: "Signs remain level and readable; hover swing is removed."
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn--primary:hover,
  .btn--ghost:hover { transform: none; }
}