@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Spectral Regular'), url('assets/fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Spectral Italic'), url('assets/fonts/spectral-400italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Spectral SemiBold'), url('assets/fonts/spectral-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/spectral-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Special Elite'), url('assets/fonts/special-elite-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/special-elite-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/courier-prime-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0218-021B;
}
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Architects Daughter'), url('assets/fonts/architects-daughter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/architects-daughter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --oak-0: #6f4f26;
  --oak-1: #8a6636;
  --oak-2: #9d7742;
  --oak-3: #a8814a;
  --oak-4: #b08a53;
  --oak-seam: rgba(58, 38, 14, 0.55);
  --oak-lip: rgba(255, 236, 196, 0.16);

  --paper-0: #f7efd9;
  --paper-1: #f4ecd8;
  --paper-2: #efe4c9;
  --paper-edge: rgba(120, 96, 54, 0.16);

  --ink: #1c1a16;
  --ink-2: #3a3128;
  --ink-dim: rgba(28, 26, 22, 0.62);
  --ink-faint: rgba(28, 26, 22, 0.42);

  --board: #33402f;
  --board-hi: #5a6a4f;
  --board-lo: #25301f;
  --leather: #3a2a1b;
  --leather-hi: #55402a;

  --moss: #5f8a3a;
  --moss-lo: #456628;
  --moss-hi: #8fae63;
  --brass: #a8842f;
  --brass-hi: #e3c07a;

  --accent: #5f8a3a;
  --accent-deep: #456628;
  --ink-mute: #6f6142;
  --sepia: #8d7a5c;
  --desk: #6f4f26;

  --lamp: 255, 214, 158;

  --font-hand: "Architects Daughter", "Segoe Script", cursive;
  --font-type: "Special Elite", "Courier New", ui-monospace, monospace;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;

  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-heavy: cubic-bezier(0.2, 0.8, 0.3, 1);

  --case-max: 1040px;
  --case-w: min(var(--case-max), max(72vw, 560px));
  --tab-w: 148px;
  --tab-tuck: 14px;
  --tab-gutter: calc(var(--tab-w) - var(--tab-tuck));
  --bar-h: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--oak-0);
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: clip;
  color: var(--paper-1);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--moss-lo);
  text-decoration: none;
  transition: color 0.2s var(--ease-soft);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: rgba(95, 138, 58, 0.34);
  color: #f7efd9;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.paper__scroll,
.paper__scroll *,
input,
textarea,
[contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

.paper ::selection {
  background: rgba(168, 132, 47, 0.3);
  color: var(--ink);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s var(--ease-soft);
}

body.is-blackout::after {
  opacity: 1;
  pointer-events: auto;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px dashed var(--moss-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

html:lang(ro) .masthead__tag,
html:lang(ro) .filetabs__label,
html:lang(ro) .tab__text,
html:lang(ro) .case__strip,
html:lang(ro) .case__plate,
html:lang(ro) .case__ref,
html:lang(ro) .stamp,
html:lang(ro) .doc__eyebrow,
html:lang(ro) .doc__label,
html:lang(ro) .doc__facts dt,
html:lang(ro) .ghost-btn,
html:lang(ro) .ctx__head,
html:lang(ro) .sheet__title,
html:lang(ro) .masthead__path,
html:lang(pt) .masthead__tag,
html:lang(pt) .filetabs__label,
html:lang(pt) .tab__text,
html:lang(pt) .case__strip,
html:lang(pt) .case__plate,
html:lang(pt) .case__ref,
html:lang(pt) .stamp,
html:lang(pt) .doc__eyebrow,
html:lang(pt) .doc__label,
html:lang(pt) .doc__facts dt,
html:lang(pt) .ghost-btn,
html:lang(pt) .ctx__head,
html:lang(pt) .sheet__title,
html:lang(pt) .masthead__path {
  text-transform: none;
}

.noscript {
  position: relative;
  z-index: 40;
  max-width: 62ch;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  color: #f7ecd2;
  text-shadow: 0 1px 6px rgba(30, 16, 4, 0.7);
}

.noscript a {
  color: var(--moss-hi);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.floor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}

.floor > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floor__boards {
  z-index: 1;
  background-color: var(--oak-3);
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(46, 30, 10, 0.34) 0 2px,
      rgba(255, 238, 200, 0.13) 2px 4px,
      rgba(255, 240, 206, 0.05) 4px 16px,
      rgba(0, 0, 0, 0) 16px 211px,
      rgba(52, 34, 12, 0.05) 211px 233px,
      rgba(44, 28, 10, 0.16) 233px 240px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 244, 214, 0.035) 0 47px,
      rgba(0, 0, 0, 0) 47px 113px,
      rgba(66, 44, 18, 0.035) 113px 185px,
      rgba(0, 0, 0, 0) 185px 240px
    ),
    repeating-linear-gradient(
      180deg,
      #ab8450 0 240px,
      #9d7742 240px 480px,
      #b28c55 480px 720px,
      #a37c47 720px 960px,
      #a8814a 960px 1200px
    );
}

.floor__joints {
  z-index: 2;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1560' height='660'%3E%3Cg stroke='rgba(52,34,12,.34)' stroke-width='2'%3E%3Cpath d='M180 0v132M960 0v132'/%3E%3Cpath d='M540 132v132M1320 132v132'/%3E%3Cpath d='M320 264v132M1100 264v132'/%3E%3Cpath d='M760 396v132M1440 396v132'/%3E%3Cpath d='M90 528v132M690 528v132'/%3E%3C/g%3E%3Cg stroke='rgba(255,240,206,.13)' stroke-width='1'%3E%3Cpath d='M181.6 0v132M961.6 0v132'/%3E%3Cpath d='M541.6 132v132M1321.6 132v132'/%3E%3Cpath d='M321.6 264v132M1101.6 264v132'/%3E%3Cpath d='M761.6 396v132M1441.6 396v132'/%3E%3Cpath d='M91.6 528v132M691.6 528v132'/%3E%3C/g%3E%3Cg fill='rgba(58,38,14,.16)'%3E%3Ccircle cx='168' cy='26' r='1.6'/%3E%3Ccircle cx='168' cy='106' r='1.6'/%3E%3Ccircle cx='948' cy='26' r='1.6'/%3E%3Ccircle cx='948' cy='106' r='1.6'/%3E%3Ccircle cx='528' cy='158' r='1.6'/%3E%3Ccircle cx='528' cy='238' r='1.6'/%3E%3Ccircle cx='1308' cy='158' r='1.6'/%3E%3Ccircle cx='1308' cy='238' r='1.6'/%3E%3Ccircle cx='308' cy='290' r='1.6'/%3E%3Ccircle cx='308' cy='370' r='1.6'/%3E%3Ccircle cx='1088' cy='290' r='1.6'/%3E%3Ccircle cx='1088' cy='370' r='1.6'/%3E%3Ccircle cx='748' cy='422' r='1.6'/%3E%3Ccircle cx='748' cy='502' r='1.6'/%3E%3Ccircle cx='1428' cy='422' r='1.6'/%3E%3Ccircle cx='1428' cy='502' r='1.6'/%3E%3Ccircle cx='78' cy='554' r='1.6'/%3E%3Ccircle cx='78' cy='634' r='1.6'/%3E%3Ccircle cx='678' cy='554' r='1.6'/%3E%3Ccircle cx='678' cy='634' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 2836px 1200px;
  background-repeat: repeat;
}

.floor__figure {
  z-index: 2;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1560' height='660'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.09' numOctaves='4' seed='31'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.34'/%3E%3C/svg%3E");
  background-size: 1560px 660px;
  background-repeat: repeat;
}

.floor__grain {
  z-index: 3;
  mix-blend-mode: overlay;
  opacity: 0.34;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='660'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.55' numOctaves='5' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='560'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 1200px 660px, 820px 560px;
  background-blend-mode: soft-light, normal;
}

.floor__cone {
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.9;
  background: radial-gradient(
    62% 58% at 50% 42%,
    rgba(var(--lamp), 0.22),
    rgba(var(--lamp), 0.12) 40%,
    rgba(var(--lamp), 0.04) 64%,
    rgba(var(--lamp), 0) 84%
  );
  animation: lampBreathe 9s ease-in-out infinite;
}

.floor__bloom {
  z-index: 5;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    58% 56% at 50% 42%,
    rgba(var(--lamp), 0.52),
    rgba(var(--lamp), 0.24) 46%,
    rgba(var(--lamp), 0) 82%
  );
}

