/* buzzzweb.com: the society pages. One monochrome family, cream to espresso; depth from tone.
   Palette and illustrations: src/art.js. Brand kits: brand/. */
@font-face { font-family: "Gloock"; src: url("/fonts/gloock.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ms Madi"; src: url("/fonts/ms-madi.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #fdfaf4; --cream: #fbf8f1; --ivory: #f6f1e7; --linen: #ede5d6; --tan: #e5dbcb; --sand: #d9cdb9;
  --latte: #cdb48f; --caramel: #b8955e; --mocha: #8f6b3a; --cocoa: #6e4d1e; --roast: #4a3b2b; --espresso: #2d2319; --ristretto: #1d1610;
  --mast: "Gloock", Georgia, serif; --serif: "Instrument Serif", Georgia, serif; --script: "Ms Madi", "Snell Roundhand", cursive; --sans: "Hanken Grotesk", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--latte) var(--cream); }
body { margin: 0; background: var(--cream); color: var(--espresso); font: 17px/1.6 var(--sans); caret-color: var(--cocoa); -webkit-font-smoothing: antialiased; }
::selection { background: var(--espresso); color: var(--cream); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--caramel); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
svg { display: block; }
code { font: .88em ui-monospace, "SF Mono", Consolas, monospace; background: var(--linen); color: var(--roast); padding: .12em .4em; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h2 { font: 400 clamp(34px, 4.4vw, 54px)/1.02 var(--serif); letter-spacing: -.01em; }
h2 em, .band h2 em { font-style: italic; color: var(--mocha); }
h3 { font: 400 26px/1.1 var(--mast); }
p { text-wrap: pretty; }
.muted { color: var(--mocha); }
.small { font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--espresso); color: var(--cream); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 16px; }

/* Header */
.top { max-width: var(--wrap); margin: 0 auto; padding: 26px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.mark { font: 400 22px var(--serif); letter-spacing: .42em; margin-right: -.42em; text-decoration: none; }
.top-nav { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; font: 500 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.top-nav a { text-decoration: none; color: var(--roast); }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--espresso); text-decoration: underline; text-decoration-color: var(--caramel); }
.top-nav a.apply { color: var(--espresso); border: 1.5px solid var(--espresso); padding: 8px 18px; border-radius: 999px; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.top-nav a.apply:hover, .top-nav a.apply[aria-current] { background: var(--espresso); color: var(--cream); text-decoration: none; }
.top-nav a.apply:active { transform: scale(.97); }

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

/* Buttons and links */
.btn { display: inline-block; background: var(--espresso); color: var(--cream); text-decoration: none; font: 600 14px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer; box-shadow: 0 10px 22px -12px rgb(45 35 25 / .55); transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease; }
.btn:hover { background: var(--ristretto); box-shadow: 0 14px 26px -12px rgb(45 35 25 / .6); }
.btn:active { transform: scale(.97); }
.link { font: 600 14px var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* Mastheads: an outlined serif word with a script counter-word tucked under it */
.mast { position: relative; text-align: center; line-height: .9; }
.mast-word { display: block; font: 400 clamp(64px, 13.4vw, 196px)/.9 var(--mast); letter-spacing: -.015em; color: var(--latte); -webkit-text-stroke: clamp(1.5px, .2vw, 3px) var(--espresso); paint-order: stroke fill; }
.mast-script { display: block; font: 400 clamp(46px, 8vw, 120px)/1 var(--script); color: var(--espresso); margin: -.32em 0 0 34%; transform: rotate(-4deg); text-align: left; }
.mast-sm { text-align: left; }
.mast-sm .mast-word { font-size: clamp(52px, 8.6vw, 124px); }
.mast-sm .mast-script { font-size: clamp(38px, 5.4vw, 80px); margin: -.34em 0 0 min(28vw, 330px); }
.mast-name .mast-word { font-size: clamp(44px, 7vw, 100px); }

/* Home: first viewport */
.hero { padding: clamp(16px, 3vw, 36px) 0 0; }
.cast-wrap { margin: clamp(10px, 2vw, 24px) auto 0; max-width: 1060px; }
.cast { width: 100%; height: auto; overflow: visible; }
.guest-in { transform-box: fill-box; transform-origin: 50% 100%; animation: arrive 560ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); transition: transform 220ms var(--ease-out); }
@keyframes arrive { from { transform: translateY(18px) scale(.92); } }
@media (hover: hover) and (pointer: fine) { .guest:hover .guest-in { transform: translateY(-8px); } }
.hero-foot { display: grid; grid-template-columns: 1fr auto; gap: 28px 64px; align-items: end; margin-top: clamp(20px, 3vw, 36px); }
.statement { margin: 0; font: 400 clamp(28px, 3.4vw, 44px)/1.08 var(--serif); color: var(--mocha); max-width: 560px; }
.join { text-align: right; }
.join-title { margin: 0 0 10px; font: 400 clamp(34px, 3.6vw, 48px)/1 var(--mast); }
.join-facts { margin: 0 0 22px; font: 500 16px/1.6 var(--sans); color: var(--roast); }

/* Sections */
.section { padding-top: clamp(80px, 11vw, 150px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 44px; }
.sec-head p { margin: 0; color: var(--roast); max-width: 480px; }

/* Programme lists with dotted leaders */
.leader { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--sand); transform: translateY(-6px); margin: 0 12px; }
.programme { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--espresso); }
.programme li { padding: 26px 0 24px; border-top: 1px solid var(--tan); }
.programme li:first-child { border-top: 1.5px solid var(--espresso); }
.prog-row { display: flex; align-items: baseline; }
.prog-row b { font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--mast); }
.prog-detail { font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); white-space: nowrap; }
.programme p { margin: 8px 0 0; color: var(--roast); font-size: 16px; max-width: 620px; }

