@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --serif: Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
  --heading: "Manrope", Arial, sans-serif;
  --paper: #fbf8eb;
  --lime: #eee39d;
  --ink: #292b23;
  --dark: #282b24;
  --line: #e0dfd0;
  --muted: #747568;
}
* {
  box-sizing: border-box;
}
/* Rectangular geometry by default; rounded corners are opted into. */
*,
*::before,
*::after {
  border-radius: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
summary,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 500;
}
h2 {
  font-size: clamp(38px, 4.4vw, 61px);
  line-height: 1.08;
  letter-spacing: -2.7px;
}
h3 {
  line-height: 1.25;
}
p {
  color: var(--muted);
}
.wrap {
  width: min(1280px, calc(100% - 112px));
  margin-inline: auto;
}

.eyebrow {
  font: 600 10px/1.6 var(--sans);
  letter-spacing: 1.5px;
  color: inherit;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 54px;
  padding: 15px 24px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  transform: translateY(-2px);
}
.button:active {
  transform: translateY(0);
}
.button > span:last-child {
  font-size: 20px;
  line-height: 1;
}
.dark {
  background: var(--dark);
  color: var(--paper);
}
.dark:hover {
  background: #3d4436;
}

.small {
  min-height: 43px;
  padding: 11px 18px;
  font-size: 12px;
}

.button:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #809b46;
  outline-offset: 4px;
}
.icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #758a49;
  flex-shrink: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  font: 750 29px/1 var(--heading);
  font-family: var(--heading);
  font-weight: 750;
  font-size: 31px;
  letter-spacing: -1.8px;
  gap: 8px;
}
.site-header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-bottom: 0;
}
.site-header nav {
  display: flex;
  gap: 34px;
  margin-left: 45px;
  font-size: 12px;
}
.site-header nav a:hover,
.inline-link:hover {
  color: #738547;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 80px;
  padding-top: 51px;
  min-height: 680px;
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  letter-spacing: 1.1px;
  margin-bottom: 29px;
}
.hero h1 {
  line-height: 0.99;
  letter-spacing: -5.2px;
  font-weight: 500;
}

.promise-bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-block: 23px;
  font-size: 11px;
  color: var(--muted);
}
.promise-bar > div {
  display: flex;
  gap: 32px;
  color: var(--ink);
}
.promise-bar > div > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promise-bar .icon {
  width: 13px;
  height: 13px;
}

.text-button {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  padding: 7px 0;
}
.text-button .icon {
  width: 13px;
  height: 13px;
}

.inline-link {
  display: inline-flex;
  gap: 24px;
  font-size: 12px;
  align-items: center;
  border-bottom: 1px solid #b4b9a8;
  padding-bottom: 6px;
}

.demo-section {
  padding-block: 102px;
  text-align: center;
}
.demo-section > .eyebrow {
  margin-bottom: 24px;
}
.demo-section > p:not(.eyebrow) {
  font-size: 13px;
  margin-top: 24px;
}
.demo-section form {
  max-width: 650px;
  margin: 30px auto 0;
}

.demo-section > .inline-link {
  margin-top: 21px;
  font-size: 11px;
}
.field-error {
  color: #9e352a;
  font-size: 12px !important;
  text-align: left;
  margin-top: 8px;
  min-height: 0;
}
.field-error:empty {
  display: none;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 100px;
  padding-bottom: 95px;
}
.faq-section h2 {
  font-size: 37px;
  letter-spacing: -1.5px;
}
.faqs details {
  border-top: 1px solid var(--line);
}
.faqs details:last-child {
  border-bottom: 1px solid var(--line);
}
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 19px 0;
  gap: 20px;
}
summary::-webkit-details-marker {
  display: none;
}
summary span {
  font-size: 20px;
  font-weight: 400;
}
details[open] summary span {
  transform: rotate(45deg);
}
.faqs details p {
  font-size: 12px;
  padding: 0 25px 20px 0;
  line-height: 1.8;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  background: var(--lime);
  padding: 10px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
  left: 10px;
}

@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .hero {
    gap: 15px;
    padding-bottom: 60px;
  }
  .hero .eyebrow {
    max-width: 280px;
    font-size: 8px;
  }

  .faq-section {
    gap: 55px;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 80px;
    gap: 12px;
  }
  .site-header nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-bottom: 32px;
    padding-top: 34px;
  }
  .hero .eyebrow {
    max-width: none;
    font-size: 8px;
    letter-spacing: 0.8px;
    margin-bottom: 24px;
  }
  .hero h1 {
    letter-spacing: -3.6px;
  }
  .promise-bar {
    margin-top: 18px;
    flex-direction: column;
    gap: 14px;
    padding-block: 22px;
  }
  .promise-bar > div {
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
  }

  .demo-section {
    padding-block: 65px;
  }
  .demo-section h2 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .demo-section > .eyebrow {
    font-size: 8px;
  }
  .demo-section > p:not(.eyebrow) {
    font-size: 12px;
  }

  .faq-section {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 55px;
  }
  .faq-section h2 {
    font-size: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* Shop: the same content and layout across all three presets. */

body[data-preset="rose"] {
  --shop-bg: #f3e9e2;
  --shop-ink: #684b43;
  --shop-accent: #895f52;
  --shop-line: #dac8be;
}
body[data-preset="ink"] {
  --shop-bg: #efede7;
  --shop-ink: #263933;
  --shop-accent: #2c4039;
  --shop-line: #c7cec4;
}

[hidden] {
  display: none !important;
}
dialog {
  border: 1px solid var(--line);
  padding: 40px;
  max-width: 440px;
  width: calc(100% - 32px);
  background: var(--paper);
  color: var(--ink);
}
dialog::backdrop {
  background: #151b15aa;
  backdrop-filter: blur(3px);
}

dialog h2 {
  font-size: 35px;
  letter-spacing: -1px;
  margin: 18px 0;
}
dialog p {
  font-size: 13px;
}
.prototype-note {
  font-size: 11px !important;
  color: var(--muted);
  margin-top: 22px !important;
  line-height: 1.7;
}

/* Owner conversation */

/* First impression and password-free entry */

/* Internal design review surface */

/* Graft: butter paper, warm yellow, and the floating section rail. */
.header-note {
  font-size: 11px;
  color: var(--muted);
  margin-left: -35px;
}
.site-header .button {
}
body.periferi-editorial {
  --paper: #fbf9ef;
  --ink: #181714;
  --dark: #181714;
  --muted: #87857b;
  --lime: #ece8d9;
  color: var(--ink);
  --page-edge: clamp(20px, 1.67vw, 34px);
  --rail-tile: clamp(44px, 10.8svh, 96px);
  --rail-axis: var(--rail-tile);
  --rail-gap: clamp(6px, 1.3svh, 12px);
  --logo-width: calc(var(--rail-tile) * 1.2);
  padding: 0;
}
body.periferi-editorial .wrap {
}
.hero h1 {
  font-size: clamp(64px, 6.4vw, 96px);
}
.hero .eyebrow .status-dot {
  background: #b8a64d;
}

.side-menu {
  position: fixed;
  z-index: 30;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-menu > a {
  position: relative;
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  background: #eeecdfb8;
  backdrop-filter: blur(14px);
  border: 1px solid #e2dfcf66;
  color: #898b7c;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.side-menu > a > span:first-child {
  display: grid;
  place-items: center;
}
.side-menu .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.7;
}
.side-menu > a:hover {
  background: #eee39d;
  color: #292b23;
  transform: translateX(3px);
}
.side-menu > a[aria-current] {
  background: #ede19e;
  color: #2c2c23;
  border-color: #dfd28a;
}
.side-menu > a[aria-current] .icon {
  stroke-width: 2;
}
.side-menu .rail-label {
  position: absolute;
  left: 57px;
  background: #292c24;
  color: #fffceb;
  padding: 7px 12px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.side-menu > a:hover .rail-label,
.side-menu > a:focus-visible .rail-label {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1100px) and (min-width: 761px) {
  body.periferi-editorial .wrap {
  }
  .side-menu {
    left: 15px;
  }
  .side-menu > a {
    width: 42px;
    height: 44px;
  }
  .hero h1 {
    font-size: 67px;
  }
  .hero .eyebrow {
    font-size: 7px;
  }
  .header-note {
    margin-left: 0;
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  body.periferi-editorial {
    --page-edge: 20px;
    --rail-axis: 58px;
    --logo-width: 76px;
  }
  body.periferi-editorial .wrap {
  }
  .header-note {
    display: none;
  }
  .hero h1 {
    font-size: clamp(62px, 12.7vw, 90px);
  }
  .side-menu {
    left: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 5px;
    padding: 7px;
    background: #f1eddbed;
    border: 1px solid #ded9c4;
    box-shadow: 0 6px 28px #292c2426;
    backdrop-filter: blur(18px);
  }
  .side-menu > a {
    width: 51px;
    height: 45px;
    border: 0;
    background: transparent !important;
  }
  .side-menu > a[aria-current] {
    background: #e9dc93 !important;
  }

  .side-menu > a:hover {
    transform: none;
  }
  .side-menu .rail-label {
    display: none;
  }
  .side-menu .icon {
    width: 19px;
    height: 19px;
  }
  .brand {
    font-size: 29px;
  }
}

/* Editorial direction: a contained canvas, graphic type, and stacked panels. */
.site-frame {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid #d5d3c9;
  position: relative;
  overflow: clip;
  box-shadow: 0 3px 12px #28231905;
}
.periferi-editorial .wrap {
  width: min(950px, calc(100% - 170px));
  margin-inline: auto;
}
.periferi-editorial h1,
.periferi-editorial h2,
.periferi-editorial h3 {
  font-family: var(--heading);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.06em;
}
.periferi-editorial h2 {
  font-size: 54px;
  line-height: 1.02;
}

.periferi-editorial .button {
  background: #181714;
  color: #ffffff;
  font-weight: 750;
  font-size: 11px;
  min-height: 43px;
  padding: 13px 17px;
  gap: 20px;
}
.periferi-editorial .button:hover {
  background: #3a2598;
  transform: none;
}
.periferi-editorial .button > span:last-child {
  font-size: 16px;
}
.periferi-editorial .eyebrow {
  font: 650 8px/1.6 var(--sans);
  letter-spacing: 1px;
}
.periferi-editorial .site-header {
  z-index: 40;
  align-items: flex-start;
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  height: 0;
}
.periferi-editorial .site-header .brand {
  font-size: 29px;
  font-weight: 800;
  gap: 3px;
  letter-spacing: -2px;
  z-index: 40;
  margin: 0;
  color: #191714;
  left: calc(var(--rail-axis) - var(--logo-width) / 2);
  text-align: center;
  position: fixed;
  width: var(--logo-width);
  top: clamp(16px, 2.2svh, 28px);
}
.periferi-editorial .header-note {
  display: none;
}
.periferi-editorial .site-header > .button {
  line-height: 1.4;
  position: fixed;
  top: 24px;
  right: var(--page-edge);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  border-radius: 9px;
}
.periferi-editorial .side-menu > a {
  backdrop-filter: none;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: #8e827c;
  transform: none;
  transition:
    color 0.22s,
    background 0.22s;
  width: var(--rail-size);
  height: var(--rail-size);
}
.periferi-editorial .side-menu > a:hover,
.periferi-editorial .side-menu > a[aria-current] {
  background: #e7e3d6;
  color: #181714;
}
.periferi-editorial .side-menu > a .icon {
  width: 19px;
  height: 19px;
}

.periferi-editorial .hero {
  display: block;
  min-height: 665px;
  text-align: center;
  padding: 20px 0 45px;
  position: relative;
}
.periferi-editorial .hero > .eyebrow {
  justify-content: center;
  margin: 0 0 22px;
  max-width: none;
  font-size: 8px;
  color: #888579;
}
.periferi-editorial .hero h1 {
  font-size: clamp(68px, 7.5vw, 102px);
  line-height: 0.94;
  letter-spacing: -0.075em;
  position: relative;
  font-weight: 800;
}

.hero-bottom {
  margin: 44px auto 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 22px;
  animation: detail-enter 0.8s ease 0.65s both;
}
.hero-bottom > p {
  font-size: 17px;
  line-height: 1.35;
  color: #25231e;
  letter-spacing: -0.5px;
}
.hero-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.1px;
}
.round-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #181714;
  color: var(--paper);
  font-size: 19px;
}
.periferi-editorial .promise-bar {
  padding: 18px 0;
  margin-top: 0;
  border-top: 1px solid #e0ddd1;
  font-size: 9px;
  gap: 10px;
}
.periferi-editorial .promise-bar > div {
  font-size: 8px;
  gap: 20px;
}

.periferi-editorial .demo-section {
  padding-block: 85px 70px;
}
.periferi-editorial .demo-section h2 {
  font-size: 61px;
  line-height: 1;
}
.periferi-editorial .demo-section > .eyebrow {
  font-size: 8px;
}
.periferi-editorial .demo-section > p:not(.eyebrow) {
  font-size: 12px;
}
.periferi-editorial .demo-section form {
  max-width: 540px;
}

.periferi-editorial .demo-section .inline-link {
  font-size: 10px;
}
.periferi-editorial .faq-section {
  gap: 60px;
  padding-bottom: 75px;
}
.periferi-editorial .faq-section h2 {
  font-size: 34px;
}
.periferi-editorial summary {
  font-size: 11px;
}
.periferi-editorial .faqs details p {
  font-size: 11px;
}

.periferi-editorial .brand {
  color: #181714;
}
@media (min-width: 1500px) {
  .periferi-editorial .hero {
    min-height: 710px;
  }
  .periferi-editorial .hero h1 {
    font-size: 107px;
  }
  .hero-bottom {
    margin-top: 48px;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .periferi-editorial .hero h1 {
    font-size: 77px;
  }

  .periferi-editorial .hero {
    min-height: 610px;
  }

  .periferi-editorial .hero > .eyebrow {
    font-size: 7px;
  }
}
@media (max-width: 760px) {
  .site-frame {
    max-width: 100%;
  }
  .periferi-editorial .wrap {
    width: calc(100% - 36px);
  }
  .periferi-editorial .site-header {
    padding-top: 18px;
    align-items: flex-start;
  }
  .periferi-editorial .site-header .brand {
    font-size: 25px;
  }
  .periferi-editorial .hero {
    padding-top: 35px;
    padding-bottom: 28px;
    min-height: 550px;
  }
  .periferi-editorial .hero > .eyebrow {
    font-size: 6px;
    letter-spacing: 0.7px;
    margin-bottom: 25px;
  }
  .periferi-editorial .hero h1 {
    letter-spacing: -0.075em;
    line-height: 0.98;
    font-size: clamp(35px, 10vw, 69px);
  }
  .hero-bottom {
    margin-top: 36px;
    gap: 19px;
  }
  .hero-bottom > p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.35px;
  }
  .hero-intro-link {
    font-size: 8px;
    gap: 9px;
  }
  .round-arrow {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .periferi-editorial .promise-bar {
    font-size: 8px;
    padding-block: 16px;
    gap: 11px;
    flex-direction: column;
  }
  .periferi-editorial .promise-bar > div {
    gap: 8px;
    font-size: 7px;
  }
  .periferi-editorial .promise-bar .icon {
    width: 10px;
    height: 10px;
  }
  .periferi-editorial .side-menu {
    display: none;
  }
  .periferi-editorial .side-menu > a {
    background: transparent !important;
  }
  .periferi-editorial .side-menu > a[aria-current] {
    background: #ddd6be !important;
  }

  .periferi-editorial .side-menu .icon {
    width: 17px;
    height: 17px;
  }

  .periferi-editorial .demo-section {
    padding-block: 56px 48px;
  }
  .periferi-editorial .demo-section h2 {
    font-size: 40px;
    letter-spacing: -2px;
  }
  .periferi-editorial .demo-section > .eyebrow {
    font-size: 7px;
    margin-bottom: 19px;
  }
  .periferi-editorial .demo-section > p:not(.eyebrow) {
    font-size: 11px;
    line-height: 1.7;
    margin-top: 20px;
  }

  .periferi-editorial .demo-section .inline-link {
    font-size: 9px;
  }
  .periferi-editorial .faq-section {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-bottom: 47px;
  }
  .periferi-editorial .faq-section h2 {
    font-size: 33px;
  }
  .periferi-editorial summary {
    font-size: 10px;
  }
  .periferi-editorial .faqs details p {
    font-size: 10px;
  }
}
@media (max-width: 380px) {
  .periferi-editorial .hero > .eyebrow {
    font-size: 5px;
  }
  .periferi-editorial .hero-bottom > p {
    font-size: 12px;
  }
}
/* Imagery is deferred: type and colour carry the shop previews. */

@keyframes detail-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bottom {
    animation: none !important;
  }
}
.periferi-editorial h1,
.periferi-editorial h2,
.periferi-editorial h3 {
  word-spacing: 0.025em;
}

@media (max-width: 380px) {
  .periferi-editorial .hero h1 {
    font-size: 33px;
  }
}
.periferi-editorial .site-header > a {
  pointer-events: auto;
}

/* Broader positioning and a continuous, letter-by-letter opening. */
.periferi-editorial .hero h1.kinetic-headline {
  padding-block: 15px;
  width: 100%;
  word-spacing: 0;
  color: #191714;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.05em;
  padding: 0;
  margin: 0;
  font-size: clamp(72px, 10.7cqw, 172px);
}
.kinetic-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  white-space: nowrap;
}
.kinetic-word {
  display: inline-block;
  width: 5.35em;
  text-align: left;
  color: #372493;
  white-space: nowrap;
  line-height: 1.2;
  perspective: 700px;
  position: relative;
}
.kinetic-bottom {
  display: block;
  white-space: nowrap;
}

.periferi-editorial .hero:has(.kinetic-headline) {
  min-height: 630px;
}
.hero:has(.kinetic-headline) .hero-bottom {
  margin-top: 35px;
}
.headline-motion-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 28px auto 0;
  padding: 6px 9px;
  border: 1px solid #e3dfd1;
  background: transparent;
  font-size: 7px;
  letter-spacing: 0.7px;
  color: #777164;
}
.headline-motion-toggle .icon {
  width: 10px;
  height: 10px;
}
.headline-motion-toggle:hover {
  background: #eeeadd;
  color: #181714;
}
.hero:has(.kinetic-headline) .hero-bottom {
  animation: none;
}

body[data-page="project"] {
  background: #eeeee2;
}

@media (max-width: 760px) {
  .periferi-editorial .hero h1.kinetic-headline {
    padding-top: 18px;
    line-height: 0.9;
    letter-spacing: -0.05em;
  }
  .kinetic-word {
    width: 5.3em;
  }
  .kinetic-top {
    gap: 0.15em;
  }

  .periferi-editorial .hero:has(.kinetic-headline) {
    min-height: 545px;
  }
  .hero:has(.kinetic-headline) .hero-bottom {
    margin-top: 30px;
  }
  .hero:has(.kinetic-headline) .hero-bottom > p {
    font-size: 12px;
    line-height: 1.7;
    max-width: 300px;
  }
  .headline-motion-toggle {
    font-size: 6px;
    min-height: 32px;
    margin-top: 21px;
    padding: 7px 10px;
  }
}
@media (max-width: 360px) {
  .hero:has(.kinetic-headline) .hero-bottom > p {
    font-size: 11px;
  }
}

/* Website artwork gallery: local vector page previews, no people or photography. */

/* Static previews retain the artwork; a quiet caption provides the touch action. */

/* Periferi rail: fixed icon tiles with a separate selected label. */
.periferi-wordmark {
  display: block;
  fill: currentColor;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 46px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  width: auto;
  height: auto;
}

.periferi-editorial .site-header .brand {
  display: block;
}