.floor__vignette {
  z-index: 6;
  mix-blend-mode: multiply;
  background: radial-gradient(
    98% 100% at 50% 42%,
    rgba(255, 255, 255, 0) 42%,
    rgba(96, 78, 48, 0.12) 64%,
    rgba(74, 58, 32, 0.26) 82%,
    rgba(52, 38, 20, 0.5) 100%
  );
}

@keyframes lampBreathe {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .floor__cone,
  .floor__bloom {
    background-position: 50% 24%;
  }

  .floor__vignette {
    background: radial-gradient(
      124% 78% at 50% 26%,
      rgba(255, 255, 255, 0) 28%,
      rgba(96, 78, 48, 0.14) 58%,
      rgba(52, 38, 20, 0.52) 100%
    );
  }
}

.shell {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2.6vw, 40px) clamp(16px, 3.4vw, 58px) clamp(12px, 1.4vw, 20px);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 400;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin:
    calc(-1 * clamp(20px, 2.6vw, 40px))
    calc(-1 * clamp(16px, 3.4vw, 58px))
    clamp(20px, 2.4vw, 34px);
  padding: 12px clamp(16px, 4vw, 46px);
  background: linear-gradient(
    180deg,
    rgba(26, 15, 4, 0.97),
    rgba(26, 15, 4, 0.86) 62%,
    rgba(26, 15, 4, 0.58)
  );
  border-bottom: 1px solid rgba(120, 104, 78, 0.16);
  box-shadow: 0 18px 30px -26px rgba(0, 0, 0, 0.95);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  cursor: pointer;
  border-radius: 10px;
  transition: opacity 0.2s var(--ease-soft);
}

.masthead__brand:hover {
  opacity: 0.82;
}

.masthead__mark {
  display: inline-block;
  flex: none;
  width: clamp(52px, 5vw, 68px);
  transform-origin: 50% 88%;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(20, 10, 2, 0.8));
  transition: transform 0.3s var(--ease-soft), filter 0.3s var(--ease-soft);
}

.masthead__mark img {
  width: 100%;
  height: auto;
  /* Each site carries its own mark artwork, and the variants are not all the
     same ratio. Pinning the box ratio keeps the masthead row exactly the same
     height on every site, so the menu button lands on the same baseline;
     object-fit letterboxes an odd variant rather than stretching it. */
  aspect-ratio: 1243 / 848;
  object-fit: contain;
  transform-origin: 50% 88%;
  transform: rotate(-3deg);
}

.masthead__mark:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 7px 14px rgba(20, 10, 2, 0.9));
}

.masthead__mark:active {
  transform: scale(0.93);
}

.masthead__text {
  min-width: 0;
  line-height: 1;
}

.masthead__name {
  font-family: var(--font-hand);
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 400;
  color: #fdf6e6;
  text-shadow:
    0 1px 2px rgba(28, 16, 4, 0.95),
    0 2px 16px rgba(28, 16, 4, 0.85);
}

.masthead__tag {
  margin-top: 5px;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e6d3ab;
  text-shadow:
    0 1px 2px rgba(28, 16, 4, 0.95),
    0 1px 10px rgba(28, 16, 4, 0.8);
}

.masthead__aside {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ghost-btn {
  /* pinned so the button is the same box on every site: the four inherit
     four different body line-heights, which is what made blog 39px tall
     where the others were 38 */
  line-height: 1.65;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1.8px solid rgba(247, 236, 210, 0.34);
  font-family: var(--font-type);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 236, 210, 0.72);
  transition:
    transform 0.18s var(--ease-heavy),
    color 0.18s var(--ease-heavy),
    border-color 0.2s var(--ease-heavy),
    box-shadow 0.2s var(--ease-heavy);
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  transform: translateY(-1px);
  color: #cfe0a8;
  border-color: var(--moss-hi);
  box-shadow: 0 6px 16px -10px rgba(143, 174, 99, 0.9);
}

.dossier {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: min(calc(var(--case-max) + var(--tab-gutter)), 96vw);
  margin: 0 auto;
}

.dossier::after {
  content: "";
  flex: none;
  width: var(--tab-gutter);
}

/* Divider tabs, not slabs. The column used to stand 627px against a 530px
   sheet, so it read as the main furniture rather than an index down the side
   of the document. It now starts near the top of the paper and ends well
   before the bottom of it. */
.filetabs {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 34px;
  margin-right: -14px;
  position: relative;
  z-index: 1;
}

.filetabs__label {
  align-self: flex-start;
  margin-left: 2px;
  margin-bottom: 5px;
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 244, 220, 0.72);
  text-shadow: 0 1px 3px rgba(40, 24, 8, 0.7);
}

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: var(--tab-w);
  height: 32px;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(74, 50, 18, 0.42);
  border-right: none;
  border-radius: 7px 0 0 7px;
  background: linear-gradient(180deg, #efdfb4, #d6c08d);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.7),
    inset 0 -2px 4px -2px rgba(90, 62, 22, 0.45),
    -4px 5px 12px -6px rgba(40, 24, 8, 0.85);
  filter: brightness(0.9) saturate(0.8);
  transition:
    transform 0.3s var(--ease-soft),
    filter 0.3s var(--ease-soft),
    box-shadow 0.3s var(--ease-soft);
}

.tab:hover,
.tab:focus-visible {
  filter: brightness(1.05);
  transform: translateX(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.7),
    inset 0 -2px 4px -2px rgba(90, 62, 22, 0.45),
    -7px 7px 18px -7px rgba(40, 24, 8, 0.9);
}

.tab.is-active {
  z-index: 8;
  filter: brightness(1.08);
  transform: translateX(-10px);
}

.tab--index {
  --flag: #8d7a5c;
}

.tab--privacy {
  --flag: #6f8d55;
}

