/* ==========================================================================
   Jayde Records — design system
   Editorial. Built to DESIGN.md. Every value here traces back to that file.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Colour — all derived from the logo hue, 118.6deg */
  --ink:        #0D110D;
  --ink-2:      #151A15;
  --paper:      #F3F0E7;
  --paper-2:    #E6E2D5;
  --muted:      #6B6F66;
  --muted-ink:  #9AA396;
  --rule:       rgba(13, 17, 13, 0.14);
  --rule-ink:   rgba(243, 240, 231, 0.16);

  --jade:       #51A34F;
  --jade-deep:  #2E6D2C;
  --jade-lit:   #86D97F;
  --cinnabar:   #C8452F;

  /* Type */
  --display: 'Instrument Serif', serif;
  --text:    'Outfit', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --t-masthead: clamp(2.8rem, 8.2vw, 7.25rem);
  --t-display:  clamp(2rem, 4.6vw, 3.75rem);
  --t-title:    clamp(1.4rem, 2.4vw, 2.1rem);
  --t-lead:     clamp(1.125rem, 1.6vw, 1.4rem);
  --t-body:     1.0625rem;
  --t-meta:     0.8125rem;

  /* Space — 4px baseline */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4.5rem, 11vw, 9rem);
  --gutter:  clamp(1rem, 4vw, 4rem);
  --max:     1400px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Stock. A fixed, non-interactive grain over the whole page so the ground reads
   as a printed surface rather than a flat fill. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--jade); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--jade-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible { outline-color: var(--jade-lit); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5); font-family: var(--mono); font-size: var(--t-meta);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 2. Type primitives ------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

.masthead-t { font-size: var(--t-masthead); line-height: 0.92;  letter-spacing: -0.025em; }
.display    { font-size: var(--t-display);  line-height: 1.04;  letter-spacing: -0.015em; }
.title      { font-size: var(--t-title);    line-height: 1.15;  letter-spacing: -0.01em; }
.italic     { font-style: italic; }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  max-width: 40ch;
  margin: 0;
}

p { margin: 0 0 var(--s-5); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

.meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.on-ink .meta { color: var(--muted-ink); }
.meta-jade { color: var(--jade-deep); }
.on-ink .meta-jade { color: var(--jade-lit); }

.num {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--jade-deep);
}
.on-ink .num { color: var(--jade); }

.prose a {
  color: var(--jade-deep);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.on-ink .prose a { color: var(--jade-lit); }

/* --- 3. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
.band       { padding-block: var(--section); }
.band-tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

.on-ink { background: var(--ink); color: var(--paper); }
.on-ink-2 { background: var(--ink-2); color: var(--paper); }
.on-paper-2 { background: var(--paper-2); }

/* A hairline only where two like grounds actually meet and the eye needs the
   seam. Never as a decorative repeat. */
.seam { border-top: 1px solid var(--rule); }
.on-ink .seam { border-top-color: var(--rule-ink); }

/* Sections are separated by ground and space. A rule across the whole page is
   a last resort, not the default divider — too many of them and the layout
   reads as ruled paper rather than as a designed sequence. */
.ruled-top { border-top: 0; }

/* Shape: asymmetric split (7/5) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split       { grid-template-columns: 7fr 5fr; }
  .split-flip  { grid-template-columns: 5fr 7fr; }
  .split-even  { grid-template-columns: 1fr 1fr; }
  /* A running head against a body column: the label never takes the wide half. */
  .split-label { grid-template-columns: 3fr 9fr; }
}
.split-label {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 4.5rem);
  align-items: start;
}

/* Shape: zig-zag rows */
.zig { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.zig-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3.25rem);
}
/* A 40px jade tick marks the row instead of a full-width rule. */
.zig-row > :first-child { position: relative; }
.zig-row > :first-child::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--jade-deep);
  margin-bottom: var(--s-5);
}
.on-ink .zig-row > :first-child::before { background: var(--jade); }
@media (min-width: 900px) {
  .zig-row { grid-template-columns: 4fr 8fr; }
  .zig-row:nth-child(even) { grid-template-columns: 8fr 4fr; }
  .zig-row:nth-child(even) .zig-media { order: -1; }
}

/* Shape: bento */
.bento { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :nth-child(5) { grid-column: span 2; }
}
/* Row 1 across three tiles, row 2 as a 70/30 pair. A ten-column track makes
   both rows land exactly, with no orphaned cell at the end. */
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(10, 1fr); }
  .bento > :nth-child(1) { grid-column: span 4; }
  .bento > :nth-child(2) { grid-column: span 3; }
  .bento > :nth-child(3) { grid-column: span 3; }
  .bento > :nth-child(4) { grid-column: span 7; }
  .bento > :nth-child(5) { grid-column: span 3; }
}

/* Shape: index list */
.index { display: grid; }
.index { gap: clamp(2.5rem, 5vw, 4rem); }
.index-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3) var(--s-6);
}
/* The numeral is the separator: display scale, jade, set against the row it
   opens. No rule needed once the marker carries that much weight. */
