/* Pending Further Notice */

/* Type, in three voices:
   PFN speaking — Schibsted Grotesk.
   PFN doing paperwork — PFN Mono (IBM Plex Mono, renamed as its license asks).
   PFN consulting the dictionary — the system serif.
   Products bring their own. */

@font-face {
  font-family: "Schibsted Grotesk PFN";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "PFN Mono";
  src: url("fonts/pfn-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter Corkboardr";
  src: url("fonts/inter-corkboardr.woff2") format("woff2");
  font-weight: 400 650;
  font-display: swap;
}

:root {
  --paper: #ececec;
  --ink: #141414;
  --ink-2: #3a3a3a;
  --ink-3: #6a6a6a;
  --rule: #c8c8c8;
  --stamp-ink: #161616;
  --stamp-blend: multiply;

  --sans: "Schibsted Grotesk PFN", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "PFN Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, "Sitka Text", Cambria, Georgia, serif;

  /* Products may break the gray. */
  --corkboardr: #fce794;
  --corkboardr-ink: #121212;
  --corkboardr-font: "Inter Corkboardr", "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;

  --margin: clamp(1rem, 3.5vw, 2.75rem);
  --label-w: clamp(7rem, 20vw, 17rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --stamp-w: clamp(13rem, 25vw, 23rem);
  --seal-w: clamp(10.5rem, 19vw, 18rem);

  /* Light only. PFN is gray paper. */
  color-scheme: only light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
p,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* Paperwork */

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.no {
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* The sheet */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--margin);
  overflow: hidden;
}

.page > :not(.impressions) {
  position: relative;
  z-index: 1;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.masthead .name {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.masthead .name a {
  text-decoration: none;
}

.masthead p:not(.name) {
  color: var(--ink-2);
}

.revision {
  text-align: right;
}

/* Sections share one grid: a label column, then the work. */

.row {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-top: clamp(6.5rem, 20vh, 12rem);
}

.row > :first-child {
  padding-top: 0.15rem;
}

/* Products open the page: 01 leads, 02 answers it. */

.showcase {
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
}

/* Close enough that Simplicity shows at the foot of the first screen. */
.showcase + .row {
  padding-top: clamp(4.5rem, 12vh, 8rem);
}

.products {
  --note-w: clamp(18.5rem, 36vw, 34rem);
  display: grid;
  grid-template-columns: var(--note-w) minmax(0, var(--note-w));
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
}

.product {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.slot {
  flex: 1;
  display: grid;
  place-items: center;
}

.product--pending .status {
  width: clamp(11rem, 17vw, 16.5rem);
}

/* Corkboardr, as a Corkboardr note: its yellow, corners, pin, type, and paper. */

.note {
  --pin-right: clamp(1.25rem, 2.6vw, 2.25rem);
  --pin-w: clamp(3.5rem, 5vw, 4.75rem);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 20 / 19;
  padding: clamp(1.5rem, 3.1vw, 2.75rem);
  border-radius: 16px;
  background: var(--corkboardr);
  color: var(--corkboardr-ink);
  font-family: var(--corkboardr-font);
  text-decoration: none;
  rotate: -1.5deg;
  /* Pivot on the pin, so the paper swings rather than slides. */
  transform-origin: calc(100% - var(--pin-right) - var(--pin-w) * 0.4) calc(var(--pin-w) * 0.45 - 0.85rem);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.06),
    0 24px 40px -22px rgb(0 0 0 / 0.38);
  transition:
    rotate 520ms cubic-bezier(0.25, 1.65, 0.45, 1),
    scale 260ms cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Hover is read from the column, which holds still, so the swing never flickers at the edges. */
.product--lead:hover .note,
.note:focus-visible {
  rotate: 0.75deg;
  scale: 1.018;
  box-shadow:
    0 2px 2px rgb(0 0 0 / 0.05),
    0 44px 64px -28px rgb(0 0 0 / 0.46);
}

.note:focus-visible {
  outline-color: var(--ink);
  outline-offset: 6px;
}

.pin {
  position: absolute;
  top: -0.85rem;
  right: var(--pin-right);
  width: var(--pin-w);
  height: auto;
  pointer-events: none;
}

.note-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.note-mark {
  width: 64%;
  max-width: 19rem;
  height: auto;
}

.note-tagline {
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgb(18 18 18 / 0.7);
}

.note-line {
  margin: calc(clamp(1.5rem, 2.6vw, 2.25rem) - 15px) 0 1.5rem;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(18 18 18 / 0.18);
  font-size: 0.875rem;
  font-weight: 500;
}

.note-go {
  transition: translate 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.product--lead:hover .note-go,
.note:focus-visible .note-go {
  translate: 2px -2px;
}

/* Paper imperfections, after Corkboardr's own: light and depth, not shape.
   Low-opacity white and black over the yellow, clipped to the note's corners. */

.paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.paper > span,
.note-line::after,
.lift::before,
.lift::after {
  position: absolute;
  content: "";
}

/* 1. Soft crease: a broad roll of light into shadow, feathered at both ends.
   Hung from the description, so it always lies just under the copy. */
.note-line {
  position: relative;
}

.note-line::after {
  top: calc(100% + 48px);
  left: 28%;
  z-index: -1;
  width: 64%;
  height: 34px;
  rotate: 5deg;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.18) 38%,
    rgb(255 255 255 / 0.07) 50%,
    rgb(0 0 0 / 0.04) 61%,
    rgb(0 0 0 / 0.015) 77%,
    rgb(0 0 0 / 0) 100%
  );
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
}

/* 2. Edge lift: a contact shadow under part of the bottom edge, sheen just above. */
.lift {
  bottom: 0;
  left: 30%;
  width: 42%;
  height: 32px;
  opacity: 0.85;
  transition: opacity 260ms ease-out;
}

.product--lead:hover .lift,
.note:focus-visible .lift {
  opacity: 1;
}

.lift::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 17px;
  background: radial-gradient(60% 100% at 50% 100%, rgb(0 0 0 / 0.22) 0%, rgb(0 0 0 / 0.085) 45%, rgb(0 0 0 / 0) 100%);
}

.lift::after {
  right: 7%;
  bottom: 15px;
  left: 7%;
  height: 12px;
  background: radial-gradient(60% 100% at 50% 100%, rgb(255 255 255 / 0.45) 0%, rgb(255 255 255 / 0.14) 45%, rgb(255 255 255 / 0) 100%);
}

/* 3. Folded corner: Corkboardr's dog-ear. The corner face is shaded, the fold edge
   catches a little light, then a seam and a short cast onto the sheet. */
.fold {
  bottom: 0;
  left: 0;
  width: max(2.75rem, 12%);
  aspect-ratio: 1;
  background: linear-gradient(
    45deg,
    rgb(0 0 0 / 0.2) 0%,
    rgb(0 0 0 / 0.15) 32%,
    rgb(0 0 0 / 0.1) 45%,
    rgb(255 255 255 / 0.06) 49.5%,
    rgb(0 0 0 / 0.03) 53%,
    rgb(0 0 0 / 0.015) 58%,
    rgb(0 0 0 / 0) 66%
  );
}

/* Principle */

.principle-title {
  font-size: clamp(3rem, 6.4vw, 5.75rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.principle-sub {
  margin-top: 1.125rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.principle-grid {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 29rem);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.principle-lead {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.principle-body {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.875rem;
  color: var(--ink-2);
}

.signoff {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: 2.5rem;
  padding-top: 0.625rem;
  padding-right: 3rem;
  border-top: 1px solid var(--ink-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The dictionary, consulted with great seriousness. */

.definition {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  margin-top: 0.2rem;
  padding: 1.125rem 0 1.375rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
}

.definition dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.125rem;
}

.definition dfn {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
}

.pron {
  font-size: 1.1875rem;
  color: var(--ink-3);
}

.definition dd {
  margin-top: 1rem;
  font-size: 1.1875rem;
  line-height: 1.45;
}

/* Statement (the 404 page) */

.opening {
  position: relative;
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: clamp(4.5rem, 14vh, 8.5rem) clamp(3rem, 8vh, 5rem);
}

.statement-block {
  position: relative;
  grid-column: 2;
  padding-bottom: 1.1em;
  font-size: clamp(2.5rem, 5.3vw, 5.25rem);
}

.statement {
  max-width: 19.5ch;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.statement + p {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--ink-2);
}

.hero-stamp {
  position: absolute;
  top: var(--seal-top, 2.24em);
  left: min(var(--seal-left, 14.9ch), calc(100% - var(--seal-w)));
  width: var(--seal-w);
  rotate: -6deg;
}

/* Stamps of every kind */

.hero-stamp,
.impression,
.status svg {
  display: block;
  height: auto;
  overflow: visible;
  color: var(--stamp-ink);
  mix-blend-mode: var(--stamp-blend);
}

.impressions {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.impression {
  position: absolute;
  width: var(--stamp-w);
  translate: -50% -50%;
}

.plates {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.status {
  position: relative;
  display: block;
  width: clamp(8.5rem, 12vw, 10.5rem);
}

.status svg {
  width: 100%;
}

.status-text {
  display: block;
  padding: 0.125rem 0.375rem;
  border: 1.5px solid currentColor;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.status.inked .status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Footer and desk */

.foot {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr) auto;
  column-gap: var(--gap);
  align-items: end;
  padding-top: clamp(7rem, 22vh, 13rem);
}

.foot h2 {
  margin-bottom: 0.5rem;
}

.desk {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.desk[hidden] {
  display: none;
}

.pad svg {
  display: block;
  width: 2.5rem;
  height: 1.6rem;
}

.pad-tin {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}

.pad-felt {
  fill: var(--stamp-ink);
}

.holder svg {
  display: block;
  width: 1.4rem;
  height: 1.6rem;
}

.holder .handle {
  fill: var(--ink-3);
}

.holder .rubber {
  fill: var(--stamp-ink);
}

.pad:hover .pad-tin,
.holder:hover .handle {
  stroke: var(--ink);
  fill: var(--ink);
}

.pad:hover .pad-tin {
  fill: none;
}

.holder[aria-pressed="true"] .handle,
.holder[aria-pressed="true"] .rubber {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.clear:hover {
  color: var(--ink);
}

/* A small tag, pinned to the window. Specific enough to beat the sheet's
   "everything in flow" rule, which would otherwise make it a full-width bar. */
.page > .holding {
  position: fixed;
  left: 50%;
  bottom: var(--margin);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 2 * var(--margin));
  translate: -50% 0;
  padding: 0.375rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-align: center;
  text-wrap: balance;
}

.holding[hidden] {
  display: none;
}

.coarse {
  display: none;
}

@media (pointer: coarse) {
  .fine {
    display: none;
  }

  .coarse {
    display: inline;
  }
}

/* While the stamp is in hand */

.is-holding .page {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23141414' stroke='%23f2f2f2' stroke-width='1.25' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='6.5' r='4.75'/%3E%3Cpath d='M13.5 10.5h5l1 8h-7z'/%3E%3Crect x='6.5' y='18.5' width='19' height='6' rx='1.5'/%3E%3Crect x='8' y='24.5' width='16' height='3' rx='.5'/%3E%3C/g%3E%3C/svg%3E") 16 29, crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.is-holding .page a,
.is-holding .page button {
  cursor: pointer;
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .landing {
    animation: land 110ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .dab {
    animation: dab 160ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note,
  .note-go,
  .lift {
    transition: none;
  }

  .product--lead:hover .note,
  .note:focus-visible {
    rotate: -1.5deg;
    scale: 1;
  }

  .product--lead:hover .note-go,
  .note:focus-visible .note-go {
    translate: none;
  }
}

@keyframes land {
  from {
    scale: 1.035;
    opacity: 0.4;
  }
}

@keyframes dab {
  40% {
    scale: 0.9;
  }
}

/* Narrower */

@media (max-width: 52rem) {
  .row,
  .foot {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }

  .products {
    --note-w: 56vw;
  }
}

@media (max-width: 44rem) {
  :root {
    --stamp-w: clamp(12rem, 58vw, 15rem);
    --seal-w: var(--stamp-w);
  }

  .row {
    padding-top: 6rem;
  }

  .showcase {
    padding-top: 3rem;
  }

  .showcase + .row {
    padding-top: 5rem;
  }

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

  .slot {
    min-height: 10rem;
  }

  .product--pending .status {
    width: 12rem;
  }

  .principle-grid {
    display: block;
  }

  .definition {
    margin-block: 2rem;
  }

  .opening {
    display: block;
    padding: 30svh 0 0;
  }

  .statement-block {
    position: static;
    padding-bottom: 0;
    font-size: 2rem;
  }

  .hero-stamp {
    top: 3rem;
    left: auto;
    right: -0.5rem;
    rotate: -6deg;
  }

  .foot {
    padding-top: 7rem;
  }

  .desk {
    justify-content: flex-start;
  }
}

/* Paper */

@media print {
  :root {
    --paper: #fff;
    --stamp-ink: #000;
    --stamp-blend: multiply;
  }

  .desk,
  .holding {
    display: none;
  }

  .note {
    box-shadow: none;
  }
}