.tab--terms {
  --flag: #4a6f9e;
}

.tab--eula {
  --flag: #3f807c;
}

.tab--fan {
  --flag: #9a5f87;
}

.tab--b2b {
  --flag: #b06a3a;
}

.tab--cookies {
  --flag: #8a6f9e;
}

.tab--notice {
  --flag: #b8912f;
}

@media (max-height: 820px) {
  .filetabs {
    padding-top: 22px;
    gap: 3px;
  }

  .tab {
    height: 28px;
  }
}

.tab__flag {
  flex: none;
  width: 6px;
  background: var(--flag, var(--moss));
  box-shadow:
    inset -1px 0 0 rgba(58, 38, 10, 0.45),
    inset 1px 0 0 rgba(255, 255, 255, 0.28);
}

/* The punched hole was the quirk. At 32px there is no room for one, and a
   divider tab does not have a hole in it anyway. */
.tab__hole {
  display: none;
  flex: none;
  align-self: center;
  width: 9px;
  height: 9px;
  margin: 0 9px 0 11px;
  border-radius: 50%;
  background: rgba(74, 50, 18, 0.16);
  box-shadow:
    inset 0 1px 1.5px rgba(50, 32, 8, 0.5),
    0 1px 0 rgba(255, 250, 232, 0.55);
}

.tab__text {
  flex: 1;
  min-width: 0;
  align-self: center;
  text-align: left;
  padding-left: 10px;
  padding-right: 14px;
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #453521;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.casewrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--case-max);
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) {
  .shell {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .dossier {
    flex: 1 1 auto;
    min-height: 0;
  }

  .casewrap,
  .case,
  .paper {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .case,
  .paper {
    flex: 1 1 auto;
  }

  .paper__scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

.case {
  position: relative;
  padding: clamp(58px, 5.2vw, 74px) clamp(18px, 2vw, 28px) clamp(24px, 2.4vw, 34px);
  perspective: 1700px;
  transition: transform 0.5s var(--ease-heavy);
}

.case__cast {
  position: absolute;
  inset: -6px -16px -40px;
  z-index: 0;
  border-radius: 16px;
  background: radial-gradient(closest-side, rgba(30, 16, 4, 0.6), rgba(30, 16, 4, 0) 76%);
  filter: blur(18px);
  opacity: 0.74;
  transition: opacity 0.5s var(--ease-soft);
}

.case__spine {
  position: absolute;
  left: -12px;
  top: 16px;
  bottom: 16px;
  width: 20px;
  z-index: 1;
  border-radius: 8px 0 0 8px;
  background: repeating-linear-gradient(90deg, #7d5a2c 0 3px, #9d7a44 3px 7px);
  box-shadow:
    inset 0 0 0 1px rgba(40, 24, 6, 0.4),
    -3px 4px 9px -5px rgba(30, 16, 4, 0.9);
}

.case__board {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 9px;
  background-image:
    repeating-linear-gradient(97deg, rgba(70, 44, 12, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 5px),
    linear-gradient(150deg, #3f4a3a, var(--board) 46%, var(--board-lo));
  box-shadow:
    inset 0 0 0 1.5px rgba(24, 32, 20, 0.7),
    inset 0 2px 0 rgba(180, 196, 160, 0.16),
    0 2px 3px rgba(24, 14, 4, 0.5),
    0 12px 20px -10px rgba(24, 14, 4, 0.75),
    0 34px 58px -26px rgba(24, 14, 4, 0.95),
    0 66px 96px -48px rgba(20, 12, 4, 0.85);
}

.case__gutter {
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 12px;
  z-index: 6;
  border-radius: 9px 0 0 9px;
  background: linear-gradient(90deg, rgba(18, 26, 14, 0.5), rgba(18, 26, 14, 0));
}

.case__strip,
.case__flap {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  top: 16px;
  height: 42px;
  border-radius: 4px;
}

.case__strip {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1d2618, #141c11);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgba(198, 178, 124, 0.42);
}

.case__flap {
  z-index: 7;
  background: linear-gradient(180deg, var(--board-hi), #41503a);
  box-shadow:
    inset 0 1px 0 rgba(214, 226, 192, 0.3),
    0 6px 14px -8px rgba(20, 12, 2, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
}

.case__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 232px;
  width: 232px;
  height: 24px;
  padding: 0 10px;
  border-radius: 2px;
  background: var(--paper-1);
  box-shadow:
    inset 0 0 0 1px rgba(64, 52, 42, 0.3),
    0 1px 3px rgba(20, 12, 2, 0.5);
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #4a3b2b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case__ref,
.case__ref-input {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 3px;
  background-image: linear-gradient(180deg, #242d1f, #151c11);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(214, 226, 192, 0.14),
    0 1px 0 rgba(214, 226, 192, 0.09);
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.case__ref {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  color: rgba(233, 224, 196, 0.5);
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(226, 236, 204, 0.1);
}

.case__ref[hidden] {
  display: none;
}

.case__ref::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

.case__ref-input {
  flex: none;
  min-width: 0;
  border: 0;
  outline: none;
  color: rgba(233, 224, 196, 0.5);
  caret-color: rgba(226, 236, 204, 0.55);
  text-align: center;
}

.case__ref-input::placeholder {
  color: rgba(233, 224, 196, 0.26);
  text-transform: uppercase;
}

.case__ref-input:placeholder-shown::placeholder {
  animation: ref-blink 1.05s steps(1, end) infinite;
}

.case__ref-input.is-wrong {
  color: #8f2f22;
  animation: ref-shake 0.42s var(--ease-heavy);
}

.case__ref-input.is-ok {
  color: #62a08d;
  text-shadow: 0 0 10px rgba(98, 160, 141, 0.4);
}

@keyframes ref-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.34;
  }
}

@keyframes ref-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }

  20%,
  80% {
    transform: translateX(2px);
  }

  30%,
  50%,
  70% {
    transform: translateX(-3px);
  }

  40%,
  60% {
    transform: translateX(3px);
  }
}

.case__stud {
  position: absolute;
  right: -9px;
  top: 50%;
  margin-top: -10px;
  z-index: 8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-hi), #8a6a2c 72%);
  box-shadow:
    0 2px 5px rgba(20, 12, 2, 0.8),
    inset 0 0 0 1px rgba(46, 32, 12, 0.55);
}

.paper {
  position: relative;
  z-index: 5;
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--paper-0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 30% 8%, rgba(255, 253, 244, 0.85), transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 96%, rgba(158, 130, 80, 0.16), transparent 58%),
    radial-gradient(ellipse 60% 40% at 8% 88%, rgba(158, 130, 80, 0.1), transparent 62%);
  background-size: 420px 420px, auto, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow:
    0 2px 5px rgba(60, 44, 20, 0.35),
    inset 0 0 0 1px var(--paper-edge);
}

.paper__scroll {
  position: relative;
  height: clamp(420px, calc(100dvh - 300px), 840px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 4vw, 66px) clamp(40px, 4vw, 64px);
  scrollbar-gutter: stable;
}

/* Same shape as the other two sites: the credit sits left, the document links
   sit right, and the row collapses to a centred stack on a narrow screen. */
.deskfooter {
  flex: none;
  margin: auto calc(-1 * clamp(16px, 3.4vw, 58px)) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: clamp(24px, 2.8vw, 40px) clamp(16px, 4vw, 46px) 0;
  font-family: var(--font-type);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(247, 236, 210, 0.62);
  text-shadow: 0 1px 4px rgba(26, 15, 4, 0.9);
}

.deskfooter__made {
  min-width: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  padding: 11px 22px;
  border-radius: 20px;
  background: var(--moss);
  color: var(--paper-0);
  font-family: var(--font-type);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-soft), transform 0.22s var(--ease-soft);
}

.toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* No fill mode on purpose. With "both" the document holds the first frame of
   docIn, opacity 0, until the animation actually runs, so a document opened in
   a background tab or on a page that never gets to animate is simply blank.
   Without it the resting state is the readable one and the fade is only ever
   an enhancement. */
.doc {
  max-width: 74ch;
  animation: docIn 420ms var(--ease-heavy);
}

.doc[hidden] {
  display: none;
}

.doc.is-leaving {
  animation: docOut 150ms ease both;
}

/* Slide only, never fade from zero. Browsers pause animations in a background
   tab, and a paused animation holds its current frame, so any keyframe that
   starts at opacity 0 leaves the document unreadable for as long as the tab is
   not in front. Motion is safe to strand, legibility is not. */
@keyframes docIn {
  from {
    transform: translateX(26px) rotate(0.25deg);
  }
  to {
    transform: none;
  }
}

@keyframes docOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(-10px);
  }
}

.doc p,
.doc li,
.doc dd,
.doc blockquote {
  font-family: var(--font-serif);
  color: var(--ink);
  text-shadow: 0 0 0.35px rgba(28, 26, 22, 0.22);
}

.doc__eyebrow,
.doc__label {
  font-family: var(--font-type);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-shadow: none;
}

.doc__eyebrow {
  margin-bottom: 10px;
  font-size: 10.5px;
}

.doc__label {
  margin-bottom: 12px;
  font-size: 10px;
}

.doc h2 {
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #2f2519;
}

.doc__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 18px;
}

