/* Everdeep — the shop's back rooms. The front page is the shop itself (the world); these pages are the objects
   its doors open on: the ledger (order), the shop window (worlds), the slate board (prices), the keeper's notes (how). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&display=swap');

:root{
  --night:#0f0f2a;      /* the shop at closing time: the walls of every page */
  --paper:#f6f0e4;      /* the ledger, the tags, the cards in the window */
  --ink:#17131f;        /* the keeper's pen */
  --sun:#ffd95a;        /* the lamp: one action per page wears it */
  --rule:#c3d2e8;       /* the faint blue rules of the ledger */
  --slate:#232a2a;      /* the board above the stove */
  --chalk:#e9e4d6;
  --max:720px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--paper);font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 60,"opsz" 14;font-size:18px;line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* the door back to the shop, and the three rooms */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;max-width:1100px;margin:0 auto}
.top .home{font-weight:600;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{text-decoration:none;padding:8px 12px;border-radius:6px;font-size:17px}
.top nav a[aria-current]{background:var(--paper);color:var(--ink)}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* a sheet of paper on the dark wall: the ledger page, a tag, a note */
.sheet{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:4px;
  max-width:var(--max);margin:24px auto 64px;padding:32px 24px}
.sheet h1{font-size:40px;line-height:1.05;margin:0 0 8px;font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 100,"opsz" 72}
.sheet .lead{font-size:20px;margin:0 0 28px;font-style:italic}
.sheet h2{font-size:24px;margin:36px 0 8px;font-weight:600}
.sheet p{margin:0 0 14px;max-width:62ch}
@media (min-width:640px){.sheet{padding:48px 56px}}

/* the ledger: ruled lines, one field per line, nothing compulsory */
.ledger{background:repeating-linear-gradient(transparent 0 35px, var(--rule) 35px 36px) 0 10px, var(--paper)}
[hidden]{display:none!important}
.ledger label{display:block;font-style:italic;font-size:17px;margin:18px 0 2px}
.ledger input,.ledger textarea,.ledger select{width:100%;font:inherit;font-size:19px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);padding:4px 0;border-radius:0}
.ledger textarea{min-height:108px;resize:vertical;line-height:36px;padding:0}
.ledger input:focus,.ledger textarea:focus,.ledger select:focus{outline:none;border-bottom-color:var(--sun);box-shadow:0 2px 0 var(--sun)}
.ledger small{display:block;font-size:15px;opacity:.8;margin-top:4px}
.ledger .optional{font-style:normal;opacity:.6;font-size:15px}
fieldset{border:0;padding:0;margin:18px 0 0}
legend{font-style:italic;font-size:17px;padding:0;margin-bottom:6px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.tiers label{margin:0;cursor:pointer;border:2px solid var(--ink);border-radius:6px;padding:10px 8px;text-align:center;font-style:normal;background:var(--paper)}
.tiers input{position:absolute;opacity:0;width:0;height:0}
.tiers label:has(input:checked){background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.tiers label:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:2px}
.tiers b{display:block;font-size:22px;font-weight:600;line-height:1.1}
.tiers span{font-size:14px}
.pair{display:flex;gap:8px;flex-wrap:wrap}
.pair label{margin:0;cursor:pointer;border:2px solid var(--ink);border-radius:6px;padding:8px 14px;font-style:normal}
.pair label:has(input:checked){background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.pair input{position:absolute;opacity:0;width:0;height:0}
.file{border:2px dashed var(--ink);border-radius:6px;padding:14px;text-align:center;cursor:pointer}
.file input{display:none}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:3px solid var(--ink);margin-top:32px;padding-top:12px;font-size:20px}
.total b{font-size:34px;font-weight:600}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;margin-top:20px;background:var(--ink);color:var(--paper);border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--sun);font:inherit;font-size:19px;font-weight:600;cursor:pointer;text-decoration:none;width:100%}
.go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sun)}
.quiet{background:transparent;color:var(--ink);box-shadow:none;width:auto;min-height:44px;padding:8px 16px}