.periferi-editorial .site-header {
  justify-content: flex-end;
}
.periferi-editorial .side-menu {
  bottom: auto;
  transform: translateY(-50%);
  width: var(--rail-size);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  align-items: flex-start;
  flex-direction: column;
  top: 50.4%;
  --rail-size: var(--rail-tile);
  gap: var(--rail-gap);
}
.periferi-editorial .side-menu > a {
  display: block;
  background: #eeebdf;
}
.periferi-editorial .side-menu > a > .rail-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.periferi-editorial .side-menu .rail-icon {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: var(--rail-tile);
  height: var(--rail-tile);
}
.periferi-editorial .side-menu .rail-icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d2ccb5;
  clip-path: circle(50%);
  opacity: 0;
  transform: scale(0.65);
  transition:
    opacity 0.22s,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 76%;
  height: 76%;
  top: 12%;
  left: 2%;
}
.rail-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.periferi-editorial .side-menu .rail-label {
  position: absolute;
  display: block;
  top: 50%;
  margin: 0;
  white-space: nowrap;
  background: #dcd6c1;
  color: #191714;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-5px, -50%);
  transition:
    opacity 0.2s,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  left: calc(100% + 10px);
  font:
    900 12px/0.9 "Youth",
    Arial,
    sans-serif;
  letter-spacing: -0.03em;
  padding: 11px 12px;
  border-radius: 8px;
}
.periferi-editorial .side-menu > a[aria-current] {
  background: #eeebdf;
  color: #171412;
}
.periferi-editorial .side-menu > a[aria-current] .rail-label,
.periferi-editorial .side-menu > a:focus-visible .rail-label {
  opacity: 1;
  transform: translate(0, -50%);
}
.periferi-editorial .side-menu > a[aria-current] .rail-icon::before,
.periferi-editorial .side-menu > a:focus-visible .rail-icon::before {
  opacity: 1;
  transform: scale(1);
}
.periferi-editorial .side-menu > a[aria-current] .rail-icon svg,
.periferi-editorial .side-menu > a:focus-visible .rail-icon svg {
  transform: translateX(3px);
}
.periferi-editorial .side-menu > a:focus-visible {
  outline: 2px solid #372493;
  outline-offset: 3px;
}

@media (hover: hover) {
  .periferi-editorial .side-menu > a:hover {
    background: #eeebdf;
    color: #171412;
    transform: none;
  }
  .periferi-editorial .side-menu > a:hover .rail-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .periferi-editorial .side-menu > a:hover .rail-icon::before {
    opacity: 1;
    transform: scale(1);
  }
  .periferi-editorial .side-menu > a:hover .rail-icon svg {
    transform: translateX(3px);
  }
  .periferi-editorial .side-menu:has(a:hover) > a:not(:hover) .rail-label {
    opacity: 0;
    transform: translate(-5px, -50%);
  }
}
.periferi-editorial
  .side-menu:has(a:focus-visible)
  > a:not(:focus-visible)
  .rail-label {
  opacity: 0;
}
@media (max-width: 760px) {
  .periferi-editorial .site-header {
    justify-content: space-between;
  }
}
.site-menu-toggle {
  position: fixed;
  z-index: 36;
  left: max(32px, calc((100vw - 1240px) / 2 + 16px));
  bottom: 29px;
  width: 56px;
  min-height: 49px;
  border: 0;
  padding: 4px 0;
  background: none;
  color: #191714;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 800 12px/1.2 var(--heading);
  letter-spacing: -0.4px;
  cursor: pointer;
}
.menu-toggle-mark {
  font: 700 13px/1 var(--sans);
  letter-spacing: 4px;
  margin-left: 4px;
}
.site-menu-toggle:hover {
  color: #8e827c;
}

.menu-is-open {
  overflow: hidden;
}
.site-menu-dialog {
  position: fixed;
  inset: 12px auto 12px max(104px, calc((100vw - 1240px) / 2 + 88px));
  margin: 0;
  width: 510px;
  max-width: calc(100vw - 122px);
  height: calc(100dvh - 24px);
  max-height: none;
  border: 0;
  padding: 70px 40px 30px;
  background: #191714;
  color: #ffffff;
  overflow: auto;
  box-shadow: none;
}
.site-menu-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: menu-panel-in 0.42s cubic-bezier(0.36, 0.33, 0, 1) both;
}
.site-menu-dialog::backdrop {
  background: #211b130d;
  backdrop-filter: none;
}
.menu-panel-links {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.menu-panel-links > a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0;
  color: #a19c92;
  font: 800 45px/1.16 var(--heading);
  letter-spacing: -2.5px;
  transition: color 0.24s;
}
.menu-link-arrow {
  margin-left: auto;
  font: 400 27px var(--sans);
  opacity: 0;
  transform: translate(-5px, 5px);
  transition:
    opacity 0.24s,
    transform 0.32s;
}
.menu-panel-links > a:hover,
.menu-panel-links > a:focus-visible {
  color: #f7f0df;
}
.menu-panel-links > a:hover .menu-link-arrow,
.menu-panel-links > a:focus-visible .menu-link-arrow {
  opacity: 1;
  transform: none;
}
.menu-panel-footer {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-panel-footer > a {
  font: 700 8px/1.5 var(--heading);
  color: #8e897e;
  display: flex;
  gap: 15px;
  align-items: center;
}
.menu-panel-footer > a:hover {
  color: #f7edc9;
}
@keyframes menu-panel-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
    clip-path: inset(0 15% 0 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .periferi-editorial .wrap {
    width: calc(100% - 164px);
  }
}
@media (max-width: 760px) {
  .site-menu-toggle {
    left: 20px;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 70px;
    min-height: 49px;
    padding: 9px 12px;
    font-size: 11px;
    background: #f0ecdd;
    box-shadow: 0 3px 18px #211b1315;
  }

  .site-menu-dialog {
    inset: 10px 10px 80px;
    width: auto;
    max-width: none;
    height: calc(100dvh - 90px);
    padding: 74px 28px 28px;
  }
  .menu-panel-links > a {
    font-size: clamp(31px, 9.5vw, 45px);
    letter-spacing: -2px;
    padding-block: 5px;
  }
  .menu-link-arrow {
    font-size: 22px;
  }
  .menu-panel-footer {
    margin-top: 35px;
    gap: 16px;
  }
  .menu-panel-footer > a {
    font-size: 8px;
    max-width: 230px;
  }
}
@media (max-height: 670px) and (min-width: 761px) {
  .site-menu-toggle {
    bottom: 16px;
  }
  .site-menu-dialog {
    padding-top: 58px;
  }
  .menu-panel-links > a {
    font-size: 38px;
  }
  .menu-panel-footer {
    margin-top: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-dialog[open] {
    animation: none;
  }
  .periferi-editorial .side-menu > a,
  .periferi-editorial .side-menu .rail-label,
  .menu-panel-links > a,
  .menu-link-arrow {
    transition: none;
  }
}

/* The opening: oversized type, quiet corners, a single clear introduction. */
.periferi-editorial .site-header {
  width: 100%;
}
.periferi-editorial .side-menu,
.periferi-editorial .site-menu-toggle {
  left: var(--page-edge);
}
.periferi-editorial .hero.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 76%;
  max-width: none;
  padding: 28px 0 36px;
  container-type: inline-size;
  min-height: 100svh;
}
.periferi-editorial .kinetic-top {
  align-items: baseline;
  gap: 0.18em;
  line-height: 0.9;
}
.periferi-editorial .kinetic-word {
  color: #191714;
  width: 5.15em;
  line-height: 0.9;
}
.periferi-editorial .kinetic-bottom {
  display: block;
  white-space: nowrap;
  line-height: 0.84;
}

.periferi-editorial .hero:has(.kinetic-headline) .hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  gap: 28px;
  max-width: 100%;
  padding: 0;
}
.periferi-editorial .hero:has(.kinetic-headline) .hero-bottom > p {
  color: #201e19;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 560px;
  font-size: clamp(21px, 1.95vw, 35px);
}
.periferi-editorial .hero-intro-link {
  gap: 14px;
  font-family: "Youth", Arial, sans-serif;
  font-size: clamp(11px, 0.89vw, 16px);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.periferi-editorial .round-arrow {
  width: 34px;
  height: 34px;
  font-size: 22px;
  background: #191714;
  color: #ffffff;
  border: 0;
  border-radius: 50%;
}
.periferi-editorial .headline-motion-toggle {
  position: absolute;
  margin: 0;
  padding: 6px 0;
  border: 0;
  color: #969083;
  min-height: 24px;
  right: -10%;
  bottom: 20px;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0;
}

@media (min-width: 1500px) {
  .periferi-editorial .hero.wrap {
    padding-top: 34px;
    padding-bottom: 74px;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .periferi-editorial .hero.wrap {
    width: 76%;
  }
}
@media (max-width: 760px) {
  .periferi-editorial .hero:has(.kinetic-headline) .hero-bottom {
    gap: 24px;
    margin: 0;
  }
  .periferi-editorial .hero:has(.kinetic-headline) .hero-bottom > p br {
    display: none;
  }
  .periferi-editorial .hero-intro-link {
    gap: 12px;
    font-size: 10px;
  }
  .periferi-editorial .round-arrow {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }
}

/* Full-width reference hero. These typography and geometry changes are scoped to the opening and navigation. */
@font-face {
  font-family: "Youth";
  src: url("assets/periferi/fonts/Youth-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Youth";
  src: url("assets/periferi/fonts/Youth-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/periferi/fonts/PPNeueMontreal-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/periferi/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
body.periferi-editorial {
  background: #fbf9ef;
}
.periferi-editorial .site-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: #fbf9ef;
  overflow: clip;
}
.periferi-editorial .site-header > .button {
  font-size: clamp(11px, 0.89vw, 16px);
  padding: 14px 17px;
  min-height: 43px;
}
.periferi-editorial .side-menu {
  left: calc(var(--rail-axis) - var(--rail-tile) / 2);
}
.periferi-editorial .side-menu > a {
  width: var(--rail-tile);
  height: var(--rail-tile);
  background: #eeebdf;
  border-radius: calc(var(--rail-tile) * 0.2);
}
.periferi-editorial .side-menu > a:focus-visible {
  width: var(--rail-tile);
}
@media (hover: hover) {
  .periferi-editorial .side-menu > a:hover {
    width: var(--rail-tile);
  }
}
.periferi-editorial .site-menu-toggle {
  left: calc(var(--rail-axis) - var(--rail-tile) / 2);
  width: var(--rail-tile);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(17px, 2.65svh, 27px);
  line-height: 1;
  gap: 10px;
  min-height: 44px;
  bottom: clamp(16px, 2.1svh, 28px);
}
.periferi-editorial .menu-toggle-mark {
  font-size: 13px;
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  height: 6px;
}
.periferi-editorial .site-menu-dialog {
  left: calc(var(--rail-axis) + var(--rail-tile) / 2 + 18px);
}
.periferi-editorial .menu-panel-links > a {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 700;
}
@media (min-width: 1600px) {
  .periferi-editorial .hero.wrap {
    padding-top: 32px;
    padding-bottom: 42px;
  }
  .periferi-editorial .hero:has(.kinetic-headline) .hero-bottom > p {
    max-width: 720px;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .periferi-editorial .hero.wrap {
    padding-top: 90px;
    padding-bottom: 44px;
  }
  .periferi-editorial .hero h1.kinetic-headline {
    font-size: 10.7cqw;
  }
  .periferi-editorial .hero:has(.kinetic-headline) .hero-bottom > p {
    max-width: 480px;
  }
}
@media (max-height: 680px) and (min-width: 761px) {
  .periferi-editorial .hero.wrap {
    min-height: 680px;
  }
}
@media (max-width: 760px) {
  .periferi-editorial .site-header > .button {
    top: 23px;
    font-size: 10px;
    padding: 11px 13px;
    min-height: 36px;
    border-radius: 7px;
  }
  .periferi-editorial .hero.wrap {
    width: calc(100% - 36px);
    min-height: 100svh;
    padding: 124px 0 106px;
  }
  .periferi-editorial .hero h1.kinetic-headline {
    font-size: 11.5cqw;
  }
  .periferi-editorial .kinetic-bottom {
    line-height: 0.93;
  }
  .periferi-editorial .hero:has(.kinetic-headline) .hero-bottom > p {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 330px;
  }
  .periferi-editorial .site-menu-toggle {
    left: 20px;
    width: 66px;
    border-radius: 10px;
    font-size: 16px;
    min-height: 54px;
  }
  .periferi-editorial .site-menu-dialog {
    left: 10px;
  }
  .periferi-editorial .headline-motion-toggle {
    right: 2px;
    bottom: 28px;
    font-size: 8px;
  }
}

/* Sidebar composition: one axis, six tiles, generous space at either end. */
.periferi-editorial .site-header .brand .periferi-wordmark {
  font-family: "Youth", Arial, sans-serif;
  font-size: calc(var(--rail-tile) * 0.62);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-align: center;
  width: 100%;
}
.periferi-editorial .side-menu .rail-icon svg {
  width: 39%;
  height: 39%;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.periferi-editorial .menu-toggle-mark i {
  display: block;
  width: 4px;
  height: 4px;
  background: currentColor;
  clip-path: circle(50%);
}
/* Keep aria-current for orientation without opening its badge on page load. */
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible) {
  color: #8e827c;
  background: #eeebdf;
}
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible)
  .rail-label {
  opacity: 0;
  transform: translate(-5px, -50%);
}
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible)
  .rail-icon::before {
  opacity: 0;
  transform: scale(0.65);
}
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible)
  .rail-icon
  svg {
  transform: none;
}
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  background: #9276dd;
  opacity: 0;
  clip-path: circle(50%);
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.18s ease;
  will-change: transform;
}
.cursor-follower.is-visible {
  opacity: 0.32;
}
.menu-is-open .cursor-follower {
  opacity: 0;
}
@media (max-width: 760px) {
  .periferi-editorial .site-header .brand .periferi-wordmark {
    font-size: 43px;
  }
  .periferi-editorial .menu-toggle-mark {
    font-size: 13px;
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-follower {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .periferi-editorial .side-menu .rail-icon svg,
  .periferi-editorial .side-menu .rail-icon::before {
    transition: none;
  }
}

/* Measured reference sidebar sizing: 64px tiles at a 1440px viewport. */
@media (min-width: 761px) {
  body.periferi-editorial {
    --rail-unit: calc(clamp(768px, 100vw, 1920px) / 90);
    --rail-tile: calc(var(--rail-unit) * 4);
    --rail-axis: calc(var(--rail-unit) * 4);
    --rail-gap: calc(var(--rail-unit) * 0.5);
    --logo-width: calc(var(--rail-unit) * 4.8);
  }
  .periferi-editorial .side-menu {
    top: 50%;
    gap: var(--rail-gap);
  }
  .periferi-editorial .side-menu > a {
    border-radius: calc(var(--rail-unit) * 0.75);
  }
  .periferi-editorial .side-menu .rail-icon svg {
    width: 40%;
    height: 40%;
  }
  .periferi-editorial .site-header .brand {
    left: calc(var(--rail-unit) * 1.5);
    top: calc(var(--rail-unit) * 1.5);
  }
  .periferi-editorial .site-header .brand .periferi-wordmark {
    font-size: calc(var(--rail-unit) * 2.95);
    line-height: 0.85;
  }
  .periferi-editorial .site-menu-toggle {
    left: calc(var(--rail-unit) * 2.03125);
    bottom: calc(var(--rail-unit) * 1.5);
    width: 4em;
    min-width: 4em;
    min-height: 0;
    padding: 0.25em;
    gap: 0.5em;
    font-size: calc(var(--rail-unit) * 1.0625);
    line-height: 20px;
    letter-spacing: -0.01em;
  }
  .periferi-editorial .menu-toggle-mark {
    font: inherit;
    gap: 0.176em;
    height: 0.176em;
    margin: 0;
  }
  .periferi-editorial .menu-toggle-mark i {
    width: 0.176em;
    height: 0.176em;
  }
  .periferi-editorial .side-menu .rail-label {
    font-size: calc(var(--rail-unit) * 0.8);
    line-height: 0.8;
    padding: calc(var(--rail-unit) * 0.5);
    border-radius: calc(var(--rail-unit) * 0.375);
    left: calc(100% + var(--rail-unit) * 0.6);
  }
}

/* Dock magnification: the active tile grows 25%, immediate neighbours 12.5%. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .periferi-editorial .side-menu > a {
    --dock-scale: 1;
    width: calc(var(--rail-tile) * var(--dock-scale));
    height: calc(var(--rail-tile) * var(--dock-scale));
    transition:
      width 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
      height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
      color 220ms ease,
      background-color 220ms ease;
  }
  .periferi-editorial .side-menu > a:is(:hover, :focus-visible) {
    --dock-scale: 1.25;
    width: calc(var(--rail-tile) * var(--dock-scale));
  }
  .periferi-editorial .side-menu > a:is(:hover, :focus-visible) + a,
  .periferi-editorial .side-menu > a:has(+ a:is(:hover, :focus-visible)) {
    --dock-scale: 1.125;
  }
  .periferi-editorial .side-menu .rail-icon {
    width: 100%;
    height: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .periferi-editorial .side-menu > a {
    transition: none;
  }
}

/* Closing slice: quiet navigation, dark canvas, oversized wordmark. */

/* Opening sequence: illustrated website objects become the first headline. */
.periferi-editorial .kinetic-top {
  position: relative;
}
.periferi-editorial .kinetic-word {
  width: 5.15em;
}
.kinetic-prefix {
  display: inline-block;
}
.intro-letter {
  display: inline-block;
  transform-origin: 50% 60%;
}

.intro-running .intro-letter,
.intro-running .promise-character {
  opacity: 0;
}

/* Code assembles the promise; its final text keeps the original alignment. */
.kinetic-bottom {
  position: relative;
}
.promise-text {
  display: inline-block;
}
.promise-character {
  display: inline-block;
  transform-origin: 50% 65%;
}
.headline-motion-controls {
  position: absolute;
  right: -10%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.periferi-editorial .headline-motion-controls > button {
  position: static;
  padding: 6px 0;
  margin: 0;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: #969083;
  font:
    400 8px/1.2 "PP Neue Montreal",
    Arial,
    sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}
.periferi-editorial .headline-motion-controls > button:hover {
  color: #191714;
}
@media (max-width: 760px) {
  .headline-motion-controls {
    right: 2px;
    bottom: 28px;
    gap: 12px;
  }
}

/* With the supporting copy removed, keep the single hero action at the foot. */
.periferi-editorial .hero:has(.kinetic-headline) .hero-bottom {
  margin-top: auto;
}

/* ===========================================================================
   Presentation rhythm — every section holds the viewport.
   ---------------------------------------------------------------------------
   The page reads as a deck: one idea per screen, content centred, so scrolling
   advances a slide rather than sliding a continuous page. min-height rather
   than height, so a section that genuinely needs more room still gets it
   instead of clipping. The footer is deliberately excluded — it is the end of
   the document, not another slide.
   ======================================================================== */
.periferi-editorial .demo-section,
.periferi-editorial .faq-section {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(36px, 6svh, 88px);
}

/* The three service panels were already sticky; at full height each one now
   holds the screen while the next slides up over it, which is the same
   gesture as the rest of the deck rather than a separate trick. */

/* ===========================================================================
   Works — a full-bleed band.
   ---------------------------------------------------------------------------
   Five columns of one height and deliberately unequal widths, running off the
   right edge so the row reads as continuous rather than as a finished block.
   The second column carries two stacked tiles, which breaks the metronome of
   equal columns without needing a second row.

   Widths are absolute rather than fr, on purpose: fr would solve to exactly the
   container and the band would stop dead at the edge. Overshooting lets the
   last tile clip and makes the row scrollable, which is what says "there is
   more" without a control saying it.
   ======================================================================== */

/* The name belongs to the composition, so it stays readable at rest; only the
   call to action waits for intent. */

/* Narrow: the band keeps its shape and simply scrolls further, which suits a
   thumb better than restacking it into a column. */

/* Pixel field beneath the raised illustration row during the opening. */
.periferi-editorial .hero h1.kinetic-headline {
  position: relative;
  z-index: 1;
}
.headline-pixels {
  position: absolute;
  left: 0;
  top: 12px;
  width: 100%;
  height: calc(100% - 110px);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.intro-running .headline-pixels {
  opacity: 1;
}
.promise-text {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero:not(.intro-running) .headline-pixels {
    display: none;
  }
}

/* ===========================================================================
   The rail survives the footer.
   ---------------------------------------------------------------------------
   It used to hide itself over the footer, which was reasonable when the footer
   arrived after a short closing block. Now that every section holds the
   viewport the footer is the only thing that is not a full slide, so that rule
   stranded the reader at the bottom of a ten-screen page with no way back up.
   It stays visible and simply wears the dark treatment it already uses over
   the gallery.
   ======================================================================== */

/* ===========================================================================
   Works — full-bleed artwork.
   ---------------------------------------------------------------------------
   The tiles used to hold tall page mockups panning vertically, which read as
   screenshots scrolling rather than as work. They now carry flat geometric
   compositions, cropped to fill, and the motion is a slow drift across that
   crop instead of a pan down a long image.
   ======================================================================== */

/* ===========================================================================
   Works — let the artwork carry the tile.
   ---------------------------------------------------------------------------
   The caption block sat at the bottom of every tile with the call to action
   inside it at opacity 0 — invisible, but still taking layout space, so the
   scrim began halfway up the card and greyed the artwork it was meant to sit
   on. The tile is now clean at rest; pointing at one brings up a wash and its
   label together. The card keeps its aria-label, so nothing is hidden from a
   screen reader, and keyboard focus reveals the same panel.
   ======================================================================== */

/* The action rides in with the wash rather than reserving room for itself. */

/* A ring, not a slab. */

/* The section's own action reads as a control, not a billboard. */

/* Stronger sidebar contrast on the light grey page. */
.periferi-editorial .side-menu > a,
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible) {
  color: #585346;
  background: #e2dfd0;
}
.periferi-editorial .side-menu > a:hover,
.periferi-editorial .side-menu > a:focus-visible {
  color: #181714;
}
.periferi-editorial .rail-icon::before {
  background: #d2ccb5;
}

/* A gentle turn for the hero asterisk. */

/* Fixed reading progress: a quiet square travelling down the right edge. */
.page-scroll-indicator {
  --scroll-progress: 0;
  position: fixed;
  z-index: 40;
  /* Centred on the language tiles below it: their axis is the page gutter
     plus half a tile; the indicator is 24px wide. */
  right: calc(var(--page-gutter) + var(--rail-tile) * 0.3 - 12px);
  top: 12%;
  width: 24px;
  height: clamp(150px, 28vh, 260px);
  color: #191714;
  pointer-events: none;
}
.page-scroll-line {
  position: absolute;
  left: calc(50% - 0.5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: #c9cbd0;
}
.page-scroll-dot {
  position: absolute;
  left: 0;
  top: calc(var(--scroll-progress) * 100%);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid #d7d9dd;
  border-radius: 0;
  background: #fbf9ef;
  display: grid;
  place-items: center;
}
.page-scroll-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: currentColor;
}

@media (max-width: 760px) {
  .page-scroll-indicator {
    display: none;
  }
}

/* Charcoal navigation tiles over the gallery and footer. */

/* ===========================================================================
   The closing slide — the price, then the promise.
   ---------------------------------------------------------------------------
   It used to be one orange field carrying a three-line sentence, which said
   the nice thing but never said the number. The slide now does both: the price
   stated plainly on the paper ground, with the objections answered next to it,
   and the promise underneath as a full-bleed band. Two beats, one screen.
   ======================================================================== */

/* The band runs the full width of the viewport, not of the column. */

/* The old slide styled every p and a inside .closing-statement, which now
   reaches the label, the figure, the supporting line and both buttons. These
   put each new part back in charge of its own size. */

/* The pricing card's amount now carries a currency of its own, which should
   read as part of the figure rather than as the small print beside it. */

/* One row: the figure, the reassurance and the actions sit side by side on a
   shared baseline, rather than the copy and buttons stacking in a column. */

/* ===========================================================================
   Works — three, at size.
   ---------------------------------------------------------------------------
   Six tiles meant six small tiles. Three fill the slide, so the artwork is
   actually looked at rather than scanned past. The remaining three still back
   the sales preview and the sample pages; they are simply not on show here.
   ======================================================================== */

/* Open navigation: spacious, quiet typography like the reference. */
.periferi-editorial .site-menu-dialog {
  top: 0;
  bottom: 0;
  height: 100dvh;
  width: min(680px, calc(100vw - 130px));
  max-width: none;
  padding: clamp(44px, 7vh, 80px) clamp(28px, 4vw, 64px) 96px;
  background: #171412;
}
.periferi-editorial .menu-panel-links > a {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: 1.12;
  letter-spacing: -0.055em;
  padding: 3px 0;
  color: #92918f;
}
.periferi-editorial .menu-panel-links > a:hover,
.periferi-editorial .menu-panel-links > a:focus-visible {
  color: #ffffff;
}
.periferi-editorial .menu-link-arrow {
  display: none;
}
.periferi-editorial .menu-panel-footer {
  margin-top: clamp(36px, 6vh, 70px);
  gap: 12px;
}
.periferi-editorial .menu-panel-footer > a {
  color: #92918f;
  font:
    700 clamp(11px, 1.05vw, 15px) / 1.4 "Youth",
    Arial,
    sans-serif;
}
.periferi-editorial .menu-panel-footer > a:hover {
  color: #ffffff;
}
@media (max-width: 760px) {
  .periferi-editorial .site-menu-dialog {
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 44px 28px 28px;
  }
  .periferi-editorial .menu-panel-links > a {
    font-size: clamp(36px, 9vw, 58px);
  }
}

/* ===========================================================================
   How it works — four fields.
   ---------------------------------------------------------------------------
   The sliding panels are gone, but their colour should not have gone with
   them: this section carried the page's only full-bleed colour, and stated as
   grey text on paper it read as filler. Four flush fields, no gaps and no
   corners, each holding a step. The number sits at the top, the name drops to
   the floor of its field, and the sequence is legible at a glance from across
   a room — which is the whole job.
   ======================================================================== */

/* ===========================================================================
   Gutters — one measure, used on every edge.
   ---------------------------------------------------------------------------
   The rail is fixed over the page, so anything reaching the left edge runs
   underneath it. --rail-safe is the leftmost x content may occupy, and it is
   derived rather than chosen: the rail is centred on --rail-axis, so the gap
   to its left is (axis - tile/2). Mirroring that gap on its right puts content
   at exactly twice the axis, whatever the rail is currently sized to. Retune
   the dock and the gutters follow on their own.

   The same measure is used on the right, so the column sits evenly between the
   navigation and the scrollbar instead of being centred on a width of its own.
   ======================================================================== */
body.periferi-editorial {
  /* The gap between the page edge and the rail — the page's base gutter. */
  --page-gutter: calc(var(--rail-axis) - var(--rail-tile) / 2);
  /* That same gap mirrored on the rail's far side: where content may begin. */
  --rail-safe: calc(var(--rail-axis) * 2);
}
@media (max-width: 760px) {
  /* No rail at this width — the MENU button sits at the bottom instead. */
  body.periferi-editorial {
    --page-gutter: clamp(16px, 4.6vw, 26px);
    --rail-safe: clamp(16px, 4.6vw, 26px);
  }
}
.periferi-editorial .wrap {
  width: calc(100% - var(--rail-safe) * 2);
  margin-inline: auto;
}
/* The steps sit in the column like everything else now, so the field on each
   end keeps the same distance as the text above it. */

/* The wordmark's box is measured to its letters rather than padded out to the
   logo slot, so "left edge to periferi" is a real distance and not a box with air
   in it — which lets the header CTA answer it with the same number. */
.periferi-editorial .site-header .brand {
  width: max-content;
  text-align: left;
}
.periferi-editorial .site-header > .button {
  right: var(--page-gutter);
}
.periferi-editorial .site-header .brand {
  left: var(--page-gutter);
}

/* Each field carries a mark and, where it applies, what it costs. The marks are
   inline SVG on currentColor, so they take the field's own ink — cream on the
   violet, coral and black grounds, dark on the orange one — without a second
   set of files per colour. */

/* The picture slot.
   The field now reads top to bottom — what it costs, what it is called, what
   happens, then the image filling whatever height is left. The image is the
   last thing so it can absorb the slack rather than the copy having to. */

/* The badge carries the commercial line, so it should look like a thing worth
   reading rather than a tag. A cream lozenge with a dot that borrows the
   field's own colour, so each one belongs to the step it sits on, and the price
   sets its figure larger than its unit the way the pricing slab does. */

/* The wordmark shares the rail's axis again.
   It was left-aligned to the page gutter so its edge could answer the header
   CTA's. Sitting above the tiles, being centred on their axis matters more —
   logo, tiles and MENU now read as one column. */
.periferi-editorial .site-header .brand {
  left: var(--rail-axis);
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
}

/* The badges take the corner.
   Square, flush to the top and right edges of the field, so the corner is
   occupied rather than decorated. No dot and no radius — the hard edge is the
   point, and it matches the flush geometry of the fields themselves. */

/* ===========================================================================
   How it works — the sequence, moving.
   ---------------------------------------------------------------------------
   An arrow drops into each field in turn and travels the row, so the order is
   read even by someone who only glances. It rides on ::before rather than a
   new element: absolutely positioned, so it leaves the four-column grid alone
   and costs nothing in markup.

   Hovering lifts a field clear of its neighbours instead of shaking it. The
   fields are flush, so the seam that opens is the effect — a key rising out of
   a row reads as deliberate where a jitter reads as a rattle.
   ======================================================================== */

/* ===========================================================================
   How it works — the fields answer in order.
   ---------------------------------------------------------------------------
   No marker travelling above the row: the fields themselves rise one after the
   other, so the sequence is read from the thing being sequenced. Each lifts a
   little higher than a hover does, so the wave stays legible as its own
   gesture, then settles with a small rebound.

   Hovering cancels the animation outright rather than pausing it. A running
   animation beats a plain transform declaration, so the hover lift would
   otherwise never apply while the wave was mid-cycle.
   ======================================================================== */

@keyframes how-bounce {
  0%,
  6% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  13% {
    transform: translateY(-17px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4);
  }
  21% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
  }
  25% {
    transform: translateY(-5px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4);
  }
  29%,
  100% {
    transform: translateY(0);
  }
}

/* ===========================================================================
   The standing CTA.
   ---------------------------------------------------------------------------
   It read as a pale card with a dark button on it, which left the button
   fighting the page rather than the bar carrying it. Inverted: the bar is ink
   and the action sits inside it as a cream block, inset by the bar's own
   padding so the nesting is what gives it presence. Square throughout — the
   shape is doing the work, not a radius.
   ======================================================================== */

/* ===========================================================================
   About — where the work happens, and where the data stays.
   ---------------------------------------------------------------------------
   Two columns: what periferi is, and a marker on the place it runs from. The map
   is drawn rather than tiled — an original abstract of a lake, some lines and
   a pin, on currentColor — so the section costs no network request, no tile
   provider and no attribution, and it inherits the page's ink like everything
   else here. It is deliberately a stylisation, not cartography.

   The three promises run under a rule, in the same register as the how-it-
   works row: a claim, then one line of plain language.
   ======================================================================== */

/* Purpose-drawn step illustrations stay fully visible inside each image slot. */

/* Image-led cards: quiet headers and generous, full-bleed photography. */

/* Squarer cards with badges occupying the top-right corner. */

/* Four distinct colour fields, each paired with its image and corner label. */

/* Hover takes over from the wave, giving every card the same lift. */

/* The heading and larger cards form one shared panel. */

/* ========================================================================
   Contact — one sentence to finish.

   No form: the slide is a sentence set at headline size with three blanks
   to write into — who you are, what the website is for, where to answer —
   and the round arrow at its full stop. A blank is exactly as wide as what
   stands in it: the field sits on a hidden copy of its own text (data-value,
   kept by contact.ts) in an inline grid, so the sentence keeps its shape
   while it is typed. The rule under a blank is its state — pale at rest,
   ink once written, orange while writing, red when the answer was refused.

   Above it, the eyebrow and a live line: the time in Zürich and whether we
   are answering right now. Below, what happens next as one row of three,
   and the way out for anyone only looking.

   The slide is cobalt — every slide has a colour of its own, and this one
   had been a warm white between the questions' ink and the close's grey —
   so the sentence is cream, the arrow a cream disc with the blue in it,
   and the accent stays orange: the live dot, the caret, a blank in focus.
   ======================================================================== */
.periferi-editorial .demo-section {
  --slide-bg: #2547d6;
  --slide-ink: #fbf9ef;
  --slide-copy: #e6ebfd;
  --slide-line: #d5dcfa;
  --slide-mute: #c9d2f7;
  --slide-rule: #fbf9ef40;
  --slide-blank: #fbf9ef73;
  --slide-accent: #ef7f37;
  --slide-error: #ffcdbf;
  color: var(--slide-ink);
  text-align: left;
}

/* The head: eyebrow left, the live line right. */
.demo-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.periferi-editorial .demo-section .demo-head > .eyebrow {
  margin: 0;
  color: var(--slide-mute);
}
.periferi-editorial .demo-section .demo-head > .demo-live {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--slide-ink);
}
.demo-live-dot {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: var(--slide-accent);
  animation: demo-live-pulse 2.4s ease-out infinite;
}
.demo-live[data-open="false"] > .demo-live-dot {
  background: var(--slide-blank);
  animation: none;
}
@keyframes demo-live-pulse {
  0% {
    box-shadow: 0 0 0 0 #ef7f3780;
  }
  70% {
    box-shadow: 0 0 0 0.55em #ef7f3700;
  }
  100% {
    box-shadow: 0 0 0 0 #ef7f3700;
  }
}

/* The sentence. */
.periferi-editorial .demo-section .ask {
  max-width: none;
  margin: clamp(18px, 4.2cqb, 44px) 0 0;
}
.periferi-editorial .ask-sentence {
  margin: 0;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-sentence);
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: var(--slide-ink);
  text-wrap: pretty;
}

/* A blank: the field stacked on a hidden copy of its text, so the box is as
   wide as the words and never wider than the line. */
.blank {
  display: inline-grid;
  grid-template-columns: minmax(0, max-content);
  vertical-align: baseline;
  max-width: 100%;
  margin: 0 0 0 0.04em;
  border-bottom: max(2px, 0.045em) solid var(--slide-blank);
  transition: border-color 0.2s ease;
}
/* The copy of the words that makes the blank as wide as them. It is capped
   with the blank at the width of the line, and clipped there: an address
   longer than the line would otherwise go on past the edge of the page —
   invisible, but still part of what the page can scroll to, which widened
   the document and, on a phone, zoomed the whole page out to fit it. */
.blank::after {
  content: attr(data-value);
  grid-area: 1 / 1;
  padding-right: 0.06em;
  visibility: hidden;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}
.periferi-editorial .blank > input {
  grid-area: 1 / 1;
  width: 0;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--slide-ink);
  caret-color: var(--slide-accent);
  appearance: none;
}
.periferi-editorial .blank > input::placeholder {
  color: #8e897c;
  opacity: 1;
}
.blank:has(> input:not(:placeholder-shown)) {
  border-bottom-color: var(--slide-ink);
}
.blank:focus-within {
  border-bottom-color: var(--slide-accent);
}
.blank:has(> input[aria-invalid="true"]) {
  border-bottom-color: var(--slide-error);
}