.stamp {
  font-family: var(--font-type);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 11px;
  border: 1.4px solid rgba(28, 26, 22, 0.24);
  border-radius: 3px;
}

.stamp--live {
  color: #5f7a3c;
  border-color: rgba(95, 138, 58, 0.45);
}

.doc__rule {
  height: 1px;
  margin: 26px 0;
  background: repeating-linear-gradient(90deg, rgba(28, 26, 22, 0.3) 0 6px, transparent 6px 12px);
}

.doc__toc {
  margin-bottom: clamp(30px, 3.4vw, 44px);
  padding: 20px 22px;
  border: 1.4px solid rgba(28, 26, 22, 0.18);
  border-radius: 4px;
  background: rgba(255, 250, 236, 0.5);
}

.doc__toc ol {
  display: grid;
  gap: 7px;
}

.doc__toc a {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: #4a5f2e;
  border-bottom: 1px solid rgba(95, 138, 58, 0.3);
  transition: color 0.18s var(--ease-soft), border-color 0.18s var(--ease-soft);
}

.doc__toc a:hover,
.doc__toc a:focus-visible {
  color: #3a4b23;
  border-bottom-color: var(--moss);
}

.doc section {
  margin-bottom: clamp(32px, 3.6vw, 48px);
  scroll-margin-top: 20px;
}

.doc h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  color: #3a2e24;
}

.anchor {
  font-family: var(--font-type);
  font-size: 13px;
  color: rgba(95, 138, 58, 0.55);
  opacity: 0.5;
  transition: opacity 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
}

.anchor:hover,
.anchor:focus-visible {
  opacity: 1;
  color: var(--moss);
  text-shadow: 0 0 10px rgba(95, 138, 58, 0.5);
}

.doc p.doc__plain {
  margin: 10px 0 18px;
  padding-left: 15px;
  border-left: 2px solid rgba(95, 138, 58, 0.42);
  font-style: italic;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.6;
  text-align: left;
  hyphens: none;
  color: #6f6142;
  text-shadow: none;
}

/* Justified, but never hyphenated: a legal document that breaks "information"
   across two lines as "infor-" reads as a typo in a place where typos matter.
   A word that will not fit moves down whole instead. */
.doc section p,
.doc__ask p,
.doc__list li,
.doc__facts dd {
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  line-height: 1.78;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.doc section p + p,
.doc section p + ul,
.doc section p + ol,
.doc section p + dl,
.doc section p + blockquote,
.doc section ul + p,
.doc section dl + p,
.doc section blockquote + p {
  margin-top: 15px;
}

.doc__list {
  display: grid;
  gap: 9px;
  padding-left: 4px;
}

.doc__list li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.7;
}

.doc__list li::before {
  content: "—";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--moss);
  font-family: var(--font-type);
}

.doc blockquote {
  padding: 16px 20px;
  background: rgba(95, 138, 58, 0.07);
  border-left: 3px solid rgba(95, 138, 58, 0.5);
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.72;
  color: #3f4d2c;
}

.doc section {
  margin-top: clamp(22px, 2.6vw, 36px);
}

