/* Hallmark · shape: sample ring · genre: editorial · theme: custom (by request: direction contract) · job: try · idea: "the colour library is the product; fan the ring and the door repaints" · vibe: "laminate chips on a steel ring" · hero: the fanned ring beside a door in the active colour · nav: counter bar · footer: colour strip over a dark mast · imagery: the product drawn, plus photographs (stock stand-ins) · signature: the hero floods with the chip's colour
 * axes: custom · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, the fan was small; re-pivoted at the bottom bolt and enlarged */
/* 04 · Sample Ring — the colour library is the page */
:root { --ink: #151515; --ink2: #45443f; --ink3: #5d5c56; --counter: #e3e2de; --counter2: #d6d5d0; --line: #c4c3bd; --hue: #f2f1ec; --on: #151515; --ease-out: cubic-bezier(.16, 1, .3, 1);   --counter-3: #d9d8d3; --foot-mute: #9d9c96; --chalk: #fafaf8; --counter-l: #efeeea; --foot-ink: #d8d7d2; --sw-sage: #9AA58C; --sw-ink: #1E2124; --sw-harbour: #4B6475; --sw-oak: #C9A27A; --counter-0: #ecebe7; --err: #b3261e; --tone-1: #b3b2ac; --tone-2: rgba(255,255,255,.35); --tone-3: rgba(0,0,0,.12); --tone-4: rgba(0,0,0,.45); --tone-5: rgba(0,0,0,.35); --tone-6: rgba(255,255,255,.45); --tone-7: rgba(255,255,255,0); --tone-8: #9ea3a6; --tone-9: rgba(255,255,255,.6); --tone-10: rgba(0,0,0,.3); --tone-11: rgba(0,0,0,.1); --tone-12: rgba(255,255,255,.5); --tone-13: #fffefb; --tone-14: #333; --tone-15: rgba(0,0,0,.06); --tone-16: rgba(0,0,0,.08); --tone-17: #75746e; --tone-18: rgba(0,0,0,.04); --tone-19: #bbb; --tone-20: rgba(255,255,255,.15); --tone-21: rgba(0,0,0,.28); --tone-22: rgba(0,0,0,.18); --tone-23: rgba(21,21,21,.55); --font-body: "Schibsted Grotesk", system-ui, sans-serif;
}
html { -webkit-tap-highlight-color: transparent; scrollbar-color: var(--tone-1) var(--counter); }
body { background: var(--counter); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
::selection { background: var(--ink); color: var(--counter); }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.flood :focus-visible { outline-color: var(--on); }
input { caret-color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
.display { font-weight: 750; letter-spacing: -.035em; line-height: .96; }
a.ul { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }

/* The flooded region takes the active chip's colour */
.flood { background: var(--hue); color: var(--on); transition: background-color .7s var(--ease-out), color .4s; }
.flood .soft { opacity: .78; }

/* A laminate sample chip: rounded, punched hole, code + name printed at the foot */
.chip-s { position: absolute; left: calc(var(--px, 40%) - var(--cw, 150px) / 2); bottom: 26px; width: var(--cw, 150px); height: calc(var(--cw, 150px) * 1.55); border-radius: 10px;
  transform-origin: calc(var(--cw, 150px) * .5) calc(var(--cw, 150px) * 1.38);
  box-shadow: 0 1px 0 var(--tone-2) inset, 0 0 0 1px var(--tone-3), 0 10px 18px -10px var(--tone-4);
  display: flex; flex-direction: column; justify-content: flex-start; padding: .75rem .85rem; text-align: left; cursor: pointer; will-change: transform; }
.chip-s::before { content: ""; position: absolute; left: 50%; top: calc(var(--cw, 150px) * 1.38); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--counter); box-shadow: inset 0 2px 3px var(--tone-5); }
.flood .chip-s::before { background: var(--hue); transition: background-color .7s var(--ease-out); }
.chip-s .code { font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.chip-s .nm { font-size: .9rem; font-weight: 600; line-height: 1.15; }
.chip-s.gloss { background-image: linear-gradient(155deg, var(--tone-6) 0%, var(--tone-7) 38%); }
.chip-s.grain { background-image: url("grain.svg"); background-size: 160px 400px; background-blend-mode: multiply; }
/* The steel ring the chips hang from */
.ring { position: absolute; z-index: 200; left: calc(var(--px, 40%) - 23px); bottom: calc(26px + var(--cw, 150px) * .17 - 23px); width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--tone-8);
  box-shadow: inset 0 1px 1px var(--tone-9), 0 1px 0 var(--tone-10), 0 2px 4px var(--tone-10); }

/* Small flat chip (strips, lists) */
.swatch { border-radius: 6px; box-shadow: 0 0 0 1px var(--tone-11) inset; position: relative; }
.swatch.grain { background-image: url("grain.svg"); background-size: 120px 300px; background-blend-mode: multiply; }
.swatch.gloss { background-image: linear-gradient(155deg, var(--tone-12), var(--tone-7) 42%); }
button.swatch { transition: transform .3s var(--ease-out); }
button.swatch:hover { transform: translateY(-3px); }
button.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--counter), 0 0 0 4px var(--ink); }
.flood button.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--hue), 0 0 0 4px var(--on); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1.3rem; border-radius: 999px; font-weight: 650; font-size: 1rem; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--tone-13); }
.btn-ink:hover { background: var(--tone-14); }
.btn-on { background: var(--on); color: var(--hue); }
.btn-on:hover { opacity: .88; }
.btn-line { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { background: var(--tone-15); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--tone-16); gap: 2px; }
.seg button { min-height: 38px; padding: 0 .95rem; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.seg button[aria-pressed="true"] { background: var(--on); color: var(--hue); }
.on-counter .seg button[aria-pressed="true"] { background: var(--ink); color: var(--tone-13); }

.field { width: 100%; min-height: 50px; padding: 0 1.1rem; border-radius: 999px; background: var(--tone-13); border: 1.5px solid transparent; font-size: 1rem; color: var(--ink); box-shadow: 0 0 0 1px var(--ink3); }
.field::placeholder { color: var(--tone-17); }
.field:focus { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.field[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--err); }
select.field { appearance: none; padding-right: 2.6rem; background: var(--tone-13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23151515' stroke-width='1.7'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1.1rem center; }
.opt { display: flex; align-items: center; gap: .7rem; padding: .4rem .2rem; cursor: pointer; border-radius: 6px; }
.opt:hover { background: var(--tone-18); }
.opt input { appearance: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink); flex: none; display: grid; place-items: center; }
.opt input:checked { background: var(--ink); }
.opt input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--tone-13); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.pill { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .35rem 0 .8rem; border-radius: 999px; background: var(--ink); color: var(--tone-13); font-size: .88rem; font-weight: 600; }
.pill button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--tone-19); }
.pill button:hover { color: var(--tone-13); background: var(--tone-20); }

.photo { overflow: hidden; background: var(--counter2); border-radius: 10px; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.door-shadow { filter: drop-shadow(0 22px 26px var(--tone-21)) drop-shadow(0 2px 2px var(--tone-22)); }

dialog::backdrop { background: var(--tone-23); }
dialog[open] { animation: dlg .45s var(--ease-out); }
@keyframes dlg { from { opacity: 0; transform: translateY(18px) scale(.985); } }
nav a[aria-current="page"] { background: var(--ink); color: var(--tone-13); }

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

html, body { overflow-x: clip; }

footer :focus-visible, .bg-ink :focus-visible { outline-color: var(--tone-13); }
.btn { white-space: nowrap; }
#deck { overflow: clip; }
.chip-s:not([aria-pressed="true"]) .code, .chip-s:not([aria-pressed="true"]) .nm { visibility: hidden; }