/* SOBRIQUET GAMING — the website's one stylesheet (redesign 11/9: "I like Hearthstone. It's warm, the fonts are
   solid"). The site is the room the game's title is drawn in: walnut panelling and beams, brass, the leather of the
   wingback chair, the paper of the game's sheets, and the fire's light. Every framed thing carries the game's ink line
   (a dark outline, as the title scene inks every piece). Colours are the title scene's own (ui/art/title3d.js: ink,
   walnut table and frame, brass, leather, teal) and the game's Gold and paper (ui/theme.css). Type is the game's
   three faces (ui/fonts.css, copied in by pipeline/build_site.py): Young Serif for display, Alegreya for reading,
   Alegreya SC for labels.
   Pictures: assets/hero/ is a loop of the live title scene and its first frame as a still; assets/tex/ holds four
   small grey textures made from noise for this site (wood both ways, leather, paper), laid over CSS colours with
   background-blend-mode: overlay so the colours stay here. */
:root{
  --ink:#0f0b07;
  --walnut-0:#140d08; --walnut-1:#1d130b; --walnut-2:#2a1a0f; --walnut-3:#3a2716; --walnut-4:#4a311b; --walnut-5:#6b4a2a;
  --brass:#c9a24a; --brass-hi:#f0d283; --brass-lo:#7a5b1e; --brass-deep:#4a3510;
  --gold:#f2bd45; --gold-hi:#ffd36e; --gold-lo:#8a6414;
  --ivory:#f1e6cc; --ivory-2:#d8c8a6; --dim:#b39f80; --faint:#8a7558;
  --paper:#f2e2b8; --paper-2:#e6d3a2; --paper-ink:#2b1d10; --paper-ink-2:#6b4d22;
  --leather:#6a2418; --leather-hi:#8a3422; --leather-lo:#3a120b;
  --teal:#2dd4bf; --ember:#ff9a48; --carmine:#b8412c;
  --serif:'Young Serif',Georgia,serif; --body:'Alegreya',Georgia,serif; --sc:'Alegreya SC','Alegreya',Georgia,serif;
  --tex-wood-v:url(/assets/tex/wood-v.webp); --tex-wood-h:url(/assets/tex/wood-h.webp);
  --tex-leather:url(/assets/tex/leather.webp); --tex-paper:url(/assets/tex/paper.webp);
  --coin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='18' fill='%23f2bd45' stroke='%230f0b07' stroke-width='2.5'/><circle cx='20' cy='20' r='13.6' fill='none' stroke='%23b08a3c' stroke-width='1.8'/><path d='M20 11.5L22.12 17.09L28.08 17.37L23.42 21.11L25 26.88L20 23.6L15 26.88L16.58 21.11L11.92 17.37L17.88 17.09Z' fill='%238a6414'/></svg>");
  --wrap:1180px;
}
*{box-sizing:border-box}
html{font-synthesis-weight:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--walnut-0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--walnut-0);color:var(--ivory);font-family:var(--body);font-size:19px;line-height:1.55;font-variant-numeric:lining-nums;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--gold-hi);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px}
main{flex:1 0 auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3{font-weight:400;margin:0}
.addr{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ materials */
/* the walnut wall: tall panels, the grain running down, the fire's light on it */
.wall{position:relative;
  background:
    radial-gradient(ellipse 70% 60% at var(--fx,12%) var(--fy,0%),rgba(255,150,70,.20),rgba(255,120,50,.06) 45%,transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 2px,rgba(255,215,160,.06) 2px 3px,transparent 3px 240px),
    var(--tex-wood-v) 0 0/256px 512px,
    linear-gradient(180deg,var(--walnut-2),var(--walnut-1));
  background-blend-mode:normal,normal,overlay,normal}
/* a carved beam with brass nails, between one part of the room and the next */
.beam{position:relative;z-index:3;height:22px;
  background:
    radial-gradient(circle at 50% 50%,#fff1c0 0 1px,var(--brass-hi) 1.5px 2.4px,var(--brass-lo) 3px 3.6px,rgba(0,0,0,.55) 4.2px,transparent 5px) 90px 50%/240px 22px repeat-x,
    var(--tex-wood-h) 0 0/512px 256px,
    linear-gradient(180deg,#6e4a28,var(--walnut-4) 45%,#2f1e10);
  background-blend-mode:normal,overlay,normal;
  box-shadow:0 0 0 1.5px var(--ink),inset 0 1px 0 rgba(255,225,170,.28),0 8px 16px rgba(0,0,0,.55),0 -6px 14px rgba(0,0,0,.35)}
/* the game's paper: a sheet, pinned */
.paper{position:relative;color:var(--paper-ink);border-radius:3px;
  background:var(--tex-paper) 0 0/256px,linear-gradient(170deg,#f7ead0,var(--paper) 40%,var(--paper-2));
  background-blend-mode:overlay,normal;
  box-shadow:0 0 0 2px var(--ink),inset 0 0 40px rgba(140,100,40,.18),0 18px 40px rgba(0,0,0,.55),0 3px 0 rgba(0,0,0,.35)}
.paper a{color:#7a2e12}
.paper a:hover{color:#000}
.tack::before{content:"";position:absolute;top:-11px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff3c8 0 2px,var(--brass-hi) 3px,var(--brass) 6px,var(--brass-lo) 10px);
  box-shadow:0 0 0 2px var(--ink),2px 4px 5px rgba(0,0,0,.45)}
/* the chair's leather: tooled hide with a stitched edge and a brass stud at each corner */
.leather{position:relative;color:var(--ivory);border-radius:10px;
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%,rgba(255,170,120,.16),transparent 60%),
    var(--tex-leather) 0 0/256px,
    linear-gradient(160deg,var(--leather-hi),var(--leather) 45%,var(--leather-lo));
  background-blend-mode:normal,overlay,normal;
  box-shadow:0 0 0 2.5px var(--ink),inset 0 2px 0 rgba(255,200,170,.18),inset 0 -30px 60px rgba(0,0,0,.35),0 26px 60px rgba(0,0,0,.6)}
.leather::before{content:"";position:absolute;inset:12px;border:2px dashed rgba(240,196,150,.42);border-radius:5px;pointer-events:none}
.leather::after{content:"";position:absolute;inset:7px;pointer-events:none;
  --stud:radial-gradient(circle at 40% 35%,#fff1c0 0 1.5px,var(--brass-hi) 2.5px,var(--brass) 4.5px,var(--brass-lo) 6.5px,var(--ink) 7.2px,transparent 8px);
  background:var(--stud) 0 0/16px 16px no-repeat,var(--stud) 100% 0/16px 16px no-repeat,var(--stud) 0 100%/16px 16px no-repeat,var(--stud) 100% 100%/16px 16px no-repeat}
/* brass: a cast plate, engraved */
.brass{color:#2e2108;
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,250,220,.35) 42%,rgba(255,255,255,0) 54%),
    linear-gradient(180deg,#f3d88e,#d6b25a 30%,#b8913a 70%,#94722a);
  box-shadow:0 0 0 2px var(--ink),inset 0 1px 0 rgba(255,250,220,.75),inset 0 -2px 0 rgba(70,48,10,.45),0 10px 24px rgba(0,0,0,.5)}
.screws{position:relative}
.screws::after{content:"";position:absolute;inset:8px;pointer-events:none;
  background:
    linear-gradient(45deg,transparent 45%,#4a3510 46% 54%,transparent 55%) 0 0/10px 10px no-repeat,
    radial-gradient(circle at 40% 35%,#f8e7b0,#a8862f 60%,#5a420f 72%,transparent 76%) 0 0/10px 10px no-repeat,
    linear-gradient(-45deg,transparent 45%,#4a3510 46% 54%,transparent 55%) 100% 0/10px 10px no-repeat,
    radial-gradient(circle at 40% 35%,#f8e7b0,#a8862f 60%,#5a420f 72%,transparent 76%) 100% 0/10px 10px no-repeat,
    linear-gradient(-45deg,transparent 45%,#4a3510 46% 54%,transparent 55%) 0 100%/10px 10px no-repeat,
    radial-gradient(circle at 40% 35%,#f8e7b0,#a8862f 60%,#5a420f 72%,transparent 76%) 0 100%/10px 10px no-repeat,
    linear-gradient(45deg,transparent 45%,#4a3510 46% 54%,transparent 55%) 100% 100%/10px 10px no-repeat,
    radial-gradient(circle at 40% 35%,#f8e7b0,#a8862f 60%,#5a420f 72%,transparent 76%) 100% 100%/10px 10px no-repeat}

/* a picture frame: brass, with a dark lip and the ink line round it all */
.frame{position:relative;display:block;padding:13px;border-radius:5px;
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 25%,rgba(255,248,215,.45) 38%,rgba(255,255,255,0) 52%),
    linear-gradient(160deg,#f4d98c,var(--brass) 28%,#8f6c26 55%,#d8b45e 78%,#7a5b1e);
  box-shadow:0 0 0 2.5px var(--ink),inset 0 1px 0 rgba(255,250,220,.7),inset 0 -2px 0 rgba(60,40,8,.5),0 24px 50px rgba(0,0,0,.6),0 4px 0 rgba(0,0,0,.4)}
.frame::before{content:"";position:absolute;inset:8px;border-radius:3px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,244,205,.55),inset 0 0 0 5px rgba(60,40,8,.35)}
.frame img{position:relative;width:100%;border-radius:2px;box-shadow:0 0 0 2px var(--ink);background:var(--walnut-1)}
a.frame{transition:transform .25s ease,box-shadow .25s ease}
a.frame:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px var(--ink),inset 0 1px 0 rgba(255,250,220,.7),inset 0 -2px 0 rgba(60,40,8,.5),0 30px 60px rgba(0,0,0,.65),0 0 40px rgba(255,170,80,.18)}
/* the walnut frame, for the pictures hung on the wall: wood with a thin brass slip inside */
.frame.wood{padding:16px;
  background:var(--tex-wood-h) 0 0/512px 256px,linear-gradient(160deg,var(--walnut-5),var(--walnut-4) 40%,var(--walnut-3));
  background-blend-mode:overlay,normal}
.frame.wood::before{inset:11px;box-shadow:0 0 0 3px var(--brass),0 0 0 4px var(--brass-lo)}

/* a brass nameplate under a picture */
.plaque{display:inline-block;font-family:var(--sc);font-weight:700;letter-spacing:.035em;font-size:16px;line-height:1.3;
  padding:8px 22px 9px;border-radius:3px;text-shadow:0 1px 0 rgba(255,245,210,.55)}

/* the gold coin of the game, as an ornament: a line with a coin on it */
.orn{position:relative;height:28px;margin:18px 0;
  background:linear-gradient(90deg,transparent,var(--brass) 18%,var(--brass) 82%,transparent) 50% 50%/100% 1.5px no-repeat}
.orn::after{content:"";position:absolute;left:50%;top:0;width:28px;height:28px;margin-left:-14px;background:var(--coin) center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.orn.left{background:linear-gradient(90deg,var(--brass),var(--brass) 60%,transparent) 0 50%/100% 1.5px no-repeat;max-width:320px}
.orn.left::after{left:0;margin-left:0}
.paper .orn{background-image:linear-gradient(90deg,transparent,rgba(107,77,34,.6) 18%,rgba(107,77,34,.6) 82%,transparent)}

/* ------------------------------------------------------------------ type */
.display{font-family:var(--serif);font-size:clamp(38px,4.6vw,62px);line-height:1.04;color:var(--ivory);letter-spacing:-.005em;
  text-shadow:0 3px 0 var(--ink),0 0 34px rgba(255,140,60,.16)}
.paper .display{color:var(--paper-ink);text-shadow:none}
.kicker{font-family:var(--sc);font-weight:700;letter-spacing:.08em;color:var(--brass)}
.lede{font-size:clamp(20px,1.7vw,24px);line-height:1.5;color:var(--ivory-2)}
.fine{font-size:16px;color:var(--dim)}
.paper .fine{color:var(--paper-ink-2)}

/* the wordmark, as the game's title writes it: ivory letters, the teal !! */
.wordmark{font-family:var(--serif);font-weight:400;line-height:1;color:#f3efe4;letter-spacing:.005em;white-space:nowrap;
  text-shadow:0 4px 0 var(--ink),0 10px 34px rgba(0,0,0,.65)}
.wordmark .t{color:var(--teal);text-shadow:0 4px 0 var(--ink),0 0 26px rgba(45,212,191,.55)}
.motto{font-family:var(--serif);color:var(--gold);margin:0;text-shadow:0 2px 0 var(--ink),0 0 18px rgba(0,0,0,.7)}

/* ------------------------------------------------------------------ buttons: gold to press, walnut for the rest */
.btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn{position:relative;display:inline-block;font-family:var(--sc);font-weight:700;letter-spacing:.045em;font-size:19px;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;padding:13px 28px 14px;border-radius:7px;
  color:var(--ivory);
  background:var(--tex-wood-h) 0 0/512px 256px,linear-gradient(180deg,var(--walnut-5),var(--walnut-3));
  background-blend-mode:overlay,normal;
  box-shadow:0 0 0 2px var(--ink),0 0 0 4.5px var(--brass),0 0 0 6.5px var(--ink),inset 0 1px 0 rgba(255,220,170,.25),0 10px 22px rgba(0,0,0,.55);
  text-shadow:0 1px 0 var(--ink);transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.btn:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.pri{color:var(--paper-ink);text-shadow:0 1px 0 rgba(255,240,190,.6);
  background:linear-gradient(180deg,#ffe49a,var(--gold-hi) 25%,var(--gold) 60%,#d99a2b);
  box-shadow:0 0 0 2px var(--ink),0 0 0 4.5px var(--brass-lo),0 0 0 6.5px var(--ink),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(138,100,20,.55),0 12px 26px rgba(0,0,0,.6),0 0 34px rgba(255,180,70,.22)}
.btn.pri:hover{color:#000;box-shadow:0 0 0 2px var(--ink),0 0 0 4.5px var(--brass-lo),0 0 0 6.5px var(--ink),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(138,100,20,.55),0 14px 30px rgba(0,0,0,.6),0 0 50px rgba(255,190,80,.42)}
.btn.big{font-size:24px;padding:17px 40px 18px}
.paper .btn:not(.pri){color:var(--ivory)}

/* ------------------------------------------------------------------ the top bar */
.bar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;
  background:linear-gradient(180deg,rgba(10,6,3,.92),rgba(10,6,3,.75));box-shadow:0 1.5px 0 var(--ink),0 3px 0 rgba(201,162,74,.35)}
.bar.over{position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(10,6,3,.82),rgba(10,6,3,0));box-shadow:none;padding-bottom:40px}
.bar .studio{font-family:var(--sc);font-weight:700;letter-spacing:.09em;font-size:18px;color:var(--brass-hi);text-decoration:none;white-space:nowrap;text-shadow:0 1px 0 var(--ink)}
.bar .studio:hover{color:#fff}
.bar nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{font-family:var(--sc);font-weight:500;letter-spacing:.06em;font-size:16px;color:var(--ivory-2);text-decoration:none;white-space:nowrap;text-shadow:0 1px 2px var(--ink)}
.bar nav a:hover{color:var(--gold-hi)}

/* ------------------------------------------------------------------ the game's page: the title room */
.hero{position:relative;height:100vh;height:min(100svh,62.5vw);min-height:600px;max-height:1200px;overflow:hidden;background:var(--walnut-0);isolation:isolate}
.hero .scene{position:absolute;inset:0;z-index:0}
.hero .scene img,.hero .scene video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%}
.hero .scene video{opacity:0;transition:opacity .8s ease}
.hero .scene video.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,7,3,.88) 0%,rgba(12,7,3,.55) 17%,rgba(12,7,3,0) 38%),
    linear-gradient(0deg,var(--walnut-0) 0%,rgba(20,13,8,.92) 13%,rgba(20,13,8,.45) 30%,rgba(20,13,8,0) 46%),
    radial-gradient(ellipse 85% 75% at 50% 50%,transparent 55%,rgba(8,4,2,.5))}
.hero .top{position:absolute;z-index:2;left:0;right:0;top:clamp(78px,10.5vh,128px);text-align:center;padding:0 16px}
.hero .wordmark{font-size:clamp(64px,9.2vw,150px)}
.hero .call{position:absolute;z-index:2;left:0;right:0;bottom:clamp(30px,6.5vh,70px);text-align:center;padding:0 20px}
.hero .motto{font-size:clamp(25px,2.5vw,36px);margin-bottom:26px}
.hero .btns{justify-content:center;gap:22px}
.hero .small{margin:22px auto 0;max-width:640px;font-size:17px;color:var(--ivory-2);font-style:italic;text-shadow:0 1px 3px var(--ink)}

/* about: the heading on the wall, the words on a sheet pinned over a framed Board */
.about{padding:110px 0 120px;--fx:8%;--fy:30%}
.about-h{margin:0 0 34px}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.about-copy{position:relative;z-index:2;margin-right:-70px}
.about-copy .paper{padding:34px 38px 30px;transform:rotate(-1.3deg);max-width:520px}
.about-copy .paper p{margin:0 0 14px}
.about-copy .paper p:last-child{margin:0}
.about-shot{margin:0;transform:rotate(.8deg)}
.about-shot figcaption{margin:22px 0 0 40px}

/* the pictures: two large moments, then three hung on the wall */
.gallery{position:relative;padding:120px 0 110px;
  background:
    radial-gradient(ellipse 60% 40% at 85% 0%,rgba(255,140,60,.12),transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><g font-family='serif' fill='%23b07a45'><text x='40' y='150' font-size='120' fill-opacity='0.07' transform='rotate(-14 100 110)'>♞</text><text x='420' y='190' font-size='96' fill-opacity='0.055' transform='rotate(11 470 150)'>♝</text><text x='230' y='360' font-size='140' fill-opacity='0.06' transform='rotate(6 300 300)'>♜</text><text x='500' y='430' font-size='104' fill-opacity='0.07' transform='rotate(-9 550 390)'>♟</text><text x='60' y='530' font-size='112' fill-opacity='0.055' transform='rotate(16 120 490)'>♛</text><text x='330' y='600' font-size='88' fill-opacity='0.06' transform='rotate(-18 370 560)'>♚</text></g></svg>") 0 0/640px 640px,
    linear-gradient(180deg,#24150c,#1a0f08)}
.moment{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:center;margin:0 0 110px}
.moment.flip{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.moment.flip .frame{order:2}
.moment figcaption{font-family:var(--serif);font-size:clamp(26px,2.5vw,36px);line-height:1.18;color:var(--ivory);text-shadow:0 2px 0 var(--ink)}
.moment figcaption::before{content:"";display:block;width:44px;height:44px;margin:0 0 20px;background:var(--coin) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.moment .frame{transform:rotate(-.6deg)}
.moment.flip .frame{transform:rotate(.7deg)}
.hung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;align-items:start;padding-top:10px}
.hung figure{margin:0;text-align:center}
.hung figure:nth-child(1){transform:rotate(-1.4deg)}
.hung figure:nth-child(2){transform:rotate(.9deg) translateY(26px)}
.hung figure:nth-child(3){transform:rotate(-.5deg)}
.hung figcaption{margin-top:18px}
.hung .plaque{max-width:92%}

/* the demo: a leather panel */
.den{--fx:88%;--fy:4%}
.demo{padding:120px 0 40px}
.demo .leather{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:62px 64px 64px}
.demo .leather .display{margin-bottom:18px}
.demo .leather p{margin:0 0 30px;color:var(--ivory-2);font-size:21px}
.coins{list-style:none;margin:0;padding:0;align-self:center}
.coins li{position:relative;padding:12px 0 12px 54px;border-bottom:1px solid rgba(240,196,150,.2);font-size:20px}
.coins li:last-child{border-bottom:0}
.coins li::before{content:"";position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;background:var(--coin) center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}

/* feedback (a letter) and contact (a brass plate), side by side */
.letters{padding:80px 0 120px}
.letters-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.letter{padding:46px 48px 44px;transform:rotate(.6deg)}
.letter .display{margin-bottom:18px}
.letter p{margin:0 0 14px}
.letter .btns{margin-top:26px}
.plate{padding:40px 40px 38px;border-radius:6px;transform:rotate(-.8deg)}
.plate h2{font-family:var(--serif);font-size:clamp(32px,3.2vw,44px);line-height:1;margin:0 0 22px;color:#2e2108;text-shadow:0 1px 0 rgba(255,245,210,.6)}
.plate dl{margin:0}
.plate dt{font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:15px;color:#5a420f;margin:0}
.plate dd{margin:2px 0 18px;font-size:20px}
.plate dd:last-child{margin-bottom:0}
.plate a{color:#2e2108;font-weight:700;text-decoration-color:rgba(46,33,8,.45)}
.plate a:hover{color:#000}

/* press: the facts on a ruled sheet, the downloads on the wall beside it */
.press{padding:110px 0 120px;background:linear-gradient(180deg,#1f130a,#160d07)}
.press-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.press .display{margin-bottom:26px}
.ledger{padding:30px 36px 28px 64px;transform:rotate(-.4deg)}
.ledger::after{content:"";position:absolute;top:0;bottom:0;left:44px;width:2px;background:rgba(184,65,44,.55)}
.ledger table{border-collapse:collapse;width:100%}
.ledger td{padding:9px 0;border-bottom:1px solid rgba(70,110,150,.35);vertical-align:top}
.ledger tr:last-child td{border-bottom:0}
.ledger td:first-child{font-family:var(--sc);font-weight:700;letter-spacing:.04em;color:var(--paper-ink-2);padding-right:22px;white-space:nowrap;width:1%}
.kit{padding-top:96px}
.kit h3{font-family:var(--serif);font-size:30px;line-height:1.1;margin:0 0 18px;color:var(--ivory);text-shadow:0 2px 0 var(--ink)}
.kit ul{list-style:none;margin:0 0 22px;padding:0}
.kit li{position:relative;padding:10px 0 10px 40px;border-bottom:1px solid rgba(201,162,74,.22)}
.kit li::before{content:"";position:absolute;left:2px;top:15px;width:22px;height:22px;background:var(--coin) center/contain no-repeat}
.kit li:last-child{border-bottom:0}

/* ------------------------------------------------------------------ the studio's front page */
.studio-hero{padding:130px 0 120px;text-align:center;--fx:50%;--fy:110%;overflow:hidden}
.studio-hero::after{content:"";position:absolute;left:50%;bottom:-160px;width:900px;height:360px;margin-left:-450px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,150,60,.32),rgba(255,110,40,.10) 45%,transparent 70%);animation:hearth 5.5s ease-in-out infinite alternate}
@keyframes hearth{0%{opacity:.75;transform:scale(1)}35%{opacity:1;transform:scale(1.04)}60%{opacity:.82}100%{opacity:.95;transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){.studio-hero::after{animation:none}}
.studio-hero h1{position:relative;z-index:1;font-family:var(--serif);font-size:clamp(54px,8.4vw,124px);line-height:1;color:var(--ivory);text-shadow:0 5px 0 var(--ink),0 0 50px rgba(255,140,60,.25)}
.studio-hero .orn{max-width:420px;margin:30px auto}
.studio-hero .lede{position:relative;z-index:1;max-width:640px;margin:0 auto}
.showcase{padding:110px 0 120px;--fx:15%;--fy:10%}
.show-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.painting{transform:rotate(-.8deg)}
.show-copy .wordmark{font-size:clamp(52px,5.4vw,80px)}
.show-copy .tagline{font-style:italic;color:var(--ivory-2);font-size:22px;margin:14px 0 0}
.show-copy .orn{margin:26px 0}
.show-copy .motto{font-size:26px;margin:0 0 34px}
.show-copy .btn{min-width:260px}
.studio-contact{padding:100px 0 110px;background:linear-gradient(180deg,#1f130a,#160d07)}
.studio-contact .plate{max-width:560px;margin:0 auto;transform:rotate(-.5deg)}

/* ------------------------------------------------------------------ privacy and the lost page */
.desk{padding:90px 0 110px;--fx:50%;--fy:0%}
.blotter{max-width:900px;margin:0 auto;padding:28px;border-radius:12px}
.doc{padding:56px 64px 50px}
.doc h1{font-family:var(--serif);font-size:clamp(44px,5vw,64px);line-height:1;color:var(--paper-ink)}
.doc .orn{margin:22px 0 28px}
.doc h3{font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--paper-ink);margin:34px 0 8px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:24px}
.doc li{margin:4px 0}
.doc li::marker{color:var(--paper-ink-2)}
.lost{padding:130px 0 150px;text-align:center;--fx:50%;--fy:100%}
.sign{display:inline-block;max-width:620px;padding:54px 56px 50px;transform:rotate(-1deg)}
.sign h1{font-family:var(--serif);font-size:clamp(38px,5vw,58px);line-height:1.05;color:var(--paper-ink)}
.sign p{margin:0 0 30px}
.sign .btns{justify-content:center}

/* ------------------------------------------------------------------ the foot of every page */
.foot{position:relative;padding:34px 0 44px;color:var(--faint);font-size:16px;
  background:var(--tex-wood-h) 0 0/512px 256px,linear-gradient(180deg,var(--walnut-2),var(--walnut-0));background-blend-mode:overlay,normal;
  box-shadow:inset 0 2px 0 var(--brass-lo),inset 0 3.5px 0 var(--ink)}
.foot .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--ivory-2)}

/* ------------------------------------------------------------------ a narrower desk */
@media (max-width:1060px){
  .about-copy{margin-right:-40px}
  .demo .leather{padding:52px 46px}
  .moment{gap:40px}
}
/* phones and a tall window: one column, the portrait clip */
@media (max-width:820px){
  body{font-size:18px}
  .wrap{padding:0 18px}
  .bar{padding:12px 16px}
  .bar.over{padding-bottom:30px}
  .bar .studio{font-size:15px;letter-spacing:.07em}
  .bar nav{gap:16px;flex-wrap:nowrap}
  .bar nav a{font-size:15px}
  .bar nav a.wide{display:none}
  .about,.gallery,.demo,.letters,.press,.showcase,.studio-contact{padding:72px 0 80px}
  .demo{padding-bottom:30px}
  .letters{padding-top:50px}
  .about-h{margin-bottom:26px}
  .about-grid,.moment,.moment.flip,.letters-grid,.press-grid,.show-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .moment.flip .frame{order:0}
  .about-copy{margin:0}
  .about-copy .paper{padding:26px 22px 22px;max-width:none;transform:rotate(-.8deg)}
  .about-shot{margin:24px 0 0;transform:none}
  .about-shot figcaption{margin:18px 0 0 6px}
  .moment{margin-bottom:64px}
  .moment .frame,.moment.flip .frame{transform:none}
  .moment figcaption{font-size:24px}
  .moment figcaption::before{width:34px;height:34px;margin-bottom:12px}
  .hung{grid-template-columns:minmax(0,1fr);gap:40px}
  .hung figure:nth-child(n){transform:none}
  .frame{padding:9px}
  .frame::before{inset:5px}
  .frame.wood{padding:11px}
  .frame.wood::before{inset:7px}
  .demo .leather{grid-template-columns:minmax(0,1fr);gap:26px;padding:40px 24px 36px}
  .demo .leather p{font-size:19px;margin-bottom:24px}
  .coins li{font-size:18px;padding-left:46px}
  .coins li::before{width:30px;height:30px;margin-top:-15px}
  .letter{padding:32px 24px 30px;transform:rotate(.4deg)}
  .plate{padding:30px 26px 28px;transform:none}
  .ledger{padding:22px 20px 20px 40px;transform:none}
  .ledger::after{left:26px}
  .ledger td{display:block;border:0;padding:0}
  .ledger td:first-child{width:auto;padding-top:12px}
  .ledger tr{display:block;border-bottom:1px solid rgba(70,110,150,.35);padding-bottom:10px}
  .ledger tr:last-child{border-bottom:0}
  .kit{padding-top:6px}
  .btn.big{font-size:21px;padding:16px 26px}
  .studio-hero{padding:84px 0 80px}
  .studio-hero .orn{margin:22px auto}
  .painting{transform:none}
  .show-copy{text-align:center}
  .show-copy .orn{margin:20px auto;max-width:320px}
  .show-copy .orn.left{background:linear-gradient(90deg,transparent,var(--brass) 18%,var(--brass) 82%,transparent) 50% 50%/100% 1.5px no-repeat}
  .show-copy .orn.left::after{left:50%;margin-left:-14px}
  .show-copy .btns{justify-content:center}
  .desk{padding:40px 0 70px}
  .blotter{padding:12px;border-radius:8px}
  .blotter::before{inset:6px}
  .doc{padding:34px 22px 30px}
  .lost{padding:80px 0 100px}
  .sign{padding:38px 24px 34px}
  .foot{padding:28px 0 36px}
}
/* the hero on a tall screen: the portrait clip, the name at the top and the buttons at the foot, as the game's phone title */
@media (max-aspect-ratio:5/6){
  .hero{height:100vh;height:100svh;min-height:640px;max-height:none}
  .hero .scene img,.hero .scene video{object-position:50% 30%}
  .hero::before{background:
    linear-gradient(180deg,rgba(12,7,3,.9) 0%,rgba(12,7,3,.6) 15%,rgba(12,7,3,0) 32%),
    linear-gradient(0deg,var(--walnut-0) 0%,rgba(20,13,8,.94) 22%,rgba(20,13,8,.55) 40%,rgba(20,13,8,0) 56%)}
  .hero .top{top:76px}
  .hero .wordmark{font-size:min(15.2vw,96px)}
  .hero .call{bottom:26px}
  .hero .motto{font-size:min(6.3vw,30px);margin-bottom:22px}
  .hero .btns{flex-direction:column;gap:22px}
  .hero .btns .btn{width:min(100%,360px)}
  .hero .small{font-size:15.5px;margin-top:20px}
}
@media (max-width:380px){
  .bar nav{gap:12px}
  .bar nav a{font-size:14px}
  .bar .studio{font-size:14px}
}

/* Chris 11/10: the line under the demo button is in the same yellow as the motto and the button */
.hero .small{color:var(--gold);font-style:normal}

/* the feedback form on the game page (Chris 11/10) */
.fbForm{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fbForm textarea,.fbForm input{font:inherit;font-size:16px;color:var(--paper-ink,#2b2014);background:rgba(255,250,235,.85);border:1px solid rgba(107,77,34,.5);border-radius:3px;padding:10px 12px;box-sizing:border-box;width:100%}
.fbForm textarea{resize:vertical;min-height:120px}
.fbForm textarea:focus,.fbForm input:focus{outline:none;border-color:#b08a3e;box-shadow:0 0 0 2px rgba(176,138,62,.35)}
.fbForm .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fbForm .btns{margin:0}
.fbForm button:disabled{opacity:.6;cursor:default}
.fbForm .fbStatus{margin:0;min-height:1.3em;font-size:15px}