.doc__sub {
  margin: clamp(20px, 2vw, 28px) 0 8px;
  font-family: var(--font-type);
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.totop {
  position: absolute;

  right: calc(clamp(18px, 2vw, 28px) + 25px);
  bottom: clamp(24px, 2.4vw, 34px);
  z-index: 9;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #2e2413;
  background: radial-gradient(circle at 34% 28%, var(--brass-hi), #8a6a2c 76%);
  box-shadow:
    0 3px 8px rgba(20, 12, 2, 0.7),
    inset 0 0 0 1px rgba(46, 32, 12, 0.5);
  opacity: 0.9;
  transition:
    transform 0.2s var(--ease-heavy),
    opacity 0.2s var(--ease-soft),
    box-shadow 0.2s var(--ease-soft);
}

.totop[hidden] {
  display: none;
}

.totop:hover,
.totop:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px rgba(20, 12, 2, 0.75),
    inset 0 0 0 1px rgba(46, 32, 12, 0.5);
}

.totop:active {
  transform: translateY(1px);
}

.doc__table {
  margin: clamp(16px, 1.8vw, 24px) 0;
  overflow-x: auto;
  border: 1px solid rgba(74, 56, 26, 0.28);
  border-radius: 3px;
  background: rgba(255, 253, 244, 0.4);
}

.doc__table table {
  width: 100%;
  min-width: 34em;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: clamp(12.5px, 1.4vw, 14px);
}

.doc__table th:first-child,
.doc__table td:first-child {
  width: 30%;
}

.doc__table th:last-child,
.doc__table td:last-child {
  width: 6.5em;
}

.doc__table th,
.doc__table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(74, 56, 26, 0.18);
  color: var(--ink-2);
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.doc__table th {
  font-family: var(--font-type);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(120, 96, 54, 0.1);
  white-space: nowrap;
}

.doc__table tr:last-child th,
.doc__table tr:last-child td {
  border-bottom: 0;
}

.doc__table td:last-child {
  font-family: var(--font-type);
  font-size: 11px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

html.pref-contrast .doc__table,
html.pref-contrast .doc__table th,
html.pref-contrast .doc__table td {
  border-color: rgba(16, 14, 11, 0.4);
}

.doc__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 22px;
  align-items: baseline;
}

.doc__facts dt {
  font-family: var(--font-type);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.doc__facts dd {
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  line-height: 1.6;
}

.doc__ask {
  margin-top: clamp(34px, 4vw, 52px);
  padding: 24px 26px;
  border: 1.6px solid rgba(28, 26, 22, 0.2);
  border-radius: 4px;
  background: rgba(255, 250, 236, 0.55);
}

.doc__ask p:not(.doc__label) {
  margin-bottom: 12px;
  text-align: left;
}

.doc__mail {
  font-family: var(--font-type);
  font-size: 15px;
  color: #4a5f2e;
  border-bottom: 1px solid rgba(95, 138, 58, 0.45);
  transition: color 0.18s var(--ease-soft), border-color 0.18s var(--ease-soft), text-shadow 0.18s var(--ease-soft);
}

.index__list {
  display: grid;
  gap: 2px;
  margin-top: clamp(18px, 2vw, 26px);
}

.index__row a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 4px;
  border-bottom: 1px solid rgba(28, 26, 22, 0.12);
  color: var(--ink);
  transition: background 0.18s var(--ease-soft), transform 0.18s var(--ease-soft);
}

.index__row a:hover,
.index__row a:focus-visible {
  background: rgba(95, 138, 58, 0.09);
  transform: translateX(3px);
}

.index__no {
  flex: none;
  width: 32px;
  font-family: var(--font-type);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.index__body {
  flex: 1;
  min-width: 0;
}

.index__name {
  display: block;
  font-family: var(--font-type);
  font-size: 16px;
  letter-spacing: 0.03em;
  color: #2f2519;
}

.index__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-dim);
}

.index__date {
  flex: none;
  font-family: var(--font-type);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .index__date {
    display: none;
  }
}

.doc__mail:hover,
.doc__mail:focus-visible {
  color: #3a4b23;
  border-bottom-color: var(--moss);
  text-shadow: 0 0 12px rgba(95, 138, 58, 0.4);
}


/* ---- right-click menu ----------------------------------------------------
   Shared by hub, socials and legal. A torn scrap of ruled paper, same on all
   three. Deliberately hard-coded: this is the one element meant NOT to take
   the local palette, so do not swap these for site variables. */
.ctx {
  position: fixed;
  z-index: 9500;
  min-width: 244px;
  max-width: 292px;
  padding: 18px 10px 20px;
  background-color: #f2e9d2;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(64, 52, 42, 0.055) 25px 26px),
    radial-gradient(120% 80% at 12% 0%, rgba(255, 252, 242, 0.85), transparent 60%);
  clip-path: polygon(0% 2.2%, 6% 0.5%, 13% 1.8%, 21% 0.3%, 29% 1.6%, 38% 0.4%, 47% 1.7%, 56% 0.5%, 65% 1.8%, 74% 0.4%, 83% 1.6%, 92% 0.6%, 100% 2%, 98.9% 12%, 100% 24%, 98.6% 36%, 100% 48%, 98.8% 60%, 100% 72%, 98.7% 84%, 100% 96%, 93% 98.4%, 85% 100%, 76% 98.2%, 67% 99.8%, 58% 98.4%, 49% 100%, 40% 98.5%, 31% 99.9%, 22% 98.3%, 13% 99.8%, 5% 98.4%, 0% 97%, 1.2% 86%, 0% 74%, 1.4% 62%, 0% 50%, 1.1% 38%, 0% 26%, 1.3% 14%);
  filter: drop-shadow(0 16px 26px rgba(20, 12, 4, 0.6));
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) rotate(-0.7deg);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.15s cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 0.15s;
}

.ctx.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(-0.7deg);
  pointer-events: auto;
  transition-delay: 0s;
}

.ctx.is-flip-x { transform-origin: top right; }
.ctx.is-flip-y { transform-origin: bottom left; }
.ctx.is-flip-x.is-flip-y { transform-origin: bottom right; }

.ctx__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px 11px;
  font-family: "Special Elite", "Courier Prime", "Courier New", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a5a2e;
}

.ctx__item {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border-radius: 7px;
  font-family: "Spectral", Georgia, serif;
  font-size: 14.5px;
  color: #241f18;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.16s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.16s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.16s cubic-bezier(0.33, 1, 0.68, 1);
}

.ctx__item:hover,
.ctx__item:focus-visible {
  background: rgba(138, 90, 46, 0.14);
  color: #5d3a17;
  transform: translateX(3px);
}

.ctx__ico {
  flex: none;
  width: 18px;
  text-align: center;
  font-size: 13px;
  opacity: 0.72;
}

/* The drawn icons in the context menu, sized to sit with the label. */
.ctx__svg {
  width: 15px;
  height: 15px;
  display: block;
}

.ctx__item:hover .ctx__ico {
  opacity: 1;
}

.ctx__ext {
  margin-left: auto;
  font-family: "Special Elite", "Courier Prime", "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(36, 31, 24, 0.45);
}

.ctx__sep {
  height: 2px;
  margin: 8px 12px;
  background: repeating-linear-gradient(90deg, rgba(28, 26, 22, 0.22) 0 5px, transparent 5px 12px);
}

html.pref-contrast {
  --ink: #100e0b;
  --ink-2: #1d1812;
  --ink-dim: rgba(16, 14, 11, 0.86);
  --ink-faint: rgba(16, 14, 11, 0.68);
  --paper-0: #fdf8ea;
  --paper-1: #fbf6e6;
  --paper-2: #f6efdc;
  --accent-deep: #2f4a17;
}

html.pref-contrast .paper {
  background-image: none;
}

html.pref-contrast .doc__rule {
  background: var(--ink);
  height: 2px;
}

html.pref-contrast .doc p.doc__plain {
  color: var(--ink);
  border-left-color: var(--accent-deep);
}

html.pref-contrast .stamp {
  border-color: rgba(16, 14, 11, 0.55);
  color: var(--ink);
}

html.pref-contrast .doc__eyebrow,
html.pref-contrast .doc__label,
html.pref-contrast .index__sub,
html.pref-contrast .index__date {
  color: var(--ink-dim);
}

html.pref-marks .doc a,
html.pref-marks .index__row a,
html.pref-marks .doc__mail {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.leather,
.sheet {
  display: none;
}

@media (max-width: 900px) {
  .filetabs,
  .masthead__path {
    display: none;
  }

  .shell {
    padding-bottom: calc(var(--bar-h) + 30px + env(safe-area-inset-bottom));
  }

  .dossier {
    max-width: none;
  }

  .dossier::after {
    display: none;
  }

  .case {
    padding-left: 12px;
    padding-right: 12px;
  }

  .case__spine {
    left: -5px;
    width: 12px;
  }

  .case__ref,
  .case__ref-input {
    display: none;
  }

  .case__flap {
    justify-content: center;
  }

  .case__plate {
    flex: 0 1 232px;
  }

  .case__stud {
    right: -6px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }

  .paper__scroll {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .doc section p,
  .doc__ask p {
    text-align: left;
    hyphens: none;
  }

  .doc__facts {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .doc__facts dd {
    margin-bottom: 10px;
  }

  .leather {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background-color: var(--leather);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='23'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='0.6'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #4a3623, #2c1f13);
    background-size: 300px 300px, auto;
    background-blend-mode: soft-light, normal;
    border-top: 1.5px solid rgba(18, 11, 4, 0.85);
    box-shadow:
      0 -14px 34px -18px rgba(20, 12, 4, 0.95),
      inset 0 1px 0 rgba(214, 180, 130, 0.16);
  }

  .leather::before {
    content: "";
    position: absolute;
    inset: 5px 7px calc(6px + env(safe-area-inset-bottom));
    border: 1.5px dashed rgba(222, 190, 138, 0.2);
    border-radius: 9px;
    pointer-events: none;
  }

  .leather__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 56px;
    padding: 8px 4px;
    border-radius: 8px;
    color: rgba(226, 200, 152, 0.6);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
    transition:
      color 0.2s var(--ease-soft),
      background 0.2s var(--ease-soft),
      box-shadow 0.2s var(--ease-soft),
      transform 0.12s var(--ease-soft);
  }

  .leather__btn svg {
    width: 22px;
    height: 22px;
  }

  .leather__btn.is-active {
    color: #f2dfb2;
    background: rgba(255, 224, 170, 0.09);
    box-shadow:
      inset 0 0 0 1px rgba(226, 190, 130, 0.26),
      inset 0 2px 6px rgba(0, 0, 0, 0.5);
  }

  .leather__btn:active {
    transform: translateY(1px);
  }

  .leather__text {
    font-family: var(--font-type);
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }

  .sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 88;
  }

  .sheet[hidden] {
    display: none;
  }

  .sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(24, 14, 4, 0.55);
    opacity: 0;
    transition: opacity 0.24s var(--ease-soft);
  }

  .sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: min(92svh, 100svh - 32px);
    border-radius: 18px 18px 0 0;
    background: var(--paper-1);
    box-shadow: 0 -20px 44px -20px rgba(20, 12, 2, 0.9);
    transform: translateY(var(--sheet-y, 100%));
    transition: transform 0.3s var(--ease-heavy);
    will-change: transform;
  }

  .sheet.is-dragging .sheet__panel,
  .sheet.is-dragging .sheet__scrim {
    transition: none;
  }

  .sheet.is-open .sheet__scrim {
    opacity: 1;
  }

  .sheet__head {
    flex: none;
    touch-action: none;
    cursor: grab;
  }

  .sheet.is-dragging .sheet__head {
    cursor: grabbing;
  }

  .sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .sheet__body.is-top {
    touch-action: none;
  }

  .sheet__grip {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
  }

  .sheet__grip span {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: rgba(74, 50, 18, 0.28);
    /* The grip swells to 56px while the sheet is being dragged. That was an
       animated width, which lays out on every frame of the 0.2s transition —
       and it fires at the worst possible moment, in the middle of a drag. The
       same 56px bar drawn with scaleX stays on the compositor. The flex parent
       centres the bar and a scale works about its own centre, so it does not
       move; at 5px tall the pill's caps stretch by a fraction of a pixel. */
    transform-origin: 50% 50%;
    transition: background 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
  }

  .sheet.is-dragging .sheet__grip span {
    transform: scaleX(1.2727);
    background: rgba(74, 50, 18, 0.45);
  }

  .sheet__title {
    margin: 6px 0 10px;
    padding: 0 22px;
    font-family: var(--font-type);
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .sheet__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    min-height: 64px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(74, 50, 18, 0.14);
    color: var(--ink);
    transition: background 0.18s var(--ease-soft), box-shadow 0.18s var(--ease-soft);
  }

  .sheet__row.is-active {
    color: var(--moss-lo);
    background: rgba(95, 138, 58, 0.1);
    box-shadow: inset 3px 0 0 var(--moss);
  }

  .sheet__no {
    flex: none;
    width: 34px;
    font-family: var(--font-type);
    font-size: 12px;
    letter-spacing: 0.1em;
    opacity: 0.6;
  }

  .sheet__name {
    display: block;
    font-family: var(--font-type);
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .sheet__sub {
    display: block;
    margin-top: 3px;
    font-family: var(--font-serif);
    font-size: 13.5px;
    opacity: 0.62;
  }

  .sheet__back {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 14px 22px calc(26px + env(safe-area-inset-bottom));
    font-family: var(--font-type);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--moss-lo);
  }

  .toast {
    bottom: calc(var(--bar-h) + 22px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 460px) {
  .leather__text {
    font-size: 10.5px;
  }

  .masthead__aside .ghost-btn {
    font-size: 10px;
    padding: 8px 12px;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 16mm 20mm;
  }

  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
    font-family: var(--font-serif);
    font-size: 10.5pt;
    line-height: 1.55;
  }

  .floor,
  .filetabs,
  .leather,
  .sheet,
  .ctx,
  .opt,
  .toast,
  .masthead__aside,
  .case__cast,
  .case__spine,
  .case__board,
  .case__strip,
  .case__stud,
  .case__gutter,
  .anchor,
  .doc__toc,
  .img-shield {
    display: none !important;
  }

  .shell {
    display: block;
    height: auto;
    padding: 0;
  }

  .masthead {
    position: static;
    display: flex;
    align-items: center;
    gap: 10mm;
    margin: 0 0 6mm;
    padding: 0 0 4mm;
    background: none;
    box-shadow: none;
    border-bottom: 1pt solid #000;
  }

  .masthead__mark {
    width: 18mm;
    filter: none;
  }

  .masthead__mark img {
    transform: none;
  }

  .masthead__name {
    font-family: var(--font-serif);
    font-size: 16pt;
    color: #000;
    text-shadow: none;
  }

  .masthead__tag {
    margin-top: 1mm;
    font-size: 8pt;
    letter-spacing: 0.18em;
    color: #333;
    text-shadow: none;
  }

  .dossier,
  .casewrap,
  .case,
  .paper,
  .paper__scroll {
    display: block;
    position: static;
    max-width: none;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
  }

  .dossier::after {
    display: none;
  }

  .case__flap {
    position: static;
    display: block;
    height: auto;
    padding: 0;
    margin: 0 0 5mm;
    background: none;
    box-shadow: none;
  }

  .case__plate {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: 8.5pt;
    letter-spacing: 0.16em;
    color: #000;
  }

  .case__ref {
    float: right;
    padding: 0;
    font-size: 8.5pt;
    letter-spacing: 0.16em;
    color: #333;
    background: none;
    box-shadow: none;
    text-shadow: none;
    animation: none;
  }

  .case__ref::after,
  .case__ref-input {
    display: none;
  }

  .doc {
    max-width: none;
    animation: none;
  }

  .doc[hidden] {
    display: none !important;
  }

  .doc h2 {
    font-family: var(--font-serif);
    font-size: 20pt;
    color: #000;
    margin-bottom: 3mm;
  }

  .doc h3 {
    font-family: var(--font-serif);
    font-size: 12.5pt;
    color: #000;
    break-after: avoid;
    page-break-after: avoid;
    margin-bottom: 2mm;
  }

  .doc section {
    margin-bottom: 6mm;
    break-inside: auto;
  }

  .doc p,
  .doc li,
  .doc dd,
  .doc blockquote {
    color: #000;
    text-shadow: none;
    orphans: 3;
    widows: 3;
  }

  .doc section p,
  .doc__ask p {
    font-size: 10.5pt;
    text-align: justify;
  }

  .doc p.doc__plain {
    font-style: italic;
    color: #333;
    border-left: 2pt solid #999;
    padding-left: 3mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .doc blockquote {
    background: none;
    border-left: 2pt solid #999;
    color: #000;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .doc__eyebrow,
  .doc__label {
    font-size: 7.5pt;
    color: #444;
  }

  .doc__stamps {
    gap: 3mm;
  }

  .stamp {
    border: 0.6pt solid #666;
    color: #333;
    font-size: 7.5pt;
    padding: 1mm 2mm;
  }

  .stamp--live {
    color: #000;
    border-color: #000;
  }

  .doc__rule {
    background: none;
    border-top: 0.6pt dashed #666;
    height: 0;
  }

  .doc__list li::before {
    color: #000;
  }

  .doc__facts {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .doc__facts dt {
    color: #333;
    font-size: 8pt;
  }

  .doc__ask {
    border: 0.6pt solid #999;
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 8mm;
  }

  .index__row a {
    border-bottom: 0.4pt solid #bbb;
    color: #000;
  }

  .index__name,
  .index__no,
  .index__sub,
  .index__date {
    color: #000;
  }

  .doc a {
    color: #000;
    text-decoration: underline;
  }

  .doc a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--font-type);
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }

  .doc a[href^="#"]::after {
    content: "";
  }

  .deskfooter {
    display: block;
    max-width: none;
    margin: 8mm 0 0;
    padding: 3mm 0 0;
    border-top: 0.6pt solid #999;
    text-align: left;
    font-size: 8pt;
    color: #333;
    text-shadow: none;
  }

  .deskfooter::after {
    content: "legal.tenfoldluck.studio — this copy is not a substitute for the version published online.";
    display: block;
    margin-top: 1.5mm;
    font-family: var(--font-type);
    font-size: 7.5pt;
    color: #555;
  }
}

.ns {
  --ns-bg: #14110c;
  --ns-card: #f4ecd8;
  --ns-ink: #1c1a16;
  --ns-dim: rgba(28, 26, 22, 0.62);
  --ns-line: rgba(120, 96, 54, 0.28);
  --ns-acc: #7a5c2e;
  --ns-hover: rgba(120, 96, 54, 0.09);
  --ns-font: "Spectral", Georgia, serif;
  --ns-head: "Special Elite", "Courier Prime", monospace;
}
/* ---- noscript card -------------------------------------------------------
   Shared across every Tenfold Luck site. Do not restyle per site: change the
   tokens above and nothing else, or the four fallbacks drift apart again. */
.ns {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: clamp(16px, 5vw, 56px) clamp(14px, 4vw, 32px);
  background: var(--ns-bg);
  color: var(--ns-ink);
  font-family: var(--ns-font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.ns__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ns__card {
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: clamp(26px, 5vw, 44px) clamp(20px, 5vw, 40px);
  border: 1px solid var(--ns-line);
  border-radius: 14px;
  background: var(--ns-card);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}

.ns__brand {
  margin: 0;
  font-family: var(--ns-head);
  font-size: clamp(24px, 5vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ns-ink);
}

.ns__kicker {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-acc);
}

.ns__lede {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--ns-dim);
}

.ns__rule {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--ns-line);
}

