/*
  klopoik.com — the company site of Klop Ltd.

  Deliberately NOT the Kneaden brand (warm parchment, a Playfair serif, food imagery).
  This is the company behind the product: cool paper, blue-black ink, one teal accent,
  a single sans, and the facts laid out like a register entry.

  No web fonts, no scripts, no third-party requests. The stylesheet is the only asset
  besides the icon, so the Content-Security-Policy can refuse everything else.
*/

:root {
  --paper: #f5f7f8;
  --surface: #ffffff;
  --ink: #0e1b24;
  --muted: #4d5d68;
  --rule: #d3dbe0;
  --accent: #0b6e69;
  --accent-ink: #ffffff;
  --warm: #c2571a;
  --focus: #0b6e69;

  --sans: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --rail: 11rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b1216;
    --surface: #111b21;
    --ink: #e6edf0;
    --muted: #97a7b1;
    --rule: #23323c;
    --accent: #56c7be;
    --accent-ink: #06211f;
    --warm: #f2a65a;
    --focus: #56c7be;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.5rem 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
}

.skip:focus {
  top: 0.75rem;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.wordmark::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: var(--accent);
}

.wordmark:hover {
  color: inherit;
}

/* The mark greets you. Without motion (reduced motion, print, an older browser) it says
   "Welcome" and nothing else. On screen it turns through the greetings, each in the same
   place so the masthead does not move, and it stops under a pointer or keyboard focus.
   Screen readers hear the link's own name once; the turning words are hidden from them. */

.greetings {
  display: inline-grid;
}

.greetings > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.greetings > span + span {
  display: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .greetings > span,
  .greetings > span + span {
    display: block;
    opacity: 0;
    animation: greet 18s ease-in-out infinite;
  }

  .greetings > span:nth-child(2) {
    animation-delay: 3s;
  }

  .greetings > span:nth-child(3) {
    animation-delay: 6s;
  }

  .greetings > span:nth-child(4) {
    animation-delay: 9s;
  }

  .greetings > span:nth-child(5) {
    animation-delay: 12s;
  }

  .greetings > span:nth-child(6) {
    animation-delay: 15s;
  }

  /* If the animation is ever cancelled (a capture tool, a browser setting), the mark still says
     Welcome: the first greeting rests visible and the running animation overrides it. */
  .greetings > span:first-child {
    opacity: 1;
  }

  .wordmark:hover .greetings > span,
  .wordmark:focus-visible .greetings > span {
    animation: none;
    opacity: 0;
  }

  .wordmark:hover .greetings > span:first-child,
  .wordmark:focus-visible .greetings > span:first-child {
    opacity: 1;
  }

  /* The square turns a quarter each time the greeting changes. */
  .wordmark::before {
    animation: quarter 3s cubic-bezier(0.7, 0, 0.2, 1) infinite;
  }
}

