/* airing — a Naples vicolo, looking up at the washing. See DESIGN.md. */
:root {
  --sky: #9ccbe6; --terra: #c8643f; --salmon: #e9a58c; --green: #2c5b4c; --ink: #17242f;
  --linen: #f7f9f8; --peg: #b88a55; --scarlet: #df2a40; --slate: #6e7f8c; --indigo: #4a5a9a;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --body: "Karla", "Trebuchet MS", sans-serif;
  --code: "Fira Code", "Menlo", "Consolas", monospace;
  --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Cg fill='none' stroke='%236e7f8c' stroke-opacity='.16'%3E%3Cpath d='M-10 40C60 30 90 80 150 62S260 20 340 52'/%3E%3Cpath d='M-10 150c50 10 70-30 130-12s90 52 150 30 60-18 70-16' stroke-width='.8'/%3E%3Cpath d='M90 -5c10 40 40 60 30 110s30 70 20 120' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30'%3E%3Cg fill='none' stroke='%2317242f' stroke-opacity='.18'%3E%3Cpath d='M0 7c30-3 60 4 120 0'/%3E%3Cpath d='M0 16c40 3 70-4 120 1' stroke-width='.7'/%3E%3Cpath d='M0 24c30-2 80 3 120-1' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");
  --slats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Crect width='10' height='7' fill='%232c5b4c'/%3E%3Cpath d='M0 6.5H10' stroke='%2317242f' stroke-opacity='.5'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { background: var(--sky); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--body); }
code, pre { font-family: var(--code); }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 9; background: var(--linen); padding: 8px 12px; border: 2px solid var(--ink); }
.skip:focus { top: 12px; }

/* ── hero: the alley ─────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--sky); overflow: hidden; }
.stage { position: relative; }
#alley { display: block; width: 100%; }
.hero.land .stage { height: clamp(640px, min(100svh, 64vw), 1000px); }
.hero.land #alley { position: absolute; inset: 0; height: 100%; }
.hero:not(.land) #alley { height: clamp(470px, 66svh, 580px); }

.rope { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.twist { stroke: var(--peg); stroke-width: 1.2; stroke-dasharray: 2.5 3.5; stroke-linecap: round; }
.rope.thin { stroke-width: 1.2; stroke-opacity: .7; }
.sheet-word { font-family: var(--display); font-style: italic; font-weight: 800; fill: var(--ink); letter-spacing: -0.01em; }
.lab1 { font-family: var(--code); fill: var(--ink); }
.lab2 { font-family: var(--code); font-weight: 500; fill: var(--linen); }
.thread { stroke: var(--ink); stroke-width: .9; stroke-dasharray: 2 2; }
.label, .thread { transition: opacity .3s; }
.flip { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.flip.up { transform: scaleY(1); }
.basket-count { font: 700 13px var(--body); fill: var(--linen); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
.basket { transition: transform .25s; }
.hero.dragging .basket { transform: translateY(-8px); }

/* overlays: absolutely placed on the facades in landscape, stacked under the line on phones */
.land .plaque, .land .hosts, .land .verdict, .land .drop { position: absolute; }
.hero:not(.land) .stage { display: flex; flex-direction: column; gap: 18px; padding: 0 0 28px; }
.hero:not(.land) #alley { order: 0; }
.hero:not(.land) .plaque { order: 1; }
.hero:not(.land) .hosts { order: 2; }
.hero:not(.land) .verdict { order: 3; }
.hero:not(.land) .drop { order: 4; }
.hero:not(.land) .plaque, .hero:not(.land) .hosts, .hero:not(.land) .verdict, .hero:not(.land) .drop { margin: 0 max(16px, 5vw); }

.plaque {
  background: var(--veins), var(--linen); background-size: 320px 220px;
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 5px var(--linen), inset 0 0 0 6.5px var(--ink);
  padding: 26px 24px 20px; text-align: center;
}
.plaque::before, .plaque::after { content: ""; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--peg); border: 1.5px solid var(--ink); }
.plaque::before { left: 10px; } .plaque::after { right: 10px; }
.hero:not(.land) .plaque { position: relative; }
.vico { margin: 0 0 8px; font: 700 11px/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--slate); }
.lede { margin: 0 0 12px; font: italic 600 clamp(25px, 2.15vw, 32px)/1.06 var(--display); }
.sub { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; text-align: left; hyphens: auto; }
.sub code { font-size: .92em; }
.cmd { display: flex; align-items: stretch; border: 2px solid var(--ink); background: var(--ink); text-align: left; }
.cmd code { flex: 1; padding: 9px 8px 9px 10px; color: var(--linen); font-size: clamp(10.5px, .92vw, 12px); letter-spacing: -.01em; white-space: nowrap; overflow: auto; }
.cmd button, .drop button { font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; border: 0; cursor: pointer; }
.cmd button { background: var(--peg); color: var(--ink); padding: 0 10px; border-left: 2px solid var(--ink); }
.cmd button:hover { background: var(--linen); }
.cmd button.done { background: var(--green); color: var(--linen); }

.hosts-h { margin: 0 0 10px; font: italic 600 19px/1 var(--display); }
.land .hosts-h { color: var(--ink); }
.tags { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.hero:not(.land) .tags { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.tags button {
  position: relative; font: 700 13.5px/1 var(--body); color: var(--ink); cursor: pointer;
  background: var(--grain), var(--peg); background-size: 120px 30px; border: 1.6px solid var(--ink); border-radius: 3px 3px 9px 9px;
  padding: 11px 8px 10px 22px; text-align: left; transform: rotate(var(--tilt)); transform-origin: 50% -14px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .2s;
}
.tags button::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sky); border: 1.4px solid var(--ink); }
.tags button::after { content: ""; position: absolute; left: 50%; top: -15px; height: 14px; border-left: 1.4px solid var(--ink); }
.tags button:hover { transform: rotate(calc(var(--tilt) * -1)); }
.tags button[aria-pressed="true"] { background: var(--ink); color: var(--linen); transform: rotate(0) translateY(5px); }
.tags button[aria-pressed="true"]::before { background: var(--scarlet); }

.verdict { background: var(--green); color: var(--linen); border: 3px solid var(--ink); padding: 16px 18px 14px; }
.land .verdict::before, .land .verdict::after { content: ""; position: absolute; top: -26px; height: 23px; border-left: 2px dashed var(--ink); }
.land .verdict::before { left: 22%; } .land .verdict::after { right: 22%; }
.verdict.bad { border-top: 10px solid var(--scarlet); }
.verdict .big { margin: 0 0 6px; font: italic 800 clamp(22px, 2vw, 30px)/1.08 var(--display); }
.verdict .small { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; opacity: .92; }
.verdict .small .nb { white-space: nowrap; }
.verdict .small .runs { display: block; margin-top: 6px; font: 500 12px var(--code); opacity: .9; }
.verdict .small code { white-space: nowrap; font-size: 12px; background: rgba(23, 36, 47, .45); padding: 1px 5px; }
.verdict .keep { margin: 0 0 8px; font: 500 12.5px/1.45 var(--code); color: var(--salmon); }
.verdict .keep:empty, .verdict .saved:empty { display: none; }
.verdict .saved { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--linen); opacity: .85; }
.verdict .src { color: var(--linen); font-size: 13px; }