.index-row .num {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--jade-deep);
  font-variant-numeric: tabular-nums;
}
.on-ink .index-row .num { color: var(--jade); }
@media (min-width: 760px) {
  .index-row {
    grid-template-columns: 4.5rem minmax(11rem, 1fr) 1.7fr;
    align-items: baseline;
  }
  /* The row already sets the measure; an extra 65ch cap here just strands the
     right-hand third of the page. */
  .index-row p { max-width: 62ch; }
}

/* Shape: full-bleed plate */
.bleed { width: 100%; overflow: clip; }
.bleed img { width: 100%; object-fit: cover; }

/* Utility stacks */
.stack   { display: grid; gap: var(--s-5); align-content: start; }
.stack-s { display: grid; gap: var(--s-3); align-content: start; }
.stack-l { display: grid; gap: var(--s-7); align-content: start; }

/* --- 4. Plates (photography) -------------------------------------------- */

figure { margin: 0; }

.plate { display: grid; gap: var(--s-3); }
/* A plate always clips its picture. The reveal starts the image at scale(1.03)
   and a full-bleed plate is already viewport-wide, so without this the reveal
   state alone pushes the document sideways. */
.plate > .frame, .plate > img { overflow: clip; }

/* The frame never moves; the picture moves inside it. Keeps the page's
   rhythm fixed while giving the photography something to do under a cursor. */
.plate > img,
.plate > .frame {
  overflow: clip;
  background: var(--paper-2);
}
.on-ink .plate > .frame { background: var(--ink-2); }
.plate img {
  width: 100%;
  background: var(--paper-2);
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}
.plate .frame { display: block; }
.plate picture { display: block; }
.plate .frame img { will-change: transform; }
@media (hover: hover) {
  .plate .frame:hover img { transform: scale(1.035); }
}

/* Portrait sources are 2:3. Left uncapped they run past the fold in a hero and
   leave a dead column beside a short text block. Capped and cropped, the plate
   sits with its text instead of dragging the section open. */
.plate-hero img {
  max-height: min(72vh, 620px);
  object-fit: cover;
  object-position: center 42%;
}
.zig-media .plate img {
  max-height: 460px;
  object-fit: cover;
  object-position: center 45%;
}
.bento .plate img {
  max-height: 420px;
  object-fit: cover;
  object-position: center 45%;
}
@media (min-width: 900px) {
  .plate-hero img { max-height: min(66vh, 560px); }
}
.on-ink .plate img { background: var(--ink-2); }
.plate figcaption {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.5;
}
.on-ink .plate figcaption { color: var(--muted-ink); }
.plate figcaption b {
  font-weight: 500;
  color: var(--jade-deep);
  text-transform: uppercase;
  margin-right: var(--s-2);
}
.on-ink .plate figcaption b { color: var(--jade); }

/* --- 5. The seal -------------------------------------------------------- */