/* the shop window: pictures on easels */
.window{max-width:1100px;margin:16px auto 64px;padding:0 16px}
.window h1{font-size:40px;font-weight:600;letter-spacing:-.02em;margin:8px 0 4px;font-variation-settings:"SOFT" 100,"opsz" 72}
.window .lead{font-style:italic;opacity:.9;margin:0 0 28px;max-width:60ch}
.easels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 24px}
.easel{text-decoration:none;color:var(--paper)}
.easel .frame{aspect-ratio:1;background:var(--paper);border:10px solid var(--paper);outline:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.easel .frame.large{border-width:14px}
.easel img{width:100%;height:100%;object-fit:cover;display:block}
.easel .tag{display:inline-block;margin-top:14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;font-size:16px}
.easel .tag b{font-weight:600}
.easel:hover .frame{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.easel:focus-visible{outline:none}
.easel:focus-visible .frame{outline-color:var(--sun)}

/* the slate board */
.board{background:var(--slate);color:var(--chalk);border:12px solid #5a3b22;box-shadow:6px 6px 0 var(--ink);max-width:var(--max);margin:24px auto 24px;padding:28px 24px}
.board h1{font-size:40px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}
.board .lead{font-style:italic;margin:0 0 20px;opacity:.9}
.board table{width:100%;border-collapse:collapse;font-size:18px}
.board th,.board td{text-align:left;padding:10px 6px;border-bottom:1px dashed rgba(233,228,214,.35)}
.board th{font-weight:500;font-style:italic;opacity:.85}
.board td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.board .best td{background:rgba(255,217,90,.12)}
.board p{margin:14px 0 0;max-width:60ch}
@media (min-width:640px){.board{padding:40px 48px}}

/* the keeper's notes */
.notes{max-width:var(--max);margin:0 auto 64px;padding:0 16px}
.note{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:4px;padding:24px;margin:20px 0}
.note h2{margin:0 0 8px;font-size:24px;font-weight:600}
.note p{margin:0 0 10px;max-width:62ch}
.note:nth-child(even){transform:rotate(-.6deg)}
.note:nth-child(odd){transform:rotate(.4deg)}
@media (prefers-reduced-motion:reduce){.easel:hover .frame{transform:none}}

/* status page: the painting in progress */
.stage{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.stage span{border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:16px;opacity:.5}
.stage span.on{opacity:1;background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.first{aspect-ratio:1;max-width:420px;background:var(--night);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:12px 0;overflow:hidden}
.first img{width:100%;height:100%;object-fit:cover;display:block}

footer{text-align:center;font-size:15px;opacity:.7;padding:24px 16px 48px}
footer a{margin:0 8px}

/* ---- additions for the launch site ---- */
.hero{max-width:1100px;margin:0 auto;padding:24px 16px 8px}
.hero h1{font-size:clamp(40px,8vw,84px);line-height:.98;margin:0 0 14px;font-weight:600;letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"opsz" 144;max-width:14ch}
.hero .lead{font-size:clamp(19px,2.4vw,24px);font-style:italic;max-width:52ch;margin:0 0 24px;opacity:.95}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 22px;border-radius:8px;border:3px solid var(--paper);font:inherit;font-size:19px;font-weight:600;text-decoration:none;cursor:pointer}
.btn.sun{background:var(--sun);color:var(--ink);border-color:var(--sun);box-shadow:4px 4px 0 var(--paper)}
.btn.line{background:transparent;color:var(--paper)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.show{max-width:1100px;margin:28px auto 0;padding:0 16px}
.show .frame{aspect-ratio:16/10;background:var(--ink);border:3px solid var(--paper);box-shadow:8px 8px 0 var(--paper);overflow:hidden;position:relative}
.show iframe{width:100%;height:100%;border:0;display:block}
.show .frame img{width:100%;height:100%;object-fit:cover;display:block}
.show .over{position:absolute;inset:auto 12px 12px auto}
.steps{max-width:1100px;margin:56px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:4px;padding:22px}
.step b{display:block;font-size:40px;line-height:1;font-weight:600;margin-bottom:8px}
.step h3{margin:0 0 6px;font-size:22px;font-weight:600}
.step p{margin:0;font-size:17px}
.strip{max-width:1100px;margin:56px auto 0;padding:0 16px}
.strip h2{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.strip .lead{font-style:italic;opacity:.9;margin:0 0 20px}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rung{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:14px;text-decoration:none}
.rung b{display:block;font-size:22px;font-weight:600}
.rung .n{font-size:15px;opacity:.8}
.rung .p{font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.01em}
.rung .p small{font-size:14px;font-weight:400;opacity:.8}
.rung.best{background:var(--sun)}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}
.pick button{all:unset;cursor:pointer;display:block;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--night);aspect-ratio:1;overflow:hidden;position:relative}
.pick button img{width:100%;height:100%;object-fit:cover;display:block}
.pick button span{position:absolute;left:8px;top:8px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:3px 9px;font-weight:600;font-size:15px}
.pick button:hover,.pick button:focus-visible{outline:4px solid var(--sun);outline-offset:0}
.pick button.chosen{outline:4px solid var(--sun)}
.pick figure{margin:0;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);aspect-ratio:1;overflow:hidden;background:var(--night)}
.pick figure img{width:100%;height:100%;object-fit:cover;display:block}
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th,.table td{text-align:left;padding:8px 6px;border-bottom:1px solid rgba(23,19,31,.2);vertical-align:top}
.table th{font-style:italic;font-weight:500}
.muted{opacity:.7}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sheet .btn{border-color:var(--ink);color:var(--ink)}
.sheet .btn.sun{box-shadow:4px 4px 0 var(--ink)}
.sheet:not(.ledger) input[type=text],.sheet:not(.ledger) input[type=url],.sheet:not(.ledger) input[type=password],.sheet:not(.ledger) textarea,.sheet:not(.ledger) select{font:inherit;font-size:17px;padding:8px 10px;border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.card{border:2px solid var(--ink);border-radius:6px;padding:16px;margin:14px 0;background:#fff8}
.card h3{margin:0 0 6px;font-size:20px;font-weight:600}
.tagline{font-size:14px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
@media (max-width:640px){.show .frame{aspect-ratio:4/5}}

@media (max-width:520px){.top{padding:12px 14px}.top nav a{padding:6px 8px;font-size:15px}.top .home{font-size:20px}}