:root {
  --ink: #111111;
  --muted: #796d68;
  --soft: #8a817d;
  --paper: #fdfcf8;
  --cream: #f6f2e7;
  --blue: #e2e9ef;
  --yellow: #f5edd6;
  --rose: #efddda;
  --line: rgba(17,17,17,.88);
  --sans: "Alegreya Sans", "Gill Sans", Arial, sans-serif;
  --serif: "Alegreya", Georgia, serif;
  --damia: "Damia's Hand", "Damia's_Hand";
  --pandemonium: "Pandemonium";
  --ease-paper: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  font-weight: 300;
  min-width: 320px;
}
button, a, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--muted); outline-offset: 5px; }

.view { animation: viewIn .32s var(--ease-paper) both; }
@keyframes viewIn { from {opacity:0; transform:translateY(6px)} to {opacity:1; transform:none} }

.screen-1440 { width: min(100%, 1440px); margin: 0 auto; position: relative; }
.fullscreen-page { min-height: 100svh; overflow: hidden; }

/* exact Figma title exports + robust fallback */
.figma-title { position: relative; }
.figma-title img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.title-fallback { display: none; font-family: var(--pandemonium); font-weight: 700; letter-spacing: .03em; line-height: .95; text-transform: uppercase; }
.asset-failed + .title-fallback { display:none; }

