/* Kettle & Loom: природные красители — вайда, резеда, марена — на бледном фоне. Только системные шрифты,
   ничего не грузится с чужих адресов. Главная деталь — «ткань» в шапке: основа и уток нарисованы
   градиентами, уток один раз проходит по полотну при загрузке. */
:root {
  --ground: #ecefe8;   /* бледный лишайник */
  --ink: #1e2b47;      /* вайда, глубокий синий */
  --woad: #3d5c8f;     /* вайда посветлее */
  --weld: #c8a12e;     /* резеда, жёлтый */
  --thread: #c3c9ba;   /* серо-зелёная нить для линий */
  --muted: #55607a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1.125rem/1.65 var(--serif);
}

.masthead { padding: 0 0 2.5rem; }

/* Полотно: вертикальная основа (warp) — синие нити, поверх уток (weft) — светлые нити резеды */
/* Саржа: мелкая диагональ двух оттенков вайды — так выглядит ткань в переплетении 2/2 */
.cloth {
  position: relative;
  height: clamp(9rem, 26vw, 15rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, var(--ink) 0 3px, #2a3f6b 3px 6px);
}

/* Поперечные полосы, как на пледе: широкая резеды, тонкая резеды, нитка марены */
.weft {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0 52%,
      var(--weld) 52% 61%,
      transparent 61% 65%,
      var(--weld) 65% 67%,
      transparent 67% 72%,
      #9b3d3a 72% 73%,
      transparent 73%),
    repeating-linear-gradient(45deg, rgba(30, 43, 71, .35) 0 3px, transparent 3px 6px);
  background-blend-mode: normal, multiply;
  mask: repeating-linear-gradient(90deg, #000 0 5px, rgba(0, 0, 0, .78) 5px 6px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, rgba(0, 0, 0, .78) 5px 6px);
  clip-path: inset(0 0 0 0);
  animation: weave 2.4s cubic-bezier(.6, 0, .2, 1) both;
}

@keyframes weave {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.title,
main,
footer {
  width: min(100% - 2rem, 38rem);
  margin-inline: auto;
}

h1 {
  margin: 2rem 0 .5rem;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}

.lede {
  margin: 0;
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 32rem;
}

section { padding: 2.25rem 0; border-top: 1px solid var(--thread); }

h2 {
  margin: 0 0 1rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
}

p { margin: 0 0 1rem; }

.pieces { margin: 0; }
.pieces div { padding: .75rem 0; }
.pieces div + div { border-top: 1px dashed var(--thread); }
.pieces dt { font-size: 1.2rem; }
.pieces dd { margin: .15rem 0 0; color: var(--muted); }

.dates {
  width: 100%;
  margin: 1.25rem 0 1rem;
  border-collapse: collapse;
  font-size: 1rem;
}
.dates caption { text-align: left; color: var(--muted); padding-bottom: .5rem; }
.dates th { text-align: left; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--thread); padding: .4rem .5rem .4rem 0; }
.dates td { padding: .55rem .5rem .55rem 0; border-bottom: 1px dashed var(--thread); vertical-align: top; }
.dates td:last-child { color: var(--woad); white-space: nowrap; }

.note { font-size: 1rem; color: var(--muted); }

footer {
  padding: 2rem 0 3rem;
  border-top: 2px solid var(--weld);
  font-size: .95rem;
  color: var(--muted);
}

a { color: var(--woad); }
:focus-visible { outline: 2px solid var(--weld); outline-offset: 3px; }

@media (max-width: 30rem) {
  body { font-size: 1.0625rem; }
  .dates thead { display: none; }
  .dates tr { display: block; padding: .6rem 0; border-bottom: 1px dashed var(--thread); }
  .dates td { display: block; border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .weft { animation: none; }
}