.drop { border: 2px dashed var(--ink); background: rgba(247, 249, 248, .9); padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.drop p { margin: 0 0 4px; }
.drop .now { font: italic 600 15px/1.3 var(--display); }
.drop .pick { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.drop .pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .pick:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.drop .mine-only { display: none; }
.drop.mine .mine-only { display: block; }
.drop .reset { background: none; padding: 0; text-transform: none; letter-spacing: 0; font: 700 14px var(--body); text-decoration: underline; color: var(--ink); }
.hero.dragging .drop { border-color: var(--green); background: var(--linen); }

/* ── below: the same alley, floor by floor ───────────────────────────────── */
.street { position: relative; padding: 24px 0 0; }
.street::before, .street::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7vw; }
.street::before { left: 0; background: var(--terra); }
.street::after { right: 0; background: var(--salmon); }
.floor { position: relative; padding: 64px max(20px, 10vw) 40px; }
.floor > :not(.win) { max-width: 820px; margin-left: auto; margin-right: auto; }
.floor > pre.term, .floor > .care-wrap { max-width: 1060px; }
.floor + .floor { border-top: 0; }
.floor + .floor::before { content: ""; position: absolute; top: 0; left: 7vw; right: 7vw; border-top: 2.4px solid var(--ink); }
.floor:has(> svg.floor-line)::before { display: none; }
.floor + .floor::after { content: ""; position: absolute; top: 0; left: 7vw; right: 7vw; border-top: 1.2px dashed var(--peg); }
.no { width: 44px; height: 44px; margin-bottom: 10px !important; display: grid; place-items: center; background: var(--linen); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--linen), inset 0 0 0 4px var(--ink); font: italic 800 22px/1 var(--display); margin-left: max(0px, calc((100% - 820px) / 2)) !important; }
h2 { font: italic 600 clamp(30px, 4vw, 46px)/1.04 var(--display); margin-top: 0; margin-bottom: 18px; letter-spacing: -0.01em; }
.floor p { margin-top: 0; }
.aside { font-size: 14.5px; color: #2f3f4b; }
pre { overflow: auto; font-size: 13.5px; line-height: 1.55; padding: 18px 20px; margin: 0 0 22px; }
pre.term { background: var(--ink); color: var(--linen); border: 2px solid var(--ink); max-height: 720px; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.code { position: relative; background: var(--linen); border: 2px solid var(--ink); border-left: 8px solid var(--peg); white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 76px; }
.peg-copy { position: absolute; top: 8px; right: 8px; font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--peg); border: 1.5px solid var(--ink); border-radius: 2px 2px 7px 7px; padding: 7px 9px 6px; cursor: pointer; transform: rotate(-3deg); transform-origin: 50% -6px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .2s; }
.peg-copy:hover, .peg-copy:focus-visible { transform: rotate(3deg); }
.peg-copy.done, .cmd button.done { background: var(--green); color: var(--linen); transform: rotate(0); }
.land .cmd-note { display: none; }
.cmd { container-type: inline-size; }
.cmd code { font-size: max(10.5px, min(12.5px, calc((100cqi - 78px) / 17.4))) !important; white-space: nowrap; }
.poster .cmd code { font-size: max(10px, min(12.5px, calc((100cqi - 22px) / 17.4))) !important; }
.cmd-note { margin: 8px 0 0; font-size: 12px; color: var(--slate); text-align: left; }
.poster .cmd-note { display: none; }

/* washing lines between floors (drawn by app.js) */
.floor > svg.floor-line { max-width: none; margin: 0; }
svg.floor-line { position: absolute; top: -3px; overflow: visible; pointer-events: none; z-index: 2; }
.floor:has(> svg.floor-line) { padding-top: 104px; }
@media (min-width: 900px) { .floor:has(> svg.floor-line) { padding-top: 124px; } }
.floor:has(> svg.floor-line)::after { display: none; }
.floor-line .sway { transform-box: fill-box; transform-origin: 50% 0; animation: sway 5.5s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3deg); } }
.rope-tag { font-family: var(--code); font-size: 12px; font-weight: 500; fill: var(--ink); }
.rope-tag.hot { fill: var(--scarlet); font-weight: 700; }
.rope-word { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 14px; fill: var(--scarlet); letter-spacing: .06em; font-variation-settings: "opsz" 20; }
p code, td code, th code { font-size: .88em; background: rgba(247, 249, 248, .7); padding: 1px 4px; }

