/* The Kickin' Crab — menu.html page styles (loaded after site.css). */
/* ---------- Header band: this page's polaroid + type overrides ---------- */
.menu-band__h1 { font-size: clamp(40px, 5.4vw, 64px); }
.menu-band__lede { max-width: 52ch; }
.band-photo--menu { --tilt: -1.6deg; --tape-tilt: -2.4deg; }
.band-photo--menu .band-photo__tape { width: 118px; height: 34px; }
.band-photo--menu figcaption { font-size: 19px; padding: 14px 6px 20px; }
/* Sized only above site.css's 820px stacking breakpoint so the shared mobile rules still win. */
@media (min-width: 821px) {
.band-photo--menu { flex: 0 1 356px; width: 356px; }
.band-photo--menu img { height: 262px; }
}
/* ---------- Sticky jump nav ---------- */
.menu-jump {
background: var(--kc-sand); border-bottom: 2px solid var(--kc-line); padding: 16px 24px;
position: sticky; top: 0; z-index: 30;
}
.menu-jump__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-jump__link {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
background: var(--kc-teal); color: var(--kc-cream); text-decoration: none;
font-weight: 700; font-size: 14.5px; letter-spacing: .03em;
}
.menu-jump__link:hover { background: var(--kc-brick); color: var(--kc-cream); }
/* ---------- Main column & sections ---------- */
.menu-main { max-width: 1080px; margin: 0 auto; padding: 48px 24px 24px; display: flex; flex-direction: column; gap: 64px; }
.menu-section { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 96px; }
.menu-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.menu-h2 {
margin: 0; font-family: 'Caprasimo', serif; font-weight: 400;
font-size: clamp(32px, 5vw, 50px); line-height: 1; color: var(--kc-brick);
}
.menu-h3-display { margin: 14px 0 0; font-family: 'Caprasimo', serif; font-weight: 400; font-size: 30px; color: var(--kc-teal); scroll-margin-top: 96px; }
.menu-lede { margin: 0; font-style: italic; font-size: 18px; color: var(--kc-ink-2); }
.menu-lede--narrow { max-width: 62ch; }
.menu-key { margin: 0; font-size: 15.5px; color: var(--kc-ink-2); }
.veg-v { font-weight: 700; color: var(--kc-green); }
.veg-v--sm { font-size: 15px; }
/* ---------- Described items (Appetizers, Soups, Plate) ---------- */
.menu-list {
list-style: none; margin: 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 22px 40px;
}
.menu-list--plate { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Seafood in a Bag: photo strip above the price rows */
.menu-strip {
list-style: none; margin: 4px 0 8px; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.menu-strip li { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--kc-line); background: var(--kc-sand); }
.menu-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.menu-strip__img--clams { object-position: 50% 100%; transform: scale(1.14); transform-origin: 50% 100%; }
.menu-strip span {
position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px;
background: linear-gradient(to top, rgba(42, 20, 8, .82), rgba(42, 20, 8, 0));
color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
@media (max-width: 760px) { .menu-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-item__name { margin: 0; font-weight: 800; color: var(--kc-teal); font-size: 18.5px; }
.menu-item__cal { font-weight: 400; font-size: 15px; color: var(--kc-ink-3); }
.menu-item__desc { margin: 4px 0 0; font-size: 16px; color: var(--kc-ink-2); }
.menu-item__thumb { display: none; } /* phone-only, see the phone block */
/* Phone-only elements (shown in the phone block) */
.menu-band__short, .menu-jump__short, .menu-strip__short, .menu-h2__short, .combo-grid__note, .menu-notes__summary { display: none; }
/* ---------- Combo deal cards ---------- */
.combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; }
.combo { background: var(--kc-cream-2); border: 3px solid var(--kc-teal); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.combo__h3 { margin: 0; font-family: 'Caprasimo', serif; font-weight: 400; font-size: 24px; padding: 14px 18px; line-height: 1.15; }
.combo__h3--brick { background: var(--kc-brick); color: var(--kc-cream-2); }
.combo__h3--teal { background: var(--kc-teal); color: var(--kc-cream); }
.combo__h3--cocoa { background: #3A1D15; color: #FFFFFF; }
.combo__cal { display: block; font-family: 'Figtree', sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.combo__h3--brick .combo__cal { color: #ffffff; }
.combo__h3--teal .combo__cal { color: #d9e5e3; }
.combo__h3--cocoa .combo__cal { color: #F7ECD8; }
.combo__img { width: 100%; height: 190px; object-fit: cover; display: block; }
.combo__body { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.combo__pick { margin: 0 0 6px; font-weight: 800; color: var(--kc-teal); letter-spacing: .02em; }
.combo__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.combo__note { margin: auto 0 0; font-size: 14.5px; font-style: italic; color: var(--kc-ink-3); }
/* ---------- Column grids (Bag 1-2-3, Extras, Sides, Drinks) ---------- */
.kc-bag-1d { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 40px); }
.kc-bag-1d-b {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 40px);
padding-top: 22px; border-top: 2px solid var(--kc-line-3);
}
.kc-sides { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: clamp(22px, 3.4vw, 40px); align-items: start; }
.kc-drinks { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 40px); align-items: start; }
.menu-col { min-width: 0; }
.menu-col--stack { display: flex; flex-direction: column; gap: 22px; }
.menu-col__head { display: flex; align-items: center; gap: 10px; }
.menu-col__head--tall { min-height: 30px; }
.menu-col__head--base { align-items: baseline; flex-wrap: wrap; }
.menu-col__meta { font-size: 14.5px; color: #55443A; }
.menu-num {
display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
background: var(--kc-brick); color: #fff; font-family: 'Caprasimo', serif; font-weight: 400; font-size: 16px;
}
.menu-h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kc-teal); }
.menu-colnote { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: #55443A; }
/* Flex/grid children default to min-width:auto, which lets a long word push them past
their box; min-width:0 lets the text wrap inside instead (works at any width). */
.menu-row__name, .menu-row__cal, .menu-item__name, .menu-item__desc, .menu-col, .combo__body, .combo__h3,
.menu-pill, .menu-note, .menu-list > li, .menu-strip li { min-width: 0; }
/* Name / calorie rows */
.menu-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.menu-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0;
border-bottom: 1px solid var(--kc-line-3); font-size: 16.5px; line-height: 1.3;
}
.menu-row__name { font-weight: 700; color: var(--kc-ink); min-width: 0; }
.menu-row__sub { font-weight: 400; color: #55443A; }
.menu-row__sub--sm { font-size: 14.5px; }
.menu-row__cal { color: #55443A; font-size: 14.5px; flex: 0 1 auto; min-width: 0; text-align: right; }
.menu-row__warn { color: var(--kc-brick); font-weight: 600; }
.menu-flames { display: inline-flex; gap: 1px; margin-left: 8px; vertical-align: -2px; white-space: nowrap; }
.veg {
display: inline-block; margin-left: 6px; border: 2px solid #4A6B3D; color: #3F5A34; border-radius: 4px;
padding: 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; vertical-align: 1px;
}
/* Condiment / soft-drink chips */
.menu-pills { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-pill {
padding: 8px 14px; border: 1.5px solid var(--kc-line-3); border-radius: 999px; background: var(--kc-cream-2);
font-size: 15px; font-weight: 700; color: var(--kc-ink);
}
/* ---------- "Good to know" notes ---------- */
.menu-notes { background: var(--kc-sand); color: var(--kc-ink-4); margin-top: 56px; padding: 44px 24px 56px; border-top: 10px solid var(--kc-brick); }
.menu-notes__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.menu-notes__h2 { margin: 0; font-family: 'Caprasimo', serif; font-weight: 400; font-size: 30px; color: var(--kc-teal); }
.menu-notes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.menu-note { background: var(--kc-cream-2); border: 2px solid var(--kc-line); border-radius: 18px; padding: 20px; }
.menu-note__h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--kc-teal); letter-spacing: .04em; text-transform: uppercase; }
.menu-note__p { margin: 0; font-size: 16.5px; }
.menu-note__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16.5px; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.kc-drinks, .kc-sides, .kc-bag-1d, .kc-bag-1d-b { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Design-system baseline ----------
The Menu mockup was the only page that loaded the "Organic" design-system
stylesheet (_ds/…/styles.css). These are the global rules from it that the
page's own styles never overrode, so the layout depends on them. */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8.8px; }
p { margin: 0 0 13.2px; }
img { display: block; }
figure { margin: 0; }
figcaption { margin-top: 4.4px; }
/* =====================================================================
PHONE LAYOUT (≤760px). Only applies at phone widths; desktop untouched.
Order on phones: Build-a-bag hero card, Combo Deals, then the lists —
done with flex `order`, so the DOM (and desktop) never changes.
Type scale: h2 30 · subhead 13 caps · item 17 · desc 15 · cal 13.5.
===================================================================== */
@media (max-width: 760px) {
/* ---- Header: compact strip, no polaroid ---- */
.kc-band { padding: 22px 16px 24px; }
.band-photo--menu { display: none; }
.menu-band__h1 { font-size: 40px; }
.menu-band__lede { display: none; }
.menu-band__short { display: block; font-size: 15px; margin-top: 4px; opacity: .85; }
/* ---- Sticky jump nav: outline chips, brick when current, short labels ---- */
.menu-jump { padding: 10px 0; }
.menu-jump__list { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu-jump__list::-webkit-scrollbar { display: none; }
.menu-jump__list li { flex: none; scroll-snap-align: start; }
.menu-jump__list li:nth-child(3) { order: -2; } /* Bag */
.menu-jump__list li:nth-child(2) { order: -1; } /* Combos */
.menu-jump__long { display: none; }
.menu-jump__short { display: inline; }
.menu-jump__link { min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; background: transparent; color: var(--kc-teal); border: 2px solid var(--kc-teal); }
.menu-jump__link:hover { background: transparent; color: var(--kc-teal); }
.menu-jump__link.is-current { background: var(--kc-brick); border-color: var(--kc-brick); color: var(--kc-cream); }
.menu-main { padding: 16px 16px 24px; gap: 0; }
.menu-section { gap: 16px; padding: 24px 0; border-bottom: 2px solid var(--kc-line); scroll-margin-top: 62px; }
.menu-section:last-of-type { border-bottom: 0; }
.menu-section__head { align-items: baseline; }
.menu-h2 { font-size: 30px; }
#bag { order: -2; }
#combos { order: -1; }
/* ---- Hero card: Seafood in a Bag ---- */
#bag {
background: var(--kc-teal); color: var(--kc-cream); border-radius: 22px; border-bottom: 0;
padding: 22px 18px 20px; margin: 2px 0 10px; gap: 14px; scroll-margin-top: 70px;
}
#bag .menu-h2 { color: var(--kc-cream); font-size: 34px; }
#bag .menu-h2::before {
content: 'Build your own'; display: block; margin-bottom: 6px;
font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kc-amber);
}
#bag .menu-lede { color: rgba(247, 236, 216, .82); font-size: 16px; }
/* one row of four square photos, labels under */
#bag .menu-strip { margin: 2px 0 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; }
#bag .menu-strip li { border: 0; background: transparent; overflow: visible; border-radius: 0; }
#bag .menu-strip img { aspect-ratio: 1 / 1; border-radius: 12px; border: 2px solid rgba(247, 236, 216, .35); }
#bag .menu-strip__img--clams { transform: none; object-position: 50% 80%; }
#bag .menu-strip span { position: static; display: block; padding: 6px 0 0; background: none; text-align: center; font-size: clamp(9px, 3.2vw, 12px); letter-spacing: .04em; color: var(--kc-cream); line-height: 1.15; }
#bag .menu-strip span.menu-strip__long { display: none; }
@media (max-width: 340px) { #bag .menu-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bag .menu-strip span { font-size: 12px; } }
#bag .menu-strip span.menu-strip__short { display: inline; padding: 0; }
/* step rail: numbered dots on a vertical line */
#bag .kc-bag-1d, #bag .kc-bag-1d-b { gap: 0; }
#bag .kc-bag-1d-b { padding-top: 0; border-top: 0; }
#bag .menu-col { position: relative; padding: 0 0 22px 42px; }
#bag .menu-col::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: rgba(247, 236, 216, .22); }
#bag .kc-bag-1d-b .menu-col:last-child { padding-bottom: 0; }
#bag .kc-bag-1d-b .menu-col:last-child::before { display: none; }
#bag .menu-col__head { min-height: 30px; }
#bag .menu-num { position: absolute; left: 0; top: 0; background: var(--kc-brick); color: #fff; box-shadow: 0 0 0 4px var(--kc-teal); }
/* Step 4: dot on the rail, both columns indented equally under it */
#bag .kc-bag-1d-b { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding-left: 42px; }
#bag .kc-bag-1d-b .menu-col { padding-left: 0; padding-bottom: 0; }
#bag .kc-bag-1d-b .menu-col::before { display: none; }
#bag .kc-bag-1d-b .menu-col:first-child .menu-num { left: -42px; }
#bag .kc-bag-1d-b .menu-col:last-child .menu-col__head { padding-top: 4px; }
#bag .kc-bag-1d-b .menu-col:last-child .menu-h3 { color: rgba(247, 236, 216, .7); font-size: 12px; }
#bag .kc-bag-1d-b .menu-row { flex-direction: column; align-items: flex-start; gap: 0; }
#bag .kc-bag-1d-b .menu-row__cal { font-size: 12.5px; text-align: left; }
#bag .menu-h3 { color: var(--kc-amber); }
#bag .menu-rows { margin-top: 8px; }
#bag .menu-row { border-bottom-color: rgba(247, 236, 216, .18); padding: 8px 0; font-size: 16px; }
#bag .menu-row__name { color: var(--kc-cream); }
#bag .menu-row__sub, #bag .menu-row__cal, #bag .menu-colnote, #bag .menu-col__meta { color: rgba(247, 236, 216, .74); }
#bag .menu-row__warn { color: var(--kc-amber); }
#bag .veg { border-color: rgba(247, 236, 216, .6); color: var(--kc-cream); }
/* Seafood (1): two-column tiles, name over calorie range */
#bag .kc-bag-1d .menu-col:nth-child(1) .menu-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
#bag .kc-bag-1d .menu-col:nth-child(1) .menu-row { flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 11px; border: 1.5px solid rgba(247, 236, 216, .3); border-radius: 12px; background: rgba(0, 0, 0, .14); font-size: 15px; line-height: 1.2; }
#bag .kc-bag-1d .menu-col:nth-child(1) .menu-row__cal { font-size: 12.5px; text-align: left; }
#bag .kc-bag-1d .menu-col:nth-child(1) .menu-row__sub { display: block; font-size: 12.5px; }
/* Seasoning (2) and Spice (3): chips */
#bag .kc-bag-1d .menu-col:nth-child(2) .menu-rows, #bag .kc-bag-1d .menu-col:nth-child(3) .menu-rows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#bag .kc-bag-1d .menu-col:nth-child(2) .menu-row, #bag .kc-bag-1d .menu-col:nth-child(3) .menu-row {
flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1.5px solid rgba(247, 236, 216, .45); border-bottom-width: 1.5px; border-radius: 12px; font-size: 15px; line-height: 1.2;
}
#bag .kc-bag-1d .menu-col:nth-child(2) .menu-row__cal, #bag .kc-bag-1d .menu-col:nth-child(3) .menu-row__cal { font-size: 12.5px; text-align: left; }
#bag .menu-flames { margin-left: 5px; }
/* ---- Combo deals: compact offer cards ---- */
.combo-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.combo { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: 'img head' 'body body'; border-width: 2px; border-radius: 16px; }
.combo__h3 { grid-area: head; font-size: 21px; min-height: 96px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
.combo__img { grid-area: img; position: absolute; inset: 0; width: 100%; height: 100%; } /* abs-pos grid item fills its grid area */
.combo__body { grid-area: body; padding: 12px 14px 14px; gap: 6px; }
.combo__pick { display: inline; margin: 0 4px 0 0; font-size: 15px; }
.combo__list { display: inline; padding: 0; font-size: 15px; line-height: 1.45; color: var(--kc-ink-2); }
.combo__list li { display: inline; }
.combo__list li:not(:last-child)::after { content: ', '; }
.combo__note { display: none; }
.combo-grid__note { display: block; margin: 0; font-size: 13.5px; font-style: italic; color: var(--kc-ink-3); }
/* ---- Described items: tight rows, hairlines, optional thumbnail ---- */
.menu-key { font-size: 14px; }
.menu-list { gap: 0; }
.menu-list > li {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name thumb' 'desc thumb'; column-gap: 14px;
padding: 12px 0; border-bottom: 1px solid var(--kc-line-3);
}
.menu-list > li:last-child { border-bottom: 0; }
.menu-item__name { grid-area: name; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 17px; }
.menu-item__cal { margin-left: auto; font-size: 13.5px; }
.menu-item__desc { grid-area: desc; font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-item__thumb { grid-area: thumb; display: block; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; align-self: center; border: 1.5px solid var(--kc-line); }
.menu-section .veg-v { font-size: 0; }
.menu-section .veg-v::before {
content: 'V'; display: inline-block; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .06em;
border: 2px solid #4A6B3D; color: #3F5A34; border-radius: 4px; padding: 2px 4px 1px; vertical-align: 2px;
}
/* Appetizers: each group (and Soups) on a sand tile, built by menu.js */
#appetizers > .menu-list { gap: 10px; }
.menu-group { display: block !important; padding: 2px 16px 4px !important; border: 0 !important; background: var(--kc-sand); border-radius: 16px; }
.menu-group__h3 { margin: 0; padding: 12px 0 2px; font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kc-brick); }
.menu-list--group > li:last-child { border-bottom: 0; }
#appetizers { gap: 12px; }
/* ---- Seafood on a Plate: framed list ---- */
#plate .menu-list { background: var(--kc-cream-2); border: 2px solid var(--kc-line); border-radius: 18px; padding: 4px 16px; }
/* ---- Sides & Drinks: sand tiles ---- */
.menu-h2__long { display: none; }
.menu-h2__short { display: inline; }
.kc-sides, .kc-drinks, .menu-col--stack { gap: 12px; }
#sides .menu-col, #drinks .menu-col:not(.menu-col--stack) { background: var(--kc-sand); border-radius: 16px; padding: 14px 16px 16px; }
.menu-col__head--base { flex-direction: column; align-items: flex-start; gap: 2px; }
.menu-col__meta { font-size: 13px; font-style: italic; }
.menu-rows { margin-top: 8px; }
.menu-row { padding: 8px 0; font-size: 16px; }
.menu-pills { margin-top: 10px; }
#drinks .menu-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#drinks .menu-pill { text-align: center; padding: 9px 10px; font-size: 14.5px; }
/* ---- Good to know: one collapsible at the bottom, closed by default ---- */
.menu-notes { margin-top: 24px; padding: 22px 16px 28px; scroll-margin-top: 62px; }
.menu-notes__inner { gap: 14px; }
.menu-notes__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-notes__h2 { font-size: 26px; }
.menu-notes__summary { display: block; margin: -6px 0 0; font-size: 14px; color: var(--kc-ink-3); }
.menu-toggle {
flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--kc-teal);
background: var(--kc-cream-2); color: var(--kc-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.menu-toggle svg { transition: transform .18s ease; }
.menu-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.menu-toggle:focus-visible { outline: 3px solid var(--kc-amber); outline-offset: 2px; }
.menu-notes.is-collapsed .menu-notes__grid { display: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-toggle svg { transition: none; } }