/* The arrow at the full stop: the round ink arrow, a little under the cap
   height, orange under the pointer. */
.ask-go {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 0.72em;
  height: 0.72em;
  margin: 0 0 0.08em 0.02em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--slide-ink);
  color: var(--slide-bg);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  transition:
    background 0.24s ease,
    color 0.24s ease;
}
.ask-go > span {
  display: block;
  font-size: 0.42em;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ask-go:hover {
  background: var(--slide-accent);
  color: #181714;
}
.ask-go:hover > span,
.ask-go:focus-visible > span {
  transform: translate(0.08em, -0.08em);
}
.ask-go:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 3px;
}

/* The refusal is pinned at 12px by an older !important; matched rather than
   unpicked. It stays in the DOM while empty so it is announced when it
   fills, and gives up its margin rather than its box. */
.periferi-editorial .demo-section .field-error {
  margin: clamp(8px, 1.4cqb, 14px) 0 0;
  font-size: clamp(11px, 0.9cqi, 14px) !important;
  color: var(--slide-error);
}
.periferi-editorial .demo-section .field-error:empty {
  margin: 0;
}

/* Prompts for the second blank: one tap writes it. */
.ask-prompts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(6px, 0.9cqb, 10px) clamp(12px, 1.2cqi, 22px);
  margin: clamp(12px, 2.2cqb, 24px) 0 0;
}
.ask-prompts > span {
  font-size: clamp(10px, 0.82cqi, 13px);
  color: var(--slide-mute);
}
.ask-prompts > button {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--slide-rule);
  background: none;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.82cqi, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slide-ink);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.ask-prompts > button:hover,
.ask-prompts > button:focus-visible {
  color: var(--slide-accent);
  border-bottom-color: var(--slide-accent);
  outline: 0;
}

/* What happens next — one row of three under a rule, then the footnote and
   the way out on a line of their own. */
.demo-foot {
  margin-top: clamp(24px, 5.5cqb, 60px);
  padding-top: clamp(14px, 2.6cqb, 28px);
  border-top: 1px solid var(--slide-rule);
}
.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demo-steps > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number claim"
    "number line";
  column-gap: clamp(10px, 1cqi, 18px);
  align-content: start;
  padding: 0 clamp(16px, 2.2cqi, 40px);
}
.demo-steps > li + li {
  border-left: 1px solid var(--slide-rule);
}
/* The deck's numerals, in the accent. */
.demo-steps > li > span {
  grid-area: number;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-numeral);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--slide-accent);
}
.demo-steps > li > b {
  grid-area: claim;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-claim);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--slide-ink);
}
.periferi-editorial .demo-steps > li > p {
  grid-area: line;
  margin: clamp(4px, 0.8cqb, 8px) 0 0;
  font-size: calc(var(--t-body) * 0.9);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--slide-line);
}
.demo-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  margin-top: clamp(14px, 2.6cqb, 28px);
  padding-top: clamp(10px, 1.8cqb, 18px);
  border-top: 1px solid var(--slide-rule);
}
.periferi-editorial .demo-section .demo-assurance {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(10px, 0.82cqi, 13px);
  line-height: 1.5;
  color: var(--slide-copy);
}
.periferi-editorial .demo-section .ask-hint {
  display: inline;
  margin: 0 0 0 0.6em;
  font-size: inherit;
  color: var(--slide-mute);
}
.periferi-editorial .demo-ways > .inline-link {
  margin: 0;
}

