/* Autenixa — quadro de chaves. A reception key cabinet: walnut frame, green felt, brass hooks and plate, the door open with the sign-out sheet. */
:root {
  --wall: #D3CCBF; --wall-hi: #ECE6DA;
  --ink: #211C15; --ink-2: #4D463B; --ink-3: #6F675A;
  --felt: #1F4D3A; --felt-d: #153A2A; --felt-dd: #0F2A1F; --felt-l: #2C6249;
  --on-felt: #E8ECE2; --on-felt-2: #BFD2C4;
  --brass-l: #EFD593; --brass: #C39543; --brass-d: #8A6524; --engrave: #2E200A;
  --walnut: #4A2C1C; --walnut-d: #2C190F; --walnut-l: #6E4630;
  --tag: #F6F4EE; --blue: #2457A6; --red: #BF3A2B;
  --lam: #F2EFE6; --paper: #FBF9F3; --hair: #CBC4B5;
  --fd: 'Fraunces', 'Iowan Old Style', Georgia, serif; --ft: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.16, 1, .3, 1);
  --brass-grad: linear-gradient(180deg, #F0D592 0%, #D2A955 38%, #B68C40 72%, #95702C 100%);
  --wood: repeating-linear-gradient(91deg, rgba(255, 214, 170, .05) 0 2px, transparent 2px 9px), repeating-linear-gradient(89.3deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 17px), linear-gradient(180deg, #57341F, #3F2416 60%, #331C10);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 400 16px/1.55 var(--ft); }
html { -webkit-text-size-adjust: 100%; min-height: 100%;
  background: radial-gradient(1100px 620px at 28% -4%, var(--wall-hi), rgba(236, 230, 218, 0) 72%), radial-gradient(900px 600px at 100% 100%, #C5BDAE, rgba(197, 189, 174, 0) 70%), var(--wall); }
::selection { background: var(--brass-l); color: var(--engrave); }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brass-l); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- wall + cabinet ---------- */
.wall { max-width: 1440px; margin: 0 auto; padding: 32px 32px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: stretch; }
.cabinet { position: relative; min-width: 0; background: var(--wood); border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .25), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 0 rgba(40, 22, 10, .3), 0 40px 70px -36px rgba(40, 24, 10, .75); }
.rail-top { display: flex; align-items: center; gap: 22px; height: 66px; padding: 0 28px; }
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; display: block; }
.rail-label { margin: 0; padding: 5px 12px 4px; background: var(--brass-grad); color: var(--engrave); border-radius: 2px; font: 700 10.5px/1.3 var(--ft); letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .7), 0 1px 2px rgba(0, 0, 0, .5); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); white-space: nowrap; }
.rail-label i { font-style: normal; opacity: .6; padding: 0 2px; }
.lang { margin-left: auto; display: flex; padding: 3px; gap: 2px; border-radius: 4px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 220, 180, .15); }
.lang button { border: 0; background: transparent; color: var(--brass-l); font: 700 12px/1 var(--ft); letter-spacing: .12em; padding: 7px 10px 6px; border-radius: 3px; transition: background .3s var(--out), color .3s var(--out); }
.lang button[aria-pressed="true"] { background: var(--brass-grad); color: var(--engrave); box-shadow: inset 0 1px 0 rgba(255, 245, 210, .7); }

.felt { position: relative; margin: 0 22px; padding: 38px 40px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; color: var(--on-felt); border-radius: 2px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
    radial-gradient(900px 500px at 30% 10%, rgba(255, 236, 190, .1), rgba(255, 236, 190, 0) 70%), var(--felt);
  box-shadow: inset 0 10px 18px -6px rgba(0, 0, 0, .55), inset 0 0 0 2px var(--felt-dd), inset 6px 0 14px -8px rgba(0, 0, 0, .5), inset -6px 0 14px -8px rgba(0, 0, 0, .5); }
