/* The Six-Minute Brief — page styles on the Bryan Canning design system.
   tokens.css and the Adobe Fonts kit (ihx3paf) load first. Markup comes from
   inc/brief-theme.php and the front-page / single / category templates. */

/* Motifs the token file can't hold (from the design system's bundle.css). */
:root {
  --rule-broken-a: linear-gradient(90deg, var(--bc-ink) 0% 58%, transparent 58% 61%, var(--bc-ink) 61% 94%, transparent 94%);
  --rule-broken-b: linear-gradient(90deg, var(--bc-ink) 0% 40%, transparent 40% 44%, var(--bc-ink) 44% 100%);
  --rule-broken-c: linear-gradient(90deg, var(--bc-ink) 0% 72%, transparent 72% 76%, var(--bc-ink) 76% 100%);
  --rule-broken-d: linear-gradient(90deg, var(--bc-ink) 0% 60%, transparent 60% 65%, var(--bc-ink) 65% 90%, transparent 90%);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-hover: .2s;
  color-scheme: light;
}
body.smb-brief { margin: 0; background: var(--surface-page); color: var(--text-body); }
::selection { background: var(--bc-red); color: var(--bc-paper); }

.pg { background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-copy); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg p, .pg h1, .pg h2, .pg h3, .pg ol, .pg ul { margin: 0; }
.pg a { color: inherit; text-decoration: none; transition: color var(--dur-hover), background-color var(--dur-hover); }
.pg a:hover { color: var(--text-accent); }
.pg a:focus-visible, .pg button:focus-visible { outline: 3px solid var(--bc-red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--bc-ink); color: var(--bc-paper) !important; }
.skip:focus { top: 8px; }

/* Frame and grid: 12 columns, 48 / 31 / 20 gutters, breakpoints 1100 and 640 */
.wrap { max-width: var(--frame-desktop); margin: 0 auto; padding-inline: var(--gutter-desktop); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap-desktop); }
.m-only { display: none; }
@media (max-width: 1099px) {
  .wrap { padding-inline: var(--gutter-tablet); }
  .grid { column-gap: var(--col-gap-tablet); }
}
@media (max-width: 639px) {
  .wrap { padding-inline: var(--gutter-mobile); }
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-16); }
  .grid > * { grid-column: 1 / -1 !important; }
  .d-only { display: none !important; }
  .m-only { display: block; }
}

/* Broken keylines (never solid) */
.rule { height: var(--rule-hair); background: var(--rule-broken-a); }
.rule.b { background: var(--rule-broken-b); }
.rule.c { background: var(--rule-broken-c); }
.rule.d { background: var(--rule-broken-d); }
.rule.heavy { height: var(--rule-heavy); }

/* Type */
.thin { font-family: var(--font-thin); font-weight: var(--weight-thin); }
.ui { font-family: var(--font-cond); font-weight: var(--weight-cond-bold); font-size: var(--fs-ui); line-height: 1.2; }
.label { font-size: var(--fs-label); font-weight: var(--weight-light); line-height: 1.35; }
.micro { font-size: var(--fs-micro); line-height: 1.35; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); }
.h1 { font-family: var(--font-cond); font-weight: 900; font-size: clamp(38px, 5.3vw, 68px); line-height: var(--lh-display); text-wrap: balance; }
.h2 { font-family: var(--font-cond); font-weight: 900; font-size: clamp(34px, 5vw, 64px); line-height: var(--lh-heading); text-wrap: balance; }
.h3 { font-family: var(--font-cond); font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); line-height: var(--lh-heading); text-wrap: balance; }
.h4 { font-family: var(--font-cond); font-weight: 900; font-size: var(--fs-h4); line-height: var(--lh-heading); }
.mega { font-family: var(--font-thin); font-weight: 100; line-height: var(--lh-tight); letter-spacing: var(--tracking-thin); white-space: nowrap; }
.read-time { font-size: 30px; line-height: 1; }
.dot { display: inline-block; flex: none; width: var(--dot-md); height: var(--dot-md); border-radius: 50%; background: var(--bc-red); }
.dotlabel { display: flex; align-items: center; gap: var(--space-10); }
.dotlabel .aside { margin-left: auto; font-size: 15px; }

/* Letter tiles (TileWord) and dot grids (DotGrid) */
.tileword { display: flex; align-items: flex-start; }
.tileword .tile { position: relative; flex: none; overflow: hidden; background: var(--tile-bg); }
.tileword .tile.red { background: var(--tile-bg-active); z-index: 3; }
.tileword .tile > span { position: absolute; font-family: var(--font-cond); font-weight: 900; line-height: 1; color: var(--tile-fg); }
.dotgrid { position: absolute; z-index: 0; pointer-events: none; }
.dotgrid span { position: absolute; border-radius: 50%; background: var(--bc-red); }

/* Buttons: primary is an ink block, secondary a broken underline */
.btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-height: var(--tap-min); padding: 18px 22px; background: var(--bc-ink); color: var(--bc-paper) !important; font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-button); line-height: 1; }
.btn:hover { background: var(--bc-red); }
.btn-2 { display: inline-block; padding-bottom: 6px; font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-button); line-height: 1.2; background: linear-gradient(90deg, var(--bc-ink) 0% 70%, transparent 70% 75%, var(--bc-ink) 75% 100%) bottom / 100% 1px no-repeat; }

/* Arrow tile */
.atile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tile-bg); color: var(--tile-fg); font-family: var(--font-cond); font-weight: 700; font-size: 16px; transition: background-color var(--dur-hover); }

/* Issue card */
.icard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 420px; padding: 22px; overflow: hidden; color: var(--bc-ink); background-color: transparent; background-image: linear-gradient(90deg, var(--bc-ink) 0% 64%, transparent 64% 68%, var(--bc-ink) 68% 100%), linear-gradient(180deg, var(--bc-ink) 0% 30%, transparent 30% 34%, var(--bc-ink) 34% 100%); background-size: 100% 1px, 1px 100%; background-position: top, left; background-repeat: no-repeat; }
.pg .icard:hover { color: var(--bc-ink); background-color: var(--surface-card-hover); }
.icard > * { position: relative; }
.icard .icard-n { position: absolute; font-size: 440px; line-height: .78; color: var(--numeral-faint); pointer-events: none; }
.icard.c-br .icard-n { right: -60px; bottom: -120px; }
.icard.c-bm .icard-n { right: 180px; bottom: -150px; }
.icard.c-bl .icard-n { right: -30px; bottom: -100px; }
.icard .dotlabel .aside { font-size: 14px; }
.icard-hook { display: block; font-family: var(--font-cond); font-weight: 900; font-size: var(--fs-hook); line-height: .95; text-wrap: balance; }
.icard-hook.long { font-size: 34px; }
.icard-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.icard:hover .atile, .icard:focus-visible .atile { background: var(--tile-bg-active); }
@media (max-width: 639px) {
  .icard { gap: 28px; min-height: 280px; padding: 20px; }
  .icard .icard-n { font-size: 320px; }
  .icard-hook { font-size: 32px; }
  .icard-hook.long { font-size: 27px; }
  .icard .read-time { font-size: 24px; }
  .icard .atile { width: 48px; height: 48px; }
}