/* navigation */
.site-nav {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 11px 20px;
  position: relative;
  z-index: 40;
}
.site-nav .nav-divider { width:1px; height:20px; background:#bfbfbf; }
.nav-link { position:relative; font-size:14px; white-space:nowrap; cursor:pointer; border:0; background:none; padding:5px 0; }
.nav-link::after, .paper-link::after {
  content:""; position:absolute; height:1px; background:currentColor; left:0; right:100%; bottom:0;
  transition:right .22s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.active::after, .paper-link:hover::after { right:0; }
.nav-link.active { font-weight:600; }
.nav-logo { width: 357px; height: 42px; display:block; }
.nav-logo img { width:100%; height:100%; object-fit:contain; }
.nav-logo-fallback { font-family:var(--pandemonium); font-size:26px; font-weight:700; display:none; white-space:nowrap; }
.nav-logo img.asset-failed + .nav-logo-fallback { display:none; }

/* landing */
.landing { min-height: 100svh; height: min(1024px, 100svh); background:#fff; position:relative; overflow:hidden; }
.landing-heading { position:absolute; left:11%; right:9%; top:10.8%; height:13.1%; }
.landing-heading .title-fallback { font-size: clamp(44px,6.6vw,96px); text-align:center; }
.landing-subtitle { position:absolute; top:23.9%; left:0; right:0; text-align:center; font-family:var(--serif); color:var(--muted); font-size:20px; }
.envelope-stage { position:absolute; width:min(62.5vw,900px); aspect-ratio:3/2; left:50%; top:28.5%; transform:translateX(-50%); cursor:pointer; border:0; background:transparent; padding:0; appearance:none; -webkit-appearance:none; }
.envelope-stage button { border:0; background:none; padding:0; }
.envelope-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.envelope-line-fallback { position:absolute; inset:20% 9% 26%; border:1.7px solid #111; transform:perspective(900px) rotateX(5deg) skewX(-3deg); background:#fff; }
.envelope-line-fallback::before, .envelope-line-fallback::after { content:""; position:absolute; inset:0; }
.envelope-line-fallback::before { clip-path:polygon(0 0,50% 51%,100% 0); border-top:1.6px solid #111; background:linear-gradient(27deg, transparent 49.6%, #111 50%, transparent 50.4%),linear-gradient(-27deg, transparent 49.6%, #111 50%, transparent 50.4%); }
.envelope-stage:not(.is-open):hover { transform:translateX(-50%) translateY(-6px) rotate(-.3deg); transition:transform .28s var(--ease-paper); }
.envelope-stage .strings { transition:opacity .28s ease, transform .48s ease; }
.envelope-stage .tag-layer {
  transition:opacity .25s ease, transform .45s var(--ease-paper);
  inset:auto;
  width:18.5%;
  height:10.7%;
  left:56.8%;
  top:48.8%;
  object-fit:contain;
  transform:rotate(7deg);
  transform-origin:center;
}
.envelope-stage.is-open .strings { opacity:0; transform:scale(.96); }
.envelope-stage.is-open .tag-layer { opacity:0; transform:translate(20px,18px) rotate(15deg); }
.closed-set, .open-set { transition:opacity .4s ease; }
.open-set { opacity:0; }
.is-open .closed-set { opacity:0; }
.is-open .open-set { opacity:1; }
.entry-card {
  position:absolute; width:64%; height:43%; left:18%; top:31%; z-index:12;
  opacity:0; transform:translateY(80px) rotate(-4.75deg) scale(.92);
  transition:opacity .3s .2s ease, transform .72s .15s cubic-bezier(.2,1.08,.3,1);
  background:#fff;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.08));
}
.is-open .entry-card { opacity:1; transform:translateY(-3px) rotate(-4.75deg) scale(1); }
.entry-card-fallback { position:absolute; inset:4% 2%; background:#fff; border:1.3px solid #111; clip-path:polygon(1% 5%,6% 3%,11% 5%,18% 2%,24% 4%,31% 2%,38% 4%,45% 1%,51% 4%,58% 2%,66% 5%,73% 2%,80% 4%,87% 1%,98% 4%,99% 94%,92% 96%,84% 94%,76% 97%,68% 94%,60% 97%,51% 95%,43% 98%,35% 95%,26% 98%,18% 95%,10% 98%,2% 95%); }
.entry-copy { position:absolute; inset:13% 7%; z-index:2; font-family:var(--damia); transform:rotate(2deg); }

.damia-word-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.damia-the-word { width:72px; height:auto; }
.damia-word-image { width:auto; height:37px; max-width:230px; object-fit:contain; object-position:left center; }
.entry-copy .damia-the-word { width:70px; }
.entry-copy .damia-word-image { height:34px; max-width:170px; }

.entry-copy .small { color:#6e6661; font-size:13px; }
.entry-copy strong { font-size:30px; display:block; line-height:1.1; }
.entry-start { position:absolute; right:7%; bottom:14%; z-index:4; font-family:var(--serif); font-weight:500; letter-spacing:.04em; font-size:15px; border:0; background:transparent; cursor:pointer; }
.entry-start::after { content:""; display:block; height:1px; background:#111; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.entry-start:hover::after { transform:scaleX(1); }
.envelope-hint { position:absolute; left:0; right:0; bottom:10.5%; text-align:center; color:var(--muted); letter-spacing:.08em; font-size:20px; transition:opacity .25s ease; }
.is-open ~ .envelope-hint { opacity:0; }

/* generic headers */
.page-shell { padding:47px 50px 60px; min-height:100svh; }
.page-title-wrap { margin-top: -5px; }
.page-title-svg { height:179px; max-width:1340px; }
.page-title-svg img { height:100%; width:auto; max-width:100%; }
.page-title-svg .title-fallback { color:var(--muted); font-size:clamp(64px,9vw,128px); }

/* Drawing */
.draw-page { min-height:1024px; position:relative; overflow:hidden; }
.draw-page .site-nav { position:absolute; top:47px; left:0; right:0; }
.draw-title { position:absolute; left:6%; top:112px; width:46%; height:179px; }
.draw-title .title-fallback { color:var(--muted); font-size:128px; }
.paper-deck { position:absolute; left:50%; top:311px; width:845px; height:560px; transform:translateX(-50%); }
.paper-sheet { position:absolute; background:var(--paper); filter:drop-shadow(4px 4px 4px rgba(0,0,0,.18)); transition:transform .62s var(--ease-paper), opacity .35s ease, width .62s var(--ease-paper), height .62s var(--ease-paper), left .62s var(--ease-paper), top .62s var(--ease-paper); }
.paper-sheet::before { content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(ellipse at 20% 10%, rgba(120,110,90,.09) 0 1px, transparent 1.5px),
  radial-gradient(ellipse at 73% 62%, rgba(120,110,90,.07) 0 1px, transparent 1.3px),
  repeating-linear-gradient(93deg, transparent 0 14px, rgba(80,70,60,.018) 15px 16px);
  background-size:31px 23px, 27px 29px, auto; opacity:.65; pointer-events:none; }
.paper-main { width:845px; height:560px; left:0; top:0; clip-path:polygon(1% 4%,5% 3%,11% 4%,18% 2.5%,25% 3.7%,32% 2.2%,40% 3.6%,48% 2.4%,56% 3.5%,64% 2.2%,72% 3.7%,80% 2.5%,89% 3.8%,98% 3%,99% 96%,95% 97%,90% 96%,84% 98%,77% 96%,70% 98%,63% 96%,57% 98.5%,50% 96%,43% 98%,36% 96%,29% 98%,22% 96%,15% 98%,8% 96%,2% 97%); }
.paper-second { width:401px; height:401px; left:585px; top:-27px; transform:rotate(0.5deg); z-index:-1; opacity:.7; clip-path:polygon(2% 3%,8% 2%,15% 4%,23% 2%,31% 4%,39% 2%,48% 4%,56% 2%,65% 4%,74% 2%,84% 4%,97% 2%,98% 97%,90% 98%,82% 96%,72% 98%,62% 96%,52% 98%,43% 96%,33% 98%,24% 96%,14% 98%,2% 96%); }
.paper-deck.stage-two.view-second .paper-main { transform:translate(-135px,50px) rotate(-5deg) scale(.62); opacity:.5; z-index:2; cursor:pointer; pointer-events:auto; }
.paper-deck.stage-two.view-second .paper-main .drawing-canvas { pointer-events:none; }
.paper-deck.stage-two.view-second .paper-second { width:620px; height:560px; left:112px; top:0; transform:rotate(.8deg); opacity:1; z-index:4; pointer-events:auto; }
.paper-deck.stage-two.view-first .paper-main { transform:none; opacity:1; z-index:4; pointer-events:auto; }
.paper-deck.stage-two.view-first .paper-second { width:401px; height:401px; left:585px; top:-27px; transform:rotate(.5deg); opacity:.68; z-index:2; cursor:pointer; pointer-events:auto; }
.paper-deck.stage-two.view-first .paper-second .drawing-canvas { pointer-events:none; }
.paper-deck.stage-two .paper-sheet[aria-current="false"]:hover { opacity:.78; filter:drop-shadow(7px 7px 6px rgba(0,0,0,.16)); }

.paper-copy { position:absolute; z-index:7; pointer-events:none; }
.word-label { left:8.7%; top:11%; line-height:1.25; }

.optional-prompt { right:4.8%; top:8%; width:43%; text-align:right; pointer-events:auto; }
.prompt-toggle { border:0; background:none; cursor:pointer; font-family:var(--serif); font-size:16px; padding:0 0 5px; }
.prompt-toggle::after { content:" +"; }
.prompt-toggle[aria-expanded="true"]::after { content:" −"; }
.prompt-lines { max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .3s ease; font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.7; }
.prompt-lines.open { max-height:100px; opacity:1; }
.prompt-lines div::before { content:"○"; font-style:normal; padding-right:8px; }
.draw-instruction { left:8.2%; bottom:6%; font-family:var(--serif); font-size:16px; line-height:1.35; }
.simplify-copy { display:none; left:8%; right:8%; bottom:7%; font-family:var(--serif); font-size:16px; line-height:1.4; }
.stage-two .paper-second .simplify-copy { display:block; }
.stage-two .paper-second .word-label { display:block; left:8%; top:9%; }
.stage-two .paper-second .optional-prompt, .stage-two .paper-second .draw-instruction { display:none; }
.drawing-canvas { position:absolute; z-index:6; left:7%; right:7%; top:23%; bottom:18%; width:86%; height:59%; touch-action:none; cursor:crosshair; }
.paper-second .drawing-canvas { top:22%; bottom:22%; height:56%; }
.paper-second .word-label, .paper-second .simplify-copy { display:none; }
.tool-strip { position:absolute; top:919px; left:50%; transform:translateX(-50%); display:flex; gap:44px; align-items:center; z-index:15; height:62px; }
.tool { border:0; background:transparent; min-width:28px; height:46px; display:grid; place-items:center; cursor:pointer; padding:7px; color:#111; transition:transform .16s ease, opacity .16s; }
.tool:hover { transform:translateY(-3px); }
.tool.active { background:rgba(121,109,104,.08); border-radius:50%; }
.tool svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.brush-sizes { display:flex; gap:13px; align-items:center; }
.brush-dot { border:0; border-radius:50%; background:#111; opacity:.26; padding:0; cursor:pointer; }
.brush-dot[data-size="2"]{ width:4px;height:4px}.brush-dot[data-size="5"]{width:8px;height:8px}.brush-dot[data-size="9"]{width:12px;height:12px}
.brush-dot.active { opacity:.9; }
.draw-next { font-family:var(--serif); font-size:17px; letter-spacing:.04em; border:0; background:none; cursor:pointer; position:relative; min-width:106px; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.draw-next.visible { opacity:1; pointer-events:auto; }
.draw-next::after { content:""; position:absolute; height:1px; left:0; right:100%; bottom:-4px; background:#111; transition:right .2s ease; }
.draw-next:hover::after { right:0; }
.submit-stamp { position:absolute; inset:0; display:grid; place-items:center; z-index:30; pointer-events:none; opacity:0; }
.submit-stamp.show { animation:stamp .8s var(--ease-paper) both; }
.submit-stamp span { border:2px solid var(--muted); color:var(--muted); padding:10px 18px; font-family:var(--damia); font-size:26px; transform:rotate(-4deg); background:rgba(255,255,255,.88); }
@keyframes stamp { 0%{opacity:0; transform:scale(1.35) rotate(3deg)} 35%,80%{opacity:1;transform:scale(1) rotate(0)} 100%{opacity:0} }
.draw-success { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.96); border:1px solid #111; padding:30px 36px; z-index:50; text-align:center; display:none; }
.draw-success.show { display:block; animation:viewIn .3s ease both; }
.draw-success h3 { margin:0 0 14px; font-family:var(--pandemonium); font-size:28px; }
.draw-success-actions { display:flex; gap:22px; justify-content:center; margin-top:22px; }
.paper-action { border:0; border-bottom:1px solid currentColor; background:none; cursor:pointer; font-family:var(--serif); font-size:17px; padding:2px; }

/* Archive A-Z */
.archive-page { padding:50px; min-height:3728px; }
.archive-heading { margin-top:0; }
.archive-title { height:179px; width:100%; }
.archive-title .title-fallback { color:var(--muted); font-size:128px; }
.archive-subtitle { margin-top:-10px; text-align:right; font-size:16px; letter-spacing:.04em; line-height:1.25; }
.az-label { text-align:center; margin:50px 0 70px; font-size:16px; letter-spacing:.05em; }
.drawer-grid { width:849px; margin:0 auto; display:grid; grid-template-columns:repeat(2, 325px); column-gap:199px; row-gap:50px; }
.drawer { width:325px; height:171px; position:relative; border:0; background:none; cursor:pointer; padding:0; transform:rotate(var(--r,0deg)); transition:transform .25s var(--ease-paper); }
.drawer:hover { transform:translateY(-8px) rotate(calc(var(--r,0deg) * .2)); }
.drawer-back { position:absolute; left:22px; top:0; width:286px; height:108px; border:1.5px solid rgba(0,0,0,.7); background:#fff; }
.drawer-front { position:absolute; left:0; top:20px; width:300px; height:116px; border:2.2px solid #111; background:#fff; }
.drawer-front::before { content:""; position:absolute; left:-2px; top:-2px; width:23px; height:23px; border-top:1.6px solid #111; transform:skewY(42deg); opacity:.7; }
.drawer-front::after { content:""; position:absolute; right:-10px; top:-2px; width:10px; height:113px; border-right:1.6px solid #111; transform:skewY(-14deg); opacity:.65; }
.drawer-label { position:absolute; left:95px; top:49px; width:110px; height:35px; border:1.6px solid rgba(0,0,0,.88); display:grid; place-items:center; font-family:var(--pandemonium); font-size:30px; background:var(--label,#faf8f2); z-index:5; }
.drawer-knob { position:absolute; left:145px; top:111px; width:10px; height:10px; border:1.5px solid #111; border-radius:50%; z-index:5; }
.drawer-number { position:absolute; left:13px; top:111px; font-size:9px; z-index:5; }
.peek-card { position:absolute; height:48px; width:178px; border:1.2px solid rgba(0,0,0,.7); background:#fff; top:-10px; left:66px; transition:transform .24s ease; z-index:0; }
.peek-card:nth-of-type(2){left:76px;top:-17px;width:190px}.peek-card:nth-of-type(3){left:83px;top:-23px;width:204px}
.drawer:hover .peek-card { transform:translateY(-9px); }
.archive-cta { width:406px; margin:100px auto 0; text-align:center; }
.archive-cta h3 { font-size:40px; font-weight:300; margin:0 0 40px; }
.archive-cta .paper-link { position:relative; font-family:var(--serif); font-size:40px; display:inline-block; }

/* letter index */
.index-page, .gallery-page { min-height:1024px; position:relative; padding-top:50px; overflow:hidden; }
.index-page .site-nav, .gallery-page .site-nav { margin:0 auto; }
.index-title { position:absolute; left:5.7%; top:120px; width:58%; height:179px; }
.index-title .title-fallback { font-size:96px; }
.back-link { position:absolute; right:8%; top:250px; font-family:var(--serif); font-size:36px; letter-spacing:.03em; border:0; border-bottom:1px solid #111; background:transparent; padding:0 0 3px; appearance:none; -webkit-appearance:none; cursor:pointer; z-index:30; }
.file-box { position:absolute; left:50%; top:351px; width:1080px; height:520px; transform:translateX(-50%); }
.master-folder { position:absolute; left:95px; top:8px; width:892px; height:170px; border:2px solid #111; border-radius:0 0 8px 8px; background:#fff; }
.master-tab { position:absolute; width:210px; height:58px; left:340px; top:-2px; border:2px solid #111; border-bottom:0; border-radius:25px 25px 0 0; background:#fff; transform:translateY(-34px); display:grid; place-items:center; font-family:var(--pandemonium); font-size:28px; }
.folder-list { position:absolute; left:98px; right:98px; top:156px; height:270px; }
.index-folder { position:absolute; left:0; width:880px; height:82px; border:1.7px solid #111; background:#fff; cursor:pointer; transition:transform .2s var(--ease-paper), filter .2s; overflow:visible; }
.index-folder:hover { transform:translateY(-7px); filter:drop-shadow(0 4px 2px rgba(0,0,0,.06)); z-index:20 !important; }
.word-tab { position:absolute; top:-1px; height:27px; min-width:165px; padding:1px 22px 0; border:1.2px solid #111; border-bottom:0; border-radius:14px 14px 0 0; background:var(--tab,#f8f6ee); font-family:var(--pandemonium); font-size:22px; display:flex; align-items:center; gap:8px; }
.word-tab small { font-family:var(--sans); color:var(--soft); font-size:9px; white-space:nowrap; }
.folder-open { position:absolute; right:28px; top:6px; opacity:.45; }
.file-box-front { position:absolute; left:48px; right:48px; bottom:-25px; height:126px; background:#fff; border:2px solid #111; clip-path:polygon(0 0,100% 0,95% 100%,6% 100%); z-index:30; }
.file-box-front::before { content:""; position:absolute; left:55px; right:55px; top:45px; height:1px; background:#ccc; }
.box-label { position:absolute; bottom:12px; left:0; right:0; text-align:center; color:var(--soft); font-family:var(--serif); font-size:15px; z-index:31; }
.index-footer, .gallery-footer { position:absolute; left:0; right:0; bottom:55px; text-align:center; font-size:20px; letter-spacing:.09em; }
.side-arrow { position:absolute; top:62%; border:0; background:none; color:var(--soft); font-size:26px; cursor:pointer; padding:20px; z-index:40; }
.side-arrow.left { left:5%; } .side-arrow.right { right:5%; }
.empty-index { position:absolute; inset:180px 100px 0; display:grid; place-items:center; text-align:center; font-family:var(--serif); color:var(--soft); font-size:22px; }

/* gallery */
.gallery-title { position:absolute; left:5.6%; top:140px; width:38%; height:150px; }
.gallery-title .title-fallback { color:var(--muted); font-size:96px; }
.gallery-folder { position:absolute; left:50%; top:382px; width:1060px; height:560px; transform:translateX(-50%); }
.gallery-back { position:absolute; left:30px; top:10px; width:1000px; height:500px; z-index:0; }
.gallery-back.fallback { border:2px solid #111; border-radius:30px 30px 0 0; background:#fff; }
.gallery-tab { position:absolute; left:438px; top:42px; min-width:184px; height:44px; padding:0 20px; border:1px solid rgba(17,17,17,.7); border-bottom:0; border-radius:18px 18px 2px 2px; background:rgba(232,214,158,.25); display:grid; place-items:center; font-family:var(--pandemonium); font-size:30px; z-index:4; }
.gallery-count { position:absolute; top:92px; left:0; right:0; text-align:center; color:var(--soft); font-size:10px; z-index:4; letter-spacing:.03em; }
.card-zone { position:absolute; left:70px; right:70px; top:115px; height:300px; z-index:auto; }
.gallery-card { position:absolute; width:230px; height:160px; background:#fefcf7; border:1.35px solid rgba(17,17,17,.86); border-radius:1px; cursor:pointer; padding:0; overflow:visible; transition:left .46s var(--ease-paper), top .46s var(--ease-paper), transform .46s var(--ease-paper), width .46s var(--ease-paper), height .46s var(--ease-paper), filter .25s ease; }
.gallery-card img, .gallery-card .local-image { width:100%; height:100%; object-fit:contain; display:block; background:#fefcf7; }
.gallery-card.active { width:315px; height:220px; z-index:120 !important; border:2px solid #111; filter:drop-shadow(0 10px 9px rgba(0,0,0,.13)); }
.card-num { position:absolute; left:12px; bottom:8px; font-size:9px; color:rgba(138,129,125,.65); background:rgba(255,255,255,.75); padding:1px 3px; }
.gallery-front { position:absolute; left:30px; top:285px; width:1000px; height:230px; z-index:70; pointer-events:none; }
.gallery-front.fallback { background:#fff; border:2px solid #111; clip-path:polygon(0 0,100% 0,96% 100%,4% 100%); }
.gallery-front-label { position:absolute; top:433px; left:0; right:0; text-align:center; color:var(--soft); font-family:var(--serif); font-size:16px; z-index:72; }
.no-drawings { position:absolute; left:0; right:0; top:190px; text-align:center; z-index:20; font-family:var(--serif); color:var(--soft); }

/* About */
.about-page { min-height:3557px; }
.about-content { padding:50px; }
.about-title { height:151px; width:970px; max-width:100%; margin:50px 0; }
.about-title .title-fallback { color:var(--muted); font-size:128px; }
.video-poster { position:relative; width:calc(100% - 70px); aspect-ratio:1270/715; margin:0 auto 50px; border-radius:30px; overflow:hidden; background:linear-gradient(135deg,#d8d6d0,#aea8a2); box-shadow:0 4px 4px rgba(0,0,0,.25); }
.video-poster > img.poster { width:100%; height:100%; object-fit:cover; }
.video-poster::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.1); transition:background .2s; }
.video-poster:hover::after { background:rgba(0,0,0,.16); }
.play-btn { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:190px; height:190px; border:0; background:rgba(255,255,255,.5); border-radius:50%; cursor:pointer; transition:transform .2s ease; }
.play-btn:hover { transform:translate(-50%,-50%) scale(1.04); }
.play-btn::after { content:""; position:absolute; left:42%; top:32%; border-left:58px solid rgba(121,109,104,.65); border-top:35px solid transparent; border-bottom:35px solid transparent; }
.about-sections { width:1244px; max-width:100%; margin:0 auto; }
.about-01 { height:384px; position:relative; }
.about-section-title { font-family:var(--pandemonium); color:var(--muted); font-size:54px; font-weight:700; text-transform:uppercase; line-height:1; }
.about-01 .about-section-title { position:absolute; right:0; top:0; }
.about-01 .synopsis { position:absolute; right:0; top:140px; width:92%; text-align:right; font-style:italic; font-size:16px; }
.about-quote { position:absolute; left:0; bottom:0; width:56%; font-size:40px; line-height:1.08; }
.about-two-col { display:grid; grid-template-columns:1fr 1fr; gap:100px; min-height:249px; margin:100px 48px; }
.about-two-col h3 { font-family:var(--pandemonium); color:var(--muted); text-transform:uppercase; font-size:38px; margin:0 0 45px; }
.about-two-col p { font-size:16px; line-height:1.35; margin:0; }
.about-big-line { font-size:40px !important; line-height:1.18 !important; padding-top:42px; }
.how-it-works { width:932px; max-width:100%; margin:100px auto; text-align:center; }
.how-it-works h3 { font-family:var(--pandemonium); color:var(--muted); font-size:40px; text-transform:uppercase; }
.how-it-works h4 { font-size:40px; font-style:italic; font-weight:300; margin:50px 0; }
.how-it-works p { font-size:16px; line-height:1.4; }
.about-cta { margin:50px 0; display:inline-block; font-family:var(--serif); font-size:24px; border:0; border-bottom:1px solid currentColor; color:var(--muted); background:none; cursor:pointer; }
.toolkit { align-items:center; }
.toolkit-visual { height:249px; border:1px solid #aaa; position:relative; background:#faf9f5; }
.toolkit-visual::before { content:""; position:absolute; width:72%; height:48%; left:14%; top:26%; border:1.5px solid #111; transform:rotate(-2deg); }
.toolkit-visual::after { content:""; position:absolute; width:54%; height:37%; left:22%; top:31%; border:1px dashed #999; background:#fff; }
.about-footer { min-height:441px; background:var(--muted); color:#fff; padding:50px 24%; text-align:center; display:flex; flex-direction:column; gap:45px; justify-content:center; }
.about-footer h3 { font-family:var(--pandemonium); font-size:32px; text-transform:uppercase; margin:0; }
.about-footer p { margin:0; font-size:16px; line-height:1.3; }
.about-footer small { font-size:12px; line-height:1.3; }

/* dialog */
.video-dialog { width:min(1040px,90vw); border:0; padding:0; background:#fff; box-shadow:0 20px 80px rgba(0,0,0,.25); }
.video-dialog::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.dialog-close { position:absolute; right:12px; top:6px; z-index:5; border:0; background:rgba(255,255,255,.85); width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:28px; }
.video-shell { aspect-ratio:16/9; display:grid; place-items:center; background:#111; color:#fff; position:relative; }
.video-shell video, .video-fallback-poster { width:100%;height:100%;object-fit:cover;position:absolute;inset:0; }
.video-missing { z-index:3; background:rgba(0,0,0,.7); padding:12px 18px; text-align:center; max-width:80%; }
.video-missing code { color:#fff; }

/* remote-asset fallback helpers */
.remote-layer { object-fit:contain; }
.remote-layer.asset-failed { display:none; }

@media (max-width: 900px) {
  .site-nav { gap:12px; padding-left:10px; padding-right:10px; }
  .nav-logo { width:240px; height:32px; }
  .nav-link { font-size:12px; }
  .landing-heading { left:6%; right:6%; top:9%; }
  .landing-subtitle { padding:0 24px; font-size:17px; }
  .envelope-stage { width:94vw; top:31%; }
  .envelope-hint { bottom:14%; font-size:16px; }
  .draw-page { min-height:900px; overflow-x:hidden; }
  .draw-title { top:130px; left:5%; width:75%; height:110px; }
  .paper-deck { width:92vw; height:58vw; top:290px; }
  .paper-main { width:92vw; height:58vw; }
  .paper-second { width:38vw; height:38vw; left:61vw; }
  .paper-deck.stage-two.view-second .paper-main { transform:translate(-5vw,8vw) rotate(-5deg) scale(.55); }
  .paper-deck.stage-two.view-second .paper-second { width:76vw; height:58vw; left:8vw; }
  .paper-deck.stage-two.view-first .paper-second { width:38vw; height:38vw; left:61vw; }
  .word-label { font-size:18px; }
  .optional-prompt { font-size:13px; }
  .prompt-toggle, .prompt-lines, .draw-instruction, .simplify-copy { font-size:13px; }
  .tool-strip { top:calc(290px + 61vw); gap:18px; width:94vw; justify-content:center; flex-wrap:wrap; }
  .archive-page { padding:30px 18px; min-height:auto; }
  .archive-title { height:110px; }
  .drawer-grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; row-gap:28px; }
  .drawer { transform:scale(.78) rotate(var(--r,0deg)); transform-origin:center; width:100%; }
  .drawer:hover { transform:scale(.78) translateY(-6px); }
  .index-title, .gallery-title { left:4%; top:130px; width:72%; height:110px; }
  .back-link { top:240px; right:5%; font-size:24px; }
  .file-box, .gallery-folder { transform:translateX(-50%) scale(.68); transform-origin:center top; }
  .side-arrow { top:59%; }
  .index-footer, .gallery-footer { bottom:70px; font-size:14px; padding:0 20px; }
  .about-content { padding:30px 18px; }
  .about-title { height:110px; }
  .video-poster { width:100%; border-radius:16px; }
  .play-btn { width:100px;height:100px; }
  .play-btn::after { border-left-width:30px;border-top-width:18px;border-bottom-width:18px; }
  .about-01 { height:auto; display:flex; flex-direction:column; gap:35px; }
  .about-01 .about-section-title, .about-01 .synopsis, .about-quote { position:static; width:100%; text-align:left; }
  .about-quote { font-size:30px; }
  .about-two-col { grid-template-columns:1fr; gap:50px; margin:80px 0; }
  .how-it-works { margin:80px auto; }
  .about-footer { padding:50px 10%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* small implementation corrections */
.nav-logo { border:0; background:transparent; padding:0; cursor:pointer; }
.gallery-back.remote-layer { z-index:2; position:absolute; }
.gallery-back.fallback { z-index:1; }
.gallery-front.remote-layer { z-index:71; position:absolute; }
.gallery-front.fallback { z-index:70; }
.gallery-card > img { position:relative; z-index:2; background:#fefcf7; }
.gallery-card .like-button, .gallery-card .card-num { position:absolute; }
.gallery-card > svg { z-index:1; }


/* Pandemonium is rendered as vector outlines generated from the user-supplied font.
   The font binary is intentionally not distributed with this build. */
.pandemonium-word { display:block; width:auto; max-width:100%; object-fit:contain; }
.pandemonium-drawer-letter { height:31px; width:auto; max-width:48px; }
.dynamic-index-title { display:flex; align-items:center; gap:24px; }
.index-letter-title { height:179px; width:auto; max-width:120px; object-fit:contain; }
.index-suffix-title { height:134px; width:auto; max-width:730px; object-fit:contain; }
.master-tab img { height:31px; width:auto; max-width:178px; object-fit:contain; }
.word-tab-label { display:flex; align-items:center; min-width:0; }
.word-tab-label .pandemonium-word { height:20px; max-width:118px; }
.gallery-tab .pandemonium-gallery-word { height:32px; max-width:150px; }
.about-section-title img { height:58px; width:auto; max-width:100%; }
.about-two-col h3 img { height:48px; width:auto; max-width:100%; }
.how-it-works h3 img { height:48px; width:auto; max-width:100%; margin:0 auto; }
.about-footer h3 img { height:42px; width:auto; max-width:100%; margin:0 auto; }
.pandemonium-success { height:34px; width:auto; max-width:420px; margin:0 auto; }

.gallery-card:focus-visible { outline:2px solid var(--muted); outline-offset:6px; }
.like-button { position:absolute; left:10px; top:10px; z-index:8; width:34px; height:34px; border:1px solid rgba(17,17,17,.4); border-radius:50%; background:rgba(255,255,255,.92); color:#111; display:grid; place-items:center; font-family:Georgia,serif; font-size:23px; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transform:scale(.9); transition:opacity .18s ease, transform .18s ease, background .18s ease; }
.gallery-card.active .like-button { opacity:1; pointer-events:auto; transform:scale(1); }
.like-button:hover { transform:scale(1.08) !important; }
.like-button.liked { background:#fff; color:#111; }
.gallery-card.active .card-num { z-index:7; }

.about-section-title, .about-two-col h3, .how-it-works h3, .about-footer h3 { line-height:1; }

/* Revision 4 — restore the softer Figma index geometry and linework */
.index-perspective-guides { position:absolute; inset:0; z-index:0; pointer-events:none; }
.index-perspective-guides .guide-top { position:absolute; left:82px; right:80px; top:8px; height:1px; background:rgba(17,17,17,.22); }
.index-perspective-guides .guide-top::before,
.index-perspective-guides .guide-top::after { content:""; position:absolute; top:-5px; width:22px; height:1px; background:rgba(17,17,17,.22); }
.index-perspective-guides .guide-top::before { left:-1px; transform:rotate(-38deg); transform-origin:left center; }
.index-perspective-guides .guide-top::after { right:-1px; transform:rotate(38deg); transform-origin:right center; }
.index-perspective-guides .guide-left,
.index-perspective-guides .guide-right { position:absolute; top:150px; height:282px; width:1px; background:rgba(17,17,17,.23); transform-origin:top center; }
.index-perspective-guides .guide-left { left:70px; transform:rotate(4.5deg); }
.index-perspective-guides .guide-right { right:70px; transform:rotate(-4.5deg); }

.master-folder {
  z-index:2;
  border-radius:12px 12px 8px 8px;
  border-width:1.7px;
}
.master-folder .master-inner-line { position:absolute; left:8px; right:8px; top:96px; height:1px; background:rgba(17,17,17,.17); }
.master-tab {
  z-index:4;
  border-width:1.7px;
  border-radius:24px 24px 0 0;
  transform:translateY(-34px);
}
.folder-list { z-index:5; }
.index-folder {
  border-width:1.55px;
  border-radius:7px 7px 2px 2px;
  background:rgba(255,255,255,.985);
  box-shadow:none;
}
.index-folder::after { content:""; position:absolute; left:7px; right:7px; top:32px; height:1px; background:rgba(17,17,17,.12); pointer-events:none; }
.index-folder:hover { transform:translateY(-6px); }
.word-tab {
  min-width:165px;
  width:165px;
  height:25px;
  border-width:1.05px;
  border-radius:13px 13px 2px 2px;
  background:color-mix(in srgb, var(--tab,#f8f6ee) 72%, transparent);
  overflow:visible;
}
.word-tab-label { flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-start; }
.word-tab-label .pandemonium-word { height:19px; max-width:92px; }
.word-tab small { font-size:8px; opacity:.72; }
.file-box-front {
  border-width:1.7px;
  background:#fff;
}
.file-box-front::before { left:54px; right:54px; top:43px; background:rgba(17,17,17,.16); }
.file-box-front::after { content:""; position:absolute; left:63px; right:63px; top:76px; height:1px; background:rgba(17,17,17,.14); }
.box-label { color:rgba(138,129,125,.82); }

/* The selected drawing's like control: no enclosing circle, with a visible count. */
.gallery-card .like-control { position:absolute; left:10px; top:8px; z-index:9; display:flex; align-items:center; gap:5px; opacity:0; pointer-events:none; transform:scale(.92); transform-origin:left top; transition:opacity .18s ease, transform .18s ease; }
.gallery-card.active .like-control { opacity:1; pointer-events:auto; transform:scale(1); }
.like-button { position:relative; left:auto; top:auto; z-index:auto; width:auto; height:auto; border:0; border-radius:0; background:transparent; color:#111; display:block; padding:0; margin:0; font-family:Georgia,serif; font-size:24px; line-height:1; cursor:pointer; opacity:1; pointer-events:auto; transform:none; transition:transform .16s ease,color .16s ease; }
.like-button:hover { transform:scale(1.12) !important; }
.like-button.liked { background:transparent; color:#b54843; }
.like-count { min-width:14px; color:#6f6864; font-family:var(--sans); font-size:12px; line-height:1; text-align:left; }
.gallery-card.active .like-button { opacity:1; pointer-events:auto; transform:none; }

/* Revision 5 — small interaction/layout corrections */
.tag-text-layer {
  inset:auto;
  left:58.55%;
  top:50.7%;
  width:16.1%;
  height:9.4%;
  object-fit:contain;
  object-position:center;
  transform:rotate(7deg);
  transform-origin:center;
  z-index:6;
  transition:opacity .25s ease, transform .45s var(--ease-paper);
}
.envelope-stage.is-open .tag-text-layer {
  opacity:0;
  transform:translate(20px,18px) rotate(15deg);
}

/* Keep the like count clear of the heart glyph. */
.gallery-card .like-control {
  left:14px;
  top:12px;
  gap:9px;
  min-width:48px;
  align-items:center;
}
.gallery-card .like-button {
  width:18px;
  min-width:18px;
  flex:0 0 18px;
  text-align:center;
  overflow:visible;
}
.gallery-card .heart-symbol {
  display:block;
  width:18px;
  line-height:1;
  text-align:center;
}
.gallery-card .like-count {
  min-width:20px;
  margin-left:1px;
  font-size:12px;
  line-height:18px;
  white-space:nowrap;
}

/* Index and Word Folder are single-screen views: preserve the 1440×1024 composition,
   then compact proportionally on shorter desktop windows instead of introducing scroll. */
.index-page, .gallery-page {
  height:100svh;
  min-height:0;
  overflow:hidden;
}

@media (max-height: 900px) and (min-width: 901px) {
  .index-page, .gallery-page { padding-top:24px; }
  .index-page .site-nav, .gallery-page .site-nav {
    height:58px;
    transform:scale(.9);
    transform-origin:top center;
  }
  .index-title {
    top:78px;
    height:132px;
    transform:scale(.86);
    transform-origin:left top;
  }
  .gallery-title {
    top:86px;
    height:124px;
    transform:scale(.86);
    transform-origin:left top;
  }
  .back-link {
    top:148px;
    font-size:29px;
  }
  .file-box {
    top:226px;
    transform:translateX(-50%) scale(.82);
    transform-origin:top center;
  }
  .gallery-folder {
    top:220px;
    transform:translateX(-50%) scale(.82);
    transform-origin:top center;
  }
  .index-footer, .gallery-footer {
    bottom:18px;
    font-size:15px;
  }
  .side-arrow { top:55%; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .index-page, .gallery-page { padding-top:14px; }
  .index-page .site-nav, .gallery-page .site-nav {
    height:50px;
    transform:scale(.8);
  }
  .index-title, .gallery-title {
    top:58px;
    height:108px;
    transform:scale(.72);
  }
  .back-link {
    top:112px;
    font-size:24px;
  }
  .file-box {
    top:174px;
    transform:translateX(-50%) scale(.68);
  }
  .gallery-folder {
    top:170px;
    transform:translateX(-50%) scale(.68);
  }
  .index-footer, .gallery-footer {
    bottom:10px;
    font-size:13px;
  }
  .side-arrow { top:54%; font-size:22px; }
}

/* Revision 6 — final small UI corrections */
/* Landing tag stays intentionally blank. */
.tag-text-layer { display:none !important; }

/* Drawing is a true single-screen workspace on desktop; no spare vertical scroll area. */
@media (min-width: 901px) {
  .draw-page {
    height:100svh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  @media (max-height: 900px) {
    .draw-page .site-nav { top:24px; transform:scale(.9); transform-origin:top center; }
    .draw-title { top:86px; height:138px; transform:scale(.88); transform-origin:left top; }
    .paper-deck { top:235px; transform:translateX(-50%) scale(.82); transform-origin:top center; }
    .tool-strip { top:auto; bottom:18px; transform:translateX(-50%) scale(.9); transform-origin:bottom center; }
  }
  @media (max-height: 760px) {
    .draw-page .site-nav { top:14px; transform:scale(.8); }
    .draw-title { top:58px; height:110px; transform:scale(.72); }
    .paper-deck { top:174px; transform:translateX(-50%) scale(.68); }
    .tool-strip { bottom:8px; transform:translateX(-50%) scale(.78); }
  }
}

/* Like control: simple heart with the count explicitly to its right. */
.gallery-card .like-control {
  left:14px !important;
  top:12px !important;
  z-index:140 !important;
  display:grid !important;
  grid-template-columns:22px auto;
  column-gap:9px !important;
  align-items:center !important;
  width:max-content !important;
  min-width:58px !important;
  overflow:visible !important;
}
.gallery-card .like-button {
  position:relative !important;
  width:22px !important;
  min-width:22px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}
.gallery-card .heart-symbol {
  display:block !important;
  width:22px !important;
  text-align:left !important;
  line-height:24px !important;
}
.gallery-card .like-count {
  position:relative !important;
  display:block !important;
  min-width:24px !important;
  margin:0 !important;
  padding:0 !important;
  color:#6f6864 !important;
  font-size:12px !important;
  line-height:24px !important;
  white-space:nowrap !important;
  z-index:141 !important;
}

/* Index folders: preserve the translucent tabs and avoid a rear/bottom border
   visually colliding with the next folder's top edge. */
.index-folder {
  border-bottom-color:transparent !important;
}
.index-folder:last-child {
  border-bottom-color:rgba(17,17,17,.34) !important;
}
.index-folder::after {
  top:31px !important;
  height:0 !important;
  background:none !important;
  border-top:1px dashed rgba(17,17,17,.13) !important;
}
.word-tab {
  background:var(--tab,rgba(248,246,238,.42)) !important;
  border-color:rgba(17,17,17,.72) !important;
}

/* About contact links */
.contact-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
  margin:-4px 0 0;
}
.contact-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-family:var(--sans);
  font-size:15px;
  line-height:1;
  opacity:.95;
  position:relative;
}
.contact-link svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.contact-link::after {
  content:"";
  position:absolute;
  left:28px;
  right:100%;
  bottom:-5px;
  height:1px;
  background:currentColor;
  transition:right .2s ease;
}
.contact-link:hover::after,
.contact-link:focus-visible::after { right:0; }

/* Revision 7 — unified navigation/title rhythm + physical toolkit photograph */
@media (min-width: 901px) {
  /* Every navigated page uses the same 70px navigation bar beginning at y=50px. */
  .site-nav {
    height:70px !important;
    padding-top:11px !important;
    padding-bottom:11px !important;
  }
  .draw-page .site-nav {
    top:50px !important;
    transform:none;
  }
  .index-page, .gallery-page {
    padding-top:50px;
  }

  /* Primary page titles share one visual height and a consistent 15px gap after nav. */
  .draw-title,
  .index-title,
  .gallery-title {
    top:135px !important;
    height:151px !important;
    transform:none;
  }
  .archive-heading {
    margin-top:15px;
  }
  .archive-title {
    height:151px !important;
  }
  .about-title {
    height:151px !important;
    margin:15px 0 50px !important;
  }

  /* Keep the dynamic index title within the same 151px visual box. */
  .index-letter-title {
    height:151px !important;
    max-width:105px;
  }
  .index-suffix-title {
    height:113px !important;
    max-width:615px;
  }

  /* Re-apply the same proportions on shorter desktop screens rather than giving
     Draw / Index / Word Folder different nav and title sizes. */
  @media (max-height: 900px) {
    .draw-page .site-nav,
    .index-page .site-nav,
    .gallery-page .site-nav {
      top:auto !important;
      height:58px !important;
      transform:scale(.9) !important;
      transform-origin:top center !important;
    }
    .draw-page .site-nav { position:absolute; top:24px !important; }
    .index-page, .gallery-page { padding-top:24px !important; }

    .draw-title,
    .index-title,
    .gallery-title {
      top:97px !important;
      height:126px !important;
      transform:scale(.86) !important;
      transform-origin:left top !important;
    }
    .index-letter-title { height:126px !important; }
    .index-suffix-title { height:94px !important; }
  }

  @media (max-height: 760px) {
    .draw-page .site-nav,
    .index-page .site-nav,
    .gallery-page .site-nav {
      height:50px !important;
      transform:scale(.8) !important;
    }
    .draw-page .site-nav { top:14px !important; }
    .index-page, .gallery-page { padding-top:14px !important; }

    .draw-title,
    .index-title,
    .gallery-title {
      top:70px !important;
      height:108px !important;
      transform:scale(.72) !important;
    }
    .index-letter-title { height:108px !important; }
    .index-suffix-title { height:81px !important; }
  }
}

.toolkit-visual {
  height:249px;
  border:0 !important;
  background:#f4f1ec;
  overflow:hidden;
  position:relative;
}
.toolkit-visual::before,
.toolkit-visual::after {
  content:none !important;
  display:none !important;
}
.toolkit-photo {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 48%;
}

/* Revision 8 — one global navigation size + slightly lower archive detail folders */
@media (min-width: 901px) {
  /* Keep the primary navigation identical on every navigated page, regardless of viewport height. */
  .site-nav,
  .draw-page .site-nav,
  .index-page .site-nav,
  .gallery-page .site-nav {
    height:70px !important;
    padding:11px 20px !important;
    gap:25px !important;
    transform:none !important;
    transform-origin:center top !important;
  }
  .nav-logo {
    width:357px !important;
    height:42px !important;
  }
  .nav-link { font-size:14px !important; }
  .site-nav .nav-divider { height:20px !important; }

  /* Use the same y-position for the nav on single-screen pages as the long pages. */
  .draw-page .site-nav {
    top:50px !important;
  }
  .index-page,
  .gallery-page {
    padding-top:50px !important;
  }

  /* Lower the central physical file/folder objects a little. */
  .file-box { top:371px !important; }
  .gallery-folder { top:402px !important; }

  /* On shorter displays, compact only the page content — never the nav itself. */
  @media (max-height: 900px) {
    .draw-page .site-nav { top:24px !important; }
    .index-page,
    .gallery-page { padding-top:24px !important; }

    .draw-title,
    .index-title,
    .gallery-title {
      top:104px !important;
      height:122px !important;
      transform:scale(.84) !important;
      transform-origin:left top !important;
    }
    .index-letter-title { height:122px !important; }
    .index-suffix-title { height:91px !important; }
    .back-link { top:158px !important; }

    .file-box {
      top:246px !important;
      transform:translateX(-50%) scale(.80) !important;
      transform-origin:top center !important;
    }
    .gallery-folder {
      top:240px !important;
      transform:translateX(-50%) scale(.80) !important;
      transform-origin:top center !important;
    }
  }

  @media (max-height: 760px) {
    .draw-page .site-nav { top:14px !important; }
    .index-page,
    .gallery-page { padding-top:14px !important; }

    .draw-title,
    .index-title,
    .gallery-title {
      top:88px !important;
      height:104px !important;
      transform:scale(.70) !important;
      transform-origin:left top !important;
    }
    .index-letter-title { height:104px !important; }
    .index-suffix-title { height:78px !important; }
    .back-link { top:124px !important; }

    .file-box {
      top:198px !important;
      transform:translateX(-50%) scale(.66) !important;
    }
    .gallery-folder {
      top:194px !important;
      transform:translateX(-50%) scale(.66) !important;
    }
  }
}

/* Revision 9 — lower the central archive detail objects slightly more */
@media (min-width: 901px) {
  .file-box { top:389px !important; }
  .gallery-folder { top:420px !important; }

  @media (max-height: 900px) {
    .file-box { top:258px !important; }
    .gallery-folder { top:252px !important; }
  }

  @media (max-height: 760px) {
    .file-box { top:207px !important; }
    .gallery-folder { top:203px !important; }
  }
}

/* =========================================================
   Mobile Responsive Preview — 2026-08-09
   Desktop (>768px) remains untouched. Phones use a dedicated
   composition instead of scaling the 1440px Figma canvas down.
   ========================================================= */
@media (max-width: 768px) {
  html, body, #app { width:100%; max-width:100%; overflow-x:hidden; }
  body { min-width:0; -webkit-text-size-adjust:100%; }
  button, a { -webkit-tap-highlight-color:transparent; }
  .screen-1440 { width:100%; max-width:none; }

  /* One compact navigation system on every mobile page. */
  .site-nav {
    width:100%;
    height:58px !important;
    min-height:58px;
    gap:9px !important;
    padding:8px 12px !important;
    transform:none !important;
    position:relative;
  }
  .site-nav .nav-divider { height:16px !important; }
  .nav-logo {
    width:clamp(148px, 43vw, 192px) !important;
    height:30px !important;
    flex:0 1 auto;
  }
  .nav-link { font-size:11.5px !important; padding:6px 0; }

  /* Landing: retain the envelope hero, but compose for portrait phones. */
  .landing {
    width:100%;
    min-height:100svh;
    height:100svh;
    overflow:hidden;
  }
  .landing-heading {
    left:5%; right:5%; top:8.5%; height:14%;
  }
  .landing-subtitle {
    top:23.5%;
    padding:0 26px;
    font-size:15px;
    line-height:1.3;
  }
  .envelope-stage {
    width:96vw;
    max-width:520px;
    top:34%;
  }
  .envelope-hint {
    bottom:12%;
    font-size:14px;
    letter-spacing:.11em;
  }
  .entry-copy { inset:12% 8%; }
  .entry-copy .damia-the-word { width:54px; }
  .entry-copy .damia-word-image { height:27px; max-width:130px; }
  .entry-start { right:8%; bottom:12%; font-size:12px; }

  /* Drawing becomes a natural vertical mobile workspace. */
  .draw-page {
    width:100%;
    height:auto !important;
    min-height:100svh !important;
    padding:0 14px 28px;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .draw-page .site-nav {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin:0 -14px;
    width:calc(100% + 28px);
  }
  .draw-title {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:74%;
    height:76px !important;
    margin:8px 0 8px 2px;
    transform:none !important;
  }
  .paper-deck {
    position:relative;
    left:auto;
    top:auto;
    transform:none !important;
    width:100%;
    height:min(calc(100vw - 28px), 470px);
    margin:0 auto;
  }
  .paper-main {
    width:100%;
    height:100%;
    left:0;
    top:0;
  }
  .paper-second {
    width:35%;
    height:35%;
    left:64%;
    top:4%;
    opacity:.55;
  }
  .paper-deck.stage-two.view-second .paper-main {
    width:38% !important;
    height:38% !important;
    left:1% !important;
    top:3% !important;
    transform:rotate(-4deg) !important;
    opacity:.55;
    z-index:2;
  }
  .paper-deck.stage-two.view-second .paper-second {
    width:92% !important;
    height:92% !important;
    left:8% !important;
    top:7% !important;
    transform:rotate(.8deg) !important;
    opacity:1;
    z-index:4;
  }
  .paper-deck.stage-two.view-first .paper-main {
    width:92% !important;
    height:92% !important;
    left:0 !important;
    top:6% !important;
    transform:none !important;
  }
  .paper-deck.stage-two.view-first .paper-second {
    width:35% !important;
    height:35% !important;
    left:65% !important;
    top:2% !important;
    transform:rotate(.8deg) !important;
    opacity:.62;
  }
  .paper-sheet[aria-current="false"] .paper-copy { opacity:.22; }
  .word-label { left:8%; top:9%; }
  .damia-the-word { width:56px; }
  .damia-word-image { height:27px; max-width:160px; }
  .optional-prompt {
    right:6%; top:7%; width:48%;
  }
  .prompt-toggle, .prompt-lines,
  .draw-instruction, .simplify-copy {
    font-size:11px !important;
    line-height:1.3;
  }
  .prompt-lines { line-height:1.45; }
  .prompt-lines.open { max-height:82px; }
  .draw-instruction { left:8%; right:8%; bottom:5.5%; }
  .simplify-copy { left:8%; right:8%; bottom:5%; }
  .drawing-canvas {
    left:7%; right:7%; top:24%; bottom:auto;
    width:86%; height:56%;
    touch-action:none !important;
    cursor:crosshair;
  }
  .paper-second .drawing-canvas { top:24%; bottom:auto; height:55%; }
  .tool-strip {
    position:relative;
    top:auto;
    left:auto;
    transform:none !important;
    width:100%;
    height:auto;
    margin:10px auto 0;
    padding:6px 0 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px 11px;
  }
  .tool { width:36px; min-width:36px; height:38px; padding:6px; }
  .tool svg { width:21px; height:21px; }
  .brush-sizes { gap:10px; min-width:48px; justify-content:center; }
  .draw-next {
    flex:0 0 100%;
    min-width:0;
    min-height:34px;
    margin-top:0;
    text-align:center;
    font-size:15px;
  }
  .draw-next::after { left:34%; right:66%; }
  .draw-next:hover::after { right:34%; }
  .draw-success {
    position:fixed;
    width:min(88vw, 390px);
    padding:24px 18px;
  }
  .draw-success-actions { flex-direction:column; gap:14px; }
  .pandemonium-success { max-width:100%; height:28px; }

  /* A–Z archive: keep two physical drawers per row, sized natively for mobile. */
  .archive-page {
    padding:0 14px 64px;
    min-height:auto;
  }
  .archive-heading { margin-top:8px; }
  .archive-title { height:80px !important; width:92%; }
  .archive-subtitle {
    margin:2px 2px 0 18%;
    text-align:right;
    font-size:12px;
    line-height:1.3;
  }
  .az-label { margin:30px 0 34px; font-size:13px; }
  .drawer-grid {
    width:100%;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:8px;
    row-gap:20px;
  }
  .drawer {
    width:100%;
    height:112px;
    transform:rotate(var(--r,0deg)) !important;
  }
  .drawer:hover { transform:translateY(-4px) rotate(var(--r,0deg)) !important; }
  .drawer-back {
    left:8%; top:0; width:86%; height:70px;
    border-width:1.1px;
  }
  .drawer-front {
    left:2%; top:14px; width:91%; height:76px;
    border-width:1.5px;
  }
  .drawer-front::before { width:14px; height:14px; border-top-width:1px; }
  .drawer-front::after { right:-6px; width:6px; height:74px; border-right-width:1px; }
  .drawer-label {
    left:31%; top:33px; width:36%; height:25px;
    border-width:1.1px;
  }
  .pandemonium-drawer-letter { height:22px; max-width:34px; }
  .drawer-knob { left:47%; top:72px; width:7px; height:7px; border-width:1px; }
  .drawer-number { left:7%; top:72px; font-size:7px; }
  .peek-card { width:55%; height:32px; left:22%; top:-5px; border-width:.8px; }
  .peek-card:nth-of-type(2){left:25%;top:-10px;width:59%}
  .peek-card:nth-of-type(3){left:28%;top:-15px;width:63%}
  .archive-cta { width:100%; margin:58px auto 0; }
  .archive-cta h3 { font-size:26px; margin-bottom:22px; }
  .archive-cta .paper-link { font-size:26px; }

  /* Letter index: a true mobile folder stack, vertically opened rather than scaled. */
  .index-page {
    height:auto !important;
    min-height:100svh !important;
    padding:0 12px 46px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .index-page .site-nav {
    margin:0 -12px;
    width:calc(100% + 24px);
  }
  .index-title {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:78%;
    height:82px !important;
    margin:8px 0 0 2px;
    transform:none !important;
    gap:10px;
  }
  .index-letter-title { height:82px !important; max-width:58px; }
  .index-suffix-title { height:61px !important; max-width:82%; }
  .back-link {
    right:14px;
    top:92px !important;
    font-size:18px;
    padding-bottom:2px;
  }
  .index-page .side-arrow {
    top:180px;
    font-size:20px;
    padding:12px;
  }
  .index-page .side-arrow.left { left:0; }
  .index-page .side-arrow.right { right:0; }
  .file-box {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100%;
    max-width:440px;
    height:682px;
    margin:50px auto 0;
    transform:none !important;
  }
  .index-perspective-guides .guide-top { left:2%; right:2%; top:7px; }
  .index-perspective-guides .guide-left,
  .index-perspective-guides .guide-right { top:116px; height:465px; }
  .index-perspective-guides .guide-left { left:3%; transform:rotate(1.2deg); }
  .index-perspective-guides .guide-right { right:3%; transform:rotate(-1.2deg); }
  .master-folder {
    left:4%; top:18px; width:92%; height:132px;
    border-width:1.35px;
    border-radius:9px 9px 6px 6px;
  }
  .master-folder .master-inner-line { left:6px; right:6px; top:82px; }
  .master-tab {
    width:44%; height:42px; left:28%; top:-1px;
    border-width:1.35px;
    border-radius:19px 19px 0 0;
    transform:translateY(-25px);
  }
  .master-tab img { height:22px; max-width:92%; }
  .folder-list {
    position:absolute;
    left:5.5%; right:5.5%; top:126px;
    height:auto;
    display:flex;
    flex-direction:column;
    z-index:5;
  }
  .index-folder {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100%;
    height:58px;
    flex:0 0 58px;
    margin-top:-8px;
    border-width:1.15px;
    border-radius:6px 6px 2px 2px;
    transform:none !important;
  }
  .index-folder:first-child { margin-top:0; }
  .index-folder:hover { transform:translateY(-3px) !important; }
  .index-folder::after { left:5px; right:5px; top:27px !important; }
  .word-tab {
    top:-1px;
    width:auto;
    min-width:38%;
    max-width:54%;
    height:23px;
    padding:1px 9px 0;
    gap:5px;
    border-width:.9px !important;
    border-radius:11px 11px 1px 1px;
  }
  .index-folder:nth-child(1) .word-tab { left:2% !important; }
  .index-folder:nth-child(2) .word-tab { left:52% !important; }
  .index-folder:nth-child(3) .word-tab { left:20% !important; }
  .index-folder:nth-child(4) .word-tab { left:57% !important; }
  .index-folder:nth-child(5) .word-tab { left:6% !important; }
  .index-folder:nth-child(6) .word-tab { left:38% !important; }
  .index-folder:nth-child(7) .word-tab { left:58% !important; }
  .index-folder:nth-child(8) .word-tab { left:16% !important; }
  .index-folder:nth-child(9) .word-tab { left:46% !important; }
  .index-folder:nth-child(10) .word-tab { left:26% !important; }
  .word-tab-label .pandemonium-word { height:16px; max-width:78px; }
  .word-tab small { font-size:7px; }
  .folder-open { right:10px; top:5px; font-size:12px; }
  .file-box-front {
    left:0; right:0; top:581px; bottom:auto;
    height:88px;
    border-width:1.35px;
  }
  .file-box-front::before { left:8%; right:8%; top:31px; }
  .file-box-front::after { left:10%; right:10%; top:55px; }
  .box-label { top:625px; bottom:auto; font-size:11px; }
  .index-footer {
    position:relative;
    left:auto; right:auto; bottom:auto;
    margin:8px 0 0;
    padding:0 12px;
    font-size:11px;
    line-height:1.4;
    letter-spacing:.06em;
  }

  /* Word Folder: horizontally browse cards inside a mobile-sized physical folder. */
  .gallery-page {
    height:auto !important;
    min-height:100svh !important;
    padding:0 12px 44px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .gallery-page .site-nav {
    margin:0 -12px;
    width:calc(100% + 24px);
  }
  .gallery-title {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:68%;
    height:80px !important;
    margin:8px 0 0 2px;
    transform:none !important;
  }
  .gallery-page .back-link {
    top:94px !important;
    right:14px;
    font-size:17px;
  }
  .gallery-page .side-arrow {
    top:177px;
    font-size:20px;
    padding:12px;
  }
  .gallery-page .side-arrow.left { left:0; }
  .gallery-page .side-arrow.right { right:0; }
  .gallery-folder {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100%;
    max-width:440px;
    height:430px;
    margin:46px auto 0;
    transform:none !important;
  }
  .gallery-back {
    left:0; top:0; width:100%; height:390px;
  }
  .gallery-back.fallback { border-width:1.35px; border-radius:18px 18px 0 0; }
  .gallery-tab {
    left:50%; top:27px;
    transform:translateX(-50%);
    min-width:42%; height:36px;
    padding:0 12px;
    border-radius:15px 15px 2px 2px;
  }
  .gallery-tab .pandemonium-gallery-word { height:24px; max-width:112px; }
  .gallery-count { top:70px; font-size:8px; }
  .card-zone {
    left:10px; right:10px; top:82px;
    height:230px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:20px max(10px, calc(50% - 34vw)) 28px;
    scrollbar-width:none;
  }
  .card-zone::-webkit-scrollbar { display:none; }
  .gallery-card {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(68vw, 278px) !important;
    height:min(47vw, 192px) !important;
    flex:0 0 min(68vw, 278px);
    transform:none !important;
    z-index:10 !important;
    scroll-snap-align:center;
    transition:transform .28s var(--ease-paper), filter .2s ease;
  }
  .gallery-card.active {
    width:min(68vw, 278px) !important;
    height:min(47vw, 192px) !important;
    transform:translateY(-12px) scale(1.035) !important;
    z-index:120 !important;
  }
  .gallery-card .like-control {
    left:10px !important; top:8px !important;
    grid-template-columns:20px auto;
    column-gap:7px !important;
    min-width:48px !important;
  }
  .gallery-card .like-button,
  .gallery-card .heart-symbol { width:20px !important; min-width:20px !important; }
  .gallery-front {
    left:0; top:236px; width:100%; height:150px;
  }
  .gallery-front.fallback { border-width:1.35px; }
  .gallery-front-label { top:331px; font-size:11px; }
  .no-drawings {
    position:relative;
    left:auto; right:auto; top:auto;
    flex:0 0 100%;
    margin:auto;
    padding-top:65px;
    font-size:14px;
  }
  .no-drawings .about-cta { margin:18px 0 0; font-size:16px; }
  .gallery-footer {
    position:relative;
    left:auto; right:auto; bottom:auto;
    margin:10px 0 0;
    padding:0 12px;
    font-size:11px;
    line-height:1.4;
    letter-spacing:.06em;
  }

  /* About: one readable column with full-width media. */
  .about-page { min-height:auto; }
  .about-content { padding:0 16px 52px; }
  .about-title {
    width:88%;
    height:82px !important;
    margin:10px 0 24px !important;
  }
  .video-poster { width:100%; margin-bottom:34px; border-radius:14px; }
  .play-btn { width:76px; height:76px; }
  .play-btn::after {
    left:43%; top:32%;
    border-left-width:24px;
    border-top-width:14px;
    border-bottom-width:14px;
  }
  .about-sections { width:100%; }
  .about-01 { gap:24px; }
  .about-section-title img { height:37px; }
  .about-01 .synopsis { font-size:14px; line-height:1.45; }
  .about-quote { font-size:27px; line-height:1.08; }
  .about-two-col {
    display:block;
    min-height:0;
    margin:62px 0;
  }
  .about-two-col > * + * { margin-top:38px; }
  .about-two-col h3 { margin-bottom:22px; }
  .about-two-col h3 img { height:34px; }
  .about-two-col p { font-size:14px; line-height:1.45; }
  .about-big-line { font-size:27px !important; padding-top:0; }
  .how-it-works { margin:64px auto; }
  .how-it-works h3 img { height:34px; }
  .how-it-works h4 { font-size:27px; margin:30px 0; }
  .how-it-works p { font-size:14px; }
  .about-cta { margin:28px 0; font-size:19px; }
  .toolkit-visual { height:auto; aspect-ratio:4/3; }
  .toolkit-photo { object-position:center 50%; }
  .about-footer {
    min-height:0;
    padding:48px 20px;
    gap:30px;
  }
  .about-footer h3 img { height:34px; }
  .about-footer p { font-size:14px; line-height:1.45; }
  .contact-links {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin:0 auto;
    max-width:100%;
  }
  .contact-link { font-size:14px; max-width:100%; }
  .contact-link span { overflow-wrap:anywhere; }
  .about-footer small { font-size:11px; }

  .video-dialog { width:94vw; }
  .dialog-close { width:36px; height:36px; font-size:24px; }
}

/* Smaller phones: tighten without changing the interaction model. */
@media (max-width: 420px) {
  .site-nav { gap:7px !important; padding-left:9px !important; padding-right:9px !important; }
  .nav-logo { width:clamp(136px, 41vw, 170px) !important; }
  .nav-link { font-size:10.5px !important; }
  .landing-heading { top:9%; height:12.5%; }
  .landing-subtitle { top:22%; font-size:14px; padding:0 20px; }
  .envelope-stage { top:35%; width:98vw; }
  .draw-title, .archive-title, .index-title, .gallery-title, .about-title { height:70px !important; }
  .index-letter-title { height:70px !important; }
  .index-suffix-title { height:52px !important; }
  .paper-deck { height:calc(100vw - 28px); }
  .prompt-toggle, .prompt-lines, .draw-instruction, .simplify-copy { font-size:10px !important; }
  .drawer { height:103px; }
  .drawer-front { height:70px; }
  .drawer-back { height:65px; }
  .drawer-label { top:31px; height:23px; }
  .drawer-knob, .drawer-number { top:67px; }
  .archive-subtitle { margin-left:8%; }
  .file-box { margin-top:42px; }
  .gallery-folder { margin-top:40px; }
}


/* Mobile submit confirmation — keep the original card, centered in the phone viewport. */
@media (max-width: 768px) {
  .draw-page.success-open {
    overflow:visible !important;
    transform:none !important;
    animation:none !important;
  }
  .draw-page.success-open .draw-success.show {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    inset:auto !important;
    left:50% !important;
    top:50% !important;
    top:50dvh !important;
    transform:translate(-50%,-50%) !important;
    width:min(90vw,410px) !important;
    max-height:calc(100dvh - 96px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    padding:24px 20px 26px !important;
    z-index:2147483000 !important;
    box-shadow:0 14px 40px rgba(0,0,0,.14);
  }
  .draw-page.success-open .draw-success-actions {
    position:relative;
    z-index:1;
    padding-bottom:max(2px, env(safe-area-inset-bottom));
  }
  .draw-page.success-open .draw-success .paper-action {
    display:inline-block;
    min-height:36px;
    line-height:32px;
    white-space:normal;
  }
}

/* =========================================================
   Mobile archive visibility fix — 2026-08-09
   Keep the desktop composition untouched. On phones, allow the
   physical archive objects to grow vertically so labels/drawings
   remain fully readable instead of being masked by the next layer.
   ========================================================= */
@media (max-width: 768px) {
  /* INDEX — open the stack enough for all ten word tabs to remain visible. */
  .index-page .file-box {
    height: 852px !important;
    margin-top: 54px !important;
  }
  .index-page .folder-list {
    top: 128px !important;
  }
  .index-page .index-folder {
    height: 62px !important;
    flex: 0 0 62px !important;
    margin-top: -2px !important;
  }
  .index-page .index-folder:first-child {
    margin-top: 0 !important;
  }
  .index-page .index-folder::after {
    top: 30px !important;
  }
  .index-page .word-tab {
    height: 25px !important;
    padding-top: 2px !important;
  }
  .index-page .index-perspective-guides .guide-left,
  .index-page .index-perspective-guides .guide-right {
    height: 625px !important;
  }
  .index-page .file-box-front {
    top: 748px !important;
    height: 88px !important;
  }
  .index-page .box-label {
    top: 793px !important;
  }
  .index-page .index-footer {
    margin-top: 12px !important;
  }

  /* WORD FOLDER — keep the complete drawing above the front pocket.
     The pocket still masks empty folder space, not the artwork itself. */
  .gallery-page .gallery-folder {
    height: 486px !important;
    margin-top: 50px !important;
  }
  .gallery-page .gallery-back {
    height: 454px !important;
  }
  .gallery-page .card-zone {
    top: 90px !important;
    height: 222px !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }
  .gallery-page .gallery-card {
    width: min(68vw, 278px) !important;
    height: min(47vw, 192px) !important;
    flex-basis: min(68vw, 278px) !important;
  }
  .gallery-page .gallery-card.active {
    transform: translateY(-8px) scale(1.025) !important;
  }
  .gallery-page .gallery-front {
    top: 312px !important;
    height: 156px !important;
  }
  .gallery-page .gallery-front-label {
    top: 411px !important;
  }
  .gallery-page .gallery-footer {
    margin-top: 12px !important;
  }
}

@media (max-width: 420px) {
  .index-page .file-box { margin-top: 48px !important; }
  .gallery-page .gallery-folder { margin-top: 46px !important; }
}


/* ============================================================
   Mobile archive robustness fix — 2026-08-09 v3
   Index uses document flow so 10–20 words can never be hidden.
   Word Folder keeps shared drawings above the physical pocket.
   ============================================================ */
@media (max-width: 768px) {
  /* INDEX — content-driven height instead of a fixed-height stack. */
  .index-page .file-box {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 24px !important;
    overflow: visible !important;
  }
  .index-page .index-perspective-guides {
    display: none !important;
  }
  .index-page .master-folder {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 92% !important;
    height: 124px !important;
    margin: 0 auto !important;
    z-index: 2 !important;
  }
  .index-page .folder-list {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 89% !important;
    height: auto !important;
    margin: -18px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    z-index: 8 !important;
  }
  .index-page .index-folder {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    margin: -6px 0 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }
  .index-page .index-folder:first-child {
    margin-top: 0 !important;
  }
  .index-page .file-box-front {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 88px !important;
    margin: -2px auto 0 !important;
    z-index: 4 !important;
  }
  .index-page .box-label {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: -47px 0 38px !important;
    z-index: 6 !important;
  }
  .index-page .index-footer {
    margin-top: 8px !important;
  }

  /* WORD FOLDER — drawings are always above every decorative folder layer. */
  .gallery-page .gallery-folder {
    height: auto !important;
    min-height: 430px !important;
    padding-bottom: 34px !important;
    overflow: visible !important;
  }
  .gallery-page .gallery-back,
  .gallery-page .gallery-back.remote-layer,
  .gallery-page .gallery-back.fallback {
    z-index: 1 !important;
  }
  .gallery-page .gallery-tab,
  .gallery-page .gallery-count {
    z-index: 12 !important;
  }
  .gallery-page .card-zone {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 20px) !important;
    height: 238px !important;
    min-height: 238px !important;
    margin: 88px auto 0 !important;
    padding: 16px max(12px, calc(50% - 34vw)) 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 90 !important;
    isolation: isolate !important;
  }
  .gallery-page .gallery-card {
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .gallery-page .gallery-card.active {
    z-index: 140 !important;
  }
  .gallery-page .gallery-card > img,
  .gallery-page .gallery-card .local-image {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
  }
  .gallery-page .gallery-front,
  .gallery-page .gallery-front.remote-layer,
  .gallery-page .gallery-front.fallback {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 150px !important;
    margin: -28px auto 0 !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }
  .gallery-page .gallery-front-label {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: -58px 0 62px !important;
    z-index: 30 !important;
  }
  .gallery-page .no-drawings {
    z-index: 100 !important;
  }
}

@media (max-width: 420px) {
  .index-page .file-box { margin-top: 48px !important; }
  .gallery-page .gallery-folder { margin-top: 44px !important; }
  .gallery-page .card-zone { height: 224px !important; min-height: 224px !important; }
}