/* Six greetings, three seconds each: one sixth of the loop is 16.67%. */
@keyframes greet {
  0% {
    opacity: 0;
    transform: translateY(0.35em);
  }

  2.5%,
  14% {
    opacity: 1;
    transform: translateY(0);
  }

  16.6%,
  100% {
    opacity: 0;
    transform: translateY(-0.35em);
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.nav a {
  text-decoration: none;
  color: var(--muted);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ── Opening statement ────────────────────────────────────────────────── */

.opening {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem);
}

.kicker {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.nb {
  white-space: nowrap;
}

h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7.2vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lede {
  margin: 1.75rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.125rem, 2.1vw, 1.3125rem);
  line-height: 1.5;
  color: var(--muted);
}

.lede strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Entries: a label in the rail, the content beside it ──────────────── */

.entry {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule);
}

.entry h2 {
  margin: 0.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry-body > :first-child {
  margin-top: 0;
}

.entry-body > :last-child {
  margin-bottom: 0;
}

.entry-body p {
  max-width: 38rem;
  margin: 0 0 1rem;
}

.entry-body .plain {
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* ── The register: company facts ──────────────────────────────────────── */

.register {
  margin: 0;
  max-width: 44rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.register > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, 13rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 0.85rem 1.1rem;
}

.register > div + div {
  border-top: 1px solid var(--rule);
}

.register dt {
  font-size: 0.875rem;
  color: var(--muted);
}

.register dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.figure {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

address {
  font-style: normal;
}

/* ── The two companies: a card each ────────────────────────────────────────
   Each card shows the company's name. With a mouse, pointing at it (or reaching
   it with the keyboard) turns it over to show the facts on the back. Everywhere
   else (a touch screen, reduced motion, print, an older browser) nothing turns:
   the name and the facts are simply both on the card. */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.card {
  display: grid;
  border-radius: 6px;
}

.card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.card-inner {
  display: grid;
  align-content: start;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.card-face {
  padding: 1.25rem 1.25rem 0.75rem;
}

.card-back {
  padding-top: 0;
}

.card .card-place {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.card .card-hint {
  display: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.card .register {
  max-width: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
}

.card .register > div {
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 0;
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .card {
    perspective: 70rem;
  }

  .card-inner {
    align-content: stretch;
    min-height: 21rem;
    background: none;
    border: 0;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.5, 0, 0.15, 1);
  }

  .card:hover .card-inner,
  .card:focus .card-inner,
  .card:focus-within .card-inner {
    transform: rotateY(180deg);
  }

  .card-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* The front: the name, large, on a slow wash of the two colours. */
  .card-front {
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1.5rem;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
      linear-gradient(315deg, color-mix(in srgb, var(--warm) 14%, transparent), transparent 50%),
      var(--surface);
    background-size: 220% 220%, 220% 220%, auto;
    animation: wash 12s ease-in-out infinite alternate;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--ink) 55%, transparent);
  }

  .card-front h3 {
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  }

  .card .card-hint {
    display: block;
    margin-top: 0.9rem;
  }

  .card .card-hint::after {
    content: " \2192";
    display: inline-block;
    animation: nudge 1.8s ease-in-out infinite;
  }

  .card-back {
    justify-content: center;
    padding: 0.5rem 1.5rem;
    transform: rotateY(180deg);
    border-color: var(--accent);
  }

  .card-back .register {
    border-top: 0;
  }
}

@keyframes wash {
  from {
    background-position: 0% 0%, 100% 100%, 0 0;
  }

  to {
    background-position: 100% 100%, 0% 0%, 0 0;
  }
}

@keyframes nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0.35em);
  }
}

@keyframes quarter {
  0%,
  70% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.contact {
  font-family: var(--display);
  font-size: clamp(1.375rem, 3.4vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Colophon ─────────────────────────────────────────────────────────── */

.colophon {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding-block: 1.75rem 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
}

.colophon p {
  max-width: 46rem;
  margin: 0 0 0.6rem;
}

.colophon ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

/* ── Long-form pages (privacy, not found) ─────────────────────────────── */

.page {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 1rem;
}

.page h1 {
  max-width: 20ch;
  font-size: clamp(2rem, 5.4vw, 3.25rem);
}

.page .updated {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.prose {
  max-width: 40rem;
  padding-block: 1.5rem 0;
}

.prose h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.prose p,
.prose ul {
  margin: 0 0 1rem;
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li + li {
  margin-top: 0.35rem;
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Everything below is added on top of a page that is complete without it, and
   only for people who have not asked for less motion. No script: the page's
   Content-Security-Policy allows none. */

.opening {
  position: relative;
  isolation: isolate;
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Two soft lights drift behind the headline. */
  .opening::before,
  .opening::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(34rem, 70vw);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.22;
    pointer-events: none;
  }

  .opening::before {
    top: -18%;
    right: -4%;
    background: radial-gradient(circle, var(--accent), transparent 68%);
    animation: drift-a 19s ease-in-out infinite alternate;
  }

  .opening::after {
    bottom: -30%;
    right: 26%;
    background: radial-gradient(circle, var(--warm), transparent 66%);
    opacity: 0.16;
    animation: drift-b 23s ease-in-out infinite alternate;
  }

  /* The headline arrives a word at a time. */
  h1 .word {
    display: inline-block;
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  h1 .word:nth-child(2) {
    animation-delay: 0.07s;
  }

  h1 .word:nth-child(3) {
    animation-delay: 0.14s;
  }

  h1 .word:nth-child(4) {
    animation-delay: 0.21s;
  }

  h1 .word:nth-child(5) {
    animation-delay: 0.28s;
  }

  h1 .word:nth-child(6) {
    animation-delay: 0.35s;
  }

  h1 .word:nth-child(7) {
    animation-delay: 0.42s;
  }

  /* Its last word carries a light that keeps moving. */
  h1 .shine {
    background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 30%, var(--accent) 45%, var(--warm) 55%, var(--ink) 70%, var(--ink) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.42s both, sweep 7s ease-in-out 1.4s infinite;
  }

  .kicker,
  .lede {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .lede {
    animation-delay: 0.6s;
  }

  /* A cursor after the kicker, as if it had just been typed. */
  .kicker::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1em;
    margin-left: 0.35em;
    vertical-align: -0.15em;
    background: var(--accent);
    animation: blink 1.1s steps(1) infinite;
  }

  /* The line under the masthead carries a slow light. */
  .masthead {
    border-bottom-color: transparent;
    background:
      linear-gradient(90deg, transparent, var(--accent), var(--warm), transparent) bottom / 40% 1px no-repeat,
      linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat;
    animation: travel 9s linear infinite;
  }

  /* Links draw their underline. */
  .nav a {
    background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat;
    transition: background-size 0.3s ease, color 0.2s ease;
  }

  .nav a:hover,
  .nav a:focus-visible {
    background-size: 100% 2px;
    text-decoration-color: transparent;
  }

  .contact a {
    text-decoration: none;
    background: linear-gradient(90deg, var(--accent), var(--warm)) left bottom / 100% 0.09em no-repeat;
    transition: background-size 0.35s ease, color 0.2s ease;
  }

  .contact a:hover,
  .contact a:focus-visible {
    background-size: 100% 100%;
    color: var(--accent-ink);
  }

  /* Each section label gets a tick that grows when you point at the section. */
  .entry h2::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.6rem;
    background: var(--accent);
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s ease;
  }

  .entry:hover h2::before {
    transform: scale(1.15) rotate(45deg);
    background: var(--warm);
  }
}

/* Sections slide up into place as they are scrolled to, where the browser can tie an animation
   to scrolling. Elsewhere they are simply there. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .entry {
      animation: arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.45em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Position only, never opacity: a section that has not been scrolled to yet must still be
   there to read, for a full-page capture, a crawler, or a browser that stops the animation. */
@keyframes arrive {
  from {
    transform: translateY(2rem);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes sweep {
  0%,
  20% {
    background-position: 100% 0;
  }

  80%,
  100% {
    background-position: 0% 0;
  }
}

@keyframes blink {
  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0;
  }
}

@keyframes travel {
  from {
    background-position: -40% bottom, 0 bottom;
  }

  to {
    background-position: 140% bottom, 0 bottom;
  }
}

@keyframes drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-9%, 12%) scale(1.15);
  }
}

@keyframes drift-b {
  from {
    transform: translate(0, 0) scale(1.1);
  }

  to {
    transform: translate(14%, -10%) scale(0.9);
  }
}

/* ── Narrow screens: the rail folds above its content ─────────────────── */

@media (max-width: 44rem) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .register > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .nav,
  .skip {
    display: none;
  }
}