@media (max-width: 860px) {
  .demo-head {
    gap: 6px 16px;
  }
  .periferi-editorial .demo-section .ask {
    margin-top: clamp(16px, 3svh, 28px);
  }
  .periferi-editorial .ask-sentence {
    font-size: clamp(27px, 8.6vw, 44px);
    line-height: 1.16;
  }
  .demo-foot {
    margin-top: clamp(22px, 4svh, 36px);
  }
  .demo-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-steps > li {
    padding: 0;
  }
  .demo-steps > li + li {
    border-left: 0;
    border-top: 1px solid var(--slide-rule);
    margin-top: 12px;
    padding-top: 12px;
  }
  .demo-ways {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blank,
  .ask-go,
  .ask-go > span,
  .ask-prompts > button {
    transition: none;
  }
  .demo-live-dot {
    animation: none;
  }
}

/* Keep navigation hover clean: no disc behind the icon. */
.periferi-editorial .side-menu .rail-icon::before {
  content: none;
}

/* A viewport-wide opening layer dissolves to expose the page underneath. */
.hero-opening {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.hero-opening[hidden] {
  display: none;
}
.hero-opening-backdrop {
  position: absolute;
  inset: 0;
  background: #fbf9ef;
}
.hero-opening .headline-pixels {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.hero-opening-skip {
  position: absolute;
  right: 24px;
  top: 88px;
  z-index: 2;
  padding: 12px 16px;
  border: 1px solid #18171433;
  border-radius: 9px;
  background: #fbf9efd9;
  font:
    900 11px/1 "Youth",
    Arial,
    sans-serif;
  letter-spacing: 0.06em;
  color: #181714;
  cursor: pointer;
  pointer-events: auto;
}
.hero-opening-skip:hover {
  background: #181714;
  color: #fbf9ef;
}

/* The mosaic: twelve fitted rectangles, the second the largest, photos and
   text tiles shuffled within their own kinds. */
.opening-collage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  /* Twelve rectangles of four sizes — tall, wide, big, small — so the same
     photos land somewhere different every time they are shuffled. */
  grid-template-areas:
    "a d b b c c"
    "a d e f c c"
    "g h h i l l"
    "k k j j l l";
  gap: 6px;
  padding: 6px;
  width: 100%;
  height: 100%;
  background: #fbf9ef;
}
.hero-opening .opening-collage {
  position: absolute;
  inset: 0;
  /* The fading backdrop owns the colour so departing tiles reveal the headline. */
  background: transparent;
}
.opening-collage[hidden] {
  display: none;
}

/* Each rectangle of the collage: a frame that crops its picture and sits at
   its own slight angle — opening-collage.ts draws a fresh --tilt on every
   shuffle, so the mosaic lands differently on every reload. The opening
   animates opacity and scale, which compose with the angle rather than
   replacing it. The label on a concept tile and the Swiss cross position
   themselves against this box. */
.opening-photo {
  position: relative;
  overflow: hidden;
  background: #efece1;
  transform: rotate(var(--tilt, 0deg));
}
.opening-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .opening-photo {
    transform: none;
  }
}

.opening-concept img {
  object-position: top;
}
.opening-concept > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 7px;
  background: #181714;
  color: #fbf9ef;
  font:
    900 8px/1 "Youth",
    Arial,
    sans-serif;
  letter-spacing: 0.08em;
}
.opening-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: clamp(14px, 2vw, 32px);
  text-align: center;
  color: #181714;
  background: #f3efe4;
}
.opening-tile strong {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.opening-tile > span:last-child {
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.4;
  color: #6a6459;
}
.tile-kicker {
  font: 650 9px/1.6 var(--sans);
  letter-spacing: 0.14em;
  color: #8e827c;
}

.swiss-cross {
  position: absolute;
  right: 18px;
  top: 8px;
  font:
    900 64px/1 "Youth",
    Arial,
    sans-serif;
  color: #ef7f37;
}

.order-check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #181714;
  color: #fbf9ef;
  font-size: 18px;
}

@media (max-width: 600px) {
  .opening-collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "a b b c"
      "a d e c"
      "f f g g"
      "h i i j"
      "k k l l"
      "k k l l";
  }
  .opening-tile strong {
    font-size: clamp(16px, 5vw, 24px);
  }
}

/* A quiet echo of the opening remains behind the readable hero. */
.periferi-editorial .hero {
  isolation: isolate;
}
.hero-mosaic-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(0.3);
  opacity: 0.17;
  mask-image: linear-gradient(
    to bottom,
    #00000088 0%,
    #00000099 40%,
    #000000c0 75%,
    #000 100%
  );
  animation: mosaic-breathe 12s ease-in-out infinite alternate;
}

.hero-mosaic-background .opening-concept > span {
  display: none;
}
.hero-mosaic-background .opening-collage {
  width: 100%;
  height: 100%;
}
.hero.intro-running .hero-mosaic-background {
  opacity: 0;
  animation-play-state: paused;
}
.hero[data-motion-paused="true"] .hero-mosaic-background {
  animation-play-state: paused;
}
@keyframes mosaic-breathe {
  from {
    transform: translate(var(--mosaic-x, 0px), var(--mosaic-y, 0px)) scale(1.02);
  }
  to {
    transform: translate(var(--mosaic-x, 0px), var(--mosaic-y, 0px)) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mosaic-background {
    animation: none;
  }
}
/* Compact tiles carry less type. */
.opening-tile[data-compact="true"] strong {
  font-size: clamp(16px, 1.7vw, 28px);
}
.opening-tile[data-compact="true"] .swiss-cross {
  font-size: 40px;
  right: 12px;
  top: 6px;
}
.opening-tile[data-compact="true"] .tile-kicker {
  font-size: 8px;
}
.opening-tile[data-compact="true"] code {
  font-size: 10px;
}
@media (max-width: 600px) {
  .tile-kicker {
    font-size: 7px;
  }
  .opening-tile > span:last-child {
    font-size: 9px;
  }
  .swiss-cross {
    right: 10px;
    top: 5px;
    font-size: 35px;
  }
  .opening-concept > span {
    font-size: 7px;
    bottom: 4px;
    left: 4px;
    padding: 3px;
  }
}

/* Never show the floating contact bar before its initial section is known. */

html.home-startup {
  scroll-behavior: auto;
  overflow-anchor: none;
}
html.home-startup body {
  overflow-anchor: none;
}

/* A quieter two-line promise, with supporting copy kept at reading size. */
.periferi-editorial .hero.wrap:has(.hero-support) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding-block: clamp(100px, 13svh, 150px);
}
.periferi-editorial .hero:has(.hero-support) h1.kinetic-headline {
  font-size: clamp(56px, 10cqw, 156px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.periferi-editorial .hero:has(.hero-support) .kinetic-top {
  gap: 0.2em;
}
.periferi-editorial .hero:has(.hero-support) .kinetic-word {
  width: auto;
  line-height: inherit;
  color: #191714;
}
.periferi-editorial .hero:has(.hero-support) .kinetic-bottom {
  line-height: inherit;
  margin-top: 0.05em;
}
.periferi-editorial .hero:has(.hero-support) .hero-bottom {
  margin-top: clamp(28px, 5svh, 56px);
  gap: 28px;
}
.periferi-editorial .hero:has(.hero-support) .hero-bottom > .hero-support {
  max-width: 600px;
  font-size: clamp(18px, 1.8vw, 27px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #464138;
}
.periferi-editorial .hero:has(.hero-support) .hero-intro-link {
  font-size: clamp(12px, 1vw, 16px);
}
@media (max-width: 760px) {
  .periferi-editorial .hero:has(.hero-support) h1.kinetic-headline {
    font-size: clamp(38px, 11.4vw, 82px);
  }
  .periferi-editorial .hero:has(.hero-support) .hero-bottom > .hero-support {
    font-size: 18px;
    max-width: 340px;
  }
}

/* Quiet cursor depth in the echo behind the headline. */
.hero-mosaic-background .opening-collage {
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  transform: translate3d(var(--mosaic-x, 0px), var(--mosaic-y, 0px), 0);
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* ===========================================================================
   The hero at rest — the word that turns, the live line, the way in.
   ---------------------------------------------------------------------------
   The opening is untouched: the collage, the letters resolving, the quiet
   echo left behind the headline. What changes is what the hero does once it
   has settled. The word in the headline keeps turning — website, shop,
   portfolio, studio, journal, project — each letter leaving and arriving
   the way the opening brought it (hero-words.ts, which stands down whenever
   the opening runs and hands its letters back). Around the headline, the
   deck's own furniture: two eyebrows at the top, the live line and the
   motion controls on the foot, and the way in as the deck's ink pill.
   ======================================================================== */
.hero-top,
.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  text-align: left;
}
.hero-top {
  top: clamp(96px, 10svh, 124px);
}
.hero-foot {
  bottom: clamp(18px, 3svh, 32px);
  align-items: center;
}
.periferi-editorial .hero .hero-top > .eyebrow,
.periferi-editorial .hero .hero-foot > .eyebrow {
  margin: 0;
  max-width: none;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: #6a6459;
}
.live-line {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.periferi-editorial .hero .hero-foot > .live-line {
  color: #181714;
}
.live-line[data-open="false"] > .demo-live-dot {
  background: #c9c3b1;
  animation: none;
}
.hero-foot > .headline-motion-controls {
  position: static;
  margin: 0;
}

/* The way in: the deck's ink pill, the mark orange. */
.periferi-editorial .hero:has(.hero-support) .hero-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.55em 0.55em 1.2em;
  border: 0;
  border-radius: 9px;
  background: #181714;
  color: #fbf9ef;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.periferi-editorial .hero:has(.hero-support) .hero-intro-link:hover {
  transform: translateY(-2px);
}
.periferi-editorial .hero:has(.hero-support) .hero-intro-link:focus-visible {
  outline: 2px solid #ef7f37;
  outline-offset: 4px;
}
.periferi-editorial .hero-intro-link .round-arrow {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  font-size: 1em;
  background: #ef7f37;
  color: #181714;
  overflow: hidden;
}
.periferi-editorial .hero-intro-link .round-arrow > span {
  display: block;
  font-size: 1.1em;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.periferi-editorial .hero-intro-link:hover .round-arrow > span,
.periferi-editorial .hero-intro-link:focus-visible .round-arrow > span {
  transform: translate(3px, -3px);
}

@media (max-width: 760px) {
  .hero-top {
    top: clamp(84px, 11svh, 104px);
  }
  /* Right-aligned, clear of the MENU button that floats bottom left. */
  .hero-foot {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
  }
  /* A long turn of the word may take the line: let it wrap under "Your". */
  .periferi-editorial .hero:has(.hero-support) .kinetic-top {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mosaic-background .opening-collage {
    transform: none;
    transition: none;
  }
  .periferi-editorial .hero:has(.hero-support) .hero-intro-link,
  .periferi-editorial .hero-intro-link .round-arrow > span {
    transition: none;
  }
}

/* A compact price band leads directly into the signed footer. */

/* ===========================================================================
   Websites — a reel of pages.
   ---------------------------------------------------------------------------
   The six sample pages ride a reel that runs the full width of the window,
   under the rails and past the card's edges, moving slowly to the left and
   looping without a seam: the belt carries three sets and slides by one,
   which the eye cannot tell from standing still. Each page also drifts down
   through its own frame, so the reel reads as websites being read, not
   posters. It pauses under the pointer. The foot keeps the controls: a step
   back or forward (website-gallery.ts nudges the track by one frame), the
   note, and Pause, which stops everything. On phones the belt stands still
   and the reel is a plain scroller with snap points — a moving target is no
   place for a thumb. Above it, the headline, one plain line and the way in.
   ======================================================================== */
.periferi-editorial .works-section {
  --slide-bg: #f34435;
  --slide-ink: #fff9ef;
  --slide-copy: #fff0e6;
  --slide-mute: #ffd6cb;
  --slide-rule: #fff9ef40;
  --slide-accent: #181714;
  --slide-paper: #fbf9ef;
  color: var(--slide-ink);
}
/* The reel is let out to the window's edges; clip is not a scroll container,
   so the sticky deck keeps working. */
.periferi-editorial .site-frame {
  overflow-x: clip;
}

/* The head: eyebrow left, the count right. */
.works-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.periferi-editorial .works-section .works-top > .eyebrow {
  margin: 0;
  padding: 0;
  color: var(--slide-mute);
}

/* The lead: headline left, one plain line and the way in right. */
.works-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(28px, 5cqi, 96px);
  align-items: end;
  margin-top: clamp(12px, 2.2cqb, 22px);
}
.periferi-editorial .works-section .works-lead > h2 {
  margin: 0;
  max-width: none;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
  text-wrap: balance;
}
.works-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2cqb, 20px);
  padding-bottom: 0.1em;
}
.periferi-editorial .works-section .works-line {
  margin: 0;
  max-width: 40ch;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--slide-copy);
}
.works-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.55em 0.55em 1.2em;
  border-radius: 9px;
  background: var(--slide-paper);
  color: #181714;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 0.95cqi, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-cta:hover {
  transform: translateY(-2px);
}
.works-cta:focus-visible {
  outline: 2px solid var(--slide-paper);
  outline-offset: 4px;
}
.works-cta-mark {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: #181714;
  color: var(--slide-paper);
}

/* The reel. */
.works-reel {
  --reel-gap: clamp(14px, 1.4vw, 26px);
  --reel-card: clamp(240px, 24vw, 520px);
  position: relative;
  width: auto;
  margin: clamp(20px, 4cqb, 44px) calc(50% - 50vw) 0;
  overflow: hidden;
  /* The belt is as wide as eighteen frames; without this its width would
     count toward the slide body’s and push the whole reel off the page. */
  contain: inline-size;
}
.works-belt {
  width: max-content;
  animation: works-reel 72s linear infinite;
  animation-play-state: paused;
}
@keyframes works-reel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / 3));
  }
}
.works-track {
  display: flex;
  gap: var(--reel-gap);
  width: max-content;
  padding-right: var(--reel-gap);
  transform: translateX(var(--shift, 0px));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-track.is-jumping {
  transition: none;
}
.works-reel .works-card {
  flex: none;
  width: var(--reel-card);
  color: inherit;
  text-decoration: none;
}
/* Runs only on screen, rests under the pointer, and never when asked not to. */
.works-reel.visible .works-belt {
  animation-play-state: running;
}
.works-reel:hover .works-belt,
body.paused .works-belt,
body.static-previews .works-belt {
  animation-play-state: paused;
}

/* A page in its frame, drifting down through it. */
.works-frame {
  --travel: -50%;
  display: block;
  position: relative;
  aspect-ratio: 1.3;
  overflow: hidden;
  background: #22201c;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-card:hover .works-frame,
.works-card:focus-visible .works-frame {
  transform: translateY(-4px);
}
.works-card:focus-visible {
  outline: 2px solid var(--slide-paper);
  outline-offset: 4px;
}

/* The foot: the arrows, the note, the pause. */
.works-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(16px, 2.8cqb, 30px);
  padding-top: clamp(10px, 1.6cqb, 16px);
  border-top: 1px solid var(--slide-rule);
  font-size: clamp(10px, 0.8cqi, 12px);
  color: var(--slide-mute);
}
.works-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.works-foot .text-button {
  color: var(--slide-copy);
}
.works-foot .text-button:hover {
  color: var(--slide-ink);
}

@media (max-width: 860px) {
  .works-top {
    gap: 6px 16px;
  }
  .works-lead {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    align-items: start;
  }
  .works-aside {
    padding-bottom: 0;
  }
  /* A plain scroller: the belt stands still, the copies are gone, the
     first frame lines up with the text. */
  .works-reel {
    --reel-card: 72vw;
    margin-top: clamp(16px, 3svh, 26px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-padding-inline: var(--rail-safe, 20px);
  }
  .works-reel::-webkit-scrollbar {
    display: none;
  }
  .works-belt {
    animation: none;
  }
  .works-track {
    padding-inline: var(--rail-safe, 20px);
    transform: none;
    transition: none;
  }
  .works-reel .works-card {
    scroll-snap-align: start;
  }

  .works-foot {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* ===========================================================================
   How it works — four steps, and the conversation that makes them happen.
   ---------------------------------------------------------------------------
   periferi's promise is a website by message, so the slide shows exactly that:
   on the right a thread in which a website comes about in ten messages —
   the brief, the logo, a first design as a card, a change, the go-ahead,
   and "yourname.ch is live" — playing out as the slide arrives, periferi's
   replies after a moment of typing. On the left the four steps stand as an
   index: numeral, name, tag on a rule, and the one line of the step you are
   on unfolds beneath it. As the conversation reaches a step, the step
   lights — pale ahead, ink behind, orange now. A step under the pointer,
   or chosen by key, takes the thread to that point (how-it-works.ts).
   ======================================================================== */
.periferi-editorial .process-section {
  --slide-ink: #181714;
  --slide-copy: #5f5b52;
  --slide-line: #6b6558;
  --slide-mute: #6a6459;
  --slide-rule: #a08fd2;
  --slide-pale: #ab9bdf;
  --slide-accent: #ef7f37;
  --slide-paper: #fbf9ef;
  color: var(--slide-ink);
}

/* The head: eyebrow left, the count right. */
.steps-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.periferi-editorial .process-section .steps-head > .eyebrow {
  margin: 0;
  color: var(--slide-mute);
}

/* Two columns: the steps, the thread. */
.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: clamp(28px, 5cqi, 96px);
  align-items: start;
  margin-top: clamp(12px, 2.2cqb, 22px);
}
.steps-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.periferi-editorial .process-section .steps-side > h2 {
  margin: 0;
  max-width: none;
  font-size: calc(var(--t-h2) * 0.92);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
  text-wrap: balance;
}
.steps {
  list-style: none;
  width: 100%;
  margin: clamp(16px, 3cqb, 32px) 0 0;
  padding: 0;
}
.step {
  border-top: 1px solid var(--slide-rule);
}
.step:last-child {
  border-bottom: 1px solid var(--slide-rule);
}
.step-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 1.2cqi, 20px);
  width: 100%;
  margin: 0;
  padding: calc(var(--row-pad) * 0.9) 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
.step-pick:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 4px;
}
.step-no {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-numeral);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--slide-pale);
  transition: color 0.35s ease;
}
.step.is-done .step-no {
  color: var(--slide-ink);
}
.step.is-active .step-no {
  color: var(--slide-accent);
}
.step-name {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--t-claim) * 1.25);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--slide-mute);
  transition: color 0.35s ease;
}
.step.is-active .step-name,
.step.is-done .step-name,
.step-pick:hover .step-name {
  color: var(--slide-ink);
}
.step-tag {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slide-mute);
}
/* The one line of the step you are on unfolds; the others keep theirs
   folded, so the column holds its shape. */
.step-line {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.step.is-active .step-line {
  grid-template-rows: 1fr;
}
.periferi-editorial .step-line > p {
  overflow: hidden;
  margin: 0;
  max-width: 34ch;
  font-size: calc(var(--t-body) * 0.95);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--slide-line);
}
.step.is-active .step-line > p {
  padding-bottom: calc(var(--row-pad) * 0.9);
}
.periferi-editorial .steps-side > .inline-link {
  margin-top: clamp(14px, 2.4cqb, 24px);
}

/* The thread: a pale frame, the bar with the live dot, messages that stick
   to the foot so the newest are always in view. */
.steps-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(320px, 64cqb, 580px);
  margin: 0;
  overflow: hidden;
  border: 1px solid #18171426;
  border-radius: 18px;
  background: var(--slide-paper);
  box-shadow: 0 24px 60px #1b140d1f;
}
.chat-bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.6cqb, 14px) clamp(14px, 1.4cqi, 20px);
  border-bottom: 1px solid #18171414;
}
.chat-name {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.1cqi, 18px);
  letter-spacing: -0.02em;
  color: var(--slide-ink);
}
.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(10px, 0.8cqi, 12px);
  letter-spacing: 0.02em;
  color: var(--slide-mute);
}
.chat-status > .demo-live-dot {
  width: 8px;
  height: 8px;
}
.chat-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(8px, 1.2cqb, 12px);
  margin: 0;
  padding: clamp(14px, 1.4cqi, 20px);
  list-style: none;
  overflow: hidden;
}
.chat-msg {
  max-width: 82%;
  padding: clamp(9px, 1.4cqb, 12px) clamp(12px, 1.2cqi, 16px);
  border-radius: 16px;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: clamp(13px, 1.05cqi, 16px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.chat-msg:not(.is-sent) {
  display: none;
}
.chat-msg.is-landing {
  animation: chat-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chat-msg.from-you {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--slide-ink);
  color: var(--slide-paper);
}
.chat-msg.from-periferi {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #ebe6da;
  color: var(--slide-ink);
}
.chat-msg > b {
  font-weight: 700;
}
.chat-file {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 9px;
  border: 1px solid #fbf9ef59;
  border-radius: 6px;
  font-size: 0.82em;
  letter-spacing: 0.02em;
}
/* The first design, as a card in the thread: a corner of the coral site. */
.chat-card {
  display: block;
  margin-top: 8px;
  padding: clamp(10px, 1.4cqb, 14px) clamp(12px, 1.2cqi, 16px);
  border-radius: 10px;
  background: #f34435;
  color: #fff9ef;
}
.chat-card > b {
  display: block;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.1em;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.chat-card > i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.9;
}
.chat-card > em {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--slide-accent);
  color: var(--slide-ink);
  font-family: "Youth", Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Typing: three dots that take turns. */
.chat-typing {
  display: none;
  align-self: flex-start;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: #ebe6da;
}
.chat-typing.is-on {
  display: inline-flex;
}
.chat-typing > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slide-mute);
  animation: chat-dot 1s ease-in-out infinite;
}
.chat-typing > span:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-typing > span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .steps-head {
    gap: 6px 16px;
  }
  .steps-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(18px, 3svh, 28px);
  }
  .periferi-editorial .process-section .steps-side > h2 {
    font-size: clamp(30px, 8.6vw, 44px);
  }
  .step-no {
    font-size: clamp(24px, 7vw, 34px);
  }
  .step-name {
    font-size: clamp(17px, 5vw, 22px);
  }
  .steps-chat {
    height: clamp(360px, 100vw, 480px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step-no,
  .step-name,
  .step-line {
    transition: none;
  }
  .chat-msg.is-landing,
  .chat-typing > span {
    animation: none;
  }
}

/* ===========================================================================
   Plans — one price, one switch.
   ---------------------------------------------------------------------------
   Two plans were two boxes to compare. Now there is one figure, at the
   scale of the hero's words, and one switch under it: with an assistant on
   your website, or without. As the switch goes over the figure's tens digit
   rolls from 3 to 4, the two things the assistant adds fill in on the list
   beside it, and the way in changes its words. Nothing to compare — one
   decision, made on the page. plans.ts keeps the state on the section as
   data-assistant; everything visual follows from that. The rest is the
   anatomy of the slides around it: eyebrow, headline, the promises on the
   foot, a way in and a way to ask.
   ======================================================================== */
.periferi-editorial .plans-section {
  --slide-ink: #181714;
  --slide-copy: #3a2213;
  --slide-line: #4a2d1a;
  --slide-mute: #6b3a1c;
  --slide-soft: #8a5230;
  --slide-rule: #18171433;
  --slide-accent: #181714;
  --slide-paper: #fbf9ef;
  color: var(--slide-ink);
}

/* The head: eyebrow left, the terms right. */
.price-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.periferi-editorial .plans-section .price-head > .eyebrow {
  margin: 0;
  color: var(--slide-mute);
}

/* Lead and list, side by side. */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5cqi, 96px);
  align-items: start;
  margin-top: clamp(16px, 3cqb, 32px);
}
.price-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.periferi-editorial .plans-section h2 {
  margin: 0;
  font-size: calc(var(--t-h2) * 0.76);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
  text-wrap: balance;
}
.periferi-editorial .plans-section .plans-title-muted {
  color: #7a4a2a;
}
.periferi-editorial .plans-section .price-blurb {
  margin: clamp(10px, 1.6cqb, 18px) 0 0;
  max-width: 36ch;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--slide-copy);
}

/* The figure. The tens digit is a column of two glyphs, 3 over 4, clipped
   to one line; the switch slides the column up a line. */
.price-figure {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1cqi, 20px);
  margin: clamp(14px, 2.6cqb, 28px) 0 0;
}
.price-amount {
  display: inline-flex;
  align-items: flex-start;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-price);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--slide-ink);
}
.price-amount > span {
  display: block;
  line-height: 0.82;
}
.price-roll {
  display: grid;
  height: 0.82em;
  overflow: clip;
}
.price-roll > span {
  display: block;
  height: 0.82em;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.plans-section[data-assistant="on"] .price-roll > span {
  transform: translateY(-0.82em);
}
.price-unit {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1.1cqi, 18px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slide-mute);
}

/* The switch: a pill with a knob, drawn in ink on the orange, its label in
   the display face with the difference in a small ring. */
.price-switch {
  --sw-w: clamp(54px, 4.2cqi, 76px);
  --sw-h: clamp(30px, 2.3cqi, 42px);
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2cqi, 20px);
  margin: clamp(14px, 2.6cqb, 28px) 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-claim);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--slide-ink);
  cursor: pointer;
  appearance: none;
}
.price-switch-track {
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  border: 2px solid var(--slide-ink);
  border-radius: 999px;
  background: transparent;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.price-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--sw-h) - 10px);
  height: calc(var(--sw-h) - 10px);
  border-radius: 50%;
  background: var(--slide-ink);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
}
.price-switch[aria-checked="true"] .price-switch-track {
  background: var(--slide-ink);
}
.price-switch[aria-checked="true"] .price-switch-knob {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
  background: var(--slide-paper);
}
.price-switch:hover .price-switch-track {
  box-shadow: 0 0 0 4px #18171426;
}
.price-switch:focus-visible {
  outline: 2px solid var(--slide-ink);
  outline-offset: 6px;
}
.price-switch-label > b {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.12em 0.55em 0.08em;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 0.8em;
  letter-spacing: 0.02em;
  vertical-align: 0.06em;
}

/* What is in it: five lines on rules, each behind a small ink square. The
   two the assistant adds are outlined and quiet until the switch is on. */
.price-includes {
  display: flex;
  flex-direction: column;
}
.periferi-editorial .plans-section .price-includes > .eyebrow {
  margin: 0 0 clamp(8px, 1.4cqb, 14px);
  color: var(--slide-mute);
}
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.price-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 1.2cqi, 20px);
  padding: calc(var(--row-pad) * 0.55) 0;
  border-top: 1px solid var(--slide-rule);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--t-claim) * 0.9);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--slide-ink);
  transform-origin: left center;
  transition:
    color 0.35s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Under the pointer a line steps forward; an assistant line shows itself in
   full even while the switch is off. */
.price-list > li:hover {
  transform: translateX(0.35em) scale(1.03);
}
.plans-section[data-assistant="off"] .price-list > .price-extra:hover {
  color: var(--slide-ink);
}
.price-list > li:last-child {
  border-bottom: 1px solid var(--slide-rule);
}
.price-list > li::before {
  content: "";
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  border: 2px solid var(--slide-ink);
  background: var(--slide-ink);
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}
.price-list > li > i {
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slide-mute);
  transition: color 0.35s ease;
}
.plans-section[data-assistant="off"] .price-list > .price-extra {
  color: var(--slide-soft);
}
.plans-section[data-assistant="off"] .price-list > .price-extra::before {
  border-color: var(--slide-soft);
  background: transparent;
}
.plans-section[data-assistant="on"] .price-list > .price-extra > i {
  color: var(--slide-ink);
}

/* The foot: what both include, then the way in and the way to ask. */
.price-foot {
  margin-top: clamp(18px, 3.4cqb, 36px);
  padding-top: clamp(12px, 1.9cqb, 20px);
  border-top: 1px solid var(--slide-rule);
}
.price-promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.price-promises > li {
  padding: 0 clamp(16px, 2.2cqi, 40px);
}
.price-promises > li:first-child {
  padding-left: 0;
}
.price-promises > li:last-child {
  padding-right: 0;
}
.price-promises > li + li {
  border-left: 1px solid var(--slide-rule);
}
.price-promises b {
  display: block;
  margin-bottom: clamp(3px, 0.6cqb, 6px);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--t-claim) * 0.9);
  letter-spacing: -0.01em;
  color: var(--slide-ink);
}
.price-promises span {
  display: block;
  font-size: calc(var(--t-body) * 0.88);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--slide-line);
}
.price-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  margin-top: clamp(12px, 2.1cqb, 22px);
  padding-top: clamp(10px, 1.6cqb, 16px);
  border-top: 1px solid var(--slide-rule);
}
.periferi-editorial .plans-section .price-ways > .inline-link {
  margin: 0;
  border-bottom-color: #18171466;
}

/* The way in: cream pill, ink mark, and words that follow the switch. */
.price-start {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.55em 0.55em 1.2em;
  border-radius: 9px;
  background: var(--slide-paper);
  color: var(--slide-ink);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 0.95cqi, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.price-start:hover {
  transform: translateY(-2px);
}
.price-start:focus-visible {
  outline: 2px solid var(--slide-ink);
  outline-offset: 4px;
}
.price-start-mark {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--slide-ink);
  color: var(--slide-paper);
  font-size: 1em;
}
.price-start > .when-on,
.plans-section[data-assistant="on"] .price-start > .when-off {
  display: none;
}
.plans-section[data-assistant="on"] .price-start > .when-on {
  display: inline;
}

@media (max-width: 860px) {
  .price-head {
    gap: 6px 16px;
  }
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(20px, 3.6svh, 32px);
    margin-top: clamp(14px, 2.4svh, 22px);
  }
  .periferi-editorial .plans-section h2 {
    font-size: clamp(30px, 8.6vw, 44px);
  }
  .price-amount {
    font-size: clamp(88px, 28vw, 124px);
  }
  .price-switch {
    --sw-w: 58px;
    --sw-h: 32px;
    align-items: flex-start;
    font-size: clamp(15px, 4.4vw, 19px);
  }
  .price-list > li {
    grid-template-columns: auto minmax(0, 1fr);
    padding: clamp(10px, 1.8svh, 14px) 0;
    font-size: clamp(14px, 4.2vw, 18px);
  }
  .price-list > li > i {
    grid-column: 2;
    white-space: normal;
  }
  .price-promises {
    grid-template-columns: minmax(0, 1fr);
  }
  .price-promises > li {
    padding: 0;
  }
  .price-promises > li + li {
    border-left: 0;
    border-top: 1px solid var(--slide-rule);
    margin-top: 12px;
    padding-top: 12px;
  }
  .price-ways {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-roll > span,
  .price-switch-track,
  .price-switch-knob,
  .price-list > li,
  .price-list > li::before,
  .price-list > li > i,
  .price-start {
    transition: none;
  }
}

/* ===========================================================================
   Questions — the page's one ink slide.
   ---------------------------------------------------------------------------
   Not an accordion. The five questions stand in a column at reading size,
   and the one under the pointer — or chosen by tap or key — puts its answer
   up on the right at display size, under its numeral. The slide is read the
   way questions are asked: eyes down the list, the answer changing beside
   it, nothing to unfold. Every answer is in the markup under its own
   question; faq.ts only chooses which one shows. On phones that order is
   also the layout: the answer opens under the question.

   The grid: one column of question rows, then a spare row that takes what
   an answer needs beyond them, so a long answer never stretches the list.
   ======================================================================== */
.periferi-editorial .faq-section {
  --slide-bg: #181714;
  --slide-ink: #fbf9ef;
  --slide-copy: #b5afa0;
  --slide-mute: #8e897c;
  --slide-dim: #302d27;
  --slide-rule: #fbf9ef26;
  --slide-accent: #ef7f37;
  color: var(--slide-ink);
}
.periferi-editorial .faq-section > .deck-card > .deck-body {
  display: block;
}
.periferi-editorial .faq-section .deck-body > .eyebrow {
  margin: 0;
  color: var(--slide-mute);
}
.periferi-editorial .faq-section h2 {
  margin: clamp(10px, 1.8cqb, 18px) 0 0;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
  text-wrap: balance;
}

.faqs {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: repeat(var(--faq-count, 5), auto) minmax(0, 1fr);
  column-gap: clamp(28px, 5cqi, 96px);
  align-items: start;
  margin-top: clamp(20px, 4.2cqb, 44px);
}
.faq-item {
  display: contents;
}

/* A question: numeral and words on a rule, muted until it is the one. */
.periferi-editorial .faq-q {
  grid-column: 1;
  display: grid;
  grid-template-columns: clamp(30px, 2.4cqi, 44px) minmax(0, 1fr);
  column-gap: clamp(10px, 1cqi, 18px);
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: var(--row-pad) 0;
  border: 0;
  border-top: 1px solid var(--slide-rule);
  background: none;
  text-align: left;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-q);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--slide-mute);
  cursor: pointer;
  appearance: none;
  transition: color 0.25s ease;
}
.faq-item:last-child > .faq-q {
  border-bottom: 1px solid var(--slide-rule);
}
.periferi-editorial .faq-q:hover,
.periferi-editorial .faq-q[aria-expanded="true"] {
  color: var(--slide-ink);
}
.periferi-editorial .faq-q:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 4px;
}
.periferi-editorial .faqs .faq-q > .faq-no {
  font-size: 0.74em;
  letter-spacing: 0;
  color: #615c53;
  transition: color 0.25s ease;
}
.periferi-editorial .faqs .faq-q:hover > .faq-no,
.periferi-editorial .faqs .faq-q[aria-expanded="true"] > .faq-no {
  color: var(--slide-accent);
}

/* The answer: its numeral at figure size, a tone off the ink, and the words
   in the text face at display size. It arrives from a little below. */
.faq-a {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  padding-top: var(--row-pad);
}
.faq-a[hidden] {
  display: none;
}
.faq-a:not([hidden]) {
  animation: faq-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.faq-figure {
  display: block;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-figure);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--slide-dim);
}
.periferi-editorial .faq-a > p {
  margin: clamp(10px, 1.8cqb, 20px) 0 0;
  max-width: 30ch;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-answer);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--slide-ink);
  text-wrap: pretty;
}

/* The foot: the way out, and the one plain line. */
.faq-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  margin-top: clamp(20px, 4.2cqb, 44px);
  padding-top: clamp(12px, 2cqb, 20px);
  border-top: 1px solid var(--slide-rule);
}
.periferi-editorial .faq-section .faq-more {
  margin: 0;
  font-size: clamp(11px, 0.9cqi, 14px);
  color: var(--slide-copy);
}
.periferi-editorial .faq-section .faq-more > b {
  margin-right: 0.6em;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-claim);
  letter-spacing: -0.01em;
  color: var(--slide-ink);
}
.periferi-editorial .faq-section .faq-more > .inline-link {
  color: var(--slide-ink);
  border-bottom-color: #fbf9ef4d;
}
.periferi-editorial .faq-section .faq-note {
  margin: 0;
  font-size: clamp(11px, 0.9cqi, 14px);
  line-height: 1.5;
  color: var(--slide-mute);
}

@media (max-width: 860px) {
  .faqs {
    display: block;
    margin-top: clamp(16px, 3svh, 26px);
  }
  .faq-item {
    display: block;
    border-top: 1px solid var(--slide-rule);
  }
  .faq-item:last-child {
    border-bottom: 1px solid var(--slide-rule);
  }
  .periferi-editorial .faq-q {
    grid-template-columns: clamp(30px, 8vw, 40px) minmax(0, 1fr);
    padding: clamp(12px, 2svh, 16px) 0;
    border: 0;
    font-size: clamp(16px, 4.6vw, 20px);
  }
  .faq-item:last-child > .faq-q {
    border: 0;
  }
  .faq-a {
    padding: 0 0 clamp(14px, 2.4svh, 20px)
      calc(clamp(30px, 8vw, 40px) + clamp(10px, 1cqi, 18px));
  }
  .faq-figure {
    display: none;
  }
  .periferi-editorial .faq-a > p {
    margin: 0;
    max-width: none;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.45;
    color: var(--slide-copy);
  }
  .faq-foot {
    flex-direction: column;
    align-items: flex-start;
    margin-top: clamp(16px, 3svh, 26px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .periferi-editorial .faq-q,
  .periferi-editorial .faqs .faq-q > .faq-no {
    transition: none;
  }
  .faq-a:not([hidden]) {
    animation: none;
  }
}

/* Editorial refinement: readable details, quiet colour, clear selection. */
.periferi-editorial
  :is(.works-section, .process-section, .plans-section, .faq-section)
  > .eyebrow,
.periferi-editorial .works-section > .wrap > .eyebrow {
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.09em;
  line-height: 1.6;
}
.periferi-editorial
  :is(.works-section, .process-section, .plans-section, .faq-section)
  h2 {
  text-wrap: balance;
}

.works-frame {
  border-radius: 0;
}

.works-foot {
  font-size: 12px;
}
.works-foot .text-button {
  min-height: 40px;
}

.periferi-editorial .faqs details > p {
  color: #c6c0b5;
  line-height: 1.65;
  font-size: clamp(14px, 1.05vw, 17px);
}
.periferi-editorial .inline-link:focus-visible {
  outline: 2px solid #a17ccb;
  outline-offset: 5px;
}
/* Under the pointer every inline link takes its slide’s accent, not the
   old base green. */
.periferi-editorial .inline-link:hover {
  color: var(--slide-accent, #ef7f37);
  border-bottom-color: currentColor;
}
@media (max-width: 600px) {
  .works-foot {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
}

/* ===========================================================================
   Rail tiles — lighter, after the reference.
   ---------------------------------------------------------------------------
   brandappart.com sets its tiles as a 5% ink tint over the cream and its
   icons in a warm mid grey; ours had drifted darker and greyer. The tint is
   written as translucent ink so it composes over the page exactly as theirs
   does. Icons rest in the reference grey (3.2:1 on the tile, above the 3:1
   a control needs), hold a darker tone on the current section for
   orientation, and go ink under the pointer. The charcoal tiles over the ink
   slides and the footer are more specific and keep themselves.
   ======================================================================== */
.periferi-editorial .side-menu > a,
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible) {
  background: #1714120d;
  color: #8e827c;
}
.periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible) {
  color: #585346;
}
.periferi-editorial .side-menu > a:hover,
.periferi-editorial .side-menu > a:focus-visible {
  color: #181714;
}

/* Art direction: a coral portfolio canvas, generous imagery and oversized prices. */
.periferi-editorial .works-section {
  background: #fbf9ef;
  --slide-ink: #fff9ef;
  --slide-copy: #fff0e6;
  --slide-mute: #fff0e6;
  --slide-rule: #fff9ef40;
  padding-block: clamp(50px, 7svh, 90px);
}
.periferi-editorial .works-section > .wrap {
  position: relative;
  background: #f34435;
  padding: clamp(28px, 3.4vw, 58px);
  overflow: hidden;
}
.periferi-editorial .works-section > .wrap::after {
  content: "(01)";
  position: absolute;
  top: clamp(28px, 3.4vw, 58px);
  right: clamp(28px, 3.4vw, 58px);
  font:
    400 21px "PP Neue Montreal",
    sans-serif;
  opacity: 0.6;
}
.periferi-editorial .works-section .eyebrow {
  margin-bottom: 28px;
  padding-right: 60px;
}
.periferi-editorial .works-section h2 {
  font-size: clamp(42px, 5.4vw, 88px);
  max-width: 13ch;
  line-height: 0.94;
}

.works-card {
  scroll-snap-align: start;
  min-width: 0;
}
.works-card .works-frame,
.works-card:nth-child(odd) .works-frame {
  aspect-ratio: 1.22;
  border: 0;
  --travel: -65%;
}
.works-card:nth-child(2n) {
  padding-top: 18px;
}

.works-browse {
  display: flex;
  gap: 8px;
}
.works-browse button {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #fff9ef80;
  color: #fff9ef;
  font-size: 24px;
}
.works-browse button:hover:not(:disabled) {
  background: #fff9ef;
  color: #191714;
}
.works-browse button:disabled {
  opacity: 0.35;
  cursor: default;
}
.works-browse button:focus-visible {
  outline: 2px solid #fff9ef;
  outline-offset: 3px;
}
.works-foot {
  flex-wrap: wrap;
}
.periferi-editorial .process-section h2 {
  font-size: clamp(40px, 4.8vw, 74px);
  max-width: 13ch;
}

.periferi-editorial .plans-section {
  padding-block: clamp(70px, 9svh, 110px);
}

.periferi-editorial .plans-section h2 {
  grid-row: 1 / 3;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 0.94;
  max-width: 14ch;
}
.plans-title-muted {
  color: #8c837a;
}

@media (max-width: 600px) {
  .periferi-editorial .works-section > .wrap {
    padding: 24px 20px;
  }
  .periferi-editorial .works-section > .wrap::after {
    top: 24px;
    right: 20px;
    font-size: 16px;
  }

  .works-card:nth-child(2n) {
    padding-top: 0;
  }
  .works-foot > span {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }
}
/* And the glyphs a touch larger — the reference draws its icons at roughly
   a third of the tile; ours were nearer a quarter. Relative to the tile, so
   the short-viewport rail scales them with it. */
.periferi-editorial .side-menu .rail-icon svg {
  width: calc(var(--rail-tile) * 0.45);
  height: calc(var(--rail-tile) * 0.45);
}

/* ===========================================================================
   The deck — every topic is a card, and the cards stack.
   ---------------------------------------------------------------------------
   After the reference. Each topic sits on one card, and every card is the
   same box: the window less a gutter, less headroom for the fixed header,
   less a small foot. The content is centred in that box and its type is
   sized against the card — container units, capped by the card's height —
   so a wide screen gets bigger type, a short one gets smaller, and nothing
   is scaled after the fact. The sections around the cards are transparent
   and sticky, so as one card scrolls up the one beneath stays put and
   folds away, tilting back from its top edge, its top strip still showing
   above the new card the way the reference's does. card-deck.ts writes
   --fold from the scroll and, as a last resort, shrinks a body that still
   would not fit. Phones get the cards in plain flow.
   ======================================================================== */
.periferi-editorial
  :is(
    .works-section,
    .process-section,
    .plans-section,
    .voices-section,
    .faq-section,
    .demo-section,
    .close-section
  ) {
  --deck-head: max(92px, 9svh);
  --deck-foot: clamp(28px, 5svh, 64px);
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: none;
  gap: 0;
  align-content: start;
  padding: var(--deck-head) 0 var(--deck-foot);
  background: transparent;
}
/* The box. The type tokens are container units, so they only mean something
   inside the card — which is the only place they are used. */
.periferi-editorial .deck-card {
  --card-pad: 0px;
  --t-eyebrow: clamp(8px, 0.72cqi, 11px);
  --t-h2: clamp(30px, min(4.4cqi, 8.5cqb), 66px);
  --t-claim: clamp(13px, min(1.45cqi, 2.8cqb), 21px);
  --t-body: clamp(12px, min(1.15cqi, 2.2cqb), 17px);
  --t-numeral: clamp(24px, min(3.2cqi, 6cqb), 52px);
  --t-figure: clamp(48px, min(6cqi, 11cqb), 96px);
  --row-pad: clamp(10px, 1.9cqb, 22px);
  container-type: size;
  position: relative;
  display: grid;
  align-content: center;
  width: min(calc(100% - var(--rail-safe) * 2), 84vw);
  height: calc(100svh - var(--deck-head) - var(--deck-foot));
  margin-inline: auto;
  padding: 0;
  background: transparent;
  overflow: clip;
  transform-origin: 50% 0;
  /* No box any more: the page itself takes the slide's colour, so what is
     covered recedes and fades rather than folding. */
  transform: translateY(calc(var(--fold, 0) * -6vh))
    scale(calc(1 - var(--fold, 0) * 0.06));
  opacity: calc(1 - var(--fold, 0) * 2);
}
.deck-body {
  min-height: 0;
}
.periferi-editorial .deck-card .eyebrow {
  font-size: var(--t-eyebrow);
}
.periferi-editorial .deck-card[data-index]::after {
  content: "(" attr(data-index) ")";
  position: absolute;
  top: var(--card-pad);
  right: var(--card-pad);
  pointer-events: none;
  font:
    400 clamp(15px, 1.4vw, 21px) "PP Neue Montreal",
    sans-serif;
  opacity: 0.6;
}
/* Side by side the folio leaves the card for the band beneath it, so a
   head row that reaches the card’s top right never runs under it. */
@media (min-width: 861px) {
  .periferi-editorial .deck-card[data-index]::after {
    top: auto;
    right: 0;
    bottom: calc(-0.5 * var(--deck-foot) - 0.5em);
  }
}

/* Each slide names its colour; the page paints it. The websites slide's own
   box styling is switched off here, and its reel is let out past the card. */
.periferi-editorial .works-section > .deck-card {
  --card-tint: #f34435;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* The steps, on lavender: the numerals sized to the card like the rest of
   the deck's figures. */
.periferi-editorial .process-section > .deck-card {
  --card-tint: #cdbff1;
  --t-step: clamp(64px, min(14cqi, 26cqb), 240px);
}

/* The plans, on orange: ink on the page's accent, the figure sized to the
   card like the rest of the deck's type. */
.periferi-editorial .plans-section > .deck-card {
  --card-tint: #ef7f37;
  --t-price: clamp(96px, min(13.5cqi, 27cqb), 270px);
}

/* The questions, on ink. The list and the answer follow the card. */
.periferi-editorial .faq-section > .deck-card {
  --card-tint: #181714;
  --t-q: clamp(15px, min(1.7cqi, 3.3cqb), 28px);
  --t-answer: clamp(18px, min(2.55cqi, 5cqb), 46px);
}

/* The ask, on cobalt. The sentence follows the card like the rest of the
   deck's type; the row beneath it uses the deck's own tokens directly. */
.periferi-editorial .demo-section > .deck-card {
  --card-tint: #2547d6;
  --t-sentence: clamp(28px, min(5.4cqi, 10.5cqb), 100px);
}

@media (max-width: 860px) {
  .periferi-editorial
    :is(
      .works-section,
      .process-section,
      .plans-section,
      .voices-section,
      .faq-section,
      .demo-section,
      .close-section
    ) {
    position: static;
    min-height: 0;
    /* The headroom belongs to the card, which is what carries the colour;
       on the section it would leave a cream band between the slides. */
    padding: 0;
  }
  /* Written to outrank each slide's own rule — the websites slide switches
     its box off at three classes deep — so every slide paints its colour. */
  .periferi-editorial
    :is(
      .works-section,
      .process-section,
      .plans-section,
      .voices-section,
      .faq-section,
      .demo-section,
      .close-section
    )
    > .deck-card {
    --card-pad: clamp(20px, 5vw, 28px);
    container-type: inline-size;
    width: 100%;
    height: auto;
    /* Headroom for the fixed wordmark, so a slide landed on from the rail or
       the menu starts under it, not behind it — in the slide's own colour. */
    padding: calc(max(84px, 10svh) + var(--card-pad)) var(--rail-safe)
      calc(clamp(24px, 4svh, 40px) + var(--card-pad));
    background: var(--card-tint);
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .periferi-editorial .deck-card {
    transform: none;
    opacity: 1;
  }
}

/* ===========================================================================
   Voices — one at a time, at reading size.
   ---------------------------------------------------------------------------
   Four cards thrown on the sand were four things to read at once, none of
   them at a size worth reading. Now there is one voice on the slide, set at
   the size of an answer, behind an opening quote mark at figure size, with
   the stars, the name and the place under it. The four names stand on one
   rule beneath: the one speaking is ink, and the orange line under it fills
   over the time it has before the next one follows (voices.ts keeps the
   clock; it rests under the pointer and off screen). A name, or the arrow
   keys, choose. All four voices stand in the same place in the grid, so
   the slide never changes height as they take turns.
   ======================================================================== */
.periferi-editorial .voices-section {
  --slide-ink: #181714;
  --slide-copy: #5f5b52;
  --slide-mute: #8c8377;
  --slide-dim: #d3ccba;
  --slide-rule: #18171426;
  --slide-accent: #ef7f37;
  --voice-dwell: 7s;
  color: var(--slide-ink);
}
.periferi-editorial .voices-section > .deck-card {
  --card-tint: #e9e3d3;
  --t-quote: clamp(22px, min(3.1cqi, 6.2cqb), 58px);
}

/* The head: eyebrow left, the note right. */
.voices-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.periferi-editorial .voices-section .voices-head > .eyebrow {
  margin: 0;
  color: var(--slide-mute);
}
.periferi-editorial .voices-section .deck-body > h2 {
  margin: clamp(10px, 1.8cqb, 18px) 0 0;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
  text-wrap: balance;
}
.voices-muted {
  color: var(--slide-mute);
}

/* The stage: the quote mark on the left, the voices stacked in one cell. */
.voices-stage {
  position: relative;
  display: grid;
  margin-top: clamp(22px, 4.2cqb, 48px);
  padding-left: clamp(44px, 5.4cqi, 104px);
}
.voices-mark {
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-figure);
  line-height: 1;
  color: var(--slide-dim);
}
.voice {
  grid-area: 1 / 1;
  margin: 0;
  animation: voice-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.voice:not(.is-active) {
  visibility: hidden;
  animation: none;
}
@keyframes voice-in {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.periferi-editorial .voice > blockquote {
  margin: 0;
  max-width: 40ch;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--slide-ink);
  text-wrap: pretty;
}
.voice > figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px clamp(12px, 1.2cqi, 20px);
  margin-top: clamp(16px, 2.8cqb, 30px);
}
.voice-stars {
  color: var(--slide-accent);
  font-size: clamp(12px, 1cqi, 16px);
  letter-spacing: 0.1em;
}
.voice > figcaption > b {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-claim);
  letter-spacing: -0.01em;
  color: var(--slide-ink);
}
.voice > figcaption > span {
  font-size: calc(var(--t-body) * 0.95);
  color: var(--slide-copy);
}

/* The index: four names on one rule; the speaking one is ink, and the
   orange line under it fills over its time. */
.voices-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(26px, 5cqb, 56px);
}
.voices-pick {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 0.8cqi, 14px);
  margin: 0;
  padding: clamp(12px, 2cqb, 18px) clamp(16px, 2.2cqi, 40px) 0 0;
  border: 0;
  border-top: 1px solid var(--slide-rule);
  background: none;
  text-align: left;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--t-claim) * 0.95);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--slide-mute);
  cursor: pointer;
  appearance: none;
  transition: color 0.3s ease;
}
.voices-pick:hover,
.voices-pick[aria-pressed="true"] {
  color: var(--slide-ink);
}
.voices-pick:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 6px;
}
.voices-pick::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: var(--slide-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.voices-pick[aria-pressed="true"]::before {
  animation: voices-dwell var(--voice-dwell) linear forwards;
}
.voices-section.is-held .voices-pick[aria-pressed="true"]::before {
  animation-play-state: paused;
}
.voices-section.is-still .voices-pick[aria-pressed="true"]::before {
  animation: none;
  transform: scaleX(1);
}
@keyframes voices-dwell {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.voices-no {
  font-size: 0.78em;
  letter-spacing: 0;
  color: var(--slide-mute);
  transition: color 0.3s ease;
}
.voices-pick[aria-pressed="true"] > .voices-no {
  color: var(--slide-accent);
}

@media (max-width: 860px) {
  .voices-head {
    gap: 6px 16px;
  }
  .voices-stage {
    margin-top: clamp(18px, 3svh, 28px);
    padding-left: 0;
    padding-top: clamp(40px, 9vw, 56px);
  }
  .voices-mark {
    top: -0.08em;
    font-size: clamp(56px, 16vw, 80px);
  }
  .periferi-editorial .voice > blockquote {
    max-width: none;
    font-size: clamp(20px, 5.6vw, 27px);
    line-height: 1.3;
  }
  .voices-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    margin-top: clamp(20px, 3.6svh, 32px);
  }
  .voices-pick {
    padding: 12px 0 0;
    font-size: clamp(14px, 4vw, 17px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice,
  .voices-pick::before {
    animation: none;
  }
  .voices-pick,
  .voices-no {
    transition: none;
  }
}

/* ===========================================================================
   The language switch, where it is small.
   ---------------------------------------------------------------------------
   Two codes set small in the display face. The header's own pair stands in
   the rail below and is styled with it; this is the copy that appears in the
   MENU panel's foot, and the one phones are given once the header's pair is
   out of the way. The chosen language sits on the same 5% ink tint the rail
   tiles use.
   ======================================================================== */
.lang-switch {
  display: flex;
  gap: 2px;
}
.lang-switch > button {
  padding: 7px 7px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #8e827c;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.lang-switch > button:hover {
  color: #181714;
}
.lang-switch > button[aria-pressed="true"] {
  color: #181714;
  background: #1714120d;
}
.lang-switch > button:focus-visible {
  outline: 2px solid #ef7f37;
  outline-offset: 2px;
}

.menu-panel-langs {
  display: none;
}
@media (max-width: 760px) {
  .menu-panel-langs {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
  }
  .menu-panel-langs .lang-switch > button {
    color: #fbf9ef;
  }
  .menu-panel-langs .lang-switch > button[aria-pressed="true"] {
    background: #fbf9ef1f;
  }
}

/* ===========================================================================
   The page takes the colour of the card in front of it.
   ---------------------------------------------------------------------------
   card-deck.ts writes --page-bg from the scroll: the colour of the card in
   place, blended toward the card arriving, pulled most of the way toward the
   card so the card itself still reads as a card on it. It also says whether
   the page is dark now, and the chrome — wordmark, rails, header, MENU, the
   indicator — turns cream over coral, ink, cobalt and the closing grey, and
   stays ink over lavender, orange, sand and cream.
   ======================================================================== */
body.periferi-editorial,
.periferi-editorial .site-frame {
  background: var(--page-bg, #fbf9ef);
  transition: background-color 0.25s linear;
}
body[data-tone="dark"] .periferi-editorial .site-header .brand,
body[data-tone="dark"].periferi-editorial .site-header .brand,
body[data-tone="dark"].periferi-editorial .site-menu-toggle,
body[data-tone="dark"].periferi-editorial .page-scroll-indicator {
  color: #fbf9ef;
  transition: color 0.3s ease;
}

body[data-tone="dark"].periferi-editorial .site-header > .button {
  background: #fbf9ef;
  color: #181714;
}
body[data-tone="dark"].periferi-editorial .side-menu > a,
body[data-tone="dark"].periferi-editorial
  .side-menu
  > a[aria-current]:not(:hover):not(:focus-visible),
body[data-tone="dark"].periferi-editorial .lang-rail > button {
  background: #fbf9ef24;
  color: #fbf9efcc;
}
body[data-tone="dark"].periferi-editorial .side-menu > a:hover,
body[data-tone="dark"].periferi-editorial .side-menu > a:focus-visible,
body[data-tone="dark"].periferi-editorial .lang-rail > button:hover,
body[data-tone="dark"].periferi-editorial
  .lang-rail
  > button[aria-pressed="true"] {
  color: #fbf9ef;
  background: #fbf9ef40;
}
body[data-tone="dark"].periferi-editorial .side-menu .rail-label {
  background: #fbf9ef;
  color: #181714;
}

/* ===========================================================================
   The right rail — the languages, mirroring the section rail on the left.
   ---------------------------------------------------------------------------
   Two tiles in the rail's own style, set on the right edge at the same
   height as the left rail's middle. The chosen one sits on the darker tint.
   On phones the rail goes and the MENU panel carries the switch instead.
   ======================================================================== */
.lang-rail {
  position: fixed;
  z-index: 40;
  right: var(--page-gutter);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
}
.lang-rail > button {
  width: calc(var(--rail-tile) * 0.6);
  height: calc(var(--rail-tile) * 0.6);
  padding: 0;
  border: 0;
  border-radius: calc(var(--rail-tile) * 0.12);
  background: #1714120d;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #8e827c;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.lang-rail > button:hover {
  color: #181714;
}
.lang-rail > button[aria-pressed="true"] {
  color: #181714;
  background: #1714121a;
}
.lang-rail > button:focus-visible {
  outline: 2px solid #ef7f37;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .lang-rail {
    display: none;
  }
}

/* ===========================================================================
   The close — the last slide: the price, the promise, and the way out.
   ---------------------------------------------------------------------------
   The orange band and the footer were two leftovers after the deck: a strip
   that was not a slide, then a dark block that was not one either. They are
   one slide now, on the warm grey the page passes through on the way here,
   with the same box and the same type as the rest. Cream type on that grey
   sits at 5:1; the muted tones the ink slides use would not, so the quiet
   lines here are a dimmed cream, and the orange that reads on it is a pale
   one — the true orange stays on the way in's mark, where the glyph is ink.
   The figure is the largest thing on it, the headline beside it, the way in
   under that; the links stand under a rule, in the rail's own register; the
   signature runs off the bottom-right corner in a tone barely off the ink.
   It is a full member of the deck, so the page blends to ink as it arrives
   over the ask, and the chrome turns cream with it.
   ======================================================================== */
.periferi-editorial .close-section {
  --slide-bg: #6b6862;
  --slide-ink: #fbf9ef;
  --slide-copy: #f3f0e6;
  --slide-mute: #ece9de;
  --slide-rule: #fbf9ef40;
  --slide-accent: #ef7f37;
  --slide-accent-text: #ffc9a3;
  overflow: clip;
  color: var(--slide-ink);
}
.periferi-editorial .close-section > .deck-card {
  --card-tint: #6b6862;
  z-index: 1;
  /* Nothing covers the last slide, so nothing may fold or fade it. */
  transform: none;
  opacity: 1;
}
.periferi-editorial .close-section .deck-body > .eyebrow {
  margin: 0 0 clamp(14px, 2.4cqb, 30px);
  color: var(--slide-mute);
}

/* The offer: figure left, promise and way in right, on one baseline. */
.close-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3cqi, 60px);
  align-items: end;
}
.close-figure {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1cqi, 18px);
  margin: 0;
  white-space: nowrap;
}
.close-amount {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(96px, min(13cqi, 26cqb), 220px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--slide-ink);
}
.close-unit {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.5cqi, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--slide-accent-text);
}
.periferi-editorial .close-copy h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--slide-ink);
}
.close-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.2cqi, 22px);
  margin-top: clamp(16px, 2.6cqb, 30px);
  padding: 7px 7px 7px clamp(18px, 1.5cqi, 26px);
  border-radius: 9px;
  background: var(--slide-ink);
  color: #181714;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 0.9cqi, 14px);
  line-height: 1;
  letter-spacing: 0.04em;
  transition: background 0.24s ease;
}
.close-cta-mark {
  display: grid;
  place-items: center;
  width: clamp(32px, 2.6cqi, 40px);
  height: clamp(32px, 2.6cqi, 40px);
  border-radius: 50%;
  background: var(--slide-accent);
  color: #181714;
  font-size: clamp(16px, 1.3cqi, 20px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.close-cta:hover {
  background: #ffffff;
}
.close-cta:hover .close-cta-mark,
.close-cta:focus-visible .close-cta-mark {
  transform: translate(3px, -3px);
}
.close-cta:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 3px;
}

/* The links: three columns and the meta, under a rule. */
.close-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  column-gap: clamp(20px, 3cqi, 60px);
  margin-top: clamp(28px, 5cqb, 64px);
  padding-top: clamp(18px, 3cqb, 36px);
  border-top: 1px solid var(--slide-rule);
}
.close-links h3 {
  margin: 0 0 clamp(8px, 1.4cqb, 14px);
  font-family: var(--sans);
  font-weight: 650;
  font-size: var(--t-eyebrow);
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slide-mute);
}
.close-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(6px, 1.1cqb, 11px);
}
.close-links li > a {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(13px, 1.05cqi, 17px);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--slide-ink);
  transition: color 0.2s ease;
}
.close-links li > a:hover,
.close-links li > a:focus-visible {
  color: var(--slide-accent-text);
}
.close-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
  text-align: right;
}
.close-top {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: 1px solid #fbf9ef66;
  border-radius: 50%;
  color: var(--slide-ink);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.close-top > svg {
  width: 18px;
  height: 18px;
}
.close-top:hover,
.close-top:focus-visible {
  background: var(--slide-ink);
  color: #181714;
}
.close-meta > p {
  margin: 0;
  font-size: clamp(11px, 0.9cqi, 14px);
  color: var(--slide-copy);
}
.close-meta > span {
  font-size: clamp(9px, 0.74cqi, 11px);
  color: var(--slide-mute);
}

/* The signature, off the corner of the viewport, behind everything. */
.close-signature {
  position: absolute;
  right: -0.03em;
  bottom: -0.17em;
  z-index: 0;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(240px, 34vw, 640px);
  line-height: 0.8;
  letter-spacing: -0.065em;
  color: #625f59;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 860px) {
  /* In flow like the other slides, but still the signature's containing box.
     The foot leaves room for the signature and for the fixed MENU button,
     so the © line is never under either. */
  .periferi-editorial .close-section {
    position: relative;
    padding-bottom: 48vw;
    /* The section paints itself here: on phones only the card carries the
       colour, and the foot would otherwise show the cream page under the
       signature. */
    background: var(--slide-bg);
  }
  .close-offer {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(18px, 3svh, 28px);
  }
  .close-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(18px, 3svh, 28px);
  }
  .close-meta {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }
  .close-signature {
    font-size: 62vw;
    bottom: -0.12em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .close-cta,
  .close-cta-mark,
  .close-top,
  .close-links li > a {
    transition: none;
  }
}

/* ===========================================================================
   The rail — each tile in its section's colour, at its own slight angle.
   ---------------------------------------------------------------------------
   The tiles used to be one cream-grey tint, which read as the same yellowish
   square over every colour the page turned. Now each shortcut wears the
   colour of the slide it leads to — coral, lavender, orange, ink, cobalt,
   and the page's own cream for home — with its glyph in whichever of ink or
   cream reads on it, and a hairline so a tile still shows on its own colour.
   The current section's tile carries a ring inside, in its glyph's colour.
   section-rail.ts hands every tile a small random angle on load, the way
   the opening's collage lands its pictures; under the pointer a tile
   straightens. The hover is otherwise as it was: the label slides out, the
   glyph nudges.
   ======================================================================== */
body.periferi-editorial .side-menu > a[data-section] {
  --tile: #fbf9ef;
  --tile-ink: #181714;
  --tile-line: #18171426;
  background: var(--tile);
  color: var(--tile-ink);
  box-shadow: 0 0 0 1px var(--tile-line);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
body.periferi-editorial .side-menu > a[data-section="shops"] {
  --tile: #f34435;
  --tile-ink: #fbf9ef;
}
body.periferi-editorial .side-menu > a[data-section="how"] {
  --tile: #cdbff1;
}
body.periferi-editorial .side-menu > a[data-section="pricing"] {
  --tile: #ef7f37;
}
body.periferi-editorial .side-menu > a[data-section="questions"] {
  --tile: #181714;
  --tile-ink: #fbf9ef;
}
body.periferi-editorial .side-menu > a[data-section="demo"] {
  --tile: #2547d6;
  --tile-ink: #fbf9ef;
}
body[data-tone="dark"].periferi-editorial .side-menu > a[data-section] {
  --tile-line: #fbf9ef33;
  background: var(--tile);
  color: var(--tile-ink);
}
body.periferi-editorial .side-menu > a[data-section][aria-current],
body.periferi-editorial
  .side-menu
  > a[data-section][aria-current]:not(:hover):not(:focus-visible),
body[data-tone="dark"].periferi-editorial
  .side-menu
  > a[data-section][aria-current]:not(:hover):not(:focus-visible) {
  background: var(--tile);
  color: var(--tile-ink);
  box-shadow:
    0 0 0 1px var(--tile-line),
    inset 0 0 0 2px var(--tile-ink);
}
body.periferi-editorial .side-menu > a[data-section]:hover,
body.periferi-editorial .side-menu > a[data-section]:focus-visible,
body[data-tone="dark"].periferi-editorial .side-menu > a[data-section]:hover,
body[data-tone="dark"].periferi-editorial
  .side-menu
  > a[data-section]:focus-visible {
  background: var(--tile);
  color: var(--tile-ink);
  transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  body.periferi-editorial .side-menu > a[data-section] {
    transition: none;
  }
}

/* Square, after all. The tiles, their labels and the language tiles lose
   their corners; a label takes its tile's colour instead of the old
   cream-grey; nothing sits behind a glyph. */
body.periferi-editorial .side-menu > a[data-section],
body.periferi-editorial .side-menu > a[data-section] .rail-label,
body.periferi-editorial .lang-rail > button {
  border-radius: 0;
}
body.periferi-editorial .side-menu > a[data-section] .rail-label,
body[data-tone="dark"].periferi-editorial
  .side-menu
  > a[data-section]
  .rail-label {
  background: var(--tile);
  color: var(--tile-ink);
  box-shadow: 0 0 0 1px var(--tile-line);
}
body.periferi-editorial .side-menu .rail-icon::before {
  content: none;
}

/* ===========================================================================
   The questions' corner — a sticker that turns.
   ---------------------------------------------------------------------------
   The ink slide's top right was empty. Now a round sticker sits there, its
   words running around the rim and turning slowly — still wondering, ask
   us, written in Zürich — with the arrow in the middle. It is the way out
   to the contact sentence, the same one the foot offers. Under the pointer
   it turns faster and its words go cream. Phones do without it.
   ======================================================================== */
.periferi-editorial .faq-section > .deck-card > .deck-body {
  position: relative;
}
.faq-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(96px, 9cqi, 160px);
  aspect-ratio: 1;
  color: var(--slide-ink);
  text-decoration: none;
}
.faq-badge > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.faq-badge-ring {
  transform-origin: 60px 60px;
  animation: faq-badge-turn 26s linear infinite;
}
.faq-badge:hover .faq-badge-ring,
.faq-badge:focus-visible .faq-badge-ring {
  animation-duration: 9s;
}
@keyframes faq-badge-turn {
  to {
    transform: rotate(360deg);
  }
}
.faq-badge-text {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  fill: var(--slide-mute);
  transition: fill 0.3s ease;
}
.faq-badge:hover .faq-badge-text,
.faq-badge:focus-visible .faq-badge-text {
  fill: var(--slide-ink);
}
.faq-badge:focus-visible {
  outline: 2px solid var(--slide-accent);
  outline-offset: 6px;
  border-radius: 50%;
}
@media (max-width: 860px) {
  .faq-badge {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-badge-ring {
    animation: none;
  }
}

/* The current tile says so with more than its colour: a slow square pulse
   in its glyph's colour, the way the live dot breathes. */
body.periferi-editorial .side-menu > a[data-section][aria-current] {
  animation: rail-current 2.6s ease-out infinite;
}
@keyframes rail-current {
  0% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 0 color-mix(in srgb, var(--tile-ink) 45%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 12px color-mix(in srgb, var(--tile-ink) 0%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 0 color-mix(in srgb, var(--tile-ink) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.periferi-editorial .side-menu > a[data-section][aria-current] {
    animation: none;
  }
}

/* ===========================================================================
   After the opening — the hero's furniture arrives.
   ---------------------------------------------------------------------------
   While the opening runs only the headline is on stage; the eyebrows, the
   line, the way in, the live line and the rails wait. Once the letters have
   resolved (data-intro-state="complete") they come in one after another
   from a little below, and the rail's tiles land a beat apart, at their
   angles. The fill is backwards only, so hover transforms keep working once
   everything has landed. Without a script nothing is ever hidden.
   ======================================================================== */
.hero.intro-running .hero-top,
.hero.intro-running .hero-bottom,
.hero.intro-running .hero-foot,
body:has(.hero.intro-running) .side-menu > a,
body:has(.hero.intro-running) .lang-rail > button {
  opacity: 0;
}
.hero[data-intro-state="complete"] .hero-top {
  animation: hero-arrive 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}
.hero[data-intro-state="complete"] .hero-bottom {
  animation: hero-arrive 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.22s backwards;
}
.hero[data-intro-state="complete"] .hero-foot {
  animation: hero-arrive 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.48s backwards;
}
@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.side-menu > a:nth-child(2) {
  --n: 1;
}
.side-menu > a:nth-child(3) {
  --n: 2;
}
.side-menu > a:nth-child(4) {
  --n: 3;
}
.side-menu > a:nth-child(5) {
  --n: 4;
}
.side-menu > a:nth-child(6) {
  --n: 5;
}
body:has(.hero[data-intro-state="complete"]).periferi-editorial
  .side-menu
  > a[data-section] {
  animation: rail-land 0.6s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.3s + var(--n, 0) * 70ms) backwards;
}
body:has(.hero[data-intro-state="complete"]).periferi-editorial
  .side-menu
  > a[data-section][aria-current] {
  animation:
    rail-land 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--n, 0) * 70ms)
      backwards,
    rail-current 2.6s ease-out 1.2s infinite;
}
@keyframes rail-land {
  from {
    opacity: 0;
    transform: translateY(-10px) rotate(var(--tilt, 0deg));
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt, 0deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-intro-state="complete"] .hero-top,
  .hero[data-intro-state="complete"] .hero-bottom,
  .hero[data-intro-state="complete"] .hero-foot,
  body:has(.hero[data-intro-state="complete"]) .side-menu > a,
  body:has(.hero[data-intro-state="complete"]) .lang-rail > button {
    animation: none;
  }
}

/* The sticker, bigger still. */
.faq-badge {
  width: clamp(140px, 14cqi, 250px);
}

/* The opening runs without a skip button; it is short, and the page is
   there underneath when it ends. */
.hero-opening-skip {
  display: none;
}

/* The sticker, made a sticker (restored after a block cut took it out): an
   orange disc, thrown down at a slight angle, its words in ink around the
   rim, an ink core with the cream arrow. Under the pointer it straightens,
   grows a touch and turns faster. */
.faq-badge {
  width: clamp(140px, 14cqi, 250px);
  transform: rotate(-6deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 14px 30px #00000059);
}
.faq-badge:hover,
.faq-badge:focus-visible {
  transform: rotate(0deg) scale(1.04);
}
.faq-badge-disc {
  fill: var(--slide-accent);
}
.faq-badge-text,
.faq-badge:hover .faq-badge-text,
.faq-badge:focus-visible .faq-badge-text {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  fill: var(--slide-bg);
}
@media (prefers-reduced-motion: reduce) {
  .faq-badge {
    transition: none;
  }
}

/* The sticker becomes the backdrop: a disc many times larger, rising into
   the slide's top right corner and past the card's edge, its orange let
   through a little so the ink shows in it, the answer reading over it and
   the arrow at its centre. The list, the answer and the foot stand in front. */
.periferi-editorial .faq-section .faqs,
.periferi-editorial .faq-section .faq-foot,
.periferi-editorial .faq-section .deck-body > h2,
.periferi-editorial .faq-section .voices-head,
.periferi-editorial .faq-section .deck-body > .eyebrow {
  position: relative;
  z-index: 1;
}
.faq-badge {
  z-index: 0;
  top: calc(var(--t-h2) * -2.2);
  right: calc(var(--t-h2) * -0.9);
  width: clamp(320px, 34cqi, 600px);
  transform: rotate(-8deg);
  filter: drop-shadow(0 30px 70px #00000066);
}
.faq-badge:hover,
.faq-badge:focus-visible {
  transform: rotate(-2deg) scale(1.02);
}
.faq-badge-disc {
  fill-opacity: 0.74;
}
.faq-badge-text,
.faq-badge:hover .faq-badge-text,
.faq-badge:focus-visible .faq-badge-text {
  font-size: 9px;
  letter-spacing: 0.14em;
}
/* The seal's centre: the drawn p, in the slide's own ink, with the disc
   showing through its counter. */
.faq-badge-p {
  fill: var(--slide-bg);
}

/* ===========================================================================
   Pricing's rows, made beautiful — and the chat window a size up.
   ---------------------------------------------------------------------------
   Each line stands behind a round chip: ink with a cream check for what is
   in. The assistant's four are one group under their own label, with the
   difference in it; their chips are hollow with a plus until the switch is
   on, when they fill and the label reads included. No tag on every row any
   more. How it works: the thread gets more room.
   ======================================================================== */
.price-list > li {
  grid-template-columns: auto minmax(0, 1fr);
  padding: calc(var(--row-pad) * 0.6) 0;
  font-size: calc(var(--t-claim) * 0.92);
}
.price-list > li::before {
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--slide-ink);
  border-radius: 50%;
  background: var(--slide-ink)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf9ef' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")
    center / 64% no-repeat;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease;
}
.price-list.price-list-extra {
  margin-top: 0;
}
.price-list.price-list-extra > li:first-child {
  border-top: 0;
}
.plans-section[data-assistant="off"] .price-list > .price-extra {
  color: #7a4a2a;
}
.plans-section[data-assistant="off"] .price-list > .price-extra::before {
  border-color: #7a4a2a;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4a2a' stroke-width='3.2' stroke-linecap='round'><path d='M12 6v12M6 12h12'/></svg>")
    center / 56% no-repeat;
}
.plans-section[data-assistant="off"] .price-list > .price-extra:hover::before {
  border-color: var(--slide-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181714' stroke-width='3.2' stroke-linecap='round'><path d='M12 6v12M6 12h12'/></svg>");
}
.periferi-editorial .plans-section .price-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(12px, 2.2cqb, 22px) 0 clamp(4px, 0.8cqb, 8px);
  padding-bottom: clamp(6px, 1cqb, 10px);
  border-bottom: 1px solid var(--slide-rule);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slide-mute);
}
.price-group > .when-on,
.plans-section[data-assistant="on"] .price-group > .when-off {
  display: none;
}
.plans-section[data-assistant="on"] .price-group > .when-on {
  display: inline;
  color: var(--slide-ink);
}
@media (max-width: 860px) {
  .price-list > li {
    padding: clamp(9px, 1.6svh, 12px) 0;
  }
}

/* How it works: a bigger window for the thread. Side by side only — on a
   phone the slide stacks, and these would otherwise outrank the stacked
   rules further up the file. */
@media (min-width: 861px) {
  .steps-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .steps-chat {
    height: clamp(360px, 78cqb, 720px);
  }
  .chat-msg {
    font-size: clamp(14px, 1.15cqi, 17px);
  }
}

/* The circle, whole. The deck's cards clip their overflow, which cut the
   disc at the card's edge; the questions' card lets it out, and the disc is
   placed from the card itself — its top at the card's top, a little past
   the right edge, short of the rail — so it is round wherever it goes. */
.periferi-editorial .faq-section > .deck-card {
  overflow: visible;
}
.periferi-editorial .faq-section > .deck-card > .deck-body {
  position: static;
}
.faq-badge {
  top: -1.5%;
  right: -3%;
}

/* The selected tile's pulse, a size up in every direction. */
@keyframes rail-current {
  0% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 0 color-mix(in srgb, var(--tile-ink) 50%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 20px color-mix(in srgb, var(--tile-ink) 0%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px var(--tile-line),
      inset 0 0 0 2px var(--tile-ink),
      0 0 0 0 color-mix(in srgb, var(--tile-ink) 0%, transparent);
  }
}

/* ===========================================================================
   Contact — the second blank comes filled, and what happens next is three
   tiles.
   ---------------------------------------------------------------------------
   "My studio" is what most people would write, so it is written already:
   a visitor adds a name and an address and is done. The row under the
   sentence swaps it — a shop, a portfolio, an existing site — and marks
   whichever one stands in the blank. The three steps under the sentence
   are three ink tiles on the blue, square like the rail's, each at its
   own slight angle (contact.ts hands them one on load, as section-rail.ts
   does the rail), with the numeral big and orange at the top and the
   words at the foot. When the slide arrives they land one after another. Under
   the pointer a tile straightens and turns orange. Reduced motion shows
   them in place.
   ======================================================================== */
.periferi-editorial .demo-section .blank > input::placeholder {
  color: color-mix(in srgb, var(--slide-ink) 62%, transparent);
}
.periferi-editorial .demo-ways > .inline-link {
  color: var(--slide-ink);
  border-bottom-color: #fbf9ef4d;
}
.ask-prompts > button[aria-pressed="true"] {
  padding-bottom: 1px;
  border-bottom: 2px solid var(--slide-accent);
  color: var(--slide-accent);
}

/* The tiles. */
.demo-foot {
  padding-top: 0;
  border-top: 0;
}
.demo-steps {
  gap: clamp(14px, 1.6cqi, 28px);
}
.demo-steps > li,
.demo-steps > li + li {
  --tilt: 0deg;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "number"
    "claim"
    "line";
  align-content: stretch;
  padding: clamp(16px, 2.4cqb, 28px) clamp(16px, 1.6cqi, 28px);
  border: 0;
  background: #181714;
  color: var(--slide-ink);
  transform: rotate(var(--tilt));
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    color 0.3s ease;
}
.demo-steps > li:nth-child(1) {
  --n: 0;
}
.demo-steps > li:nth-child(2) {
  --n: 1;
}
.demo-steps > li:nth-child(3) {
  --n: 2;
}
.demo-steps > li > span {
  align-self: start;
  margin: -0.06em 0 clamp(18px, 3.4cqb, 40px) -0.02em;
  font-size: clamp(44px, min(5.2cqi, 10cqb), 104px);
  line-height: 0.9;
  color: var(--slide-accent);
  transition: color 0.3s ease;
}
.demo-steps > li > b {
  color: inherit;
}
.periferi-editorial .demo-steps > li > p {
  color: #b9b4a6;
  transition: color 0.3s ease;
}
.demo-steps > li:hover {
  background: var(--slide-accent);
  color: #181714;
  transform: rotate(0deg) translateY(-3px);
}
.demo-steps > li:hover > span {
  color: #fbf9ef;
}
.periferi-editorial .demo-steps > li:hover > p {
  color: #181714c0;
}

/* Landing, one after another, once the slide has been seen. The last
   keyframe is the tile at rest, so the hover's transform takes over after. */
.demo-section.is-seen .demo-steps > li {
  animation: demo-tile-land 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--n) * 0.16s + 0.15s);
}
@keyframes demo-tile-land {
  from {
    opacity: 0;
    transform: translateY(32px) rotate(calc(var(--tilt) * 4)) scale(1.04);
  }
  to {
    opacity: 1;
    transform: rotate(var(--tilt));
  }
}
@media (max-width: 860px) {
  .demo-steps {
    gap: 12px;
  }
  .demo-steps > li,
  .demo-steps > li + li {
    margin-top: 0;
    padding: 18px;
    border-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-steps > li {
    transition: none;
  }
  .demo-section.is-seen .demo-steps > li {
    animation: none;
  }
}

/* ===========================================================================
   Websites — each page at its own angle, and a badge under the pointer.
   ---------------------------------------------------------------------------
   The pages on the reel hung dead straight in a row; now each hangs at a
   slight angle of its own, the way the opening's pictures land and the
   rail's tiles sit, and straightens and comes forward under the pointer.
   Where the pointer is fine enough, a round ink badge — view — follows it
   across the pages in place of the arrow cursor. Phones keep the plain
   scroller; reduced motion keeps the angles but drops the easing.
   ======================================================================== */
.works-reel .works-card {
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-reel .works-card:hover,
.works-reel .works-card:focus-visible {
  z-index: 1;
  transform: rotate(0deg) scale(1.03);
}
.works-card:hover .works-frame,
.works-card:focus-visible .works-frame {
  transform: none;
}
.works-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #181714;
  color: #fbf9ef;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cx, 0px) - 50%), calc(var(--cy, 0px) - 50%))
    scale(0.4);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease;
}
.works-cursor > i {
  margin-top: 4px;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}
.works-reel.has-cursor .works-cursor {
  opacity: 1;
  transform: translate(calc(var(--cx, 0px) - 50%), calc(var(--cy, 0px) - 50%))
    scale(1);
}
.works-reel.has-cursor .works-card {
  cursor: none;
}
@media (max-width: 860px) {
  .works-reel .works-card {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .works-reel .works-card,
  .works-cursor {
    transition: none;
  }
}

/* ===========================================================================
   The hero at rest — the city it is answered from, across the foot.
   ---------------------------------------------------------------------------
   The foot used to carry a line of text: answering now, the time, in Zürich.
   The place is better shown than spelled, so a map of the city now lies
   across the whole width of the hero's lower half — the lake, the two
   rivers, the roads — faint enough to read as paper rather than a picture,
   fading out towards the headline, with an orange pin where periferi works that
   pulses the way the live dot does. The line stays, shortened to the city
   and whether we are answering at this hour. Nothing of it shows while the
   opening runs.
   ======================================================================== */
.periferi-editorial .hero {
  isolation: isolate;
}
.hero-map-band {
  position: absolute;
  bottom: 0;
  /* Past the wrap, to both edges of the window. */
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  height: clamp(150px, 42%, 380px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 34%,
    #000 100%
  );
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 100%);
}
.hero[data-intro-state="complete"]:not(.intro-running) .hero-map-band {
  opacity: 1;
}
.hero-map {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-map-roads {
  fill: none;
  stroke: #18171422;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.hero-map-water {
  fill: #2547d616;
}
.hero-map-river {
  fill: none;
  stroke: #2547d622;
  stroke-width: 4;
  stroke-linecap: round;
}
.hero-map-pin {
  fill: #ef7f37;
  opacity: 0.75;
}
.hero-map-ping {
  fill: #ef7f37;
  transform-origin: 700px 208px;
  animation: hero-map-ping 2.8s ease-out infinite;
}
@keyframes hero-map-ping {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(4);
  }
  100% {
    opacity: 0;
    transform: scale(4);
  }
}
.hero-place[data-open="false"] ~ .hero-map-band .hero-map-pin {
  fill: #a49d8c;
}

/* The line under it: the city, then whether we are answering. */
.periferi-editorial .hero .hero-foot > .hero-place {
  gap: 0.75em;
  color: #181714;
}
.hero-place-city {
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #181714;
}
@media (prefers-reduced-motion: reduce) {
  .hero-map-band {
    transition: none;
  }
  .hero-map-ping {
    animation: none;
    opacity: 0;
  }
}

/* The ask, answered. The arrow used to hand the sentence to a sales preview;
   that page is gone, so the sentence is replaced where it stands. */
.ask-said {
  max-width: 22ch;
}

/* ===========================================================================
   The language rail — the section rail's manners, at its own size.
   ---------------------------------------------------------------------------
   DE and EN now behave like the shortcuts opposite: each tile lands at a
   slight angle of its own (language-switch.ts draws it, smaller than the
   section tiles because these are smaller), straightens and lifts under the
   pointer, and the language in use carries the ring and the same slow pulse
   — a 10px spread against the rail's 20px, for the same weight at half the
   size.
   ======================================================================== */
body.periferi-editorial :is(.lang-rail, .lang-switch) > button {
  --lang-ink: #181714;
  --lang-line: #18171426;
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
body.periferi-editorial :is(.lang-rail, .lang-switch) > button:hover,
body.periferi-editorial :is(.lang-rail, .lang-switch) > button:focus-visible {
  background: #fbf9ef;
  color: var(--lang-ink);
  transform: rotate(0deg) translateY(-1px);
}
body.periferi-editorial
  :is(.lang-rail, .lang-switch)
  > button[aria-pressed="true"],
body[data-tone="dark"].periferi-editorial
  :is(.lang-rail, .lang-switch)
  > button[aria-pressed="true"] {
  background: #fbf9ef;
  color: var(--lang-ink);
  box-shadow:
    0 0 0 1px var(--lang-line),
    inset 0 0 0 2px var(--lang-ink);
}
/* The pulse rides on a layer of its own rather than on the button, because
   the arrival queue takes the button's animation property when the opening
   resolves and never gives it back — which is why the two in the hero's rail
   sat still while the pair in the MENU panel breathed. On its own layer it
   pulses wherever the pair stands, and choosing a language starts it at once
   instead of replaying the arrival. */
body.periferi-editorial
  :is(.lang-rail, .lang-switch)
  > button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: lang-current 3.2s ease-out infinite;
}
@keyframes lang-current {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lang-ink) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--lang-ink) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lang-ink) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.periferi-editorial :is(.lang-rail, .lang-switch) > button {
    transition: none;
  }
  body.periferi-editorial
    :is(.lang-rail, .lang-switch)
    > button[aria-pressed="true"]::after {
    animation: none;
  }
}