.board { min-width: 0; }
h1 { margin: 0; font: 560 clamp(44px, 4.7vw, 74px)/.9 var(--fd); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; letter-spacing: -.035em; color: var(--brass-l); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
h1 .w { display: block; }
h1 .w + .w { margin-left: .9em; color: var(--on-felt); }
.intro { max-width: 50ch; margin: 18px 0 0; color: var(--on-felt-2); font-size: 15.5px; line-height: 1.6; }
.intro b { color: var(--on-felt); font-weight: 600; }

/* ---------- the four keys ---------- */
.keys { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hook { position: relative; min-width: 0; height: 252px; }
.hook::before { content: ''; position: absolute; left: -7px; right: -7px; top: 3px; height: 9px; background: var(--brass-grad); border-radius: 1px; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.hook:first-child::before { border-radius: 5px 1px 1px 5px; } .hook:last-child::before { border-radius: 1px 5px 5px 1px; }
.hook-no { position: absolute; left: 6px; top: 16px; font: 600 15px/1 var(--fd); font-variation-settings: 'opsz' 20; letter-spacing: .04em; color: var(--brass-l); opacity: .85; font-variant-numeric: tabular-nums; }
.peg { position: absolute; left: 50%; top: 0; width: 40px; height: 46px; margin-left: -20px; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.key { position: absolute; left: 50%; top: 30px; width: min(100%, 128px); margin-left: calc(min(100%, 128px) / -2); padding: 0; border: 0; background: none; text-align: left; z-index: 2;
  transform-origin: 50% 6px; transition: transform .55s var(--spring), filter .4s var(--out); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .38)); touch-action: manipulation; }
.ring { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; border: 3.5px solid #B8BCC0; border-top-color: #E4E7EA; border-right-color: #8F959B; z-index: 2; }
.key::before { content: ''; position: absolute; left: 56%; top: 10px; width: 16px; height: 52px; z-index: 0; transform: rotate(-26deg); transform-origin: 50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 52'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm0 4.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6ZM5.5 14.5h5V22H13v3h-2.5v3H13v3h-2.5v3.5H13V38h-2.5v12.5L8 52l-2.5-1.5Z' fill='%23B9BDC2' stroke='%236E7378' stroke-width='.8'/%3E%3C/svg%3E") no-repeat center / contain; }
.tag { position: relative; z-index: 1; display: block; margin-top: 15px; padding: 22px 0 12px; background: linear-gradient(160deg, #FFFFFF 0%, var(--tag) 40%, #E9E6DD 100%); border-radius: 10px 10px 16px 16px; color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08), inset 0 1px 0 #fff; --glass: var(--tag); }
.tag::before { content: ''; position: absolute; left: 50%; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--felt-d); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .6); }
.band { display: block; padding: 4px 12px 3px; color: #fff; font: 700 19px/1.1 var(--fd); font-variation-settings: 'opsz' 30, 'SOFT' 50; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.car .band { background: var(--blue); } .moto .band { background: var(--red); }
.sil { display: block; width: calc(100% - 22px); height: 44px; margin: 10px 11px 4px; fill: #2A2620; color: #2A2620; }
.moto .sil { height: 46px; }
.tag b { display: block; padding: 0 12px; font: 600 17.5px/1.15 var(--fd); font-variation-settings: 'opsz' 30, 'SOFT' 100; letter-spacing: -.01em; }
.tag small { display: block; padding: 3px 12px 0; font: 500 11.5px/1.35 var(--ft); color: var(--ink-2); }
.key:hover { transform: rotate(2.4deg); }
.key[aria-pressed="true"] { z-index: 6; transform: translate(4px, -4px) rotate(-7deg) scale(1.05); filter: drop-shadow(0 26px 18px rgba(0, 0, 0, .55)); }
.key[aria-pressed="true"] .tag { box-shadow: 0 0 0 3px var(--brass-l), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.key:focus-visible { outline: none; } .key:focus-visible .tag { box-shadow: 0 0 0 3px var(--brass-l); }
.key.dragging { opacity: .35; }
html.dragging, html.dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
@media (pointer: fine) { .key { cursor: grab; } }

.hand { min-height: 26px; margin: 10px 0 0; font: 500 14px/1.5 var(--ft); color: var(--brass-l); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hand.warn { color: #FFD8B0; }
.hand button { border: 1px solid rgba(239, 213, 147, .55); background: rgba(0, 0, 0, .18); color: var(--brass-l); border-radius: 3px; padding: 3px 9px; font: 600 12px/1.4 var(--ft); }
.hand button:hover { background: rgba(239, 213, 147, .16); }

/* ---------- time hooks ---------- */
.times { margin-top: 18px; padding-top: 22px; border-top: 1px dashed rgba(239, 213, 147, .28); }
.times-head h2 { margin: 0; font: 580 27px/1.1 var(--fd); font-variation-settings: 'opsz' 60, 'SOFT' 100; color: var(--brass-l); letter-spacing: -.015em; }
.times-head p { margin: 6px 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55; color: var(--on-felt-2); }
.times-head b { color: var(--on-felt); font-weight: 600; font-variant-numeric: tabular-nums; }
.times-head em { font-style: normal; color: var(--brass-l); font-weight: 600; }
.days { display: none; }
.grid { margin-top: 16px; }
.row { display: grid; grid-template-columns: 46px minmax(0, 6fr) 16px minmax(0, 8fr); align-items: start; }
.row + .row { margin-top: 2px; }
.blk { position: relative; display: grid; }
.am { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-column: 2; } .pm { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-column: 4; }
.row:not(.head) .blk::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 5px; background: var(--brass-grad); border-radius: 3px; box-shadow: 0 2px 2px rgba(0, 0, 0, .4); }
.head .blk span { text-align: center; font: 500 10.5px/1 var(--ft); color: var(--on-felt-2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding-bottom: 6px; }
.head .blk span.half { color: rgba(191, 210, 196, .55); }
.head .lbl { font: 600 10px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--on-felt-2); padding-top: 1px; }
.day { grid-column: 1; padding-top: 3px; font: 600 15px/1 var(--fd); font-variation-settings: 'opsz' 20, 'SOFT' 100; color: var(--brass-l); }
.th { position: relative; height: 54px; border: 0; padding: 0; background: none; border-radius: 4px; transition: background .3s var(--out); }
.th:hover { background: rgba(239, 213, 147, .07); }
.pin { position: absolute; left: 50%; top: 5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #FBEAB8, #C39543 55%, #7A5A22); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: transform .35s var(--spring), box-shadow .35s var(--out); }
.pin::after { content: ''; position: absolute; left: 3px; top: 7px; width: 6px; height: 10px; border-right: 2.5px solid #B68C40; border-bottom: 2.5px solid #B68C40; border-bottom-right-radius: 7px; }
.tm { display: none; }
html.holding .th:not(.on) .pin { box-shadow: 0 0 0 4px rgba(239, 213, 147, .22), 0 1px 2px rgba(0, 0, 0, .6); }
html.holding .th { cursor: copy; }
.th.target .pin, .th:focus-visible .pin { transform: scale(1.45); box-shadow: 0 0 0 5px rgba(239, 213, 147, .35); }
.th:focus-visible { outline: 2px solid var(--brass-l); outline-offset: -2px; }
.mini { position: absolute; left: 50%; top: 17px; width: 25px; margin-left: -12.5px; padding: 9px 0 4px; z-index: 2; background: var(--tag); border-radius: 3px 3px 6px 6px; color: var(--ink);
  font: 700 10.5px/1 var(--fd); font-variation-settings: 'opsz' 14; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 4px 5px -1px rgba(0, 0, 0, .5); transform-origin: 50% -6px; }
.mini::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px 3px 0 0; background: var(--blue); }
.mini.moto::before { background: var(--red); }
.mini::after { content: ''; position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 2px solid #B8BCC0; }
.th.swing .mini { animation: swing 1.1s var(--out) both; }
@keyframes swing { 0% { transform: translateY(-14px) rotate(24deg); opacity: 0; } 25% { transform: rotate(-14deg); opacity: 1; } 48% { transform: rotate(8deg); } 68% { transform: rotate(-4deg); } 85% { transform: rotate(1.5deg); } 100% { transform: none; } }

/* ---------- laminated course cards ---------- */
.cards { position: relative; min-width: 0; }
.cards h2 { margin: 0 0 2px 24px; font: 580 27px/1.1 var(--fd); font-variation-settings: 'opsz' 60, 'SOFT' 100; color: var(--brass-l); letter-spacing: -.015em; }
.cards-sub { margin: 0 0 18px 24px; font-size: 12.5px; color: var(--on-felt-2); }
.rod { position: absolute; left: 4px; top: 76px; bottom: 6px; width: 7px; border-radius: 4px; background: linear-gradient(90deg, #95702C, #F0D592 45%, #B68C40); box-shadow: 2px 3px 4px rgba(0, 0, 0, .45); }
.rod::before, .rod::after { content: ''; position: absolute; left: -4px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBEAB8, #B68C40 60%, #6B4E1A); }
.rod::before { top: -6px; } .rod::after { bottom: -6px; }
.card { position: relative; margin: 0 0 10px 24px; border-radius: 12px; color: var(--ink); transform: rotate(var(--r, 0deg)); transform-origin: 0 30px; transition: transform .5s var(--spring), box-shadow .4s var(--out);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .5) 36%, rgba(255, 255, 255, 0) 44%), linear-gradient(180deg, #F7F5EE, var(--lam));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 2px rgba(0, 0, 0, .05), 0 12px 18px -12px rgba(0, 0, 0, .7); }
.card:nth-of-type(1) { --r: -.7deg; } .card:nth-of-type(2) { --r: .5deg; } .card:nth-of-type(3) { --r: -.3deg; } .card:nth-of-type(4) { --r: .8deg; } .card:nth-of-type(5) { --r: -.5deg; } .card:nth-of-type(6) { --r: .35deg; }
.card::before { content: ''; position: absolute; left: -27px; top: 22px; width: 42px; height: 13px; border: 3px solid #C39543; border-radius: 50%; z-index: 2; border-left-color: #8A6524; border-bottom-color: #8A6524; }
.card::after { content: ''; position: absolute; left: 7px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--felt-d); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.card.open { --r: 0deg; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 26px 30px -18px rgba(0, 0, 0, .75); }
.card:hover:not(.open) { transform: rotate(0deg) translateX(3px); }
.c-head { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 8px; width: 100%; padding: 14px 16px 13px 26px; border: 0; background: none; text-align: left; align-items: baseline; border-radius: 12px; }
.c-cat { grid-row: 1 / span 2; font: 700 26px/1 var(--fd); font-variation-settings: 'opsz' 40, 'SOFT' 50; letter-spacing: -.03em; color: var(--ink); padding-bottom: 4px; border-bottom: 4px solid var(--brass); align-self: start; text-align: center; }
.card[data-c="b"] .c-cat { border-color: var(--blue); } .card[data-c="a"] .c-cat { border-color: var(--red); }
.card[data-c="ab"] .c-cat { border-image: linear-gradient(90deg, var(--blue) 50%, var(--red) 50%) 1; }
.c-ttl { font: 600 16.5px/1.18 var(--fd); font-variation-settings: 'opsz' 24, 'SOFT' 100; letter-spacing: -.01em; }
.c-pr { grid-column: 2; margin-top: 5px; font: 600 13px/1.35 var(--ft); color: var(--ink); font-variant-numeric: tabular-nums; }
.c-pr small { display: block; font: 500 11px/1.3 var(--ft); color: var(--ink-3); letter-spacing: .02em; }
.c-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--out); }
.card.open .c-body { grid-template-rows: 1fr; }
.c-in { min-height: 0; overflow: hidden; padding: 0 16px 0 26px; }
.card.open .c-in { padding-bottom: 16px; }
.c-in dl { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .1); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.c-in dt { font: 700 10px/1.5 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.c-in dd { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.c-in dd:last-child { margin-bottom: 0; }
.c-keys { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 11px/1.4 var(--ft); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.chip { border: 1px solid #BDB6A7; border-top: 4px solid var(--blue); background: #fff; border-radius: 3px 3px 5px 5px; padding: 3px 7px 3px; font: 700 12px/1.2 var(--fd); font-variation-settings: 'opsz' 14; letter-spacing: 0; text-transform: none; color: var(--ink); transition: transform .3s var(--spring); }
.chip.moto { border-top-color: var(--red); }
.chip:hover { transform: translateY(-2px) rotate(-3deg); }
.pin-btn { margin-top: 14px; border: 0; border-radius: 4px; padding: 9px 14px; background: var(--felt); color: var(--on-felt); font: 600 13px/1.2 var(--ft); box-shadow: 0 2px 0 var(--felt-dd); transition: background .25s var(--out); }
.pin-btn:hover { background: var(--felt-l); }
.card.pinned .pin-btn { background: transparent; color: var(--felt); box-shadow: inset 0 0 0 1.5px var(--felt); }
.card.pinned .c-head::after { content: ''; position: absolute; right: 22px; top: -9px; width: 12px; height: 34px; border: 2.5px solid #9DA3A8; border-radius: 7px; border-bottom-color: #7B8187; }

/* ---------- frame bottom: the brass plate ---------- */
.rail-bottom { padding: 20px 22px 22px; }
.plate { position: relative; display: grid; grid-template-columns: 1.4fr 1.15fr 1fr 1.25fr; gap: 16px 28px; padding: 24px 34px 20px; border-radius: 3px; color: var(--engrave); font-size: 13px; line-height: 1.5;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #E6C984 0%, #CDA75D 42%, #B88F43 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .75), inset 0 -2px 0 rgba(90, 60, 15, .45), 0 3px 6px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(255, 240, 200, .45); }
.plate p { margin: 0 0 6px; }
.plate a { color: var(--engrave); text-decoration-color: rgba(46, 32, 10, .5); text-underline-offset: 2px; }
.pl-col { min-width: 0; }
.pl-name { font: 650 30px/1 var(--fd) !important; font-variation-settings: 'opsz' 72, 'SOFT' 30; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px !important; }
.pl-k { font: 700 10.5px/1.4 var(--ft); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px !important; }
.pl-small { font-size: 11.5px; line-height: 1.45; }
.pl-law { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(70, 46, 12, .4); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .45); display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: space-between; align-items: baseline; }
.pl-law p:first-child { font: 500 14.5px/1.45 var(--fd); font-variation-settings: 'opsz' 18, 'SOFT' 50; max-width: 78ch; }
.screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E2AA, #A9813A 60%, #6B4E1A); box-shadow: 0 1px 1px rgba(255, 240, 200, .5); }
.screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #5A4114; transform: rotate(35deg); border-radius: 1px; }
.s1 { left: 10px; top: 10px; } .s2 { right: 10px; top: 10px; } .s3 { left: 10px; bottom: 10px; } .s4 { right: 10px; bottom: 10px; }
.s2::after { transform: rotate(-20deg); } .s3::after { transform: rotate(80deg); }

/* ---------- the door with the sign-out sheet ---------- */
.door { position: relative; min-width: 0; margin: 16px 0; padding: 30px 26px 30px 30px; border-radius: 0 7px 7px 0;
  background: repeating-linear-gradient(90.6deg, rgba(255, 214, 170, .045) 0 2px, transparent 2px 11px), linear-gradient(90deg, #2E1A0F 0%, #4C2D1C 14%, #5B3824 70%, #4A2B1B 100%);
  box-shadow: inset 16px 0 22px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 220, 180, .2), 0 36px 60px -34px rgba(40, 24, 10, .8); }
.door::before { content: ''; position: absolute; inset: 14px 12px 14px 16px; border-radius: 4px; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28), inset 0 0 0 3px rgba(255, 220, 180, .08), inset 0 0 0 9px rgba(0, 0, 0, .06); }
.hinge { position: absolute; left: -6px; width: 12px; height: 56px; border-radius: 3px; background: linear-gradient(90deg, #8A6524, #F0D592 50%, #8A6524); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.hinge.h1 { top: 70px; } .hinge.h2 { bottom: 70px; }
.strip { display: none; }
.sheet { position: sticky; top: 24px; padding: 30px 24px 20px; background: linear-gradient(180deg, #FFFDF8, var(--paper)); color: var(--ink); border-radius: 2px; transform: rotate(.4deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 22px 30px -18px rgba(0, 0, 0, .75); }
.clip { position: absolute; left: 50%; top: -14px; width: 116px; height: 30px; margin-left: -58px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #CFD3D6, #9AA0A6); box-shadow: inset 0 1px 0 #fff, 0 3px 4px rgba(0, 0, 0, .45); }
.clip::after { content: ''; position: absolute; left: 36px; right: 36px; top: 7px; height: 8px; border-radius: 4px; background: #5F656B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.sheet-x { display: none; }
.sheet h2 { margin: 6px 0 2px; font: 600 30px/1.05 var(--fd); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; letter-spacing: -.025em; }
.sheet-kind { margin: 0 0 14px; font: 700 10.5px/1.5 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sheet-kind b { color: var(--red); font-weight: 700; }
table.out { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.out th { text-align: left; font: 700 9.5px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 6px 5px 0; border-bottom: 1.5px solid var(--ink); }
.out td { height: 31px; padding: 0 6px 0 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.out td:last-child, .out th:last-child { width: 26px; padding-right: 0; text-align: right; }
.out .no { display: inline-block; min-width: 26px; padding: 2px 4px 1px; border-top: 3px solid var(--blue); background: #fff; box-shadow: 0 0 0 1px #D4CDBE; font: 700 11px/1.1 var(--fd); text-align: center; border-radius: 2px; }
.out .no.moto { border-top-color: var(--red); }
.out .ex { color: var(--ink-3); font-size: 11px; }
.out .rm { border: 0; background: none; width: 24px; height: 24px; border-radius: 3px; color: var(--ink-3); font-size: 17px; line-height: 1; }
.out .rm:hover { background: #EEE8DC; color: var(--red); }
.out tr.blank td { color: transparent; }
.stub { margin: 10px -24px 0; padding: 8px 24px 0; border-top: 1.5px dashed #BDB5A5; font: 600 10.5px/1.5 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stub b { font: 700 12px/1 var(--fd); letter-spacing: .02em; color: var(--ink); }
.pin-line { margin: 10px 0 14px; padding: 9px 12px; background: #F1EDE2; border-left: 3px solid var(--brass); font-size: 13px; line-height: 1.45; color: var(--ink); }
.pin-line small { color: var(--ink-3); font-size: 11.5px; }
#req label { display: block; margin-bottom: 10px; }
#req label span { display: block; font: 700 9.5px/1.4 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
#req input, #req textarea { width: 100%; border: 0; border-bottom: 1.5px solid #8C8475; background: transparent; padding: 5px 0 6px; font: 400 15px/1.4 var(--ft); color: var(--ink); border-radius: 0; resize: vertical; }
#req input::placeholder, #req textarea::placeholder { color: #8A8274; }
#req input:focus, #req textarea:focus { outline: none; border-bottom-color: var(--felt); box-shadow: 0 1.5px 0 var(--felt); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.acts button { border-radius: 4px; padding: 11px 15px; font: 600 14px/1.2 var(--ft); transition: background .25s var(--out), color .25s var(--out); }
.go { border: 0; background: var(--felt); color: var(--on-felt); box-shadow: 0 2px 0 var(--felt-dd); }
.go:hover { background: var(--felt-l); }
.mail { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.mail:hover { background: var(--ink); color: var(--paper); }
.sent { margin: 6px 0 0; min-height: 0; font: 600 12.5px/1.45 var(--ft); color: var(--felt); }
.sent:empty { display: none; }
.sheet-contact { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2); }
.sheet-contact a { color: var(--ink); font-weight: 600; text-underline-offset: 2px; }

.ghost { position: fixed; left: 0; top: 0; width: 46px; padding: 14px 0 6px; z-index: 60; pointer-events: none; display: none; background: var(--tag); border-radius: 4px 4px 8px 8px; color: var(--ink); text-align: center;
  font: 700 16px/1 var(--fd); box-shadow: 0 18px 24px -8px rgba(0, 0, 0, .55); }
.ghost::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 4px 4px 0 0; background: var(--blue); }
.ghost.moto::before { background: var(--red); }
.ghost.on { display: block; }

/* ---------- load choreography (live only) ---------- */
html.js:not(.static) h1 .w { animation: rise .9s var(--out) backwards; } html.js:not(.static) h1 .w + .w { animation-delay: .12s; }
html.js:not(.static) .intro { animation: rise .9s var(--out) .22s backwards; }
html.js:not(.static) .hook .key { animation: drop 1.1s var(--out) backwards; animation-delay: calc(var(--i, 0) * 110ms + 300ms); }
html.js:not(.static) .card { animation: slide .8s var(--out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 500ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-36px) rotate(16deg); } 35% { opacity: 1; transform: rotate(-8deg); } 60% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: none; } }
@keyframes slide { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1260px) {
  .wall { padding: 24px 20px 32px; grid-template-columns: minmax(0, 1fr) 340px; }
  .felt { grid-template-columns: minmax(0, 1fr); padding: 34px 32px 40px; }
  .cards { max-width: 620px; }
  .plate { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
  .door { margin: 0 22px; border-radius: 0 0 7px 7px; padding: 34px 28px 30px; }
  .hinge { display: none; }
  .sheet { position: relative; top: 0; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .wall { padding: 0; display: block; }
  .cabinet { border-radius: 0; }
  .rail-top { height: auto; min-height: 58px; padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .brand img { height: 26px; }
  .rail-label { order: 3; flex-basis: 100%; text-align: center; white-space: normal; font-size: 9.5px; letter-spacing: .12em; }
  .felt { margin: 0 10px; padding: 26px 16px 30px; gap: 30px; }
  h1 { font-size: clamp(38px, 11vw, 52px); }
  h1 .w + .w { margin-left: .5em; }
  .intro { font-size: 15px; }
  .keys { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 24px -16px 0; padding: 0 16px 6px; scrollbar-width: none; }
  .keys::-webkit-scrollbar { display: none; }
  .hook { flex: 0 0 138px; scroll-snap-align: start; height: 250px; }
  .key { width: 124px; margin-left: -62px; }
  .days { display: flex; gap: 4px; margin-top: 14px; }
  .days button { flex: 1; min-width: 0; padding: 9px 0 8px; border: 1px solid rgba(239, 213, 147, .35); background: rgba(0, 0, 0, .16); color: var(--on-felt-2); border-radius: 3px; font: 600 14px/1 var(--fd); font-variation-settings: 'opsz' 20, 'SOFT' 100; position: relative; }
  .days button[aria-selected="true"] { background: var(--brass-grad); color: var(--engrave); border-color: transparent; }
  .days button i { position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-l); }
  .days button[aria-selected="true"] i { background: var(--engrave); }
  .grid { margin-top: 12px; }
  .row.head { display: none; }
  .row { display: none; grid-template-columns: minmax(0, 1fr); }
  .row.cur { display: grid; }
  .row .day { display: none; }
  .am, .pm { grid-column: 1; }
  .pm { margin-top: 10px; }
  .am { grid-template-columns: repeat(8, minmax(0, 1fr)); } .am::before { right: 25% !important; }
  .th { height: 84px; }
  .tm { display: block; position: absolute; left: 0; right: 0; bottom: 3px; font: 500 10.5px/1 var(--ft); color: var(--on-felt-2); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
  .mini { width: 27px; margin-left: -13.5px; font-size: 11.5px; }
  .cards h2, .cards-sub { margin-left: 22px; }
  .card { margin-left: 22px; }
  .c-head { grid-template-columns: 46px minmax(0, 1fr); padding: 13px 14px 12px 24px; }
  .c-in { padding: 0 14px 0 24px; }
  .rail-bottom { padding: 16px 10px 14px; }
  .plate { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 18px; gap: 12px; }
  .pl-name { font-size: 26px !important; }
  .door { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px -10px rgba(0, 0, 0, .6); }
  .door::before { display: none; }
  .strip { display: flex; align-items: center; gap: 10px; width: 100%; height: 60px; padding: 0 18px; border: 0; background: none; color: var(--brass-l); text-align: left; }
  .strip-t { font: 600 19px/1 var(--fd); font-variation-settings: 'opsz' 30, 'SOFT' 100; }
  .strip-n { padding: 3px 8px 2px; border-radius: 3px; background: var(--brass-grad); color: var(--engrave); font: 700 12px/1.2 var(--ft); }
  .strip-n:empty { display: none; }
  .strip-a { margin-left: auto; font: 600 12px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-2); }
  .sheet { display: none; position: relative; top: 0; transform: none; margin: 0 10px 10px; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 22px 18px 18px; border-radius: 4px; }
  .door.open .sheet { display: block; }
  .door.open .strip { height: 52px; }
  .clip { display: none; }
  .sheet-x { display: block; position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: #EEE8DC; border-radius: 4px; font-size: 22px; line-height: 1; color: var(--ink); }
  .stub { margin: 10px -18px 0; padding: 8px 18px 0; }
}

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: autenixa */
.ck { --ck-bottom: 72px; left: 24px; bottom: 24px; width: 600px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; align-items: center; padding: 16px 34px 16px 38px; border-radius: 3px; color: #2E200A; font: 400 13px/1.45 'Work Sans', 'Segoe UI', sans-serif; text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #E8CC88 0%, #CDA75D 46%, #B88F43 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .8), inset 0 -2px 0 rgba(90, 60, 15, .45), 0 3px 0 #6B4E1A, 0 26px 44px -18px rgba(30, 18, 6, .75); }
.ck::before, .ck::after { content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E2AA, #A9813A 60%, #6B4E1A); box-shadow: 0 1px 1px rgba(255, 240, 200, .5); }
.ck::before { left: 13px; } .ck::after { right: 13px; }
.ck .ck-k { grid-column: 1; font: 700 10.5px/1.4 'Work Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #3B2A0E; padding-bottom: 5px; margin-bottom: 6px; border-bottom: 1px solid rgba(70, 46, 12, .4); box-shadow: 0 1px 0 rgba(255, 240, 200, .45); }
.ck .ck-t { grid-column: 1; } .ck .ck-t b { display: block; font: 600 19px/1.15 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 30, 'SOFT' 100; letter-spacing: -.01em; color: #2A1C07; margin-bottom: 4px; }
.ck .ck-p { grid-column: 1; font-size: 12.5px; color: #2E200A; }
.ck .b { grid-column: 2; grid-row: 1 / span 3; margin: 0; display: grid; grid-template-columns: auto auto; gap: 8px; justify-items: center; }
.ck button { position: relative; width: 74px; padding: 34px 4px 7px; border: 0; border-radius: 3px; font: 700 10px/1.1 'Work Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #2A1C07; text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
  background: linear-gradient(180deg, #D9B66B, #B88F43); box-shadow: inset 0 0 0 1px rgba(70, 46, 12, .55), inset 0 2px 0 rgba(255, 245, 210, .55), 0 1px 0 rgba(255, 240, 200, .5); transition: filter .2s cubic-bezier(.16, 1, .3, 1); }
.ck button::before { content: ''; position: absolute; left: 50%; top: 8px; width: 16px; height: 22px; margin-left: -8px; border-radius: 8px; background: #6B4E1A; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.ck button::after { content: ''; position: absolute; left: 50%; width: 10px; height: 12px; margin-left: -5px; border-radius: 5px; background: linear-gradient(180deg, #FBEAB8, #A9813A); box-shadow: 0 1px 2px rgba(0, 0, 0, .55); transition: top .25s cubic-bezier(.34, 1.56, .64, 1); }
.ck button.ok::after { top: 10px; } .ck button.no::after { top: 16px; }
.ck button.ok:hover::after { top: 9px; } .ck button.no:hover::after { top: 17px; }
.ck button:hover { filter: brightness(1.06); }
.ck a.more { grid-column: 1 / span 2; font: 600 11.5px/1.2 'Work Sans', sans-serif; color: #2A1C07; text-decoration: underline; text-decoration-color: rgba(46, 32, 10, .55); text-underline-offset: 2px; padding: 2px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2px solid #1F4D3A; outline-offset: 2px; }
@media (max-width: 760px) { .ck { left: 10px; right: 10px; bottom: 72px; width: auto; max-width: none; grid-template-columns: minmax(0, 1fr); padding: 14px 30px 14px 30px; } .ck .b { grid-column: 1; grid-row: auto; margin-top: 10px; grid-template-columns: auto auto auto; justify-content: start; align-items: center; } .ck a.more { grid-column: auto; margin-left: 6px; } }
footer.seller { max-width: 1376px; margin: 0 auto; padding: 22px 32px 30px; color: #2F2920; border-top: 1px solid rgba(33, 28, 21, .22); }
footer.seller b { color: #4D463B; opacity: 1; }
@media (max-width: 760px) { footer.seller { padding: 22px 16px 26px; } }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }