/* juscribe.com: the "Sumi" direction from #5301. Brush calligraphy signed with a seal.
   Ink on white, with the logo's own vermilion as the only colour.
   Values come from the comp (canvas artboards K-Sumi and K-Sumi-phone). The phone rules
   below follow the phone artboard, which cuts content as well as resizing it. */

@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zen-old-mincho-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zen-old-mincho-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/zen-old-mincho-900-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-700-latin.woff2") format("woff2");
}
/* The Latin subsets have no ← or →. Zen Kaku Gothic New has no ↗ at all, so that one falls back to the system font. Each arrow comes from the slice Google Fonts files it in,
   limited to that one code point so nothing else in the slice is ever fetched. */
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-400-left-arrow.woff2") format("woff2");
  unicode-range: U+2190;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-400-right-arrow.woff2") format("woff2");
  unicode-range: U+2192;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-700-left-arrow.woff2") format("woff2");
  unicode-range: U+2190;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zen-kaku-gothic-new-700-right-arrow.woff2") format("woff2");
  unicode-range: U+2192;
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zen-old-mincho-700-right-arrow.woff2") format("woff2");
  unicode-range: U+2192;
}

:root {
  --ink: #121212;
  --paper: #ffffff;
  --wash: #f1f0ee;
  --silk: #dcd8d1;
  --grey: #555555;
  --seal: #c62c2c; /* sampled from the logo, so the mark and the page agree */
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1 0 auto;
}
img {
  max-width: 100%;
}
a {
  color: var(--ink);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--seal);
}
:focus-visible {
  outline: 3px solid var(--seal);
  outline-offset: 3px;
}
.defs {
  position: absolute;
}
/* content-box, as the comp draws it: 1280 px of content plus the gutters. */
.wrap {
  box-sizing: content-box;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
/* Hidden above phone width only; at phone width each element keeps its own display. */
@media (min-width: 641px) {
  .phone-only {
    display: none !important;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
}
.skip:focus {
  left: 8px;
}

/* ── Masthead ─────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
}
.masthead__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
}
.brand img {
  height: 34px;
  width: auto;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 30px;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
}
.nav .button {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.06em;
  padding: 11px 18px;
}
.menu-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.button {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 22px;
  transition: transform 0.15s ease;
}
.button:hover {
  transform: translateY(-2px);
}
.button--ink {
  background: var(--ink);
  color: var(--paper);
}
.button--ink:hover {
  color: var(--paper);
}
.button--line {
  border: 1.5px solid var(--ink);
  padding: 13.5px 20px;
}
.button--block {
  display: block;
  text-align: center;
  padding: 16px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ── Motion ───────────────────────────────────────────── */
@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes stamp {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(6deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.93) rotate(6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(6deg);
  }
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-0.8deg);
  }
  50% {
    transform: rotate(0.8deg);
  }
}
@keyframes drop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s cubic-bezier(0.6, 0.05, 0.3, 1) 0.3s forwards;
}
.draw--2 {
  animation-duration: 0.7s;
  animation-delay: 0.9s;
}
.draw--3 {
  animation-duration: 0.7s;
  animation-delay: 1.4s;
}
.draw--enso {
  animation-duration: 0.8s;
  animation-delay: 0s;
}

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 700px;
}
.hero__stroke {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 420px;
  animation: reveal 1.6s cubic-bezier(0.6, 0.05, 0.3, 1) 0.2s both;
}
.hero__stroke svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__stroke--phone {
  display: none;
}
.hero__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--ink);
  animation: drop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.hero__dot--1 {
  left: 71%;
  top: 380px;
  width: 14px;
  height: 14px;
  animation-delay: 1.5s;
}
.hero__dot--2 {
  left: 74%;
  top: 400px;
  width: 7px;
  height: 7px;
  animation-delay: 1.6s;
}
.hero__dot--3 {
  left: 77%;
  top: 372px;
  width: 5px;
  height: 5px;
  animation-delay: 1.7s;
}
.hero__vertical {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: 48px;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--grey);
}
.hero__body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: flex-end;
  padding-top: 440px;
  padding-bottom: 72px;
}
.hero__title {
  flex: 1 1 620px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(60px, 7.6vw, 112px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.seal-stamp {
  height: 0.62em;
  width: auto;
  margin-left: 0.18em;
  vertical-align: -0.04em;
  animation: stamp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3) 1.7s both;
}
.hero__aside {
  flex: 1 1 320px;
  max-width: 420px;
}
.hero__aside p {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
}

/* ── Three works ──────────────────────────────────────── */
.works {
  background: var(--wash);
  padding-block: clamp(56px, 7vw, 104px);
  overflow-x: clip;
}
.section-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 700;
}
.scrolls {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 40px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 56px;
}
.scroll {
  flex: 1 1 300px;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: sway 8s ease-in-out infinite;
}
.scroll--2 {
  animation-delay: -2.6s;
}
.scroll--3 {
  animation-delay: -5.2s;
}
.scroll__cord {
  width: 2px;
  height: 34px;
  background: var(--ink);
}
.scroll__roller {
  width: 108%;
  height: 16px;
  border-radius: 8px;
  background: var(--ink);
}
.scroll__roller--bottom {
  width: 114%;
  height: 20px;
  border-radius: 10px;
}
.scroll__silk {
  width: 100%;
  background: var(--paper);
  border-inline: 12px solid var(--silk);
  padding: 36px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 760px;
}
.scroll__silk p {
  margin: 0;
  line-height: 1.65;
}
.tally {
  color: var(--ink);
}
.scroll__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 900;
}
.scroll__silk .scroll__meta {
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
/* The comp's box is 280 px plus 14 px padding each way; the shot is cropped at its true aspect, not squashed into it. */
.scroll__shot {
  display: flex;
  justify-content: center;
  padding-block: 14px;
  height: 308px;
  overflow: hidden;
}
.scroll__shot img {
  width: 150px;
  height: auto;
  border: 1px solid var(--ink);
  align-self: flex-start;
}
.scroll__silk .scroll__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  margin-top: auto;
}
.scroll__seal {
  align-self: flex-end;
  height: 34px;
  width: auto;
  transform: rotate(4deg);
}