/* Espresso band */
.band { margin: clamp(80px, 11vw, 150px) calc(50% - 50vw) 0; background: var(--espresso); color: var(--linen); }
.band-inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px 72px; align-items: center; }
.band h2 { color: var(--paper); }
.band h2 em { color: var(--latte); }
.band-copy p { color: var(--tan); max-width: 520px; }
.not { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.not li { border: 1px solid var(--roast); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--latte); text-decoration: line-through; text-decoration-color: var(--caramel); }
.travels { width: 100%; height: auto; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.steps li { padding: 26px 0 34px; border-top: 1.5px solid var(--espresso); }
.step-when { display: block; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa); margin: 2px 0 10px; }
.steps h3 { margin-bottom: 0; }
.steps p { margin: 0; color: var(--roast); font-size: 16px; }

/* Screens: device frames for B&W photos */
.screens { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px 72px; align-items: center; }
.screens-copy p { color: var(--roast); max-width: 460px; }
.devices { position: relative; aspect-ratio: 16 / 11; }
.laptop { position: absolute; left: 12%; right: 2%; top: 6%; }
.laptop-screen { background: var(--ristretto); border-radius: 14px 14px 0 0; padding: 3.2%; aspect-ratio: 16 / 10; }
.laptop-base { height: 16px; margin: 0 -6%; background: var(--espresso); border-radius: 0 0 16px 16px; box-shadow: 0 30px 40px -24px rgb(29 22 16 / .6); }
.phone { position: absolute; left: 0; bottom: 4%; width: 24%; aspect-ratio: 9 / 19; background: var(--ristretto); border-radius: 22px; padding: 7px; box-shadow: 0 24px 36px -20px rgb(29 22 16 / .6); }
.ph { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: linear-gradient(155deg, var(--linen) 0%, var(--sand) 50%, var(--mocha) 100%); display: grid; place-items: end start; }
.phone .ph { border-radius: 16px; }
.laptop .ph { place-items: start end; }
.ph span { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); padding: 10px 12px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.badge { position: absolute; right: -3%; bottom: 2%; width: 22%; filter: drop-shadow(0 10px 14px rgb(45 35 25 / .18)); }
.badge-turn { transform-origin: 100px 100px; animation: turn 26s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* Publisher fields on the home page */
.fields { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.fields li { display: flex; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--tan); font: 400 24px var(--serif); }
.fields b { font: 400 24px var(--mast); }

/* Closing */
.closing { text-align: center; padding: clamp(90px, 12vw, 160px) 0 0; }
.closing-pair { width: min(300px, 70vw); margin: 0 auto; }
.closing-count { margin: 22px 0 0; font-size: 15px; color: var(--roast); }
.closing h2 { margin: 20px 0 34px; }
.closing .mast-word { font-size: clamp(64px, 10vw, 150px); }
.closing .mast-script { margin: -.36em 0 0 52%; font-size: clamp(42px, 6vw, 90px); }

/* Inner pages */
.page-head { padding: clamp(20px, 4vw, 48px) 0 0; position: relative; }
.page-head .lede { max-width: 640px; margin: 28px 0 0; font: 400 clamp(21px, 2.2vw, 26px)/1.35 var(--serif); color: var(--roast); }
.prose { max-width: 700px; }
.prose h2 { font-size: 36px; margin: 48px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 22px; margin: 28px 0 10px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px 72px; align-items: start; }
.side-art { position: sticky; top: 40px; }
.legal { padding-top: clamp(24px, 4vw, 48px); }
.legal h1 { font: 400 clamp(40px, 6vw, 72px)/1 var(--mast); margin: 0 0 18px; }
.legal h1 + p { color: var(--mocha); font-weight: 500; }
.table { overflow-x: auto; border: 1px solid var(--tan); border-radius: 14px; background: var(--paper); margin: 20px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--tan); }
thead th { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mocha); }
tbody th { font-weight: 600; }
tr:last-child > * { border-bottom: 0; }
.compare { min-width: 760px; }
.compare tbody th { width: 170px; }
.compare .b { background: var(--linen); }
.compare thead .b { color: var(--espresso); }

/* Publishers */
.pub-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; padding-top: 72px; }
.pub-group h2 { font: 400 32px/1 var(--mast); margin-bottom: 8px; }
.pubs { list-style: none; margin: 0; padding: 0; }
.pubs li { padding: 14px 0; border-top: 1px solid var(--tan); }
.pubs a { display: flex; align-items: baseline; text-decoration: none; }
.pub-name { font: 400 23px/1.2 var(--serif); }
.pubs a:hover .pub-name { text-decoration: underline; text-decoration-color: var(--caramel); }
.pub-domain { font-size: 13px; color: var(--mocha); letter-spacing: .02em; }
.pubs p { margin: 2px 0 0; font-size: 15px; color: var(--roast); }

/* Members */
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 32px; }
.members a { display: grid; justify-items: center; text-align: center; gap: 4px; text-decoration: none; }
.members .monogram { width: 150px; margin-bottom: 10px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .members a:hover .monogram { transform: translateY(-6px); } }
.members b { font: 400 26px/1.1 var(--mast); }
.members .meta { color: var(--roast); font-size: 14px; }
.empty { text-align: center; }
.empty-row { max-width: 820px; margin: 0 auto; opacity: .6; }
.empty-line { font: 400 clamp(26px, 3vw, 36px)/1.2 var(--serif); max-width: 560px; margin: 28px auto 32px; }

/* Member press page */
.member { max-width: 820px; margin: 0 auto; padding-top: clamp(24px, 5vw, 64px); }
.member-head { display: grid; grid-template-columns: auto 1fr; gap: 24px 40px; align-items: center; }
.member-portrait { width: clamp(150px, 20vw, 220px); }
.member-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1); border: 2.4px solid var(--espresso); }
.member h1 { font: 400 clamp(48px, 7vw, 92px)/.95 var(--mast); margin: 6px 0 10px; }
.member .meta { margin: 0; color: var(--roast); }
.nowrap { white-space: nowrap; }
.blurb { font: 400 clamp(24px, 2.6vw, 30px)/1.35 var(--serif); margin: 40px 0 0; }
.member-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 32px 0 0; font-weight: 500; }
.rule { display: flex; align-items: center; gap: 22px; font: 400 clamp(30px, 3.2vw, 38px)/1.05 var(--serif); color: var(--espresso); margin: 72px 0 12px; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--tan); }
.press { list-style: none; margin: 0; padding: 0; }
.press li { border-bottom: 1px solid var(--tan); }
.press a { display: flex; align-items: baseline; padding: 16px 0; text-decoration: none; }
.press-title { font: 400 24px/1.25 var(--serif); }
.press a:hover .press-title { text-decoration: underline; text-decoration-color: var(--caramel); }
.press-where { font-size: 14px; color: var(--mocha); white-space: nowrap; }
.quote { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: start; }
.quote-mark { width: 90px; }
.quote blockquote { margin: 0; font: italic 400 clamp(26px, 3vw, 34px)/1.3 var(--serif); }
.quote figcaption { grid-column: 2; font-weight: 600; }
.member-join { margin-top: 88px; padding-top: 32px; border-top: 1.5px solid var(--espresso); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.member-join p { margin: 0; color: var(--roast); }

/* Apply */
.apply-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
.apply-head .mast, .apply-head .lede { grid-column: 1; }
.apply-art { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: min(260px, 26vw); }
.apply-page { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px 72px; align-items: start; padding-top: 64px; }
.form { display: grid; gap: 20px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.form small { color: var(--mocha); font-weight: 400; }
.form input:not([type=checkbox]), .form select { font: 16px var(--sans); color: var(--espresso); background: var(--paper); border: 1.5px solid var(--sand); border-radius: 12px; padding: 13px 15px; width: 100%; transition: border-color 160ms ease, box-shadow 160ms ease; }
.form input::placeholder { color: var(--mocha); }
.form input:hover, .form select:hover { border-color: var(--latte); }
.form input:focus, .form select:focus { outline: none; border-color: var(--espresso); box-shadow: 0 0 0 4px var(--linen); }
.form fieldset { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.form legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.form .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; line-height: 1.5; font-size: 15px; }
.form .check input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--espresso); flex: none; }
.form .btn { justify-self: start; margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
.errors { grid-column: 1 / -1; background: var(--paper); border: 1.5px solid var(--cocoa); border-radius: 14px; padding: 18px 22px; color: var(--roast); }
.errors p { margin: 0 0 6px; font-weight: 700; color: var(--espresso); }
.errors ul { margin: 0; padding-left: 1.2em; }
.eligibility { background: var(--linen); border-radius: 18px; padding: 32px; font-size: 15px; color: var(--roast); }
.eligibility h2 { font: 400 32px/1 var(--mast); color: var(--espresso); margin-bottom: 12px; }
.eligibility h3 { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa); margin: 26px 0 8px; }
.eligibility ul { padding-left: 1.1em; margin: 0; }
.eligibility li { margin: 5px 0; }
.code { background: var(--espresso); color: var(--linen); border-radius: 14px; padding: 20px; overflow-x: auto; }
.code code { background: none; color: inherit; padding: 0; font-size: 14px; }
.check-form { margin: 28px 0; }
.ok, .warn { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 16px 20px; margin: 0 0 18px; font-weight: 500; }
.ok { background: var(--linen); color: var(--espresso); }
.ok-mark { width: 22px; flex: none; }
.warn { background: var(--paper); border: 1.5px solid var(--cocoa); color: var(--roast); }