.seal {
  display: block;
  aspect-ratio: 1;
  background-color: var(--jade);
  -webkit-mask-image: var(--seal-src);
  mask-image: var(--seal-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.seal-sm  { width: 44px;  --seal-src: url('brand/seal-192.webp'); }

/* The stamped impression. The mark is drawn at section scale, bled off the
   right edge and clipped by the band, with the heading and body set across it.
   Jade at 14% over --ink resolves to about #152321, which still returns 14.7:1
   against --paper, so nothing set over it loses contrast. Verified, not assumed. */
.has-seal {
  position: relative;
  overflow: clip;          /* clip, not hidden: no scroll container, no trapped focus rings */
  isolation: isolate;
}
.seal-ghost {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -16%;
  translate: 0 -50%;
  width: min(96vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.10;
  background-color: var(--jade);
  -webkit-mask-image: url('brand/seal-640.webp');
  mask-image: url('brand/seal-640.webp');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
@media (min-width: 900px) {
  .seal-ghost { width: min(58vw, 760px); right: -12%; opacity: 0.14; }
}
.seal-lg  { width: min(420px, 100%); --seal-src: url('brand/seal-640.webp'); opacity: 0.9; }
/* Reuses the header mask: 88px at 2x needs 176px, and the file is already cached. */
.seal-chop{ width: 88px;  --seal-src: url('brand/seal-192.webp'); background-color: var(--cinnabar); }

@media (min-width: 900px) { .seal-sm { width: 58px; } }

/* --- 6. Header ---------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-head.head-ink { background: var(--ink); border-bottom-color: var(--rule-ink); }

.head-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
}
@media (min-width: 900px) { .head-in { min-height: 88px; } }

.brand { display: flex; align-items: center; gap: var(--s-3); }
.wordmark {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark span {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.head-ink .wordmark span { color: var(--muted-ink); }

.nav-desk { display: none; }
@media (min-width: 900px) {
  .nav-desk {
    display: flex;
    justify-content: flex-end;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    grid-column: 3;
  }
  .nav-desk a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--mono);
    font-size: var(--t-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: border-color 140ms var(--ease), color 140ms var(--ease);
  }
  .nav-desk a:hover { border-bottom-color: var(--jade-deep); }
  .head-ink .nav-desk a:hover { border-bottom-color: var(--jade-lit); }
  .nav-desk a[aria-current='page'] { border-bottom-color: var(--jade-deep); color: var(--jade-deep); }
  .head-ink .nav-desk a[aria-current='page'] { border-bottom-color: var(--jade-lit); color: var(--jade-lit); }
}

.menu-btn {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .menu-btn { display: none; } }
.menu-btn i {
  display: block; width: 20px; height: 1px; background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
.menu-btn[aria-expanded='true'] i { box-shadow: 0 6px 0 currentColor; }

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s-4) var(--gutter) var(--s-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 220ms;
}
.menu[data-open='true'] { opacity: 1; visibility: visible; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.menu nav { display: grid; align-content: center; gap: var(--s-4); }
.menu nav a {
  font-family: var(--display);
  font-size: clamp(2rem, 11vw, 3rem);
  line-height: 1.1;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule-ink);
}
.menu nav a[aria-current='page'] { color: var(--jade-lit); }
body.locked { overflow: hidden; }

/* --- 7. Buttons and links ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-6);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background-color 140ms var(--ease), color 140ms var(--ease), transform 90ms var(--ease);
}
.btn { position: relative; overflow: clip; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--jade-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 320ms var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { border-color: var(--jade-deep); }
.btn:active { transform: translateY(-1px); }

.on-ink .btn { background: var(--jade); border-color: var(--jade); color: var(--ink); }
.on-ink .btn::before { background: var(--jade-lit); }
.on-ink .btn:hover { border-color: var(--jade-lit); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); border-color: var(--ink); }
.on-ink .btn-ghost { background: transparent; color: var(--paper); border-color: var(--rule-ink); }
.on-ink .btn-ghost::before { background: var(--paper); }
.on-ink .btn-ghost:hover { color: var(--ink); border-color: var(--paper); }

@media (max-width: 759px) { .btn { width: 100%; } }

.link-mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jade-deep);
  box-shadow: inset 0 -1px 0 currentColor;
}
.on-ink .link-mono { color: var(--jade-lit); }
.link-mono:hover { color: var(--ink); }
.on-ink .link-mono:hover { color: var(--paper); }

/* --- 8. Forms ----------------------------------------------------------- */

.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-ink .field label { color: var(--muted-ink); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color 140ms var(--ease);
}
.on-ink .field input, .on-ink .field select, .on-ink .field textarea { border-color: var(--rule-ink); }
.field textarea { min-height: 150px; padding-top: var(--s-4); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field .hint { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
.on-ink .field .hint { color: var(--muted-ink); }

.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .form-grid .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.form-note {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  padding: var(--s-4);
  border: 1px solid var(--rule);
}
.on-ink .form-note { border-color: var(--rule-ink); }
.form-note[data-state='ok']   { border-color: var(--jade-deep); color: var(--jade-deep); }
.on-ink .form-note[data-state='ok'] { border-color: var(--jade-lit); color: var(--jade-lit); }
.form-note[data-state='err']  { border-color: var(--cinnabar); color: var(--cinnabar); }
.form-note[hidden] { display: none; }

/* --- 9. Footer ---------------------------------------------------------- */

.site-foot { background: var(--ink); color: var(--paper); padding-block: var(--section) var(--s-7); }
.foot-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 5fr 3fr 4fr; } }
.foot-nav { display: grid; gap: 0; align-content: start; }
.foot-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-nav a:hover { color: var(--jade-lit); }
.foot-base {
  display: grid; gap: var(--s-4);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-ink);
  align-items: center;
}
@media (min-width: 760px) { .foot-base { grid-template-columns: auto 1fr; } }

/* --- 10. Motion ---------------------------------------------------------- */

/* Scroll reveal. Gated behind .js so a page without JavaScript renders complete,
   and anything already on screen at load is revealed immediately rather than
   waiting for an intersection that has already happened. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Plates rise and settle out of a slight scale, so photography arrives with a
   little weight rather than simply appearing. */
.js [data-reveal].plate img,
.js [data-reveal] .plate img {
  transform: scale(1.03);
  transition: transform 1100ms var(--ease);
}
.js [data-reveal].is-in.plate img,
.js [data-reveal].is-in .plate img {
  transform: none;
}

/* The seal turns like the record it is drawn to resemble: one revolution every
   three minutes. Slow enough to read as ambient rather than as an animation. */
.seal-ghost { animation: turn 180s linear infinite; }
@keyframes turn { to { rotate: 360deg; } }

/* Hairlines draw themselves in as their section arrives. */
.js [data-reveal].ruled-top::after { content: none; }

/* --- Page-load reveal, above the fold ------------------------------------ */

.reveal > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 760ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal > * { opacity: 1; transform: none; animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal] .plate img, .js [data-reveal].plate img { transform: none; }
  .seal-ghost { animation: none; }
  .menu { transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}