/* Keyedworks expansion layer (2026-10-12): finish row with Morse, the live Morse key, tier prices on swatches and
   colorway chips, colorways grouped by collection, event pack name lists, the home "New this season" row and
   colorway wall, and the /colors/, /morse/ and /weddings-and-events/ pages. Tokens from styles.css and brand.css,
   so light and dark both follow the theme. */

/* ── finish row: four tiles side by side on wide screens, two by two on phones ── */
@media (min-width: 560px) { .configurator .style-tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .configurator .style-tiles.tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configurator .style-tiles.tiles-4 .style-tile .st-art { aspect-ratio: 16 / 9; }
}

/* ── the live Morse key ── */
.morse-legend { margin-top: .7rem; padding: .8rem .9rem .85rem; border: 1px solid var(--hair, var(--line)); border-radius: var(--radius-s, 8px); background: var(--card); display: grid; gap: .45rem; }
.morse-legend[hidden] { display: none; }
.mz-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mz-h { margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kiln, var(--verm)); }
.mz-link { font-size: .84rem; color: var(--ink); text-decoration-color: var(--kiln, var(--verm)); text-underline-offset: .2em; }
.mz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; min-height: 30px; padding: 4px 0; }
.mz-wordgroup, .mz-letter { display: inline-flex; align-items: center; }
.mz-letter { gap: 3px; }
.mz-dot, .mz-dash { display: inline-block; height: 26px; border-radius: 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .25)), var(--ink); }
.mz-dot { width: 6px; }
.mz-dash { width: 18px; }
.mz-gap { display: inline-block; width: 13px; }
.mz-word { display: inline-block; width: 26px; }
.mz-text { margin: 0; font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.mz-note { margin: 0; font-size: .78rem; color: var(--ink-3); }

/* ── tier prices on single color swatches and on colorway chips ── */
.swatch.is-tier { position: relative; }
.swatch .sw-up { position: absolute; top: -6px; left: 26px; padding: 1px 4px; border-radius: 3px; background: var(--ink); color: var(--paper); font-size: .58rem; line-height: 1.3; letter-spacing: .02em; pointer-events: none; }
.cw .cw-up { font-size: .7rem; color: var(--ink-3); margin-left: -.15rem; }
.cw-groups { display: grid; gap: .9rem; margin-top: .5rem; }
.cw-group .cw-gh { margin: 0 0 .35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.cw-gn { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cw-gs { font-size: .8rem; color: var(--ink-3); }
.cw-tiers { margin: .55rem 0 0; font-size: .82rem; color: var(--ink-3); }
.cw-tiers a { color: var(--ink-2); text-underline-offset: .2em; }

/* ── event packs: the names list ── */
.field-list textarea { width: 100%; min-height: 9.5rem; font: inherit; font-size: 1rem; line-height: 1.5; padding: .7rem .8rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-s, 8px); background: var(--card); color: var(--ink); resize: vertical; }
.field-list textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.list-status { margin: .35rem 0 .15rem; font-size: .8rem; color: var(--ink-2); }
.list-status.is-full { color: var(--ok, #3E6B4A); }
.list-status.is-over { color: var(--verm-ink, #B23A1E); }
.names-list li[hidden] { display: none; }

/* ── product page bits ── */
.data-credit { margin: .8rem 0 0; font-size: .74rem; letter-spacing: .02em; color: var(--ink-3); }
.look-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.4rem 0 0; }

/* ── home: new this season ── */
.new-season { padding-block: var(--space-xl) var(--space-l); }
.new-season .sec-head { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: end; }
.new-season .sec-p { max-width: 60ch; }
@media (min-width: 1100px) { .ns-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── home: the colorway wall ── */
.cw-wall { padding-block: var(--space-xl); background: var(--stone, var(--paper-2)); }
.cw-wall .sec-head { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: end; }
.cw-wall-art { display: block; border-radius: var(--radius, 14px); overflow: hidden; background: #ECE6DA; }
.cw-wall-art img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 640; object-fit: cover; object-position: 50% 44%; transition: transform .6s var(--ease); }
.cw-wall-art:hover img { transform: scale(1.015); }
.cw-wall-chips { margin-top: 1.1rem; }
.cw-wall-chips .cw { text-decoration: none; }
.cw-more { font-weight: 600; padding-left: .9rem; }
@media (max-width: 559px) { .cw-wall-art img { aspect-ratio: 4 / 2.4; object-position: 50% 45%; } }

/* ── /colors/ ── */
.cl-head { padding: var(--space-m) 0 var(--space-m); max-width: 760px; }
.cl-head h1 { margin-bottom: .3em; }
.cl-head .shelf-jump { margin-top: 1.1rem; }
.cl-hero-art { margin: 0 0 var(--space-l); border-radius: var(--radius, 14px); overflow: hidden; background: #ECE6DA; }
.cl-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 700; object-fit: cover; object-position: 50% 44%; }
@media (max-width: 559px) { .cl-hero-art img { aspect-ratio: 4 / 2.6; } }
.cl-cols { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); }
.cl-col { scroll-margin-top: 90px; }
.cl-col-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--hair, var(--line)); }
.cl-col-h h2 { margin: 0; font-size: var(--step-3); }
.cl-col-h p { margin: 0; color: var(--ink-2); }
.cl-col-h .mono { margin-left: auto; font-size: .74rem; color: var(--ink-3); letter-spacing: .08em; }
.cl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cwc { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--hair, var(--line)); border-radius: var(--radius, 14px); background: var(--card); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
a.cwc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-2); color: var(--ink); }
a.cwc:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cwc-plate { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; margin: 1.1rem 1.1rem 0; border-radius: 10px; background: var(--b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 10px 18px -12px rgba(0, 0, 0, .55); overflow: hidden; }
.cwc-flutes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, rgba(255, 255, 255, .08) 2px 3px, transparent 3px 9px); -webkit-mask: linear-gradient(#000, #000) top / 100% 28% no-repeat, linear-gradient(#000, #000) bottom / 100% 28% no-repeat; mask: linear-gradient(#000, #000) top / 100% 28% no-repeat, linear-gradient(#000, #000) bottom / 100% 28% no-repeat; }
.cwc-name { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); letter-spacing: -.02em; color: var(--a); text-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.cwc-notch { position: absolute; top: 0; left: 50%; width: 12px; height: 7px; margin-left: -6px; background: rgba(0, 0, 0, .28); border-radius: 0 0 2px 2px; }
.cwc-body { display: grid; gap: .2rem; align-content: start; padding: .85rem 1.1rem 1rem; }
.cwc-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.cwc-h b { font-size: 1.05rem; }
.cwc-up { font-size: .74rem; color: var(--ink-2); white-space: nowrap; }
.cwc-up.is-free { color: var(--ink-3); }
.cwc-pair { font-size: .86rem; color: var(--ink-2); }
.cwc-story { font-size: .84rem; color: var(--ink-3); line-height: 1.4; }
.cwc-note { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kiln, var(--verm)); margin-top: .2rem; }
.cl-band { background: var(--promise-bg); color: var(--promise-fg); padding-block: var(--space-xl); }
.cl-band .eyebrow { color: var(--promise-accent); }
.cl-band .sec-h { color: var(--promise-fg); max-width: 20ch; }
.cl-band .sec-p { color: var(--promise-fg2); }
.cl-band-grid { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 900px) { .cl-band-grid { grid-template-columns: 1fr 1.25fr; } }
.cl-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cl-tiers li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .2rem 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cl-tiers li:first-child { border-top: 1px solid rgba(255, 255, 255, .14); }
.cl-tier-p { grid-row: span 2; font-size: 1rem; color: var(--promise-accent); }
.cl-tiers b { color: var(--promise-fg); }
.cl-tiers span:not(.cl-tier-p) { color: var(--promise-fg2); font-size: .92rem; }
.cl-any { padding-block: var(--space-xl) var(--space-l); max-width: 760px; }
.cl-metals { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1rem; }
.cl-metal { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border: 1px solid var(--hair, var(--line)); border-radius: 999px; background: var(--card); font-size: .88rem; }
.cl-metal span { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%), var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cl-bodies { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.4rem; }
.cl-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cl-story { max-width: 70ch; padding-bottom: var(--space-l); }
.cl-cta { padding-bottom: var(--space-xl); }

/* ── /morse/ ── */
.mz-hero { margin: var(--space-m) 0 var(--space-l); }
.mz-plate { display: grid; justify-items: center; gap: 14px; padding: 18px 18px 20px; border-radius: 14px; background: #2B2B2D; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.mz-plate::before { content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 9px; margin-left: -8px; background: rgba(0, 0, 0, .5); border-radius: 0 0 2px 2px; }
.mz-plate-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.03em; color: #F99963; line-height: 1; padding: 6px 22px; border-radius: 8px; background: #2F2F31; }
.mz-bars { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; }
.mz-plate-bars .mz-dot, .mz-plate-bars .mz-dash { background: linear-gradient(90deg, #1A1A1B, #3D3D40 60%, #4A4A4D); height: 34px; }
.mz-big .mz-dot, .mz-big .mz-dash { height: 30px; }
.mz-cap { text-align: center; margin: .8rem 0 0; font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.mz-examples, .mz-key, .mz-faq { margin-top: var(--space-l); }
.mz-ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.mz-ex { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; padding: 1rem 1.1rem; border: 1px solid var(--hair, var(--line)); border-radius: 10px; background: var(--card); }
.mz-ex-k { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mz-ex-w { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; }
.mz-ex .mz-bars { justify-content: flex-start; }
.mz-ex-c { font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.mz-table { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5rem; }
.mz-table li { display: grid; grid-template-columns: 1.6rem 1fr; grid-template-rows: auto auto; align-items: center; gap: .15rem .5rem; padding: .55rem .7rem; border: 1px solid var(--hair, var(--line)); border-radius: 8px; background: var(--card); }
.mz-table b { grid-row: span 2; font-family: var(--font-display); font-size: 1.3rem; }
.mz-table .mz-bars { justify-content: flex-start; }
.mz-table .mz-dot, .mz-table .mz-dash { height: 16px; }
.mz-table .mz-dot { width: 5px; }
.mz-table .mz-dash { width: 15px; }
.mz-table .mono { font-size: .76rem; color: var(--ink-3); }
.mz-pieces { margin-top: var(--space-xl); }

/* ── /weddings-and-events/ ── */
.ev-hero { display: grid; gap: var(--space-l); align-items: center; padding: var(--space-m) 0 var(--space-xl); }
@media (min-width: 900px) { .ev-hero { grid-template-columns: 1fr 1.05fr; } }
.ev-hero h1 { margin-bottom: .3em; max-width: 16ch; }
.ev-hero-art { margin: 0; border-radius: var(--radius, 14px); overflow: hidden; background: var(--paper-2); }
.ev-hero-art img { display: block; width: 100%; height: auto; }
.ev-pieces, .ev-how, .ev-cws, .ev-marks, .ev-more, .ev-faq { margin-bottom: var(--space-xl); }
.ev-pieces .sec-head, .ev-cws .sec-head, .ev-more .sec-head { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: end; }
.ev-how .steps { margin-top: var(--space-m); }
@media (min-width: 760px) { .ev-how .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ev-how .steps { grid-template-columns: repeat(4, 1fr); } }
.ev-marks { padding: var(--space-l); border-radius: var(--radius, 14px); background: var(--stone, var(--paper-2)); max-width: 900px; }
.ev-marks .sec-p { max-width: 60ch; }

/* ── /teams/ additions ── */
.tm-feature { margin: 0 0 var(--space-l); }
.tm-who ul { list-style: none; margin: 0 0 var(--space-l); padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tm-who li { padding: 1.1rem 1.2rem; border-top: 2px solid var(--ink); background: var(--card); border-radius: 0 0 6px 6px; }
.tm-who h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.tm-who p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.tm-art { display: grid; gap: 1.2rem var(--space-l); margin: 0 0 var(--space-xl); padding: var(--space-l); border-radius: 6px; background: var(--stone, var(--paper-2)); }
@media (min-width: 900px) { .tm-art { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.tm-art h2 { margin: 0 0 .6rem; font-size: var(--step-3); }
.tm-art p { color: var(--ink-2); max-width: 62ch; }
.tm-art-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tm-art-rules li { padding: .65rem .9rem; border: 1px solid var(--hair, var(--line)); border-radius: 4px; background: var(--card); font-size: .92rem; }

/* art.js hides the mark <select> with .visually-hidden; a field width rule made it 100% wide and pushed the page sideways */
select.visually-hidden, input.visually-hidden { width: 1px !important; height: 1px !important; min-width: 0 !important; left: 0; padding: 0 !important; border: 0 !important; }
.card-sw .sw-more { display: inline-flex; align-items: center; min-width: 30px; height: 30px; padding: 0 4px; font-size: .72rem; color: var(--ink-3); text-decoration: none; }
.card-sw .sw-more:hover { color: var(--ink); }
.card-sw { align-items: center; }
.card-sw .sw-more { height: auto; line-height: 1; align-self: center; }
.tm-feature .grid.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }