/* Hallmark · shape: shape picker · genre: modern-minimal · theme: custom (by request: direction contract) · job: try · idea: "a door family is a shape; six drawings on a worktable teach the range" · vibe: "foundation course worktable, primaries by role" · hero: one large door drawing redrawn per chosen profile · nav: thin rule bar · footer: rule-topped columns · imagery: the product drawn, plus photographs (stock stand-ins) · signature: the profile redraws itself
 * axes: custom · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V5 · weakest: S, drawings are generic profiles; named every family by its real edge */
/* Hallmark · waive 80 · each drawing is the product in its real profile · the six door shapes are the content this page teaches */
/* Hallmark · waive 39b · pick buttons hold a full door drawing as their face · the shape picker shows the door itself, so it stands taller than a text button */
/* 03 · Profile Geometry — drawings on a white worktable */
:root { --ink: #161616; --ink2: #4a4a47; --ink3: #6e6e69; --hair: #e4e4de; --red: #e0391c; --blue: #2443b5; --blue-d: #1a3290; --yellow: #f4c20d; --ease: cubic-bezier(.65, 0, .35, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);   --tone-1: #c9c9c2; --tone-2: #fcfcfa; --tone-3: #7a7a74; --tone-4: #ecece6; --tone-5: rgba(255,255,255,.82); --font-body: Jost, system-ui, sans-serif;
}
html { -webkit-tap-highlight-color: transparent; scrollbar-color: var(--tone-1) var(--tone-2); }
body { background: var(--tone-2) url("grid.svg"); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.55; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
input { caret-color: var(--red); }
.lc { text-transform: lowercase; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.num { font-variant-numeric: tabular-nums lining-nums; }
a.ul { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; text-decoration-color: var(--blue); }
a.ul:hover { color: var(--blue); }

/* Primary forms, by role */
.circle { display: inline-block; border-radius: 50%; background: var(--red); flex: none; }
.square { display: inline-block; background: var(--blue); flex: none; }
.tri { display: inline-block; width: 0; height: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: .86em solid var(--yellow); flex: none; }

.btn { display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: 0 1.4rem; font-weight: 500; font-size: 1.05rem; text-transform: lowercase; letter-spacing: -.005em; transition: background-color .2s, color .2s, box-shadow .2s; }
.btn-blue { background: var(--blue); color: var(--tone-2); }
.btn-blue:hover { background: var(--blue-d); }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Profile picker: small drawings on a baseline, the red circle marks the chosen one */
.pick { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .4rem .25rem 0; color: var(--ink2); }
.pick .d { width: 100%; aspect-ratio: 3 / 5; transition: transform .35s var(--ease-out); }
.pick:hover .d { transform: translateY(-4px); }
.pick .mark { width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--hair); transition: background .25s, box-shadow .25s, transform .3s var(--ease-out); }
.pick[aria-pressed="true"] { color: var(--ink); }
.pick[aria-pressed="true"] .mark { background: var(--red); box-shadow: none; transform: scale(1.4); }
.pick span.t { font-size: .82rem; text-transform: lowercase; line-height: 1.1; text-align: center; }

/* The big drawing */
.stage svg rect, .stage svg path, .stage svg line { vector-effect: non-scaling-stroke; }

.field { width: 100%; min-height: 52px; padding: 0 1rem; background: var(--tone-2); border: 1.5px solid var(--ink); font-size: 1.05rem; border-radius: 0; }
.field::placeholder { color: var(--tone-3); }
.field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.field[aria-invalid="true"] { border-color: var(--red); }
select.field { appearance: none; padding-right: 2.4rem; background: var(--tone-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23161616' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center; }

.opt { display: flex; align-items: center; gap: .75rem; padding: .38rem 0; cursor: pointer; text-transform: lowercase; }
.opt input { appearance: none; width: 16px; height: 16px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .15s, box-shadow .15s; }
.opt input:checked { background: var(--blue); box-shadow: none; }
.opt:hover { color: var(--blue); }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .35rem 0 .8rem; box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); font-size: .9rem; text-transform: lowercase; }
.chip button { width: 24px; height: 24px; display: grid; place-items: center; }
.chip button:hover { color: var(--red); }

.photo { overflow: hidden; background: var(--tone-4); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }

dialog::backdrop { background: var(--tone-5); }
dialog[open] { animation: dlg .45s var(--ease-out); }
@keyframes dlg { from { opacity: 0; transform: translateY(24px); } }
nav a[aria-current="page"] { color: var(--ink); }
nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: .45rem; vertical-align: .15em; }

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

html, body { overflow-x: clip; }
.btn:active { transform: translateY(1px); }

.bg-blue :focus-visible { outline-color: var(--tone-2); }
.btn { white-space: nowrap; }