/* 404 */
.not-found { text-align: left; }
.nf-art { width: min(280px, 60vw); margin-bottom: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* Footer: espresso */
.foot { margin-top: clamp(100px, 13vw, 170px); background: var(--espresso); color: var(--tan); }
.foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter) 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 36px 64px; }
.foot-word { font: 400 56px/1 var(--mast); color: var(--latte); text-decoration: none; letter-spacing: .02em; }
.foot-script { margin: -6px 0 0 70px; font: 400 36px/1 var(--script); color: var(--latte); }
.foot-line { margin: 18px 0 0; font-size: 14px; max-width: 300px; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; align-content: start; font-size: 15px; }
.foot-nav a { color: var(--linen); text-decoration: none; }
.foot-nav a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--caramel); }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--roast); font-size: 14px; }
.foot-base p { margin: 0; }
.foot-base a { color: var(--latte); }

/* Responsive */
@media (max-width: 900px) {
  .sec-head, .band-inner, .screens, .prose-split, .apply-page, .pub-groups, .foot-inner { grid-template-columns: 1fr; }
  .programme, .fields { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .side-art { position: static; max-width: 440px; }
  .hero-foot { grid-template-columns: 1fr; }
  .join { text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding: 18px var(--gutter); }
  .top-nav { gap: 6px 16px; font-size: 12px; }
  .top { position: relative; display: block; }
  .mark { display: inline-block; margin: 6px 0 14px; }
  .top-nav a.apply { position: absolute; right: var(--gutter); top: 16px; padding: 6px 14px; }
  .mast-script { margin-left: 22%; }
  .cast-wrap { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); padding-top: 12px; }
  .cast { width: 168%; margin-left: -34%; }
  .steps { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .apply-head { grid-template-columns: 1fr; }
  .apply-art { grid-column: 1; grid-row: auto; width: 200px; margin-top: 24px; }
  .member-head { grid-template-columns: 1fr; }
  .press a, .pubs a { flex-wrap: wrap; }
  .press .leader, .pubs .leader, .prog-row .leader { display: none; }
  .press-where, .pub-domain { width: 100%; }
  .prog-row { flex-direction: column; align-items: flex-start; }
  .quote { grid-template-columns: 1fr; }
  .quote-mark { width: 64px; }
  .quote figcaption { grid-column: 1; }
  .foot-nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .guest-in { animation: none; }
  .badge-turn { animation: none; }
  .btn, .guest-in, .members .monogram { transition: none; }
}