/* The work-in-progress copy's own styles. The book's styles are book.css, cut from the live shell at each build. */
.wip-tag{font:700 .64rem/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);border:1px dashed var(--line);padding:6px 8px;margin-right:6px;white-space:nowrap}
.wip-pager{display:flex;justify-content:space-between;gap:20px;padding:34px max(20px,calc((100vw - 1120px)/2));border-top:1px solid var(--line);font-size:.95rem}
.wip-pager a{text-decoration:none;color:var(--brown-deep)}
.wip-pager a:hover,.wip-pager a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.wip-pager span{display:block;color:var(--muted);font:700 .64rem/1.6 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.wip-pager .next{text-align:right;margin-left:auto}

/* The staff page. */
.staff{background:var(--white)}
.staff-hint{color:var(--muted);margin:0 0 34px}
.staff-chart{display:grid;justify-items:center}
.staff-tier{display:flex;justify-content:center}
.staff-link{width:1px;height:30px;background:var(--line)}
.staff-node{display:block;min-width:230px;padding:14px 20px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;text-align:center;cursor:pointer;box-shadow:0 8px 18px var(--shadow)}
.staff-node b{display:block;font-weight:650;font-size:1.12rem;line-height:1.25}
.staff-line{display:block;color:var(--muted);font-size:.84rem}
.staff-founders{width:min(660px,100%)}
.staff-fork{height:24px;margin:0 calc(50%/var(--n));border:1px solid var(--line);border-bottom:0}
.staff-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.staff-cell{display:flex;justify-content:center;padding:0 12px}
.staff-drop{width:1px;height:30px;background:var(--line)}
/* A portrait's holder, taped to the chart. */
.staff-photo{position:relative;display:block;width:104px;aspect-ratio:1/1;margin:6px auto 12px;padding:5px;background:var(--white);box-shadow:0 5px 12px var(--shadow);transform:rotate(-2deg)}
.staff-cell:nth-child(2n) .staff-photo,.staff-grid .staff-node:nth-child(2n) .staff-photo,.staff-pidgey .staff-photo{transform:rotate(1.6deg)}
.staff-grid .staff-node:nth-child(3n) .staff-photo{transform:rotate(-.8deg)}
.staff-photo::before{content:"";position:absolute;z-index:1;top:-9px;left:50%;width:54px;height:17px;margin-left:-27px;background:color-mix(in srgb,var(--gold) 42%,transparent);box-shadow:0 1px 2px var(--shadow);transform:rotate(-3deg)}
.staff-photo img{display:block;width:100%;height:100%;object-fit:cover}
.staff-photo-wait{display:flex;box-sizing:border-box;width:100%;height:100%;align-items:center;justify-content:center;padding:6px;border:1px dashed var(--line);background:var(--paper-2);color:var(--muted);font:700 .56rem/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.staff-photo-big{width:150px;margin:0 0 16px;float:right;margin-left:18px}
.staff-node:hover,.staff-node:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.staff-human{background:var(--paper-2)}
.staff-founder{background:var(--wash)}
.staff-meeps{width:100%;border:1px dashed var(--line);padding:16px 20px 22px}
.staff-group-label{margin:0 0 12px;font:700 .68rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.staff-grid .staff-node{min-width:0;width:100%}
.staff-dashed{border-style:dashed;border-color:var(--brown);box-shadow:none;background:transparent}
.staff-grid .staff-dashed:last-child:nth-child(3n+1){grid-column:2}
.wip-note{margin:10px 0!important;padding:6px 10px;border:1px dashed var(--line);font:600 .72rem/1.5 system-ui,sans-serif;color:var(--brown)}
/* A typesetter's note on a place card is set in the book's own face, lighter and smaller than the entry. */
.entry-copy .wip-note{margin:16px 0 0!important;padding:10px 14px;font:italic 400 .86rem/1.55 Newsreader,Georgia,serif;color:var(--muted)}
/* An entry Dom Pidgey updated after it was first filed. His newer words sit in a block of their own,
   in a different face and color from the entry, so a reader can tell what changed. A row whose
   value changed takes the same color. Added 2026-10-13 at her word, "updated can have a different
   font and colour to identify the changes?". The face and the color are the pen's picks. */
.entry-copy,.deli-addendum{--upd:#1f6b66}
@media(prefers-color-scheme:dark){.entry-copy,.deli-addendum{--upd:#86cfc6}}
.entry-update{display:block;margin:18px -4px 0;padding:14px 16px 2px;border-left:3px solid var(--upd);background:color-mix(in srgb,var(--upd) 8%,transparent);color:var(--upd);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.entry-update>span,.entry-update .update-pigeon>span{display:block;font:700 .65rem/1 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px}
.entry-copy .entry-update p{font-size:.88rem;line-height:1.55;margin:0 0 12px}
.place-meta dd .upd{color:var(--upd)}
.wip-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto;padding:26px 24px 6px}
/* Pidgey goods, a page of its own. Added 2026-10-10. Each wallpaper is a taped print with its
   name and a download under it; the game is one wide card with a sprite beside it. */
.goods .goods-head{margin:26px 0 6px;font-size:1.5rem;color:var(--brown-deep)}
.goods .goods-note{margin:0 0 26px;max-width:none;color:var(--muted)}
.goods-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.5fr);gap:26px;align-items:start;padding-top:10px}
.goods-card{position:relative;padding:16px 16px 14px;background:var(--white);box-shadow:0 14px 28px var(--shadow),0 2px 5px var(--shadow);transform:rotate(-.6deg);transition:transform .2s ease}
.goods-card:nth-child(2n){transform:rotate(.6deg)}
.goods-card::before{content:"";position:absolute;top:-12px;left:50%;width:104px;height:24px;margin-left:-52px;background:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 1px 2px var(--shadow);transform:rotate(-2.5deg)}
.goods-card:nth-child(2n)::before{transform:rotate(2deg)}
.goods-card:hover,.goods-card:focus-within{transform:rotate(0)}
.goods-card .goods-shot{display:block}
.goods-card .goods-shot img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.goods-card h3,.goods-thing h3{margin:12px 0 2px;font-size:1.2rem;color:var(--brown-deep)}
.goods-line{margin:0 0 8px;font-size:.95rem;line-height:1.45}
.goods-get{margin:0;font-size:.9rem}
.goods-get a{display:inline-block;margin-right:10px;padding:5px 12px;border:1px solid var(--brown);color:var(--brown-deep);font:700 .7rem/1.3 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.goods-get a:hover,.goods-get a:focus-visible{background:var(--brown);color:var(--white);outline:none}
.goods-get span{color:var(--muted)}
.goods-phone .goods-get span{display:block;margin-top:6px}
.goods-thing{display:flex;align-items:flex-end;gap:22px;margin-top:10px;padding:20px 24px;background:var(--wash);box-shadow:0 14px 28px var(--shadow),0 2px 5px var(--shadow)}
.goods-thing h3{margin-top:0}
.goods-thing .links-url{display:block;margin-top:8px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;background:none;padding:0}
/* A film, between the game and the wallpapers. Added 2026-10-10. The frame is YouTube's, kept
   at 16 by 9, with its name, a line and a link beside it; under it on a narrow screen. Print
   leaves the frame out and keeps the words and the address. */
.goods-film{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:26px;align-items:center;margin-top:10px;padding:16px;background:var(--white);box-shadow:0 14px 28px var(--shadow),0 2px 5px var(--shadow)}
.goods-film-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:#1c1a17}
.goods-film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.goods-film h3{margin:0 0 6px;font-size:1.2rem;color:var(--brown-deep)}
.goods-film .links-url{display:block;margin-top:8px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;background:none;padding:0}
@media(max-width:800px){.goods-film{grid-template-columns:1fr;gap:14px}}
@media print{.goods-film{display:block;box-shadow:none;border:1px solid var(--line)}.goods-film-frame{display:none}}
/* What the goods may be used for, a note under the goods page's title, in the manner of the
   note above the appendix. Added 2026-10-10. */
.goods-terms{margin:0 0 8px;padding:14px 18px;background:var(--paper-2);border-left:4px solid var(--brown)}
.goods-terms p{margin:0 0 6px;max-width:none;font-size:.98rem}
.goods-terms p:last-child{margin:0}
.goods-terms .goods-terms-k{margin:0 0 6px;font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
/* A film in a person's popup on the staff page: the frame the popup's full width, the words
   under it, and no card around them. Added 2026-10-10. */
.staff-body .goods-film,.staff-view .goods-film{grid-template-columns:1fr;gap:10px;margin:6px 0 0;padding:0;background:none;box-shadow:none}
.staff-view .goods-film h3{margin:0 0 4px;font-size:1.1rem;font-weight:650;line-height:1.3}
/* A day in the life of Pidgey, a page of films. Added 2026-10-10. Its cards are the goods page's
   film card, one under another, with the frame at the left of one and the right of the next. */
.goods-film .goods-warn{grid-column:1/-1;margin:0;padding:8px 12px;border:1px solid var(--brown);background:var(--wash);font-size:.95rem;line-height:1.45;color:var(--brown-deep)}
.goods-film .goods-warn b{margin-right:10px;font:700 .72rem/1.3 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
/* The cast, two boxes above the note. They are the staff page's boxes and popup, with a pixel
   drawing in the taped holder. A pixel drawing keeps its own shape, sits on the holder's floor,
   and is enlarged by whole numbers only, so its pixels stay square. Added 2026-10-10. */
.cast-hint{margin:0 0 14px;color:var(--muted)}
.cast-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 30px}
.cast-row .staff-node{min-width:0;width:100%}
.staff-photo.cast-photo{display:flex;align-items:flex-end;justify-content:center;box-sizing:border-box;width:136px;height:112px;aspect-ratio:auto;padding:8px 8px 6px}
.staff-photo.cast-photo img{flex:none;object-fit:fill;image-rendering:pixelated}
.staff-photo.cast-photo.staff-photo-big{width:auto;height:auto;padding:10px 12px 8px}
@media(max-width:520px){.cast-row{grid-template-columns:1fr;gap:14px}.staff-photo.cast-photo.staff-photo-big{float:none;width:max-content;margin:4px auto 16px}}
.day .goods-note{margin-bottom:8px}
.day .goods-film{margin-top:28px}
@media(min-width:801px){.day .goods-film:nth-of-type(even){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.day .goods-film:nth-of-type(even) .goods-film-frame{order:2}}
/* With eight links the top bar ran to three rows on a phone. Tighter links keep it at two. */
@media(max-width:640px){.site-nav a{padding-left:7px;padding-right:7px}}
/* With nine links the bar no longer fits one row under about 1,010 pixels, and the "Browse the
   book" button was squeezed onto three lines. The button keeps to one line; at 1,040 pixels and
   under the links sit closer; at 980 and under the "Work in progress copy" tag is left out, as
   it already is at 800 and under. Added 2026-10-10 with the page of films. */
.site-nav .index-btn{white-space:nowrap;flex:none}
@media(max-width:1040px){.site-nav{gap:4px}.site-nav a{padding-left:7px;padding-right:7px}}
@media(max-width:980px){.wip-tag{display:none}}
@media(max-width:800px){.goods-grid{grid-template-columns:1fr}.goods-card.goods-phone{max-width:260px;justify-self:center}}
@media(prefers-reduced-motion:reduce){.goods-card{transition:none}}
@media print{.goods-card{transform:none;box-shadow:none;border:1px solid var(--line)}.goods-card::before{display:none}}
@media(max-width:1040px){.wip-doors{grid-template-columns:repeat(2,minmax(0,1fr))}.wip-doors .wip-door:last-child:nth-child(odd){grid-column:1/-1}}
/* Her pixel sprites of the pigeon, on the appendix and the links page. Added 2026-10-10. Each is
   shown at half its drawn size with its pixels kept square. Print leaves them out. */
.wip-sprite{image-rendering:crisp-edges;image-rendering:pixelated;max-width:none;border:0;box-shadow:none;background:none}
.links .links-note{position:relative}
.links .links-note .sprite-stand{position:absolute;right:26px;bottom:100%;margin-bottom:-5px}
.wip-sprite-foot{display:flex;justify-content:center;padding:30px 0 6px}
.afterword .wip-toc .sprite-toc{float:right;margin:-2px 0 4px 22px}
.afterword .after-card .sprite-card{float:right;margin:-34px 0 6px 18px}
@media(max-width:640px){.afterword .wip-toc .sprite-toc{float:none;display:block;margin:0 auto 10px}.links p.links-note{margin-top:100px}}
@media print{.wip-sprite,.wip-sprite-foot{display:none}}
/* The town's links, a page of its own. Added 2026-10-10. */
.links .links-note{max-width:none;margin:0 0 22px;padding:12px 16px;background:var(--paper-2);border-left:4px solid var(--brown);font-size:.98rem}
.links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.links-grid{padding-top:14px;align-items:start}
/* Each group is a sticky note, in the rear matter's own manner: paper, a strip of tape, a slight
   tilt that straightens under the pointer. Hers, 2026-10-10: "make them like sticky notes too". */
.links-group{position:relative;padding:36px 26px 22px;background:var(--wash);box-shadow:0 14px 28px var(--shadow),0 2px 5px var(--shadow);transform:rotate(-.8deg);transition:transform .2s ease}
.links-group:nth-child(2n){transform:rotate(.7deg)}
.links-group::before{content:"";position:absolute;top:-12px;left:50%;width:104px;height:24px;margin-left:-52px;background:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 1px 2px var(--shadow);transform:rotate(-2.5deg)}
.links-group:nth-child(2n)::before{transform:rotate(2deg)}
.links-group:hover,.links-group:focus-within{transform:rotate(0)}
@media(prefers-reduced-motion:reduce){.links-group{transition:none}}
@media print{.links-group{transform:none;box-shadow:none;border:1px solid var(--line)}.links-group::before{display:none}}
.links-group h3{margin:0 0 4px;font-size:1.35rem;color:var(--brown-deep)}
.links-group .links-intro{margin:0 0 12px;color:var(--muted);font-size:.95rem}
.links-group ul{list-style:none;margin:0;padding:0}
.links-group li{margin:0;padding:9px 0;border-top:1px solid var(--line)}
.links-group li a,.links-group li b{font-weight:600;font-size:1.02rem}
.links-group .links-line{display:block;font-size:.93rem;line-height:1.4}
.links-group .links-url{display:block;margin-top:2px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;background:none;padding:0}
.links-group .links-from{margin:12px 0 0;font-size:.85rem;color:var(--muted);font-style:italic}
@media(max-width:800px){.links-grid{grid-template-columns:1fr}}
.wip-door{display:block;padding:18px 20px 16px;border:1px solid var(--line);background:var(--white);box-shadow:0 5px 12px var(--shadow);color:var(--ink);text-decoration:none}
.wip-door:hover,.wip-door:focus-visible{border-color:var(--gold);outline:none}
.wip-door-k{display:block;font:700 .64rem/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.wip-door b{display:block;margin:4px 0 6px;font-size:1.3rem;font-weight:600;line-height:1.15;color:var(--brown-deep)}
.wip-door-s{display:block;font-size:.95rem;line-height:1.45;color:var(--muted)}
@media(max-width:800px){.wip-doors{grid-template-columns:1fr;padding:18px 16px 4px}}
.psa-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.psa-tag{padding:2px 7px;border:1px solid var(--line);border-radius:999px;font:700 .56rem/1.5 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);background:var(--paper)}
.staff-note{margin:0 0 10px;font-style:italic}
.staff-photo-none{border-style:solid!important;opacity:.85}
.staff-fold{margin:22px 0 0;border-top:1px solid var(--line);padding-top:12px}
.staff-fold summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none}
.staff-fold summary::-webkit-details-marker{display:none}
.staff-fold summary::before{content:"+";width:1em;font:700 1rem/1 system-ui,sans-serif;color:var(--gold)}
.staff-fold[open] summary::before{content:"\2212"}
.staff-fold-h{font:700 .68rem/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.staff-fold-n{font-size:.8rem;color:var(--muted)}
.staff-fold[open] summary{margin-bottom:12px}
@media print{.wip-doors{display:none}}
.wip-see{margin:10px 0 0!important}
.wip-lead{margin:6px 0 12px!important}
.staff-asked{margin:0;padding-left:1.4em}
.staff-asked li{margin:0 0 16px;padding-left:.2em}
.staff-asked li::marker{font-weight:700;color:var(--brown)}
.staff-view .staff-q{margin:0 0 8px;font-style:italic}
.staff-view .staff-quote.staff-opening{margin:0 0 14px}
.ingredients-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:8px 0 14px}
.ingredient{padding:18px 18px 16px;border:1px solid var(--line);background:var(--white);box-shadow:0 5px 12px var(--shadow)}
.ingredient h3{margin:0 0 8px;font-size:1.35rem;font-weight:600;color:var(--brown-deep)}
.ingredient p{margin:0}
.ingredient-see-label{margin:14px 0 4px!important;font:700 .62rem/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.ingredient-see{margin:0;padding:0;list-style:none;font-size:.92rem;line-height:1.45}
.ingredient-see li{position:relative;margin:0 0 5px;padding-left:1.05em}
.ingredient-see li::before{content:"";position:absolute;left:.15em;top:.62em;width:.34em;height:.34em;border-radius:50%;background:var(--gold)}
.ingredient-see a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.ingredients-also-label{margin-top:18px!important}
.ingredients-also{display:flex;flex-wrap:wrap;gap:4px 18px}
@media(max-width:900px){.ingredients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ingredients-grid{grid-template-columns:1fr}}
.psa-foot.wip-strong{font-weight:700;color:#b3261e}
@media(prefers-color-scheme:dark){.psa-foot.wip-strong{color:#ff8f80}}
.staff-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;width:100%}
.staff-bottom .staff-pidgey{justify-self:end}
.staff-body{display:none}
.staff-dialog{width:min(700px,94vw);max-height:92vh;padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.staff-dialog::backdrop{background:rgba(12,18,23,.74)}
.staff-sheet{position:relative;padding:34px 34px 30px}
.staff-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer}
.staff-view h3{font-size:2rem;font-weight:500;line-height:1.05;margin:6px 0 2px}
.staff-view h4{margin:22px 0 6px;font:700 .68rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.staff-view p{margin:0 0 6px}
.staff-role{color:var(--muted)}
.staff-quote{margin:0;padding:10px 16px;border-left:3px solid var(--gold);background:var(--wash)}
.staff-quote p{margin:0 0 8px}
.staff-quote p:last-child{margin:0}
.staff-from{font-size:.78rem;color:var(--muted)}
.staff-open{color:var(--muted);font-style:italic}
.staff-write{display:inline-block;margin-top:4px;padding:7px 12px;border:1px solid var(--line);background:var(--white);text-decoration:none;font-weight:600;color:var(--brown-deep)}
.staff-links{margin-top:22px!important;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:800px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-bottom{grid-template-columns:1fr;justify-items:center}.staff-bottom>span{display:none}.staff-bottom .staff-pidgey{justify-self:center}.staff-node{min-width:0;width:100%}.wip-tag{display:none}.staff-sheet{padding:28px 20px 22px}}
@media(max-width:800px){.staff-cell{padding:0 6px}.staff-photo{width:84px}}
@media print{.staff-body{display:block;padding:8px 0}.staff-dialog,.wip-pager{display:none}.staff-photo{transform:none}.staff-photo::before{display:none}}
/* A card this copy adds to the rear matter. It runs the full width of the page, with its steps
   in two columns, so no cell beside it stands empty. */
.afterword .wip-appendix{grid-column:1/-1}
.wip-appendix .wip-steps{columns:2;column-gap:44px;margin-top:22px}
.wip-appendix .wip-step{margin:0 0 22px}
.wip-appendix .wip-step p,.wip-appendix .wip-step pre{break-inside:avoid}
.wip-appendix .wip-step .step{break-after:avoid}
.wip-appendix pre{white-space:pre-wrap;overflow-wrap:anywhere}
.wip-appendix .wip-rests{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
@media(max-width:800px){.wip-appendix .wip-steps{columns:1}}
.wip-appendix .wip-group{margin:6px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--line);font:700 .72rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);break-after:avoid}
.wip-appendix .wip-step+.wip-group{margin-top:30px}
.wip-appendix .wip-table-wrap{overflow-x:auto;margin:18px 0 6px}
.wip-appendix .wip-table{width:100%;border-collapse:collapse;font-size:.95rem}
.wip-appendix .wip-table th,.wip-appendix .wip-table td{padding:10px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.wip-appendix .wip-table thead th{background:var(--paper-2);font:700 .72rem/1.2 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.wip-appendix .wip-table tbody th{width:9.5em;font-weight:600;color:var(--brown-deep)}
.wip-appendix .wip-links{margin:10px 0 0;padding-left:20px;font-size:.93rem}
.wip-appendix .wip-links li{margin:0 0 6px}
.wip-appendix .wip-links a{overflow-wrap:anywhere;text-underline-offset:3px}
/* The Sources card's entries, folded in at the foot of the card they serve. */
.afterword .wip-sources{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.afterword .wip-sources h4{margin:0 0 10px}
.afterword .wip-sources ul{padding-left:20px;margin:0 0 6px}
/* A card of the live book set the full width of the page, its text in two columns. With the
   Sources card folded away, the third page of the travel note and the MCP door card would each
   leave a tall empty cell beside them. Only the layout changes; no word moves. */
.afterword .wip-wide{grid-column:1/-1;grid-row:auto;columns:2;column-gap:44px}
.afterword .wip-wide>.wip-appx,.afterword .wip-wide>.wip-appx+h4,.afterword .wip-wide>h3,.afterword .wip-wide>.page-no{column-span:all}
.afterword .wip-wide>p,.afterword .wip-wide>pre,.afterword .wip-wide>.wip-sources{break-inside:avoid}
.afterword .wip-wide>.step,.afterword .wip-wide>h4{break-after:avoid}
@media(max-width:800px){.afterword .wip-wide{columns:1}}
/* The note above the appendix: what is printed here gives way to the town's own word. */
.afterword .wip-disclaimer{grid-column:1/-1;padding:14px 18px;background:var(--paper-2);border-left:4px solid var(--brown);scroll-margin-top:84px}
.afterword .wip-disclaimer p{margin:0;font-size:.98rem}
/* The appendix's table of contents, set under the note above the appendix. Added 2026-10-10. */
.afterword .wip-toc{grid-column:1/-1;padding:14px 18px;background:var(--paper-2);border-left:4px solid var(--brown);scroll-margin-top:84px}
.afterword .wip-toc .wip-disclaimer-k{margin:0 0 8px;font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.afterword .wip-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.afterword .wip-toc li{break-inside:avoid;margin:0 0 9px;font-size:.98rem;line-height:1.35}
.afterword .wip-toc a b{margin-right:6px}
.afterword .wip-toc .wip-toc-line{display:block;font-size:.86rem;opacity:.8}
@media(max-width:640px){.afterword .wip-toc ul{columns:1}.afterword .wip-toc{scroll-margin-top:112px}}
.afterword .wip-disclaimer .wip-disclaimer-k{margin:0 0 4px;font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
/* Easter eggs, added by eggs.js. Small on purpose. */
.egg-line{font-style:italic;font-size:.92rem;color:var(--muted)}
a.egg-line{margin-left:8px;text-underline-offset:3px}
.egg-drawer-wrap{margin:-6px 0 14px;display:flex;align-items:center;gap:10px;min-height:22px}
.egg-drawer{width:34px;height:18px;padding:0;border:1px solid #6d7178;background:linear-gradient(#8b9098,#70757d);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;position:relative;flex:none}
.egg-drawer::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:5px;margin:-3px 0 0 -6px;background:#c9a24a;border:1px solid #8a6d2c}
.egg-beetle{display:inline-block;width:7px;height:9px;margin-left:10px;padding:0;border:0;border-radius:50% 50% 46% 46%;background:var(--brown-deep);opacity:.5;cursor:pointer;position:relative;vertical-align:middle}
.egg-beetle::before{content:"";position:absolute;left:1.5px;top:-3px;width:4px;height:3px;border-radius:50%;background:inherit}
.egg-beetle:hover,.egg-beetle:focus-visible{opacity:1;outline:none}
.egg-beetle-jarred{opacity:.9;cursor:default;margin-left:8px}
.egg-crumb{display:inline-block;width:5px;height:4px;margin:0 0 0 7px;padding:0;border:0;border-radius:45% 55% 50% 40%;background:#b98a4a;opacity:.55;cursor:pointer;vertical-align:middle}
.egg-crumb:hover,.egg-crumb:focus-visible{opacity:1;outline:none}
.egg-crumb-found{opacity:.18}
footer .egg-line{color:inherit;opacity:.8}
.egg-line .egg-game{margin-left:0;font-style:normal;font-weight:600;color:inherit}
@media print{.egg-drawer-wrap,.egg-beetle,.egg-crumb,.egg-line{display:none}}
/* Copy buttons in the appendix, added by copy.js. */
.wip-copy{font:700 .6rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown-deep);background:var(--white);border:1px solid var(--line);padding:4px 7px;cursor:pointer;vertical-align:middle}
.wip-copy:hover{background:var(--paper-2)}
code+.wip-copy{margin-left:6px}
.wip-copy-pre{display:block;margin:0 0 4px auto}
.wip-appx .wip-copy{float:right;margin-top:-4px}
body.wip-copying .wip-copy{display:none}
@media print{.wip-copy{display:none}}
/* The small label that letters the appendix: "Appendix A" above a card's own heading. */
.afterword .wip-appx{margin:0 0 10px;font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.afterword .wip-appx+h3,.afterword .wip-appx+h4{margin-top:0}
/* The map set down in words: a folded block under the regions map, the width of the map. */
.wip-mapwords{max-width:1000px;margin:-28px auto 46px;padding:12px 16px;background:var(--paper-2);border-left:4px solid var(--brown)}
.wip-mapwords summary{cursor:pointer;font:700 .72rem/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.wip-mapwords[open] summary{margin-bottom:12px}
.wip-mapwords p{margin:0 0 12px;font-size:.98rem}
.wip-mapwords .wip-table-wrap{overflow-x:auto;margin:6px 0 18px}
.wip-mapwords .wip-table{width:100%;border-collapse:collapse;font-size:.92rem}
.wip-mapwords .wip-table caption{caption-side:top;text-align:left;padding:0 0 6px;font-weight:600;color:var(--brown-deep)}
.wip-mapwords .wip-table th,.wip-mapwords .wip-table td{padding:8px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.wip-mapwords .wip-table thead th{background:var(--paper);font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown)}
.wip-mapwords .wip-table tbody th{font-weight:600;color:var(--brown-deep);white-space:nowrap}
.wip-mapwords code{font-size:.86em;overflow-wrap:anywhere}
@media(max-width:520px){.wip-mapwords .wip-table th,.wip-mapwords .wip-table td{padding:6px 8px}.wip-mapwords .wip-table tbody th{white-space:normal}}
/* The smaller things, grouped: one dropdown to a place that holds them, inside the words' own dropdown. Added 2026-10-10 at her word. */
.wip-mapwords .wip-in-cap{margin:6px 0 8px;font-weight:600;color:var(--brown-deep)}
.wip-mapwords details.wip-in{margin:0 0 10px;border:1px solid var(--line);border-left:5px solid var(--brown);background:var(--paper)}
.wip-mapwords details.wip-in>summary{margin:0;padding:10px 14px;font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--brown-deep);background:var(--paper)}
.wip-mapwords details.wip-in[open]>summary{border-bottom:1px solid var(--line)}
.wip-mapwords details.wip-in[open]>summary{margin-bottom:0}
.wip-mapwords details.wip-in>summary u{text-decoration-thickness:2px;text-underline-offset:3px}
.wip-mapwords details.wip-in .wip-in-n{float:right;font:700 .68rem/1.9 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown)}
.wip-mapwords details.wip-in .wip-table-wrap{margin:0}
@media print{.wip-mapwords{max-width:none}}
/* Phone width. A grid cell is as wide as its longest unbroken line unless told it may shrink, and
   one line of code in the MCP door card was pushing every card in the rear matter 68px past the
   right edge of a 375px screen. The cards may shrink, and a code block wraps on a small screen.
   The top bar gained two links in this copy and no longer fits on one row, so it wraps. */
.after-grid>*{min-width:0}
@media(max-width:800px){.travel-note pre{white-space:pre-wrap;overflow-wrap:anywhere}}
@media(max-width:640px){.site-nav{flex-wrap:wrap;row-gap:2px}.site-nav .spacer{display:none}.site-nav .index-btn{margin-left:auto}.afterword .wip-disclaimer{scroll-margin-top:112px}}
@media(max-width:520px){.wip-appendix .wip-table th,.wip-appendix .wip-table td{padding:8px 8px}.wip-appendix .wip-table tbody th{width:auto}}
/* The delicacies of Postmark, a page of its own after the gazetteer. Added 2026-10-13. His
   opening words run the section's full width. Each tasting note is a sticky note in the rear
   matter's own manner: paper, a strip of tape, a slight tilt that straightens under the pointer
   or when the note is opened. Hers: "can we have different colour notes? and also a tape on it
   lol". Six papers, taken in turn; the colors are the pen's pick. */
/* The page's two own pictures. The first stands whole after his opening words, right above his
   note. The second runs the
   page's width at its foot and is trimmed to a strip from the middle of the picture, where
   everything in it sits; the file itself is whole. Added 2026-10-13. */
.deli-banner{margin:0}
.deli-banner img{display:block;width:100%;height:auto;box-shadow:0 10px 24px var(--shadow),0 2px 5px var(--shadow)}
.deli-banner-top{max-width:760px;margin:24px auto 30px}
.deli-banner-foot{margin:46px 0 6px}
.deli-banner-foot img{aspect-ratio:12/5;object-fit:cover;object-position:50% 50%}
@media print{.deli-banner img{box-shadow:none}}
.deli-intro{margin:0 0 18px}
.deli-intro p{margin:0 0 12px;max-width:none;font-size:1.08rem;line-height:1.6}
.deli .deli-terms{margin:0 0 10px}
.deli .deli-reminder{padding:9px 14px;font-size:.84rem;line-height:1.5}
/* A quick reference above the notes: each group and its notes, as links. Added 2026-10-13 as
   three columns of running links, and set again the same day at her word, "a better toc system
   (easier to read)". Each group is a block under its name and count. A row gives the note's
   number first, on a small tag in the color of its own card's paper, then its name, so the
   numbers and the names each run down a straight column. A group with many notes takes the
   box's full width and runs its rows in columns. */
.deli-toc{margin:18px 0 6px;padding:16px 20px 14px;border:1px solid var(--line);background:var(--white);scroll-margin-top:84px}
.deli-toc-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px;font:700 .68rem/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);max-width:none}
.deli-toc-count{font-weight:600;letter-spacing:.08em;color:var(--muted)}
/* Three things keep the box from growing with every note, all of them the work of delicacies.js:
   a long group shows its newest rows until asked, the whole list can be put away and starts so
   on a phone, and a find field narrows the rows and the cards together. The buttons and the
   field are set down hidden, and the script brings them out. */
.deli-toc button{margin-left:auto;padding:2px 0;border:0;background:none;font:700 .64rem/1.4 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);cursor:pointer;white-space:nowrap}
.deli-toc button:hover,.deli-toc button:focus-visible{text-decoration:underline}
.deli-toc-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.deli-toc-h .deli-toc-g{flex:0 1 auto;margin:0;border-bottom:0}
.deli-toc-h button{padding-bottom:5px}
.deli-find{display:block;margin:0 0 14px}
.deli-find input{padding:11px 44px 11px 14px;font:inherit;font-size:1rem}
.deli-find span{top:11px;right:14px}
.deli-none{margin:0 0 6px;font-size:.95rem;color:var(--muted);max-width:none}
.deli-find[hidden],.deli-toc button[hidden]{display:none}
@media screen{
.deli-toc:not(.is-finding) .is-folded .deli-toc-old{display:none}
.deli-toc.is-shut:not(.is-finding) .deli-toc-grid,.deli-toc.is-finding button{display:none}
.deli-toc.is-shut:not(.is-finding) .deli-toc-k{margin-bottom:10px}
.deli-toc.is-shut:not(.is-finding) .deli-find{margin-bottom:2px}
}
@media print{.deli-toc button,.deli-none{display:none}}
.deli-toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px 30px;align-items:start}
.deli-toc-b{min-width:0}
.deli-toc-wide{grid-column:1/-1}
.deli-toc-g{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;padding:0 0 5px;border-bottom:1px solid var(--line);font-weight:650;font-size:1.02rem;line-height:1.3;color:var(--brown-deep);text-decoration:none}
.deli-toc-g span{font:700 .64rem/1 system-ui,sans-serif;letter-spacing:.1em;color:var(--brown);border:1px solid var(--line);padding:2px 6px}
.deli-toc-g:hover,.deli-toc-g:focus-visible{text-decoration:underline}
.deli-toc ol{list-style:none;margin:0;padding:0}
.deli-toc-wide ol{columns:3 240px;column-gap:30px}
.deli-toc li{margin:0;break-inside:avoid}
.deli-toc li a{display:grid;grid-template-columns:2.7rem 1fr;gap:10px;align-items:baseline;margin:0 -6px;padding:4px 6px;font-size:.96rem;line-height:1.35;color:var(--ink);text-decoration:none}
.deli-toc li a:hover,.deli-toc li a:focus-visible{background:var(--paper-2)}
.deli-toc-no{padding:2px 0;font:700 .66rem/1.4 system-ui,sans-serif;letter-spacing:.06em;text-align:center;color:var(--brown-deep);background:var(--note);border-bottom:2px solid var(--tape)}
.deli-toc-n::first-letter{text-transform:uppercase}
@media(max-width:640px){.deli-toc{scroll-margin-top:112px}.deli-toc-wide ol{columns:1}}
/* A link back up to the quick reference, at the right of each group's heading. */
.deli .deli-head .deli-up{margin-left:auto;font:700 .64rem/1.4 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap}
.deli .deli-head .deli-up:hover,.deli .deli-head .deli-up:focus-visible{text-decoration:underline}
@media print{.deli .deli-head .deli-up{display:none}}
/* On a phone the link drops to a line of its own under a long group name, at the right. */
@media(max-width:640px){.deli .deli-head{flex-wrap:wrap;row-gap:2px}}
.deli .deli-head{scroll-margin-top:80px}
@media(max-width:640px){.deli .deli-head{scroll-margin-top:112px}}
.deli .deli-head{margin:34px 0 2px;font-size:1.5rem;color:var(--brown-deep);display:flex;align-items:baseline;gap:10px}
.deli .deli-head span{font:700 .7rem/1 system-ui,sans-serif;letter-spacing:.1em;color:var(--brown);border:1px solid var(--line);padding:3px 7px}
.deli-where{margin:0 0 14px;font-size:.95rem;color:var(--muted);max-width:none}
.deli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:34px 26px;align-items:start;padding-top:14px}
.deli{--n1:#fbf1c8;--n2:#f8dcd6;--n3:#d9e9f1;--n4:#deecd3;--n5:#e8def1;--n6:#fbdfc4;--t1:#b98525;--t2:#b0605a;--t3:#4f7f96;--t4:#5f8a52;--t5:#7d62a0;--t6:#b8743a}
@media(prefers-color-scheme:dark){.deli{--n1:#3b3522;--n2:#43292a;--n3:#22333d;--n4:#27372a;--n5:#33293f;--n6:#402f20;--t1:#d8aa4d;--t2:#d98f88;--t3:#7fb2c9;--t4:#93c083;--t5:#b59ad6;--t6:#e0a36c}}
.deli-card{position:relative;min-width:0;background:var(--note,var(--n1));padding:26px 20px 12px;box-shadow:0 14px 28px var(--shadow),0 2px 5px var(--shadow);transform:rotate(-.5deg);transition:transform .2s ease;scroll-margin-top:80px}
.deli-card:nth-child(2n){transform:rotate(.5deg)}
.deli-card::before{content:"";position:absolute;z-index:1;top:-12px;left:50%;width:104px;height:24px;margin-left:-52px;background:color-mix(in srgb,var(--tape,var(--t1)) 42%,transparent);box-shadow:0 1px 2px var(--shadow);transform:rotate(-2.5deg)}
.deli-card:nth-child(2n)::before{transform:rotate(2deg)}
.deli-card:hover,.deli-card:focus-within,.deli-card:has(details[open]){transform:rotate(0)}
.deli-c1{--note:var(--n1);--tape:var(--t1)}.deli-c2{--note:var(--n2);--tape:var(--t2)}.deli-c3{--note:var(--n3);--tape:var(--t3)}
.deli-c4{--note:var(--n4);--tape:var(--t4)}.deli-c5{--note:var(--n5);--tape:var(--t5)}.deli-c6{--note:var(--n6);--tape:var(--t6)}
.deli-card h3{margin:2px 0 8px;font-size:1.25rem;line-height:1.25;color:var(--brown-deep)}
.deli-card h3::first-letter{text-transform:uppercase}
.deli-k{margin:0;font:700 .65rem/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-deep);max-width:none}
.deli-plate{margin:0 0 14px}
.deli-plate img{display:block;width:100%;height:auto;box-shadow:0 2px 6px var(--shadow)}
.deli-plate figcaption{margin-top:6px;font:700 .62rem/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-deep)}
.deli-cite{margin:0 0 12px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font-size:.9rem;line-height:1.4}
.deli-cite div{display:grid;grid-template-columns:4.2rem 1fr;gap:8px;margin:2px 0}
.deli-cite dt{font:700 .62rem/1.9 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-deep)}
.deli-cite dd{margin:0}
.deli-cite a{font-size:.82rem;color:var(--muted);white-space:nowrap}
/* A card's picture is a link to its larger copy, which delicacies.js opens over the page. */
.deli-zoom{display:block;cursor:zoom-in}
.deli-zoom:focus-visible{outline:2px solid var(--tape,var(--t1));outline-offset:3px}
dialog.deli-zoomed{max-width:min(96vw,1100px);max-height:94vh;margin:auto;padding:10px 10px 6px;border:0;background:var(--white);box-shadow:0 24px 60px rgba(0,0,0,.45)}
dialog.deli-zoomed::backdrop{background:rgba(20,16,12,.72)}
dialog.deli-zoomed img{display:block;max-width:100%;max-height:calc(94vh - 64px);width:auto;height:auto;margin:0 auto;cursor:zoom-out}
dialog.deli-zoomed button{display:block;margin:6px 0 0 auto;padding:6px 4px;border:0;background:none;font:700 .68rem/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);cursor:pointer}
dialog.deli-zoomed button:hover,dialog.deli-zoomed button:focus-visible{text-decoration:underline}
/* The third row on a card: the food's own mark on the town's record, in its maker's words. */
.deli-cite .deli-mark q{font-style:italic}
.deli-cite .deli-mark-id{display:block;margin-top:2px;font:500 .68rem/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);overflow-wrap:anywhere}
/* The line at the foot of a gazetteer card that points back to its tasting notes. It stays in
   the book, so it does not take the arrow the card's outside links take. */
.window-link.deli-back a::after{content:""}
.deli-quote{margin:0;padding:0 0 0 14px;border-left:3px solid var(--tape,var(--t1))}
.deli-quote p,.deli-whole p{margin:0 0 10px;font-size:.98rem;line-height:1.5;max-width:none}
.deli-addendum{margin:14px 0 0;padding:12px 14px 4px}.deli-addendum h4{margin:0 0 8px;font:600 .95rem/1.35 system-ui,sans-serif;color:var(--upd)}.deli-addendum p{margin:0 0 10px;font-size:.92rem;line-height:1.5;max-width:none}.deli-addendum .deli-whole summary{color:var(--upd)}
.deli-whole{margin-top:6px;border-top:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);padding-top:6px}
.deli-whole summary{cursor:pointer;font:700 .7rem/1.6 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brown-deep)}
.deli-whole[open] summary{margin-bottom:8px}
@media(max-width:640px){.deli-grid{grid-template-columns:1fr}.deli-card{scroll-margin-top:112px}}
/* With a tenth link the top bar ran to three rows on a phone, 140px tall, which is taller than
   the 112px the appendix's anchors leave clear. The links sit a little closer and a little
   smaller at 640px and under, and the bar is two rows again, 101px at 375 wide. */
@media(max-width:640px){.site-nav{column-gap:2px}.site-nav a{padding:7px 6px;font-size:.76rem}}
@media print{.deli-card{transform:none;box-shadow:none;border:1px solid var(--line);break-inside:avoid}.deli-card::before{display:none}.deli-whole>*{display:block}}

/* NO NOTES (Season 1), the manga page, 2026-10-16. The pages run down one column; a torn-out
   page is its stub picture with a code box under it, and the tracker sits above them all. */
.manga .nn-intro{max-width:640px}
.nn-dig{margin:22px 0 0;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:4px;background:var(--white);font-size:.92rem;color:var(--muted)}
.nn-dig p{margin:0 0 8px}.nn-dig p:last-child{margin:0}
.nn-tracker{margin:28px 0 36px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.nn-tracker h3{margin:0 0 4px;font-size:1.05rem}
.nn-tracker p{margin:0 0 14px;color:var(--muted);font-size:.92rem}
.nn-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.nn-slot{border:2px dashed var(--line);border-radius:10px;padding:10px 6px;text-align:center;font-size:.78rem;line-height:1.25;color:var(--muted);background:var(--paper);text-decoration:none}
.nn-slot b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:2px}
.nn-slot.found{border:2px solid var(--gold);color:var(--ink)}
.nn-slot.found::after{content:"Returned";display:block;margin-top:4px;font-weight:700;color:var(--brown-deep);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem}
.nn-count{margin-top:12px;font-weight:700}
.nn-pages{display:flex;flex-direction:column;align-items:center;gap:34px}
.nn-slotpage,.nn-teaser,.nn-later{width:100%;display:flex;justify-content:center}
.nn-soon{background:var(--wash);color:var(--ink);border:2px dashed var(--line);box-shadow:none}
.nn-page{width:100%;max-width:560px;margin:0}
.nn-page.wide{max-width:900px}
.nn-pages img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 6px 22px var(--shadow);background:var(--white);cursor:zoom-in}
.nn-page figcaption{margin-top:8px;font-size:.85rem;color:var(--muted);text-align:center}
.nn-stubpic{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.nn-stub-img{width:100%}
.nn-code{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.nn-code label{font-size:.82rem;color:var(--muted)}
.nn-code-row{display:flex;gap:8px;width:100%;max-width:330px}
.nn-code input{flex:1;min-width:0;font:600 1rem/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink)}
.nn-code button{font:700 .9rem/1 system-ui,sans-serif;padding:10px 14px;border:0;border-radius:8px;background:var(--ink);color:var(--paper);cursor:pointer;white-space:nowrap}
.nn-msg{min-height:1.2em;font-size:.85rem;color:var(--muted)}
.nn-msg.bad{color:#c44}
.nn-stub-img.shake{animation:nnshake .35s}
@keyframes nnshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.nn-page.returned img{animation:nnin .9s ease-out}
@keyframes nnin{from{opacity:0;transform:translateY(-14px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.nn-returned-tag{display:block;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brown-deep);margin-top:4px}
.nn-locked{width:100%;max-width:560px;aspect-ratio:2/3;border-radius:4px;background:#111;color:#ddd;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;box-shadow:0 6px 22px var(--shadow)}
.nn-locked p{margin:0;max-width:26ch;line-height:1.5}
.nn-teaser.wide .nn-locked{max-width:900px;aspect-ratio:3/2}
.nn-lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,12,.92);display:none;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.nn-lb.open{display:flex}
.nn-lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.nn-lb button{position:absolute;top:12px;right:14px;font:700 1.6rem/1 system-ui,sans-serif;background:none;border:0;color:#fff;cursor:pointer;padding:6px 10px}
@media(max-width:560px){.nn-slots{grid-template-columns:repeat(3,1fr)}}
@media print{.nn-code,.nn-tracker{display:none}}