/* ==========================================================================
   MEMPHIS — Build with it (Design Completion Campaign, 2026-09-29).
   A laminate sample set on the room's floor: every field an object with its
   own corner and a patterned cap, text always on paper. Faces are the room's
   own ("Archivo Black MP", "Archivo MP", declared in x-memphis.css). Every
   class is gme- or scoped to .gm--memphis. Nothing moves.
   ========================================================================== */
.gm--memphis {
  --gm-tag-inverse: var(--gm-color-paper);
  max-width: 1200px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(14px, 4vw, 40px);
  color: var(--gm-color-ink);
  font: 400 17px/1.55 var(--gm-font-text);
}
.gm--memphis .gm__head { max-width: 780px; padding: 24px 22px; background: var(--gm-color-paper); border: 4px solid var(--gm-color-ink); border-radius: 0 90px 0 0; }
.gm--memphis .gm__title { margin: 0 0 10px; font: 400 clamp(36px, 6vw, 64px)/1 var(--gm-font); }
.gm--memphis .gm__get a { color: var(--gm-color-ink); text-decoration: underline wavy var(--gm-color-red); text-underline-offset: 4px; }
.gm--memphis .gm-t[data-g="record"] { background: var(--gm-color-mint); color: var(--gm-color-ink); }
.gm--memphis .gm-more summary { color: var(--gm-color-ink); font-weight: 800; }
.gm--memphis :focus-visible { outline: 4px solid var(--gm-color-blue); outline-offset: 3px; }

/* ---- the floor: objects that do not line up -------------------------- */
.gme-floor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 24px; margin-top: 40px; align-items: start; }
.gme-f { position: relative; grid-column: span 6; padding: 34px 22px 22px; background: var(--gm-color-paper); border: 4px solid var(--gm-color-ink); min-width: 0; }
.gme-f::before { content: ""; position: absolute; left: -4px; right: -4px; top: -18px; height: 14px; border: 4px solid var(--gm-color-ink); }
.gme-f--wide { grid-column: 1 / -1; }
.gme-f--2 { grid-column: 1 / span 7; border-radius: 0 0 90px 0; }
.gme-f--3 { grid-column: 8 / span 5; margin-top: 50px; border-radius: 50% 50% 12px 12px / 60px 60px 12px 12px; }
.gme-f--4 { grid-column: 2 / span 5; transform: rotate(-1deg); }
.gme-f--5 { grid-column: 7 / span 6; margin-top: 30px; border-radius: 40px 0; }
.gme-f--6 { grid-column: 3 / span 8; }
.gme-f--8 { grid-column: 4 / span 6; border-radius: 0 60px 0 0; }
.gm--memphis .gm-f__n { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border: 3px solid var(--gm-color-ink); background: var(--gm-color-lemon); font: 400 17px/1 var(--gm-font); }
.gm--memphis .gm-f__name { margin: 0; font: 400 24px/1.1 var(--gm-font); }
.gme-cap { margin: 10px 0 0; font-size: 14px; }
.gme-text { margin: 0; }