/* ===========================================================================
   The reel carries what we improve, not pictures.
   ---------------------------------------------------------------------------
   The six invented sample sites are gone; the belt now runs the seven things
   periferi keeps doing to a website after it is live. Same belt, same angles,
   same badge under the pointer — the frame holds a numeral, a claim and a
   line instead of a drifting page, and each card takes one of the deck's
   colours so the reel keeps its rhythm against the coral.
   ======================================================================== */
.works-reel .works-frame {
  --topic-bg: #fbf9ef;
  --topic-ink: #181714;
  --topic-mute: #5f5b52;
  --topic-no: #ef7f37;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  aspect-ratio: 1.22;
  padding: clamp(16px, 1.9cqi, 34px);
  background: var(--topic-bg);
  color: var(--topic-ink);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Outranks the line rule below, which also matches a span in the frame. */
.works-reel .works-frame > .works-no {
  margin-top: 0;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4cqi, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--topic-no);
}
.works-reel .works-frame > b {
  align-self: end;
  margin-top: clamp(14px, 2.4cqb, 32px);
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(17px, 1.85cqi, 34px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.works-reel .works-frame > span {
  margin-top: clamp(6px, 1.1cqb, 14px);
  font-size: clamp(11px, 0.95cqi, 16px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--topic-mute);
}
.works-card[data-tone="ink"] .works-frame {
  --topic-bg: #181714;
  --topic-ink: #fbf9ef;
  --topic-mute: #b9b4a6;
}
.works-card[data-tone="orange"] .works-frame {
  --topic-bg: #ef7f37;
  --topic-mute: #7a4a2a;
  --topic-no: #fbf9ef;
}
.works-card[data-tone="lavender"] .works-frame {
  --topic-bg: #cdbff1;
  --topic-mute: #5b4f74;
}
.works-card[data-tone="cobalt"] .works-frame {
  --topic-bg: #2547d6;
  --topic-ink: #fbf9ef;
  --topic-mute: #c9d2f7;
}
.works-card[data-tone="sand"] .works-frame {
  --topic-bg: #e9e3d3;
  --topic-mute: #6a6459;
}
.works-card[data-tone="paper"] .works-frame {
  --topic-bg: #f1ede2;
  --topic-mute: #6a6459;
}
@media (prefers-reduced-motion: reduce) {
  .works-reel .works-frame {
    transition: none;
  }
}

/* ===========================================================================
   The phone — the floating chrome, and a footer worth the scroll.
   ---------------------------------------------------------------------------
   Only below 600px: tablets keep the layout as it is.

   The wordmark and the way in are fixed over the page, so headings used to
   slide under them. A band in the page's own colour now sits behind them —
   invisible against the slide, since card-deck.ts keeps --page-bg on the
   colour under the chrome — and the content passes beneath it rather than
   through it. The MENU button steps out of the way while you scroll down
   (site-menu.ts) and comes back when you stop.

   The footer was a desktop grid squeezed into a phone: two ragged columns
   and a back-to-top arrow under the MENU button. It is one column now —
   three small groups, each link its own row with a hairline and a proper
   tap target — with room at the foot for the signature and the button.
   ======================================================================== */
/* Stacked layouts — phone and tablet — pack a topic card from the top and
   let its height follow the words, instead of holding the claim at the foot
   of a panel sized for a wide screen. The cards share a row, so they all
   take the height of the fullest one. */
@media (max-width: 860px) {
  .works-reel .works-card {
    display: grid;
  }
  /* Outranks .works-card:nth-child(odd) .works-frame, which fixes the box
     to 1.22 for the pictures the reel used to carry. */
  .works-reel .works-card .works-frame {
    aspect-ratio: auto;
    height: 100%;
    grid-template-rows: auto auto auto;
    align-content: start;
    padding: clamp(18px, 2.8vw, 34px);
  }
  .works-reel .works-frame > b {
    align-self: start;
    margin-top: clamp(14px, 2.2vw, 26px);
  }
  .works-reel .works-frame > span {
    margin-top: clamp(8px, 1.2vw, 14px);
  }
}

@media (max-width: 600px) {
  body.periferi-editorial::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 68px);
    z-index: 35;
    background: var(--page-bg, #fbf9ef);
    pointer-events: none;
  }
  body:has(.hero.intro-running).periferi-editorial::before {
    opacity: 0;
  }
  .periferi-editorial .site-header > .button {
    z-index: 41;
  }
  .periferi-editorial .site-menu-toggle {
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.25s ease;
  }
  .periferi-editorial .site-menu-toggle.is-away {
    opacity: 0;
    transform: translateY(160%);
    pointer-events: none;
  }

  /* Type sized for a card only as wide as a phone. */
  .works-reel .works-frame {
    padding: 18px;
  }
  .works-reel .works-frame > .works-no {
    font-size: 38px;
  }
  .works-reel .works-frame > b {
    margin-top: 14px;
    font-size: 19px;
  }
  .works-reel .works-frame > span {
    margin-top: 8px;
    font-size: 13px;
  }

  /* The close, short enough to take in at once: the three groups flatten
     into one list of two columns — nine labels that say what they are, so
     the headings are the first thing a phone can do without — the arrow
     sits beside the small print, and the signature is the full stop. */
  .close-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 4vw, 22px);
    row-gap: 0;
    margin-top: clamp(18px, 3svh, 26px);
    padding-top: clamp(14px, 2.4svh, 20px);
  }
  .close-links > section,
  .close-links ul {
    display: contents;
  }
  .close-links h3 {
    display: none;
  }
  .close-links li > a {
    display: flex;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid var(--slide-rule);
    font-size: 15px;
  }
  .close-meta {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    margin-top: clamp(14px, 2.4svh, 22px);
    padding-top: 0;
    border-top: 0;
    justify-items: start;
    text-align: left;
  }
  .close-meta > .close-top {
    grid-row: 1 / span 2;
  }
  .close-meta > p,
  .close-meta > span {
    grid-column: 2;
    font-size: 12px;
  }
  .close-offer {
    row-gap: clamp(12px, 2svh, 20px);
  }
  .periferi-editorial .close-section > .deck-card {
    padding-top: calc(76px + var(--card-pad));
    padding-bottom: calc(var(--card-pad) + 26px);
  }
  /* The word sits flush in the gutters and low on the slide, so the button
     that steps aside never lands in the middle of it. */
  .close-signature {
    right: auto;
    left: var(--rail-safe);
    bottom: -0.12em;
    font-size: min(52vw, calc((100vw - var(--rail-safe) * 2) / 1.52));
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .periferi-editorial .site-menu-toggle {
    transition: none;
  }
}

