/* Gunslinger's Boot Town: see DESIGN.md */
@font-face { font-family: "Ultra"; src: url("fonts/ultra.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("fonts/bitter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("fonts/bitter-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --espresso: #2B211C;
  --espresso-2: #3A2C25;
  --parchment: #F1E8D9;
  --card: #FAF5EC;
  --rust: #A8472F;
  --rust-dark: #8A3824;
  --amber: #E8A25A;
  --dust: #B6A89A;
  --muted: #5E4E44;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
  --wrap: 72rem;
  --hang: 0 14px 28px -12px rgba(43, 33, 28, .45);
  --display: "Ultra", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --text: "Bitter", "Rockwell", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--parchment); color: var(--espresso);
  font: 400 1.125rem/1.6 var(--text);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rust-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--amber); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: .005em; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0 0 var(--s2); }
.lede { font-size: 1.25rem; color: var(--muted); max-width: 34ch; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: 65ch; }
.skip { position: absolute; left: -999px; top: 0; background: var(--espresso); color: #fff; padding: var(--s1) var(--s2); z-index: 10; }
.skip:focus { left: var(--s2); }
.eyebrow { font: 600 .82rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: var(--s1); }
.dark .eyebrow { color: var(--amber); }

/* sunset stripe from the logo */
.sunset { height: 8px; background: linear-gradient(90deg, var(--rust) 0 33%, #D57A45 33% 66%, var(--amber) 66%); }

/* ---------- header ---------- */
.site-header { background: var(--parchment); border-bottom: 1px solid rgba(43,33,28,.15); position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--espresso); text-decoration: none; }
.brand img { width: 56px; height: 56px; border: 1px solid var(--dust); }
.brand-name { font-family: var(--display); font-size: 1.2rem; line-height: 1; display: block; }
.brand-sub { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.brand:hover { color: var(--espresso); }
.nav-toggle { display: none; }
.menu-btn { font: 600 1rem var(--text); background: none; border: 2px solid var(--espresso); color: var(--espresso); padding: .5rem .9rem; cursor: pointer; min-height: 44px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.site-nav a { display: inline-block; padding: .6rem .75rem; color: var(--espresso); text-decoration: none; font-weight: 600; font-size: 1rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rust); text-decoration: underline; text-underline-offset: .35em; }
.site-nav .nav-call { background: var(--rust); color: #fff; margin-left: .25rem; }
.site-nav .nav-call:hover { background: var(--rust-dark); color: #fff; text-decoration: none; }
@media (max-width: 860px) {
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--parchment); border-bottom: 1px solid rgba(43,33,28,.15); padding: var(--s1) 1.25rem var(--s2); }
  .js .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { display: block; padding: .8rem .25rem; border-bottom: 1px solid rgba(43,33,28,.1); }
  .site-nav .nav-call { margin: var(--s1) 0 0; text-align: center; }
  .brand img { width: 48px; height: 48px; }
}
@media (min-width: 861px) { .menu-btn { display: none; } }
html:not(.js) .menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.3rem; font: 600 1.05rem/1.2 var(--text); text-decoration: none; border: 2px solid var(--rust); background: var(--rust); color: #fff; cursor: pointer; }
.btn:hover { background: var(--rust-dark); border-color: var(--rust-dark); color: #fff; text-decoration: none; }
.btn-line { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn-line:hover { background: var(--espresso); border-color: var(--espresso); color: var(--parchment); }
.dark .btn-line { color: var(--parchment); border-color: var(--parchment); }
.dark .btn-line:hover { background: var(--parchment); color: var(--espresso); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s3); }

/* ---------- address label (their photo tag) ---------- */
.label {
  display: inline-block; background: #fff; color: var(--espresso);
  font: italic 400 1.2rem/1.3 var(--text); padding: .5rem .9rem; border: 1px solid #ddd3c4;
  box-shadow: 0 2px 0 rgba(43,33,28,.08);
}
.label a { color: inherit; text-decoration: none; }
.label a:hover { text-decoration: underline; }
.label-lg { font-size: clamp(1.4rem, 3.6vw, 2.1rem); padding: .8rem 1.2rem; }

/* ---------- framed photo + hang tag ---------- */
.frame { background: var(--card); padding: .75rem .75rem 1rem; border: 1px solid #ddd3c4; box-shadow: var(--hang); position: relative; margin: 0; }
.frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tag {
  position: absolute; background: var(--parchment); color: var(--espresso);
  font: 600 .95rem/1.25 var(--text); padding: .55rem .9rem .55rem 1.5rem;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  border-left: 0;
}
.tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--espresso); }
.tag small { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.tag .price { font-family: var(--display); font-size: 1.1rem; color: var(--rust); }

/* ---------- home: spread ---------- */
.spread { padding-block: var(--s4) var(--s5); }
.spread .wrap { display: grid; gap: var(--s4); align-items: center; }
.spread h1 { max-width: 12ch; }
.spread .label { margin: var(--s1) 0 var(--s2); }
.spread-photo { max-width: 30rem; justify-self: center; width: 100%; }
.spread-photo .frame { transform: rotate(1deg); }
.spread-photo .tag { right: -.5rem; bottom: 2.5rem; }
@media (min-width: 860px) {
  .spread .wrap { grid-template-columns: 1.1fr 1fr; gap: var(--s5); }
  .spread { padding-block: var(--s5) var(--s6); }
}

/* ---------- boot wall ---------- */
.wall { background: var(--espresso); color: var(--parchment); padding-block: var(--s5); position: relative; }
.wall-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.wall-head h2 { margin: 0; }
.wall-head p { margin: 0; max-width: 34ch; color: #E3D6C2; }
.wall a { color: var(--amber); }
.shelf { list-style: none; margin: 0; padding: 0 0 var(--s3); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--amber) transparent; }
.shelf li { scroll-snap-align: start; position: relative; padding-top: 1.4rem; }
.shelf li::before { /* the hook and string */
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 1.4rem; background: var(--amber);
}
.shelf .frame { box-shadow: 0 18px 30px -14px rgba(0,0,0,.7); }
.shelf .frame img { aspect-ratio: 9 / 14; }
.shelf .cap { padding-top: .75rem; color: var(--espresso); }
.shelf .cap strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; display: block; line-height: 1.2; }
.shelf .cap span { font-size: .95rem; color: var(--muted); }
.shelf .cap .price { color: var(--rust); font-family: var(--display); }
.shelf-floor { height: 14px; background: #4A3A31; border-top: 3px solid #5D4A3E; margin-top: -.5rem; }
.wall .more { margin-top: var(--s3); }

/* ---------- special orders band ---------- */
.order-band { background: var(--espresso-2); color: var(--parchment); padding-block: var(--s5); }
.order-band .wrap { display: grid; gap: var(--s3); }
.order-line { font-family: var(--display); font-size: clamp(2rem, 6.5vw, 4.4rem); line-height: 1.05; margin: 0; }
.order-line a { color: var(--amber); text-decoration: none; white-space: nowrap; }
.order-line a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.order-band p { color: #E3D6C2; max-width: 52ch; }
.order-band cite { display: block; font: italic 1rem var(--text); color: #CDBEA8; margin-top: var(--s1); }
@media (min-width: 900px) { .order-band .wrap { grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--s5); } }

/* ---------- hats: quote + collage ---------- */
.hats { padding-block: var(--s6); }
.hats .wrap { display: grid; gap: var(--s5); align-items: center; }
.pull { margin: 0; font: italic 400 clamp(1.5rem, 3.4vw, 2.2rem)/1.35 var(--text); color: var(--espresso); border-left: 6px solid var(--amber); padding-left: var(--s3); }
.pull footer { font: 600 .95rem var(--text); font-style: normal; color: var(--muted); margin-top: var(--s2); }
.collage { position: relative; min-height: 26rem; max-width: 34rem; width: 100%; justify-self: center; }
.collage .frame { position: absolute; width: 56%; }
.collage .frame img { aspect-ratio: 4 / 5; }
.collage .c1 { left: 0; top: 0; transform: rotate(-3deg); }
.collage .c2 { right: 0; top: 2.5rem; transform: rotate(2.5deg); }
.collage .c3 { left: 22%; bottom: 0; width: 50%; transform: rotate(-.5deg); z-index: 2; }
.collage .c3 img { aspect-ratio: 8 / 7; }
@media (min-width: 900px) { .hats .wrap { grid-template-columns: 1fr 1fr; } .collage { min-height: 32rem; } }

/* ---------- ticket (on the road) ---------- */
.road { padding-block: 0 var(--s6); }
.ticket { display: grid; background: var(--card); border: 2px dashed var(--dust); max-width: 56rem; margin-inline: auto; }
.ticket-main { padding: var(--s4) var(--s3); }
.ticket-main h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.ticket-when { list-style: none; padding: 0; margin: var(--s2) 0; display: grid; gap: .3rem; }
.ticket-when li { display: grid; grid-template-columns: 8.5rem 1fr; border-bottom: 1px dotted var(--dust); padding-bottom: .3rem; }
.ticket-when b { font-weight: 600; }
.ticket-stub { border-top: 2px dashed var(--dust); padding: var(--s3); display: flex; align-items: center; justify-content: center; background: var(--parchment); }
.ticket-stub img { width: 100%; max-width: 15rem; border: 1px solid #ddd3c4; }
@media (min-width: 760px) {
  .ticket { grid-template-columns: 1fr 17rem; }
  .ticket-stub { border-top: 0; border-left: 2px dashed var(--dust); }
}

/* ---------- visit ---------- */
.visit { background: var(--card); border-top: 1px solid #ddd3c4; padding-block: var(--s5); }
.visit .wrap { display: grid; gap: var(--s4); }
.door-sign { background: var(--espresso); color: var(--parchment); padding: var(--s3); max-width: 24rem; border: 6px double var(--amber); text-align: center; }
.door-sign h3 { color: var(--amber); font-size: 1.5rem; }
.door-sign p { margin: 0 0 var(--s1); }
.door-sign .note { font-style: italic; color: #E3D6C2; font-size: 1rem; }
.door-sign a { color: var(--amber); }
@media (min-width: 860px) { .visit .wrap { grid-template-columns: 1.4fr 1fr; align-items: center; } .door-sign { justify-self: end; } }

/* ---------- inner pages ---------- */
.page-head { padding-block: var(--s5) var(--s4); }
.page-head h1 { max-width: 16ch; }
.page-head.with-photo .wrap { display: grid; gap: var(--s4); align-items: end; }
.page-head.with-photo .frame { max-width: 20rem; transform: rotate(-1.5deg); }
@media (min-width: 860px) { .page-head.with-photo .wrap { grid-template-columns: 1.5fr 1fr; } .page-head.with-photo .frame { justify-self: end; } }
.page-head.ruled { border-bottom: 1px solid rgba(43,33,28,.15); }
.page-head.ruled .wrap { border-left: 8px solid var(--rust); padding-left: var(--s3); }
.page-head.dark { background: var(--espresso); color: var(--parchment); }
.page-head.dark .lede { color: #E3D6C2; }

.section { padding-block: var(--s5); }
.section + .section { padding-top: 0; }
.section h2 { margin-bottom: var(--s3); }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s4) var(--s3); }
.gallery figure { margin: 0; }
.gallery figcaption { padding-top: .75rem; }
.gallery figcaption strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; display: block; }
.gallery figcaption span { color: var(--muted); font-size: 1rem; }
.gallery .price { color: var(--rust); font-family: var(--display); }

.feature { display: grid; gap: var(--s4); align-items: center; }
.feature .frame { max-width: 24rem; }
@media (min-width: 860px) { .feature { grid-template-columns: 22rem 1fr; } .feature.flip { grid-template-columns: 1fr 22rem; } .feature.flip .frame { order: 2; } }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; position: relative; padding-left: 3.5rem; max-width: 60ch; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -.2rem; font-family: var(--display); font-size: 2rem; color: var(--rust); line-height: 1; }
.steps h3 { margin-bottom: .3rem; }

.placeholder { border: 2px dashed var(--dust); background: rgba(255,255,255,.4); padding: var(--s2) var(--s3); font-style: italic; color: var(--muted); }
.dark .placeholder { color: #E3D6C2; background: transparent; }

.cta-strip { background: var(--espresso); color: var(--parchment); padding-block: var(--s4); }
.cta-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.cta-strip p { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.15; }

/* ---------- forms ---------- */
.form-card { background: var(--card); border: 1px solid #ddd3c4; padding: var(--s4) var(--s3); box-shadow: var(--hang); }
.form-grid { display: grid; gap: var(--s2) var(--s3); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label, fieldset legend { display: block; font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .9rem; }
input, select, textarea { width: 100%; font: 400 1.05rem/1.4 var(--text); color: var(--espresso); background: #fff; border: 1.5px solid #8F7F72; padding: .7rem .8rem; min-height: 48px; border-radius: 0; }
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--rust); outline-offset: 1px; border-color: var(--rust); }
fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; border: 1.5px solid #8F7F72; background: #fff; padding: .55rem .85rem; cursor: pointer; min-height: 44px; margin: 0; }
.chips input { width: auto; min-height: 0; margin: 0; accent-color: var(--rust); }
.chips label:has(input:checked) { border-color: var(--rust); background: #F6E3DA; }
.form-card .btn { margin-top: var(--s3); }
.form-note { font-size: .95rem; color: var(--muted); margin-top: var(--s2); }
.forms-two { display: grid; gap: var(--s5); }

/* ---------- contact list ---------- */
.contact-grid { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.reach { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.reach li { border-bottom: 1px solid rgba(43,33,28,.15); padding-bottom: var(--s2); }
.reach b { display: block; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.reach a { font-size: 1.2rem; }
.map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #ddd3c4; background: #E6DCCB; box-shadow: var(--hang); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- footer ---------- */
.site-footer { background: var(--espresso); color: #E3D6C2; padding: var(--s5) 0 var(--s4); }
.site-footer a { color: var(--parchment); }
.site-footer a:hover { color: var(--amber); }
.foot { display: grid; gap: var(--s4); }
.foot-brand { display: flex; gap: var(--s2); align-items: center; }
.foot-brand img { width: 84px; height: 84px; border: 3px solid var(--parchment); }
.foot-brand p { margin: 0; font-family: var(--display); color: var(--parchment); font-size: 1.5rem; line-height: 1.1; }
.foot-brand span { display: block; font: italic 400 1rem var(--text); color: #CDBEA8; margin-top: .3rem; }
.foot h2 { font-family: var(--text); font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--s1); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.foot ul a { display: inline-block; padding: .15rem 0; }
.foot .label { font-size: 1.05rem; }
.foot-base { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(241,232,217,.18); font-size: .95rem; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; }
@media (min-width: 860px) { .foot { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- 404 ---------- */
.lost { padding-block: var(--s6); text-align: left; }
.lost .big { font-family: var(--display); font-size: clamp(5rem, 20vw, 11rem); line-height: .9; color: var(--rust); margin: 0 0 var(--s2); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a, .chips label { transition: background-color .15s, color .15s, border-color .15s; }
  html { scroll-behavior: smooth; }
}

/* ---------- design pass (Nov 2026) ---------- */
/* footer address label + dark-section outline buttons were unreadable */
.site-footer .label a { color: var(--espresso); }
.site-footer .label a:hover { color: var(--rust); }
.wall .btn-line { color: var(--parchment); border-color: var(--parchment); }
.wall .btn-line:hover { background: var(--parchment); color: var(--espresso); }
.wall .more { margin-bottom: 0; }
.order-band .btn { margin-top: var(--s1); }

/* pull quote needed room before the next paragraph */
.pull { margin-bottom: var(--s3); }

/* home hero on phones: headline, then the boots, then the call button,
   so the 390x800 first screen shows name, a real product photo and one action */
@media (max-width: 859px) {
  .spread { padding-block: var(--s3) var(--s4); }
  .spread .wrap { gap: 1.25rem; }
  .spread-text { display: contents; }
  .spread h1 { order: 1; margin: 0; }
  .spread-photo { order: 2; max-width: 26rem; }
  .spread .actions { order: 3; margin-top: 0; }
  .spread .lede { order: 4; margin: 0; }
  .spread .label { order: 5; justify-self: start; margin: 0; }
  .spread-photo .frame { transform: rotate(.6deg); }
  .spread-photo .frame img { aspect-ratio: 4 / 3; object-position: 50% 64%; }
  .spread-photo .tag { bottom: 1.4rem; right: -.35rem; }
  .spread .actions .btn { flex: 1 1 auto; }
}

/* galleries: two across on phones instead of one huge photo each */
@media (max-width: 639px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
  .gallery .frame { padding: .4rem .4rem .55rem; }
  .gallery figcaption strong { font-size: 1rem; }
  .gallery figcaption span { font-size: .9rem; display: block; line-height: 1.35; }
  .feature .frame { max-width: 17rem; }
  .page-head.with-photo .frame { max-width: 14rem; justify-self: end; }
  .form-card { padding: var(--s3) 1.1rem; }
}
@media (min-width: 900px) { .gallery-4 { grid-template-columns: repeat(4, 1fr); } }

/* boots: "back in the shop" feature */
.botw { display: grid; gap: var(--s4); align-items: center; }
.botw-photo { max-width: 22rem; transform: rotate(-1.2deg); }
.botw-photo img { aspect-ratio: 9 / 13; }
.botw h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 14ch; }
.tag-price { right: -.75rem; top: 2rem; }
.tag-price .price { font-size: 1.6rem; display: block; line-height: 1; }
@media (min-width: 860px) { .botw { grid-template-columns: 22rem 1fr; gap: var(--s5); } }

/* boots: fit steps across a dark band */
.fit { background: var(--espresso); color: var(--parchment); padding-block: var(--s5); }
.fit h2 { margin-bottom: var(--s4); }
.fit .steps li::before { color: var(--amber); }
.fit .steps p { color: #E3D6C2; }
@media (min-width: 860px) { .steps-row { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.cta-strip.light { background: var(--card); color: var(--espresso); border-bottom: 1px solid #ddd3c4; }

/* inner page heads: no more empty half */
.page-head .split { display: grid; gap: var(--s2) var(--s4); }
.page-head .split .lede { margin-bottom: var(--s2); }
@media (min-width: 860px) {
  .page-head .split { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .page-head .split h1 { margin: 0; }
}
.page-head.dark.with-photo .frame { max-width: 17rem; }
.page-head.dark.with-photo .tag { left: -.6rem; bottom: 1.8rem; }
.page-head.dark .btn-line { color: var(--parchment); border-color: var(--parchment); }
.page-head.dark .btn-line:hover { background: var(--parchment); color: var(--espresso); }
@media (max-width: 859px) { .page-head.with-photo .frame { transform: rotate(1.5deg); } }

/* special orders: cards narrower and staggered, not two full-width slabs */
.forms-two .form-card { max-width: 54rem; scroll-margin-top: var(--s2); }
@media (min-width: 1000px) { .forms-two #hat { justify-self: end; width: 100%; max-width: 46rem; } }

/* on-the-road ticket: flyer fills its stub */
@media (min-width: 760px) { .ticket { grid-template-columns: 1fr 19rem; } .ticket-stub img { max-width: 100%; } }