/* ---- the caps and patterns: decoration only, never under text -------- */
.gme-cap--zig::before, .gme-p-zig { background: linear-gradient(135deg, var(--gm-color-blue) 25%, transparent 25%) -7px 0 / 14px 14px, linear-gradient(225deg, var(--gm-color-blue) 25%, transparent 25%) -7px 0 / 14px 14px, var(--gm-color-lemon); }
.gme-cap--squig::before, .gme-p-squig { background: var(--gm-color-lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 8 Q10 0 20 8 T40 8' fill='none' stroke='%23191512' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 40px 16px; }
.gme-cap--dots::before { background: radial-gradient(var(--gm-color-ink) 22%, transparent 24%) 0 0 / 12px 12px, var(--gm-color-coral); }
.gme-cap--chq::before { background: conic-gradient(var(--gm-color-ink) 25%, var(--gm-color-paper) 0 50%, var(--gm-color-ink) 0 75%, var(--gm-color-paper) 0) 0 0 / 14px 14px; }
.gme-f--3::before, .gme-f--5::before { display: none; }

.gme-lams { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gme-lams li { display: flex; align-items: flex-end; height: 130px; border: 4px solid var(--gm-color-ink); }
.gme-lams b { padding: 4px 8px 2px; background: var(--gm-color-paper); border-top: 3px solid var(--gm-color-ink); border-right: 3px solid var(--gm-color-ink); font-size: 13px; line-height: 1.2; }
.gme-p-squig { background: var(--gm-color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='36'%3E%3Cpath d='M4 10 q5 -7 10 0 t10 0 M22 28 q5 -7 10 0 t10 0 M2 26 q4 5 8 0' fill='none' stroke='%23191512' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 44px 36px; }
.gme-p-speck { background: radial-gradient(circle, var(--gm-color-ink) 0 1.6px, transparent 2px) 0 0 / 13px 11px, radial-gradient(circle, var(--gm-color-coral) 0 2px, transparent 2.4px) 5px 6px / 17px 15px, radial-gradient(circle, var(--gm-color-blue) 0 1.5px, transparent 2px) 9px 2px / 19px 13px, radial-gradient(circle, var(--gm-color-mint) 0 2.2px, transparent 2.6px) 2px 9px / 11px 17px, var(--gm-color-cream); }
.gme-p-sponge { background: radial-gradient(circle at 20% 30%, var(--gm-color-red) 0 9px, transparent 10px) 0 0 / 38px 34px, radial-gradient(circle at 70% 60%, var(--gm-color-lemon) 0 8px, transparent 9px) 0 0 / 30px 40px, radial-gradient(circle at 40% 80%, var(--gm-color-ink) 0 5px, transparent 6px) 0 0 / 26px 22px, #FFFFFF; }
.gme-p-skin { background: radial-gradient(ellipse 9px 5px at 50% 50%, var(--gm-color-ink) 0 90%, transparent 100%) 0 0 / 28px 20px, radial-gradient(ellipse 6px 8px at 50% 50%, var(--gm-color-ink) 0 90%, transparent 100%) 14px 10px / 28px 20px, var(--gm-color-lemon); }

/* ---- specimens ------------------------------------------------------- */
.gme-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: 12px; }
.gme-sws li { display: grid; gap: 2px; min-width: 0; }
.gme-sws span { display: block; height: 38px; border: 3px solid var(--gm-color-ink); }
.gme-sws li:nth-child(2n) span { border-radius: 50%; }
.gme-sws code { font-size: 11px; overflow-wrap: anywhere; }
.gme-alt { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 14px; }
.gme-alt__c { display: inline-flex; flex: none; }
.gme-alt__c span { display: block; width: 22px; height: 22px; border: 2px solid var(--gm-color-ink); margin-right: -2px; }
.gme-disp { display: flex; gap: 6px; margin: 0 0 12px; font: 400 clamp(34px, 5vw, 52px)/1 var(--gm-font); }
.gme-disp span { display: inline-grid; place-items: center; width: 1.25em; height: 1.4em; border: 3px solid var(--gm-color-ink); }
.gme-disp span:nth-child(1) { background: var(--gm-color-coral); transform: rotate(-5deg); }
.gme-disp span:nth-child(2) { background: var(--gm-color-mint); border-radius: 50%; }
.gme-disp span:nth-child(3) { background: var(--gm-color-lemon); border-radius: 0 24px 0 0; transform: rotate(3deg); }
.gme-disp span:nth-child(4) { background: var(--gm-color-ink); color: var(--gm-color-lemon); transform: rotate(-2deg); }
.gme-room { position: relative; height: 130px; background: var(--gm-color-cream); border: 3px solid var(--gm-color-ink); }
.gme-room i { position: absolute; border: 3px solid var(--gm-color-ink); }
.gme-room i:nth-child(1) { left: 8%; top: 22px; width: 50px; height: 80px; background: var(--gm-color-mint); }
.gme-room i:nth-child(2) { left: 38%; top: 10px; width: 36px; height: 104px; background: var(--gm-color-lemon); border-radius: 18px 18px 0 0; }
.gme-room i:nth-child(3) { left: 56%; top: 46px; width: 70px; height: 54px; background: var(--gm-color-coral); border-radius: 0 30px 0 0; }
.gme-room i:nth-child(4) { right: 6%; top: 18px; width: 40px; height: 40px; background: var(--gm-color-blue); border-radius: 50%; }
.gme-corners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gme-corners i { height: 64px; border: 3px solid var(--gm-color-ink); background: var(--gm-color-paper); }
.gme-corners i:nth-child(1) { border-radius: 0 40px 0 0; background: var(--gm-color-lemon); }
.gme-corners i:nth-child(2) { border-radius: 50% 50% 6px 6px / 36px 36px 6px 6px; background: var(--gm-color-mint); }
.gme-corners i:nth-child(3) { border-radius: 30px 0; background: var(--gm-color-coral); }
.gme-corners i:nth-child(4) { background: var(--gm-color-blue); }

/* ---- components ------------------------------------------------------ */
.gme-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.gme-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 3px solid var(--gm-color-ink); color: var(--gm-color-ink); font: 400 17px/1 var(--gm-font); text-decoration: none; }
.gme-nav a:nth-child(1) { background: var(--gm-color-mint); transform: rotate(-2deg); }
.gme-nav a:nth-child(2) { background: var(--gm-color-coral); border-radius: 0 18px 0 0; }
.gme-nav a:nth-child(3) { background: var(--gm-color-lemon); border-radius: 22px; transform: rotate(2deg); }
.gme-nav a:nth-child(4) { background: var(--gm-color-blue); color: var(--gm-color-paper); }
.gme-nav a:hover { text-decoration: underline wavy var(--gm-color-red); text-underline-offset: 4px; }
.gme-nav a[aria-current] { background: var(--gm-color-ink); color: var(--gm-color-lemon); }
.gme-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.gme-card { display: block; padding: 0 18px 18px; background: var(--gm-color-paper); border: 4px solid var(--gm-color-ink); border-radius: 0 0 60px 0; color: var(--gm-color-ink); text-decoration: none; }
.gme-card__cap { display: block; height: 18px; margin: 0 -18px 14px; border-bottom: 4px solid var(--gm-color-ink); background: linear-gradient(135deg, var(--gm-color-blue) 25%, transparent 25%) -7px 0 / 14px 14px, linear-gradient(225deg, var(--gm-color-blue) 25%, transparent 25%) -7px 0 / 14px 14px, var(--gm-color-lemon); }
.gme-card:hover .gme-card__cap { background: radial-gradient(var(--gm-color-ink) 22%, transparent 24%) 0 0 / 12px 12px, var(--gm-color-coral); }
.gme-card b { display: block; font: 400 24px/1.1 var(--gm-font); margin-bottom: 4px; }
.gme-form { display: grid; gap: 8px; }
.gme-form label { font-weight: 800; }
.gme-form input { min-height: 2.75rem; padding: 0 12px; border: 3px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-paper); font: inherit; }
.gme-btn { justify-self: start; min-height: 44px; padding: 0 20px 6px; background: var(--gm-color-lemon); color: var(--gm-color-ink); border: 3px solid var(--gm-color-ink); border-radius: 0 0 18px 0; font: 400 17px/1 var(--gm-font); cursor: pointer; box-shadow: inset 0 -8px 0 0 var(--gm-color-ink); }
.gme-btn:hover { background: var(--gm-color-mint); }
.gme-btn:active { background: var(--gm-color-coral); }

@media (max-width: 760px) {
  .gme-floor > .gme-f { grid-column: 1 / -1; margin-top: 0; transform: none; }
  .gme-lams, .gme-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gme-ui { grid-template-columns: minmax(0, 1fr); }
  .gme-f--3 { border-radius: 50% 50% 12px 12px / 40px 40px 12px 12px; }
}