/* ==========================================================================
   MID-CENTURY MODERN — Build with it board (Design Completion Campaign,
   2026-09-29). Paper with its grain; fields ranked by isolation, as the
   room's record is: narrow blocks on hairlines, every second one dropped so
   open paper sits beside it; flat inks overprint where they cross. "Josefin
   MC" and "Yellowtail MC" are declared by the room stylesheet on the same
   page, and --mc-grain by its .mc-page. Prefix: gmc-. Nothing global.
   ========================================================================== */
.gm--mid-century-modern {
  --gm-tag-inverse: var(--gm-color-paper);
  --gmc-muted: #5E5445;
  max-width: 1040px;
  padding: clamp(40px, 8vw, 90px) clamp(18px, 5vw, 50px);
  background: var(--mc-grain, none), var(--gm-color-paper);
  color: var(--gm-color-ink);
  font: 400 19px/1.65 var(--gm-font);
}
.gm--mid-century-modern .gm__title { font-family: var(--gm-font); font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.05; }
.gm--mid-century-modern .gm__head { margin-bottom: clamp(48px, 8vw, 90px); }
.gm--mid-century-modern .gm__key, .gm--mid-century-modern .gm__get { opacity: 1; color: var(--gmc-muted); font-size: 14px; }
.gm--mid-century-modern a { color: var(--gm-color-ink); text-decoration-color: var(--gm-color-rust); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gm--mid-century-modern a:hover { color: var(--gm-color-rust-deep); }
.gm--mid-century-modern :focus-visible { outline: 2px solid var(--gm-color-rust-deep); outline-offset: 4px; }
.gm--mid-century-modern .gm-t { color: var(--gm-color-teal-deep); border-width: 1.5px; border-radius: 50% 44% 56% 48% / 52% 60% 40% 48%; padding: 0 8px; }
.gm--mid-century-modern .gm-t[data-g="translation"] { color: var(--gm-color-rust-deep); }
.gm--mid-century-modern .gm-gap { border-radius: 18px; }
.gm--mid-century-modern .gm-ls li { border-top: 1.5px solid rgba(43, 38, 34, 0.35); }
.gm--mid-century-modern .gm-more summary { color: var(--gm-color-teal-deep); letter-spacing: 0.08em; }

/* the sheet: isolation ranks it */
.gmc-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: space-between; gap: 72px 60px; }
.gmc-f { min-width: 0; padding-top: 16px; border-top: 1.5px solid var(--gm-color-ink); }
.gmc-f:nth-child(even):not(.gmc-f--wide) { margin-top: 110px; }
.gmc-f--wide { grid-column: 1 / -1; }
.gmc-f .gm-f__n { display: none; }
.gmc-f .gm-f__name { font: 700 13px/1.4 var(--gm-font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gm-color-teal-deep); }
.gmc-f .gm-f__note { opacity: 1; color: var(--gmc-muted); font-size: 16px; }
.gmc-cap { margin: 12px 0 0; font-size: 16px; color: var(--gmc-muted); }

/* inks, overprinting */
.gmc-ink > * { mix-blend-mode: multiply; }
.gmc-f-ochre { fill: var(--gm-color-ochre); }
.gmc-f-teal { fill: var(--gm-color-teal); }
.gmc-f-mus { fill: var(--gm-color-mustard); }
.gmc-f-rust { fill: var(--gm-color-rust); }
.gmc-pair { display: block; width: 150px; height: auto; }

/* colour */
.gmc-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.gmc-sws li { display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; align-items: center; font-size: 15px; }
.gmc-sws b { font-weight: 700; }
.gmc-sws code { grid-column: 2; font-size: 13px; color: var(--gmc-muted); }
.gmc-swatch { grid-row: span 2; width: 48px; height: 36px; border-radius: 50% 44% 56% 48% / 52% 60% 40% 48%; box-shadow: inset 0 0 0 1.5px var(--gm-color-ink); }
.gmc-swatch--ochre { background: var(--gm-color-ochre); }
.gmc-swatch--teal { background: var(--gm-color-teal); }
.gmc-swatch--mustard { background: var(--gm-color-mustard); }
.gmc-swatch--rust { background: var(--gm-color-rust); }
.gmc-swatch--paper { background: var(--gm-color-paper); }
.gmc-swatch--ink { background: var(--gm-color-ink); }
.gmc-over { margin: 22px 0 0 auto; width: fit-content; }

/* type */
.gmc-display { margin: 0; font: 700 clamp(38px, 5vw, 58px)/0.95 var(--gm-font); letter-spacing: -0.01em; }
.gmc-scr { display: block; font: 400 0.72em/1 var(--gm-font-script); color: var(--gm-color-rust-deep); margin-bottom: -2px; }
.gmc-body { margin: 16px 0 0; max-width: 34ch; }