/* ===========================================================================
   periferi — the wordmark.
   ---------------------------------------------------------------------------
   The name is eight letters where the old one was four, so the mark no longer sits
   centred on the rail's axis: it starts where the tiles start and runs to
   the right, which lines the word up with the column beneath it. The ring
   after it is the name itself — the periphery, the edge you work from —
   drawn in the page's orange at the height of the lowercase dots, so it
   reads as punctuation rather than decoration. The giant signature in the
   close is sized to the word's own width instead of a figure that was
   picked for four letters.
   ======================================================================== */
.periferi-wordmark {
  letter-spacing: -0.058em;
}
/* The word stays centred on the rail axis, the way the column was drawn;
   eight letters only need to be set smaller than four were, and never so
   wide that they reach past the left edge of the page. */
.periferi-editorial .site-header .brand .periferi-wordmark {
  font-size: min(calc(var(--rail-tile) * 0.44), calc(var(--rail-axis) / 1.9));
  width: auto;
}
.close-signature {
  right: -0.02em;
  font-size: clamp(105px, 28.05vw, 590px);
}
@media (max-width: 860px) {
  /* No tile column to be centred on here, so the word starts at the gutter
     like everything else on the slide. */
  .periferi-editorial .site-header .brand {
    left: var(--rail-safe);
    transform: none;
  }
  .periferi-editorial .site-header .brand .periferi-wordmark {
    font-size: 34px;
  }
}
@media (max-width: 600px) {
  .close-signature {
    right: auto;
    left: var(--rail-safe);
    font-size: min(28.5vw, calc((100vw - var(--rail-safe) * 2) / 3.47));
  }
}

/* ===========================================================================
   The chrome arrives in order, and the name last of all.
   ---------------------------------------------------------------------------
   Everything used to appear at once the moment the opening resolved. Now it
   assembles: the rail down its column, MENU at the foot of it, the way in,
   the two languages, the scroll marker — and then the name,
   one letter at a time, so the last thing that happens is the page saying
   what it is called. Reduced motion gets all of it at once, as before.
   ======================================================================== */
body:has(.hero.intro-running) .site-header .brand,
body:has(.hero.intro-running) .site-header > .button,
body:has(.hero.intro-running) .site-menu-toggle,
body:has(.hero.intro-running) .page-scroll-indicator {
  opacity: 0;
}
body:has(.hero[data-intro-state="complete"]) .site-menu-toggle {
  animation: hero-arrive 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.72s backwards;
}
body:has(.hero[data-intro-state="complete"]) .site-header > .button {
  animation: hero-arrive 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.86s backwards;
}
body:has(.hero[data-intro-state="complete"]) .lang-rail > button {
  animation: hero-arrive 0.6s cubic-bezier(0.16, 1, 0.3, 1)
    calc(1s + var(--n, 0) * 90ms) backwards;
}
.lang-rail > button:nth-child(2) {
  --n: 1;
}
body:has(.hero[data-intro-state="complete"]) .page-scroll-indicator {
  animation: hero-arrive 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.22s backwards;
}

/* The name, letter by letter. */
.periferi-wordmark > span {
  display: inline-block;
}
body:has(.hero.intro-running) .site-header .brand .periferi-wordmark > span {
  opacity: 0;
}
body:has(.hero[data-intro-state="complete"])
  .site-header
  .brand
  .periferi-wordmark
  > span {
  animation: hero-arrive 1s cubic-bezier(0.16, 1, 0.3, 1)
    calc(1.38s + var(--n, 0) * 90ms) backwards;
}
.periferi-wordmark > span:nth-child(2) {
  --n: 1;
}
.periferi-wordmark > span:nth-child(3) {
  --n: 2;
}
.periferi-wordmark > span:nth-child(4) {
  --n: 3;
}
.periferi-wordmark > span:nth-child(5) {
  --n: 4;
}
.periferi-wordmark > span:nth-child(6) {
  --n: 5;
}
.periferi-wordmark > span:nth-child(7) {
  --n: 6;
}
.periferi-wordmark > span:nth-child(8) {
  --n: 7;
}
@media (prefers-reduced-motion: reduce) {
  body:has(.hero[data-intro-state="complete"]) .site-header .brand,
  body:has(.hero[data-intro-state="complete"])
    .site-header
    .brand
    .periferi-wordmark
    > span,
  body:has(.hero[data-intro-state="complete"]) .site-header > .button,
  body:has(.hero[data-intro-state="complete"]) .site-menu-toggle,
  body:has(.hero[data-intro-state="complete"]) .page-scroll-indicator {
    animation: none;
  }
}

/* ===========================================================================
   Before the first paint.
   ---------------------------------------------------------------------------
   lang-boot.js marks the document while the modules are still on their way,
   when the language coming is not the one the markup is written in, so the
   translated text is held back for that moment rather than drawn in English
   and corrected in front of the visitor. It keeps its space — only its ink
   waits — and the mark clears itself after two seconds if the modules never
   arrive.
   ======================================================================== */
html[data-lang-swap] [data-i18n],
html[data-lang-swap] [data-i18n-html] {
  visibility: hidden;
}

/* ===========================================================================
   The drawn p.
   ---------------------------------------------------------------------------
   Every wordmark starts with the p from the favicon rather than Youth's own:
   a slab for the stem, a round bowl set beside it rather than around it, and
   a small counter a touch right of centre. It is fitted to the face — the
   bowl spans Youth's round x-height, the stem drops to Youth's descender —
   and keeps the favicon's weight, so it reads as the mark leading the name.
   One path in the page's defs; each wordmark draws it at 1em, sitting on the
   baseline like a letter, and gives back the tracking the letter would have.
   ======================================================================== */
.periferi-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.periferi-p {
  display: inline-block;
  width: 0.8588em;
  height: 0.711em;
  margin-right: -0.058em;
  vertical-align: -0.111em;
  fill: currentColor;
  overflow: visible;
}
.close-signature .periferi-p {
  margin-right: -0.065em;
}

/* The questions' headline stops short of the seal. In English it always did;
   the German line is a third longer and ran on across the disc and through
   the p at its centre. 63% of the card is where the disc begins at the
   narrowest width it is shown, so any language that needs more breaks into
   two balanced lines instead. Phones do without the seal and keep the whole
   width. */
@media (min-width: 861px) {
  .periferi-editorial .faq-section .deck-body > h2 {
    max-width: 63cqi;
    text-wrap: balance;
  }
}

/* Up to 760px MENU stands on a cream tile of its own, so it keeps its ink
   over the dark slides; the cream the rest of the chrome turns to there
   would be cream on cream. */
@media (max-width: 760px) {
  body[data-tone="dark"].periferi-editorial .site-menu-toggle {
    color: #181714;
  }
}

/* The field only a bot fills in: out of sight, out of the tab order, and
   hidden from screen readers by its label. */
.ask-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* While the sentence is on its way to the team, the arrow waits. */
.ask[aria-busy="true"] .ask-go {
  opacity: 0.45;
  cursor: progress;
}

/* ===========================================================================
   Not found — off the map.
   ---------------------------------------------------------------------------
   The page a host shows for any address that isn't there. The name is the
   idea: periferi is the periphery, so a missing page is the edge of the map.
   Cream page, the wordmark and the two languages on top, the line at the
   hero's size in the middle, the way back in the hero's ink pill, and the
   hero's map of Zürich fading in along the foot with its pin still
   breathing. Everything here is scoped to .nf-page.
   ======================================================================== */
body.nf-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: #fbf9ef;
  color: #181714;
}
/* The phone band behind the fixed header belongs to the deck. */
body.nf-page::before {
  content: none;
}
.nf-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 96px) 0;
}
.nf-head > .brand {
  color: #181714;
  text-decoration: none;
}
.nf-head .periferi-wordmark {
  font-size: clamp(30px, 2.6vw, 46px);
}
.nf-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: clamp(28px, 6svh, 72px) clamp(20px, 5vw, 96px)
    clamp(140px, 30svh, 300px);
  text-align: center;
}
.nf-eyebrow {
  margin: 0;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6459;
}
/* Two classes, to outrank the site's heading face: this line is the hero's
   voice, not a section title's. */
.nf-page .nf-title {
  margin: clamp(10px, 2svh, 22px) 0 0;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(54px, 10.5vw, 190px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.nf-line {
  max-width: 34ch;
  margin: clamp(16px, 3svh, 30px) 0 0;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #5f5b52;
  text-wrap: pretty;
}
.nf-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(22px, 4svh, 40px);
}
.nf-home {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.55em 0.55em 1.2em;
  border-radius: 9px;
  background: #181714;
  color: #fbf9ef;
  font-family: "Youth", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-home:hover {
  transform: translateY(-2px);
}
.nf-home:focus-visible,
.nf-write:focus-visible {
  outline: 2px solid #ef7f37;
  outline-offset: 4px;
}
.nf-arrow {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: #ef7f37;
  color: #181714;
  overflow: hidden;
}
.nf-arrow > span {
  display: block;
  font-size: 1.1em;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nf-home:hover .nf-arrow > span,
.nf-home:focus-visible .nf-arrow > span {
  transform: translate(3px, -3px);
}
.nf-write {
  padding: 4px 0 3px;
  border-bottom: 1px solid #18171466;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  color: #181714;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.nf-write:hover {
  border-bottom-color: #181714;
}
.nf-path {
  max-width: 100%;
  margin: clamp(18px, 3svh, 30px) 0 0;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #8e897c;
  overflow-wrap: anywhere;
}
.nf-path:empty {
  display: none;
}
.nf-map {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(160px, 36svh, 380px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%);
  mask-image: linear-gradient(to bottom, transparent, #000 38%);
}
@media (prefers-reduced-motion: reduce) {
  .nf-home,
  .nf-arrow > span,
  .nf-write {
    transition: none;
  }
}