.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 900;
}
.seal--round {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--seal);
  color: var(--paper);
  font-size: 11px;
  transform: rotate(-6deg);
}
.seal--oval {
  margin-top: auto;
  width: 54px;
  height: 40px;
  border-radius: 50%;
  border: 3px double var(--seal);
  color: var(--seal);
  font-size: 12px;
  transform: rotate(5deg);
}

/* Counter demo: the ensō is redrawn on every count (site.js restarts the animation). */
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.enso {
  position: relative;
  width: 220px;
  height: 220px;
  color: var(--ink);
}
.enso svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.enso__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 68px;
  font-weight: 900;
}
.counter__keys {
  display: flex;
  gap: 14px;
}
.round-key {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 26px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.round-key:hover {
  transform: translateY(-2px);
}
.round-key:active {
  transform: scale(0.94);
}
.round-key--ink {
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

/* Scrum Poker demo */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.card {
  width: 62px;
  height: 86px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.card:hover {
  transform: translateY(-5px);
}
.card[aria-pressed="true"] {
  background: var(--seal);
  color: var(--paper);
  transform: translateY(-10px) rotate(-3deg);
}
.scroll__silk .cards__said {
  margin-top: 6px;
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
  line-height: normal;
}

/* ── The board, unrolled ──────────────────────────────── */
.unrolled {
  padding-block: clamp(56px, 7vw, 104px);
}
.unrolled__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.unrolled__hint {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.unrolled__track {
  margin-top: 32px;
  overflow-x: auto;
  padding: 0 var(--gutter) 20px;
}
.unrolled__paper {
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  padding: 30px 40px;
  border-block: 14px solid var(--ink);
}
.unrolled__paper > img {
  box-sizing: content-box;
  height: 420px;
  width: auto;
  display: block;
  border: 1px solid var(--ink);
}
.unrolled__caption {
  margin: 0;
  width: 220px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.unrolled__caption:last-child {
  width: 240px;
}
.unrolled__seal {
  height: 30px;
  width: auto;
  margin-left: 10px;
  vertical-align: -4px;
}

/* ── Signature and contact ────────────────────────────── */
.signature {
  background: var(--wash);
}
.signature__line {
  max-width: 900px;
  margin: 0 auto;
  padding-block: clamp(72px, 9vw, 140px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700;
  line-height: 1.3;
}
.write {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  align-items: flex-end;
  justify-content: space-between;
  padding-block: clamp(56px, 7vw, 104px);
}
.eyebrow {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.write__email {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 900;
  overflow-wrap: anywhere;
}
.write__email--small {
  font-size: clamp(24px, 3vw, 34px);
  margin-top: 4px;
}
.write__underline {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 24px;
}
.write__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  font-size: 16px;
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--ink);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  align-items: center;
  padding-block: 28px;
  font-size: 15px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__brand img {
  height: 28px;
  width: auto;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* ── Inner pages (no comp: they reuse the homepage's parts) ── */
.page {
  padding-block: clamp(48px, 6vw, 96px);
}
.page--narrow {
  max-width: 820px;
}
.page p {
  line-height: 1.65;
}
.page__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 900;
  line-height: 1.05;
}
.page__title + .page__lede {
  margin-top: 20px;
}
.page__meta {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.page__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 80px;
  margin-top: 40px;
  align-items: flex-start;
}
.page__text {
  flex: 1 1 460px;
  max-width: 640px;
}
.page__lede {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 0;
}
.page__h2 {
  margin: 48px 0 8px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
}
.page__demo {
  flex: 0 1 320px;
  display: flex;
  justify-content: center;
}
.page__back {
  margin: 0 0 24px;
}
.badge {
  display: inline-block;
  margin-top: 8px;
}
.badge img {
  display: block;
  width: 160px;
  height: auto;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--ink);
}
.policy-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--silk);
}
.policy-list a {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
}
.policy-list span {
  color: var(--grey);
}

.policy h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 16px;
}
.policy h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 40px 0 8px;
}
.policy li {
  margin-bottom: 6px;
  line-height: 1.65;
}

.not-found {
  text-align: center;
}
.not-found__stroke {
  width: min(420px, 90%);
  height: 60px;
  display: block;
  margin: 0 auto 24px;
}

/* ── Phone: the K-Sumi-phone artboard ─────────────────── */
@media (max-width: 640px) {
  .wide-only {
    display: none !important;
  }

  .masthead__row {
    padding: 6px 16px;
  }
  .brand {
    gap: 10px;
    min-height: 44px;
    font-size: 19px;
  }
  .brand img {
    height: 28px;
  }
  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .js .nav {
    display: none;
  }
  .js .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 8px;
  }
  .nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero {
    min-height: 0;
  }
  .hero__stroke {
    top: 20px;
    height: 200px;
  }
  .hero__stroke--wide,
  .hero__dot,
  .hero__vertical {
    display: none;
  }
  .hero__stroke--phone {
    display: block;
  }
  .hero__body {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 210px 20px 44px;
  }
  .hero__title {
    flex: none;
    font-size: 54px;
    line-height: 1.04;
    letter-spacing: 0;
  }
  .seal-stamp {
    height: 36px;
    margin-left: 10px;
    vertical-align: -2px;
  }
  .hero__aside {
    flex: none;
    max-width: none;
  }
  .hero__aside p {
    font-size: 17px;
  }
  .button--block {
    margin-top: 22px;
  }

  .works {
    padding: 40px 0;
  }
  .works > .wrap {
    padding-inline: 20px;
  }
  .section-title {
    font-size: 38px;
  }
  .scrolls {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    margin-top: 40px;
  }
  .scroll {
    max-width: none;
    flex: none;
    animation: none;
  }
  .scroll__cord {
    display: none;
  }
  .scroll__roller {
    width: 106%;
    height: 12px;
    border-radius: 6px;
  }
  .scroll__roller--bottom {
    width: 110%;
    height: 16px;
    border-radius: 8px;
  }
  .scroll__silk {
    min-height: 0;
    border-inline-width: 9px;
    padding: 26px 20px;
    gap: 12px;
  }
  .scroll__silk p {
    font-size: 16px;
  }
  .scroll__name {
    font-size: 38px;
  }
  .tally {
    width: 44px;
    height: 52px;
  }
  .scroll--2 .tally,
  .scroll--3 .tally,
  .scroll__seal,
  .scroll__shot,
  .scroll__silk .scroll__meta {
    display: none;
  }
  .scroll__silk .scroll__links {
    margin-top: 0;
  }
  .scroll__links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .scroll__silk .scroll__status {
    font-size: 15px;
    line-height: normal;
    color: var(--grey);
  }
  .counter {
    gap: 12px;
  }
  .js .menu-toggle {
    padding: 0;
  }
  .scroll__links a {
    flex: 1 1 100%;
  }
  .counter {
    margin-top: 0;
    align-self: center;
  }
  .enso {
    width: 180px;
    height: 180px;
  }
  .enso__count {
    font-size: 56px;
  }
  .round-key {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
  .cards {
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
  }
  .card {
    width: 46px;
    height: 66px;
    font-size: 22px;
  }
  .card[aria-pressed="true"] {
    transform: translateY(-8px) rotate(-3deg);
  }
  .scroll__silk .cards__said {
    margin-top: 0;
    text-align: left;
    font-size: 18px;
  }

  .unrolled {
    padding-block: 40px;
  }
  .unrolled__head {
    padding-inline: 20px;
  }
  .unrolled .section-title {
    font-size: 34px;
  }
  .unrolled__track {
    margin-top: 20px;
    padding: 0 20px 12px;
  }
  .unrolled__paper {
    gap: 24px;
    padding: 18px 22px;
    border-block-width: 10px;
  }
  .unrolled__paper > img {
    height: 300px;
  }
  .unrolled__paper > img:first-of-type,
  .unrolled__paper > p:nth-of-type(2),
  .unrolled__seal {
    display: none;
  }
  .unrolled__caption,
  .unrolled__caption:last-child {
    width: 140px;
    font-size: 22px;
    line-height: normal;
  }

  .write {
    display: block;
    padding: 36px 20px;
    border-top: 1px solid var(--ink);
  }
  .write .eyebrow {
    font-size: 12px;
  }
  .write__email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    font-size: 27px;
  }

  .footer__row {
    flex-wrap: nowrap;
    padding: 18px 20px;
    font-size: 14px;
  }
  .footer__brand img {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__stroke,
  .hero__dot,
  .seal-stamp,
  .scroll {
    animation: none;
  }
  .draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .button,
  .round-key,
  .card {
    transition: none;
  }
}