/* Header: the site header (shared look with the site home), then the Brief market row */
.hdr-row { align-items: center; padding-block: var(--space-16); }
.hdr-name { grid-column: 1 / 4; font-family: var(--font-cond); font-weight: 700; font-size: 17px; line-height: 1; }
.hdr-tag { grid-column: 4 / 7; }
.hdr-nav { grid-column: 7 / 13; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-28); }
.hdr-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.pg .brief-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 0; height: 40px; padding: 0 14px; background: var(--tile-bg); color: var(--tile-fg); font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-ui); white-space: nowrap; }
.pg .brief-btn:hover, .pg .brief-btn:focus-visible { background: var(--tile-bg-active); color: var(--tile-fg); }
.hdr-m, .menu-btn, .mmenu { display: none; }
.mkt-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); padding-block: var(--space-10); background: var(--rule-broken-b) bottom / calc(100% - 2 * var(--gutter-desktop)) 1px no-repeat; }
.mkt-home { min-height: var(--tap-min); }
.mkt-links { display: flex; gap: var(--space-24); }
.mkt-links a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); white-space: nowrap; }
.mkt-links a.on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bc-red); }
@media (max-width: 1099px) {
  .hdr-name { grid-column: 1 / 5; } .hdr-tag { display: none; } .hdr-nav { grid-column: 5 / 13; gap: var(--space-18); }
  .mkt-row { background-size: calc(100% - 2 * var(--gutter-tablet)) 1px; }
}
@media (max-width: 639px) {
  .hdr-row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-12); }
  .hdr-nav { display: none; }
  .hdr-m { display: flex; gap: var(--space-8); }
  .pg .brief-btn { height: var(--tap-min); }
  .menu-btn { display: inline-flex; align-items: center; gap: var(--space-12); height: var(--tap-min); padding: 0 var(--space-14); border: 0; border-radius: 0; background: var(--tile-bg); color: var(--tile-fg); font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-ui); cursor: pointer; }
  .menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--tile-bg-active); }
  .bars { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-end; }
  .bars i { display: block; height: 2px; background: var(--tile-fg); }
  .bars i:first-child { width: 16px; } .bars i:last-child { width: 11px; }
  .mmenu:not([hidden]) { display: block; position: relative; overflow: hidden; padding: var(--space-8) var(--gutter-mobile) var(--space-28); background: var(--bc-ink); color: var(--bc-paper); }
  .mmenu .b { position: absolute; right: -30px; bottom: -60px; font-size: 260px; line-height: .78; color: #2a2a2a; }
  .mmenu nav { position: relative; display: flex; flex-direction: column; }
  .pg .mmenu a { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 10px; color: var(--bc-paper); background: linear-gradient(90deg, var(--bc-paper) 0% 62%, transparent 62% 66%, var(--bc-paper) 66% 100%) bottom / 100% 1px no-repeat; }
  .pg .mmenu a:nth-child(even) { background-image: linear-gradient(90deg, var(--bc-paper) 0% 38%, transparent 38% 42%, var(--bc-paper) 42% 100%); }
  .mmenu a .w { font-family: var(--font-cond); font-weight: 900; font-size: 64px; line-height: .8; }
  .mmenu a:nth-child(even) .w { font-family: var(--font-thin); font-weight: 100; }
  .pg .mmenu a:hover { color: var(--bc-red); }
  .mmenu .mail { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 22px; }
  .mkt-row { padding-block: 0; background-size: calc(100% - 2 * var(--gutter-mobile)) 1px; }
  .mkt-home { display: none; }
  .mkt-links { width: 100%; justify-content: space-between; gap: var(--space-16); overflow-x: auto; scrollbar-width: none; }
  .mkt-links::-webkit-scrollbar { display: none; }
}

/* Masthead: Thin word bleeding off the right, Condensed Black tiles against it */
.mast { position: relative; overflow: hidden; padding-top: var(--space-40); }
.mast-word { font-size: clamp(150px, 26vw, 330px); margin-right: -0.12em; text-align: right; }
.mast-tiles { position: relative; z-index: 2; margin-top: -0.62em; }
.mast .dots { position: absolute; left: 34%; top: 36px; }
.mast.docket .dots { left: 8%; top: 120px; }
.mast.home .dots { left: 40%; }
@media (max-width: 639px) { .mast { padding-top: var(--space-24); } .mast-word { font-size: 124px; } }

.intro { padding-block: var(--space-40) var(--space-56); }
.intro .h1, .intro .h2 { grid-column: 1 / 9; }
.intro-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-8); }
.archive-intro { padding-top: var(--space-24); }
@media (max-width: 1099px) { .intro .h1, .intro .h2 { grid-column: 1 / 13; } .intro-side { grid-column: 1 / 13; padding-top: var(--space-24); } }

/* Issue items */
.items { padding-bottom: var(--space-48); }
.item { padding-block: var(--space-40) var(--space-48); scroll-margin-top: var(--space-24); }
.item-meta { grid-column: 1 / 4; display: flex; flex-direction: column; gap: var(--space-8); }
.item-no { font-size: 112px; line-height: var(--lh-tight); letter-spacing: var(--tracking-thin); margin-bottom: var(--space-12); }
.item-body { grid-column: 4 / 12; display: flex; flex-direction: column; gap: var(--space-20); }
.item-body .what { max-width: 62ch; }
.why { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10) var(--space-16); max-width: 66ch; padding-top: var(--space-16); background: var(--rule-broken-c) top / 100% 1px no-repeat; }
.why .ui { padding-top: 5px; display: flex; align-items: center; gap: var(--space-10); }
.srcs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-24); }
.srcs .ui { font-size: 13px; }
.srcs a { padding-bottom: 3px; background: var(--rule-broken-b) bottom / 100% 1px no-repeat; }
.empty-note { padding-block: var(--space-40); }
@media (max-width: 1099px) { .item-body { grid-column: 4 / 13; } .item-no { font-size: 84px; } }
@media (max-width: 639px) {
  .item { padding-block: var(--space-24) var(--space-40); }
  .item-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-6) var(--space-12); }
  .item-no { font-size: 64px; margin: 0 var(--space-8) 0 0; }
  .why { grid-template-columns: minmax(0, 1fr); }
}

/* End-of-page actions */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24) var(--space-40); padding-block: var(--space-48) var(--space-80); }
@media (max-width: 639px) { .actions > * { width: 100%; } }

/* Cards row */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap-desktop); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1099px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap-tablet); } }
@media (max-width: 639px) { .cards, .cards.two { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); } }
.sec { padding-block: var(--space-110) 0; }
.sec-head { display: flex; flex-direction: column; gap: var(--space-20); margin-bottom: var(--space-40); }
@media (max-width: 639px) { .sec { padding-top: var(--space-80); } }

/* Docket scorecard: #smb-scorecard is the LinkedIn screenshot target */
.score { position: relative; padding: var(--space-40) var(--space-40) var(--space-24); background: var(--bc-paper-light); }
.score-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-16); margin-bottom: var(--space-24); }
.score-table { width: 100%; border-collapse: collapse; }
.score-table th, .score-table td { text-align: left; vertical-align: top; padding: var(--space-16) var(--space-20) var(--space-16) 0; background: var(--rule-broken-a) top / 100% 1px no-repeat; }
.score-table tr:nth-child(even) th, .score-table tr:nth-child(even) td { background-image: var(--rule-broken-d); }
.score-table thead th { background: none; padding-top: 0; font-family: var(--font-cond); font-weight: 700; font-size: 17px; }
.score-table thead .dot { margin-right: 10px; vertical-align: 1px; }
.score-table tbody th { width: 22%; font-family: var(--font-cond); font-weight: 900; font-size: 24px; line-height: 1; }
.score-sign { display: flex; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-16); padding-top: var(--space-12); background: var(--rule-broken-c) top / 100% 1px no-repeat; }
@media (max-width: 639px) {
  .score { padding: var(--space-24) var(--space-20) var(--space-16); }
  .score-table, .score-table tbody, .score-table tr, .score-table th, .score-table td { display: block; width: 100%; }
  .score-table thead { display: none; }
  .score-table tbody th { width: 100%; padding: var(--space-16) 0 var(--space-8); }
  .score-table td, .score-table tr:nth-child(even) td { background: none; padding: 0 0 var(--space-12); }
  .score-table td::before { content: attr(data-market); display: block; font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-ui); }
  .score-sign { flex-direction: column; gap: 4px; }
}

/* Docket patterns + lists */
.patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40) var(--col-gap-desktop); list-style: none; padding: 0; }
.patterns li { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-20); background: var(--rule-broken-a) top / 100% 1px no-repeat; }
.patterns .n { font-size: 150px; line-height: var(--lh-tight); letter-spacing: var(--tracking-thin); }
.patterns .h4 { font-size: 30px; }
@media (max-width: 1099px) { .patterns { grid-template-columns: minmax(0, 1fr); } .patterns li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-12) var(--space-16); } .patterns .n { grid-row: span 2; font-size: 110px; } }
@media (max-width: 639px) { .patterns li { grid-template-columns: 72px minmax(0, 1fr); } .patterns .n { font-size: 80px; } }
.bdlist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.bdlist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-20); align-items: start; padding-block: var(--space-24); background: var(--rule-broken-b) top / 100% 1px no-repeat; }
.bdlist li:nth-child(even) { background-image: var(--rule-broken-d); }
.bdlist .k { font-family: var(--font-cond); font-weight: 900; font-size: 44px; line-height: .8; min-width: 48px; }
.bdlist .dot { margin-top: 8px; }
.bdlist p { font-size: var(--fs-lead); line-height: var(--lh-body); max-width: 60ch; }
.split { align-items: start; }
.split > :first-child { grid-column: 1 / 5; position: relative; }
.split > :last-child { grid-column: 5 / 13; }
.split .dotgrid { left: 0; top: 70px; }
.split .h2 { position: relative; }
@media (max-width: 1099px) { .split > :first-child, .split > :last-child { grid-column: 1 / 13; } .split > :first-child { margin-bottom: var(--space-24); } .split .dotgrid { display: none; } }

/* The week (home) */
.week { list-style: none; padding: 0; }
.week li { padding-block: var(--space-14) var(--space-16); background: var(--rule-broken-a) bottom / 100% 1px no-repeat; }
.week li:nth-child(even) { background-image: var(--rule-broken-c); }
.week a, .week .row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: var(--space-20); min-height: 64px; }
.week .day { font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-ui); }
.week .mkt { font-family: var(--font-cond); font-weight: 900; font-size: clamp(30px, 4vw, 52px); line-height: .9; }
.week .soon .mkt { font-family: var(--font-thin); font-weight: 100; }
.week a:hover .atile, .week a:focus-visible .atile { background: var(--tile-bg-active); }
@media (max-width: 639px) { .week a, .week .row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-12); } .week .atile { width: 44px; height: 44px; } }

/* Archive rows */
.arch-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--space-24); align-items: center; padding-block: var(--space-24); background: var(--rule-broken-a) bottom / 100% 1px no-repeat; }
.arch-row:nth-child(even) { background-image: var(--rule-broken-c); }
.arch-row .txt { display: flex; flex-direction: column; gap: 8px; }
.arch-row .txt .label { font-size: 15px; max-width: 70ch; }
.pg .arch-row:hover { color: var(--bc-ink); }
.arch-row:hover .h3 { color: var(--text-accent); }
.arch-row .atile { justify-content: space-between; gap: var(--space-12); width: 92px; padding: 0 var(--space-12); }
.arch-row:hover .atile, .arch-row:focus-visible .atile { background: var(--tile-bg-active); }
.pager { display: flex; justify-content: space-between; gap: var(--space-24); padding-top: var(--space-24); }
@media (max-width: 639px) { .arch-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12) var(--space-16); } .arch-row .when { grid-column: 1 / -1; } }

/* Footer: the site home's contact block (GOOD tiles) */
.contact { overflow: hidden; padding-block: var(--space-110) var(--space-32, 32px); }
.contact-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-40); padding-top: var(--space-48); }
.contact-q { max-width: 640px; font-size: clamp(42px, 5vw, 64px); line-height: .95; }
.contact-mail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.contact-mail .thin { font-size: 20px; }
.contact-mail .mail-link { font-family: var(--font-cond); font-weight: 700; font-size: 34px; line-height: 1.1; padding-bottom: 6px; background: linear-gradient(90deg, var(--bc-ink) 0% 78%, transparent 78% 82%, var(--bc-ink) 82% 100%) bottom / 100% 1px no-repeat; }
.good { position: relative; margin-top: var(--space-56); }
.good .tile { position: absolute; overflow: hidden; background: var(--tile-bg); }
.good .tile.red { background: var(--tile-bg-active); z-index: 3; }
.good .tile > span { position: absolute; font-family: var(--font-cond); font-weight: 900; line-height: 1; color: var(--tile-fg); }
.bp-t, .bp-m { display: none; }
.contact-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-24); margin-top: var(--space-80); font-size: 14px; }
.contact-foot p { display: flex; gap: 6px; }
@media (max-width: 1099px) {
  .bp-d { display: none; } .bp-t { display: block; }
  .contact-top { padding-top: var(--space-40); }
  .contact-mail .mail-link { font-size: 27px; }
  .good { margin-top: var(--space-40); }
}
@media (max-width: 639px) {
  .bp-t { display: none; } .bp-m { display: block; }
  .contact { padding-top: var(--space-80); }
  /* Question, GOOD tiles, then the email lines, as on the home page */
  .contact > .wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .contact > .wrap > .rule { align-self: stretch; }
  .contact-top, .contact-mail { display: contents; }
  .contact-q { order: 1; margin-top: var(--space-40); }
  .good { order: 2; align-self: stretch; margin-top: var(--space-28); }
  .contact-mail .thin { order: 3; margin-top: var(--space-28); font-size: 19px; }
  .contact-mail .mail-link { order: 4; margin-top: 8px; font-size: 28px; }
  .contact-mail .label { order: 5; margin-top: 8px; }
  .contact-foot { order: 6; }
  .contact-foot { flex-direction: column; gap: var(--space-12); margin-top: var(--space-48); }
}

@media (prefers-reduced-motion: reduce) { .pg *, .pg *::before, .pg *::after { transition: none !important; } }