.ns__label {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ns-dim);
}

.ns__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns__nav a {
  font-size: 14px;
  color: var(--ns-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ns-line);
}

.ns__nav a:hover,
.ns__nav a:focus-visible {
  color: var(--ns-acc);
  border-bottom-color: var(--ns-acc);
}

.ns__socials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 6px 10px;
}

.ns__soc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ns-ink);
  text-decoration: none;
}

.ns__soc:hover,
.ns__soc:focus-visible {
  border-color: var(--ns-line);
  color: var(--ns-acc);
  background: var(--ns-hover);
}

.ns__ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  opacity: 0.85;
}

.ns__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ns-acc);
  color: var(--ns-card);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ns__cta:hover,
.ns__cta:focus-visible {
  filter: brightness(1.08);
}

.ns__foot {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--ns-dim);
}

.ns__foot a {
  color: var(--ns-dim);
}

@media (prefers-reduced-motion: no-preference) {
  .ns__soc,
  .ns__nav a,
  .ns__cta {
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
  }
}

.deskfooter__made {
  min-width: 0;
}

.legal {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  margin-left: auto;
}

.legal__link {
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

.legal__link:hover,
.legal__link:focus-visible {
  opacity: 1;
  color: rgba(247, 236, 210, 0.95);
}

.legal__sep {
  opacity: 0.32;
  font-size: 10px;
}

.legal__all {
  display: none;
}

@media (max-width: 560px) {
  .deskfooter {
    justify-content: center;
    text-align: center;
  }

  .legal {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }

  .legal__sep,
  .legal .legal__link:not(.legal__all) {
    display: none;
  }

  .legal__all {
    display: inline;
  }
}

/* ---- aftermath -----------------------------------------------------------
   Shown only when the socials desk has already been through the shock scene.
   Everything here is long dry: no animation, no drips forming, just what was
   left behind and never cleaned up. */
.gore {
  position: fixed;
  inset: 0;
  z-index: 392;
  pointer-events: none;
}

.gore--dry {
  filter: saturate(0.5) brightness(0.55);
}

.gore__spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  opacity: var(--o);
  transform: translate(-50%, -50%) rotate(var(--r));
  border-radius: 46% 54% 38% 62% / 58% 42% 61% 39%;
  background: radial-gradient(closest-side at 38% 34%,
    rgba(126, 12, 14, 0.95),
    rgba(92, 6, 8, 0.86) 58%,
    rgba(58, 3, 5, 0.7) 82%,
    rgba(40, 2, 3, 0) 100%);
  filter: blur(0.4px);
}

.gore__spot::after {
  content: "";
  position: absolute;
  left: 62%;
  top: 18%;
  width: 34%;
  height: 30%;
  border-radius: 50% 40% 60% 40%;
  background: radial-gradient(closest-side, rgba(112, 8, 10, 0.8), rgba(70, 4, 6, 0));
}

.gore__drip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--len);
  opacity: var(--o);
  border-radius: 0 0 60% 60%;
  background: linear-gradient(180deg, rgba(104, 8, 10, 0.9), rgba(66, 4, 6, 0.72));
}

.grime {
  position: fixed;
  inset: 0;
  z-index: 393;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.44;
}

.grime__spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--r));
  border-radius: 48% 52% 42% 58% / 55% 45% 58% 42%;
  background: radial-gradient(closest-side,
    rgba(150, 138, 112, 0.3),
    rgba(120, 110, 88, 0.12) 58%,
    rgba(0, 0, 0, 0) 82%);
  filter: blur(7px);
}