.win { z-index: 1; position: absolute; top: 74px; width: 46px; height: 68px; background: var(--ink); border: 4px solid rgba(247, 249, 248, .45); background-clip: padding-box; perspective: 240px; display: none; }
.win.l { left: calc(3.5vw - 23px); }
.win.r { right: calc(3.5vw - 23px); }
.win i { position: absolute; top: 0; width: 50%; height: 100%; background: var(--slats); border: 1px solid var(--ink); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.win i:first-child { left: 0; transform-origin: 0 50%; }
.win i:last-child { right: 0; transform-origin: 100% 50%; }
.win.open i:first-child { transform: rotateY(-78deg); }
.win.open i:last-child { transform: rotateY(78deg); }
@media (min-width: 900px) { .win { display: block; } }

.care-wrap { overflow-x: auto; margin-bottom: 14px; border: 2px solid var(--ink); background: var(--linen); }
.care { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 860px; }
.care caption { caption-side: bottom; text-align: left; padding: 8px 12px; font-size: 12.5px; color: #2f3f4b; border-top: 1px solid var(--ink); }
.care th, .care td { padding: 9px 8px; border-bottom: 1px solid rgba(23, 36, 47, .2); text-align: center; }
.care thead th { font-weight: 700; border-bottom: 2px solid var(--ink); }
.care thead th code { background: none; padding: 0; }
.care tbody th { text-align: left; font-weight: 700; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--linen); box-shadow: 2px 0 0 rgba(23, 36, 47, .25); }
.care thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--linen); }
.term-cap { font-size: 12.5px; color: #2f3f4b; margin: -14px auto 0; }
.term-cap .swipe { display: none; }
@media (max-width: 720px) { .term-cap .swipe { display: inline; } }
.care-cap { font-size: 12.5px; color: #2f3f4b; margin: -4px auto 12px; }
.care-cap .swipe { display: none; }
@media (max-width: 900px) { .care-cap .swipe { display: inline; } }
.care td span, .k { display: inline-block; padding: 3px 7px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.care td.public span, .k.public { background: var(--scarlet); color: var(--linen); }
.care td.uploaded span, .k.uploaded { background: var(--indigo); color: var(--linen); }
.care td.home span, .k.home { color: var(--slate); border: 1.4px dashed var(--slate); }
.legend { font-size: 14px; }

.foot { text-align: center; padding-bottom: 64px; }
.foot .sign { font: italic 800 72px/1 var(--display); margin: 0 auto 8px; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .street::before, .street::after { width: 4vw; }
  .floor { padding: 48px 6vw 28px; }
  .floor + .floor::before, .floor + .floor::after { left: 4vw; right: 4vw; }
  pre { font-size: 12.5px; padding: 14px; }
  pre.term { white-space: pre; overflow-wrap: normal; font-size: 11px; max-height: 560px; }
  pre.code { font-size: 11px; padding: 40px 12px 14px; }
  .peg-copy { top: 7px; right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* share-image mode (?poster): same scene, no interactive chrome */
.poster .hero.land .stage { height: 100vh; }
.poster .drop, .poster .street, .poster .verdict .src, .poster .verdict .keep, .poster .verdict .saved, .poster .cmd button { display: none; }
.poster .plaque .sub { display: none; }
.poster .plaque .lede { font-size: 34px; margin-bottom: 18px; }
.poster .cmd code { overflow: hidden; }
/* Bodoni Moda is an optical-size variable font; at display sizes the browser would pick
   opsz 96 and hairlines vanish in thumbnails. Pin a sturdier cut everywhere. */
.sheet-word, .lede, .hosts-h, .verdict .big, .drop .now, h1, h2, h3, .no, .foot .sign, .docs-head .home { font-variation-settings: "opsz" 20; }