/* layout: isolation */
.gmc-iso { position: relative; height: 170px; border: 1.5px solid var(--gm-color-ink); background: var(--gm-color-paper); }
.gmc-iso span { position: absolute; height: 10px; background: var(--gm-color-ink); border-radius: 5px; }
.gmc-iso__lead { left: 12%; top: 28%; width: 30%; height: 16px !important; background: var(--gm-color-teal-deep) !important; }
.gmc-iso__a { right: 8%; bottom: 26%; width: 36%; }
.gmc-iso__b { right: 8%; bottom: 14%; width: 28%; }

/* shape */
.gmc-shapes { display: flex; gap: 18px; align-items: center; }
.gmc-shape { display: block; width: 90px; height: 70px; }
.gmc-shape--tile { background: var(--gm-color-mustard); border-radius: 60% 40% 50% 50% / 30% 30% 20% 20%; }
.gmc-shape--pebble { background: var(--gm-color-teal); border-radius: 50% 44% 56% 48% / 52% 60% 40% 48%; }
.gmc-shape--no { width: 60px; height: 60px; border: 1.5px dashed var(--gmc-muted); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--gmc-muted) 50%, transparent calc(50% + 1px)); }

/* imagery */
.gmc-print { padding: 22px; background: var(--mc-grain, none), var(--gm-color-paper); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, 0.35); }
.gmc-print .gmc-pair { width: 180px; margin: 0 auto; }

/* components */
.gmc-nav { display: flex; flex-wrap: wrap; gap: 0 40px; margin-bottom: 40px; }
.gmc-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.gmc-nav a:hover { text-decoration: underline; text-decoration-color: var(--gm-color-rust); }
.gmc-nav a[aria-current="page"]::before { content: ""; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; background: radial-gradient(circle at 70% 60%, var(--gm-color-teal) 0 6px, transparent 6.5px), var(--gm-color-ochre); background-blend-mode: multiply; }
.gmc-cards { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 300px); justify-content: space-between; gap: 40px; margin-bottom: 44px; }
.gmc-card { padding-top: 12px; border-top: 1.5px solid var(--gm-color-ink); }
.gmc-card + .gmc-card { margin-top: 60px; }
.gmc-card a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.gmc-card a:hover { text-decoration: underline; }
.gmc-card b { font-size: 24px; }
.gmc-card span { display: block; color: var(--gmc-muted); font-size: 16px; }
.gmc-form { display: grid; grid-template-columns: minmax(0, 320px) auto; justify-content: start; align-items: end; gap: 6px 24px; }
.gmc-form label { grid-column: 1 / -1; font: 700 13px/1.4 var(--gm-font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gm-color-teal-deep); }
.gm--mid-century-modern .gmc-form input { min-height: 48px; min-width: 0; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--gm-color-ink); background: transparent; color: var(--gm-color-ink); }
.gm--mid-century-modern .gmc-form input:focus { border-bottom: 3px solid var(--gm-color-rust-deep); }
.gm--mid-century-modern .gmc-btn { min-height: 48px; padding: 14px 28px; border: 0; border-radius: 60% 40% 50% 50% / 30% 30% 20% 20%; background: var(--gm-color-mustard); color: var(--gm-color-ink); font-weight: 700; cursor: pointer; }
.gm--mid-century-modern .gmc-btn:hover { outline: 2px solid var(--gm-color-ink); }
.gm--mid-century-modern .gmc-btn:active { background: var(--gm-color-ochre); }

/* motion: limited animation */
.gmc-cycle { display: block; width: 100%; max-width: 260px; height: auto; }
.gmc-pose--2, .gmc-pose--3 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gmc-pose { animation: gmc-pose 0.375s steps(1) infinite; }
  .gmc-pose--2 { animation-delay: 0.125s; }
  .gmc-pose--3 { animation-delay: 0.25s; }
  @keyframes gmc-pose { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
}

@media (max-width: 820px) {
  .gmc-sheet { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .gmc-f:nth-child(even):not(.gmc-f--wide) { margin-top: 0; margin-left: clamp(0px, 12vw, 80px); }
  .gmc-cards, .gmc-form { grid-template-columns: minmax(0, 1fr); }
  .gmc-card + .gmc-card { margin-top: 0; margin-left: 40px; }
  .gm--mid-century-modern .gm__head { grid-template-columns: minmax(0, 1fr); }
  .gm--mid-century-modern .gm__title { grid-row: auto; }
}
@media (max-width: 480px) {
  .gm--mid-century-modern { font-size: 17px; }
  .gmc-f:nth-child(even):not(.gmc-f--wide) { margin-left: 0; }
  .gm--mid-century-modern .gm-ls li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gmc-card + .gmc-card { margin-left: 24px; }
}