/* the room itself went colder and the lamp is no longer steady */
body.is-stained .case {
  filter: saturate(0.82) brightness(0.94);
}

body.is-stained .paper {
  box-shadow:
    0 30px 60px -30px rgba(40, 2, 3, 0.7),
    0 0 0 1px rgba(74, 12, 12, 0.14);
}

body.is-stained .lamp,
body.is-stained .case::before {
  opacity: calc(var(--flicker, 1) * 0.92);
}

body.is-stained .filetabs__label {
  color: rgba(214, 176, 160, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  body.is-stained .lamp,
  body.is-stained .case::before {
    opacity: 0.92;
  }
}


:root {
  /* 12px on every site. The bar takes width out of the viewport, so a site
     with a narrower one lands every right-aligned element — the menu button
     above all — a pixel or two further right than its neighbours. */
  --sb-size: 12px;
  --sb-mid: #a8842f;
  --sb-hi: #c19a3d;
  --sb-rail: rgba(198, 160, 86, 0.14);
  --sb-grip: rgba(26, 15, 4, 0.45);
}

/* ---- scrollbar -----------------------------------------------------------
   Plain and narrow. The track is a flat colour with nothing drawn on it, and
   the thumb is a rounded bar. Only the three tokens above change per site.

   scrollbar-width / scrollbar-color appear ONLY in the @supports block below.
   Setting either on an element makes Chromium prefer it over
   ::-webkit-scrollbar for that same element. */
::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

/* Nothing sits behind the bar except a hairline rail, and the rail is inset so
   it never reaches the top or the bottom of the viewport. The inset is carried
   by background-size rather than by margin, because a margin on the track also
   shortens how far the thumb can travel. */
::-webkit-scrollbar-track {
  background-color: transparent;
  background-image: linear-gradient(var(--sb-rail), var(--sb-rail));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1px 84%;
}

::-webkit-scrollbar-track:horizontal {
  background-size: 84% 1px;
}

/* Three short rules across the middle of the thumb, the grip. min-height keeps
   the thumb tall enough for them to read on a very long page. */
::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 99px;
  background-clip: padding-box;
  background-color: var(--sb-mid);
  background-image:
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip));
  background-repeat: no-repeat;
  background-position: center calc(50% - 4px), center 50%, center calc(50% + 4px);
  background-size: 4px 1px;
  transition: background-color 0.18s ease;
}

::-webkit-scrollbar-thumb:horizontal {
  min-height: 0;
  min-width: 44px;
  background-position: calc(50% - 4px) center, 50% center, calc(50% + 4px) center;
  background-size: 1px 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-hi);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-mid) transparent;
  }
}

/* The dossier keeps its brass slider, narrower than before and on a plain
   track. The ruled lines that used to run down the track are gone: they read
   as a second scrollbar sitting behind the first one. */
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
  /* The grip rides on top of the brass. background-image is one property, so
     the metal has to be redeclared as the bottom layer here or it would wipe
     the grip out, and position and size have to list all four layers or the
     three-value lists from the shared block repeat onto the metal. */
  background-image:
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(90deg, #c9a24f, #a8842f 46%, #7d5f1d);
  background-position:
    center calc(50% - 4px),
    center 50%,
    center calc(50% + 4px),
    center;
  background-size: 4px 1px, 4px 1px, 4px 1px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.35);
}

::-webkit-scrollbar-thumb:horizontal {
  background-position:
    calc(50% - 4px) center,
    50% center,
    calc(50% + 4px) center,
    center;
  background-size: 1px 4px, 1px 4px, 1px 4px, 100% 100%;
}

::-webkit-scrollbar-thumb:hover {
  background-image:
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(var(--sb-grip), var(--sb-grip)),
    linear-gradient(90deg, #ddbb65, #bb9538 46%, #8e6d21);
}


/* ---- options panel -------------------------------------------------------
   Identical on legal, blog and socials, deliberately. Every colour and size is
   literal rather than a var(), because this block used to inherit each site's
   palette and so rendered a different colour and a different height on each of
   them. A settings dialog belongs to the studio, not to the page behind it.

   If you restyle it, restyle it in all three or it drifts again. */
.opt {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  font-family: inherit;
}

.opt[hidden] {
  display: none;
}

.opt__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 10, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.opt__panel {
  position: relative;
  width: min(92vw, 360px);
  box-sizing: border-box;
  padding: 22px 22px 18px;
  border-radius: 6px;
  background: #f7efd9;
  border: 1px solid rgba(120, 96, 54, 0.16);
  box-shadow: 0 26px 60px -30px rgba(20, 16, 10, 0.8);
  color: #1c1a16;
}

.opt__head {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1c1a16;
}

.opts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(120, 96, 54, 0.14);
}

.opt-row:last-child {
  border-bottom: 0;
}

.opt__text {
  min-width: 0;
}

.opt__name {
  font-size: 13.5px;
  color: #1c1a16;
}

.opt__ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* the switch */
.tickbox {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}

.tickbox__box {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid rgba(28, 26, 22, 0.4);
  background: rgba(255, 253, 244, 0.7);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tickbox__tick {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: #456628;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tickbox[aria-checked="true"] .tickbox__tick {
  opacity: 1;
  transform: none;
}

.tickbox[aria-checked="true"] .tickbox__box {
  border-color: #5f8a3a;
  background: rgba(95, 138, 58, 0.14);
}

.tickbox:hover .tickbox__box {
  border-color: rgba(28, 26, 22, 0.7);
}

.tickbox:focus-visible {
  outline: 2px solid #5f8a3a;
  outline-offset: 3px;
  border-radius: 5px;
}

/* the volume dial */
.dial {
  -webkit-appearance: none;
  appearance: none;
  width: 116px;
  height: 20px;
  flex: none;
  background: none;
  cursor: pointer;
}

.dial::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a8842f, rgba(120, 96, 54, 0.24));
}

.dial::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a8842f, rgba(120, 96, 54, 0.24));
}

.dial::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e3c07a, #a8842f);
  border: 1px solid rgba(28, 26, 22, 0.35);
}

.dial::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e3c07a, #a8842f);
  border: 1px solid rgba(28, 26, 22, 0.35);
}

.dial:focus-visible {
  outline: 2px solid #5f8a3a;
  outline-offset: 4px;
}

.dial__val {
  min-width: 2.6ch;
  font-size: 11.5px;
  color: rgba(28, 26, 22, 0.62);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.opt__foot {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(28, 26, 22, 0.62);
}

.opt__credit {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: rgba(28, 26, 22, 0.42);
}

.opt__close {
  margin-top: 16px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 4px;
  border: 1px solid rgba(28, 26, 22, 0.4);
  background: rgba(255, 253, 244, 0.6);
  color: #1c1a16;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.opt__close:hover {
  background: rgba(95, 138, 58, 0.12);
  border-color: #5f8a3a;
}

.opt__close:focus-visible {
  outline: 2px solid #5f8a3a;
  outline-offset: 2px;
}