:root {
  --cream: #f7efc9;
  --paper: #fbf6df;
  --sun: #f6b80c;
  --sea: #4f7fa6;
  --ink: #1e3b5e;
  --tang: #dd4f08;

  --gutter: clamp(1.5rem, 7vw, 8.5rem);
  --section: clamp(5rem, 10vw, 9.5rem);
  --stack: clamp(2.25rem, 4vw, 3.5rem);
  /* The type scale: one section heading, one sub-heading, two text sizes. */
  --heading: clamp(2.25rem, 5vw, 4.5rem);
  --sub: 1.3rem;
  --text: 1.125rem;
  --small: 0.9rem;
  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.7 16.3 14.7 9.3M9.5 19.3l9.4-3.5M4.7 14.5l3.5-9.4' fill='none' stroke='%231e3b5e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.8 5.2 2.6 7.8 9.5 9.6-6.2 1.6-8.7 4.3-9.5 10.400-.8-6.100-3.200-8.700-9.500-10.300C8.900 9.900 11.100 7.300 12 2z' fill='%23f6b80c' stroke='%231e3b5e' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --curl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cpath d='M3 12C14 2 30 4 30 14c0 9-13 8-11 0 2-7 16-6 33 8M45 24l8-1.500-2.500-8' fill='none' stroke='%23f7efc9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%231e3b5e' stroke-opacity='.4' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M20 24l6-4'/%3E%3Cpath d='M98 40l2 7'/%3E%3Cpath d='M56 84l7 2'/%3E%3Cpath d='M124 112l-5 5'/%3E%3Cpath d='M22 128l3-6'/%3E%3C/g%3E%3C/svg%3E");
  --waves-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 14q15-6 30 0t30 0 30 0 30 0' fill='none' stroke='%231e3b5e' stroke-opacity='.22' stroke-width='1.5'/%3E%3C/svg%3E");
  --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16'%3E%3Cpath d='M0 8q15-5 30 0t30 0 30 0 30 0' fill='none' stroke='%234f7fa6' stroke-opacity='.28'/%3E%3C/svg%3E");
}

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

/* Everything is sized in rem, so this one line scales the whole site. */
html {
  font-size: 85%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--text)/1.6 "Outfit", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Film grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

svg,
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--cream);
}

.skip:focus {
  top: 1rem;
}

/* ---------- Shared type ---------- */

.display {
  font-size: var(--heading);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--sea);
}

.label,
.hero__label,
.hero__edge,
.bar__nav,
.button,
.badge {
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.script {
  font-family: "Ms Madi", cursive;
  font-size: clamp(3.2rem, 7.6vw, 8rem);
  line-height: 1;
  color: var(--tang);
  rotate: -7deg;
  white-space: nowrap;
  pointer-events: none;
}

.button,
.badge {
  position: relative;
  font-family: inherit;
  display: inline-block;
  padding: 0.75em 1.5em;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--sun);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
}

.button:hover {
  background: var(--cream);
}

.badge {
  rotate: -3deg;
}

.badge::after,
.hero__label--left::after,
.hero__label--right::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ticks) center / contain no-repeat;
}

.button--quiet {
  background: none;
  box-shadow: inset 0 0 0 2px currentColor;
  color: inherit;
}

.button--quiet:hover {
  background: var(--cream);
  color: var(--ink);
}

/* Each main section carries its heading again, huge and faint, behind the
   content. It is sized from the section's own width and the heading's length
   (--n letters), so the whole heading very nearly fits and just clips the edges. */
.has-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
}

.ghost {
  position: absolute;
  right: -0.03em;
  bottom: -0.16em;
  z-index: -1;
  font-size: calc(95cqw / (var(--n) * 0.6));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
  opacity: 0.08;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: var(--cream);
}

.bar__name {
  font-weight: 900;
  font-size: var(--sub);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
}

.bar__nav {
  display: flex;
  gap: clamp(0.9rem, 3vw, 2.5rem);
  font-size: var(--small);
  white-space: nowrap;
}

.bar__nav a {
  text-decoration: none;
  padding: 0.3rem 0;
}

.bar__nav a:hover {
  color: var(--tang);
}

/* Order is the last link and the only one dressed as a button */
.bar__nav .bar__cta {
  padding: 0.5rem 1.2rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--tang);
  color: var(--cream);
  rotate: -2deg;
  transition: translate 0.15s ease-out, background-color 0.15s ease-out;
}

.bar__nav .bar__cta:hover {
  background: var(--ink);
  color: var(--cream);
  translate: 0 -2px;
}

.bar__nav {
  align-items: center;
}

.bar__toggle {
  display: none;
}

/* Phones and tablets: the menu opens and closes, nothing scrolls sideways */
@media (max-width: 64rem) {
  .bar__toggle {
    display: block;
    padding: 0.5rem 1.1rem;
    border: 2.5px solid var(--ink);
    border-radius: var(--wobble);
    background: var(--sun);
    color: var(--ink);
    font: inherit;
    font-size: var(--small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    cursor: pointer;
  }

  .bar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    border-bottom: 2.5px solid var(--ink);
    background: var(--cream);
    font-size: var(--text);
    overflow: visible;
    white-space: normal;
  }

  .bar.is-open .bar__nav {
    display: flex;
  }

  .bar__nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgb(30 59 94 / 0.25);
  }

  .bar__nav a:last-child {
    border-bottom: 0;
  }

  .bar__nav {
    align-items: stretch;
  }

  .bar__nav .bar__cta {
    align-self: flex-start;
    margin-top: 1rem;
    padding: 0.7rem 1.6rem;
    border: 2.5px solid var(--ink);
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: var(--section) var(--gutter);
  background: var(--sun);
  color: var(--ink);
}

.hero__intro {
  max-width: 24rem;
  font-size: var(--text);
}

.hero__intro p + p {
  margin-top: 0.75rem;
}

.hero__hook {
  font-size: var(--sub);
  font-weight: 900;
  line-height: 1.2;
  text-transform: lowercase;
}

.hero__art {
  width: min(70vw, 22rem);
  aspect-ratio: 3 / 4;
}

.wordmark {
  position: relative;
  z-index: 2;
  margin-top: -0.75em;
  font-size: clamp(2.9rem, 11.7vw, 13.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* The two O's are drawn as rings so the pupils can move inside them */
.eye {
  position: relative;
  display: inline-block;
  width: 0.54em;
  height: 0.54em;
  margin: 0 0.03em;
  border: 0.165em solid currentColor;
  border-radius: 50%;
  translate: 0 0.01em;
}

.eye i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.09em;
  height: 0.09em;
  margin: -0.045em;
  border-radius: 50%;
  background: currentColor;
  translate: calc(var(--px, 0.5) * 0.04em) calc(var(--py, 0.3) * 0.04em);
  transition: translate 0.12s ease-out;
}

/* A pair of eyes on their own, used as a small doodle */
.peek {
  margin-bottom: 0.75rem;
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--sea);
}

.hero__label--left,
.hero__label--mid,
.hero__label--right {
  position: relative;
  padding: 0.75em 1.5em;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
}

.hero__label--left {
  background: var(--cream);
  text-transform: none;
  rotate: -3deg;
}

.hero__label--mid {
  background: var(--sea);
  color: var(--cream);
  rotate: 2deg;
}

.hero__label--right {
  background: var(--tang);
  color: var(--cream);
  rotate: 3deg;
}

.hero__edge {
  display: none;
}

/* Phones and small tablets: the wordmark sits across the middle of the
   picture, as it does on wide screens. */
@media (max-width: 51.99rem) {
  .hero__art,
  .wordmark {
    grid-area: 2 / 1;
  }

  .wordmark {
    align-self: center;
    margin-top: 0;
    font-size: clamp(2.9rem, 17vw, 9rem);
  }
}

@media (min-width: 52rem) {
  .hero {
    display: block;
    min-height: clamp(32rem, calc(100svh - 3.5rem), 54rem);
    padding: 0;
  }

  .hero__intro {
    position: absolute;
    left: var(--gutter);
    top: 13%;
    /* Narrow enough to clear the wordmark, so the text can run past it */
    width: 16vw;
    max-width: 20rem;
    font-size: clamp(0.9rem, 1.15vw, var(--text));
  }

  .hero__intro--more {
    left: auto;
    right: var(--gutter);
  }

  .hero__hook {
    font-size: 1.15em;
  }

  .hero__art {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: auto;
    height: 78%;
  }

  .wordmark {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0;
    translate: 0 -50%;
    text-align: center;
  }

  .hero__label {
    position: absolute;
    bottom: 15%;
  }

  .hero__label--left {
    left: var(--gutter);
    bottom: 19%;
  }

  .hero__label--mid {
    left: calc(var(--gutter) + 1.5rem);
    bottom: 9%;
  }

  .hero__label--right {
    right: var(--gutter);
    bottom: 12%;
  }

  .hero__edge {
    display: block;
    position: absolute;
    left: 1.5rem;
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-size: var(--small);
  }

  .hero__edge--top {
    top: 13%;
  }

  .hero__edge--bottom {
    bottom: 13%;
  }
}

/* ---------- Catalogue ---------- */

.catalogue {
  padding: var(--section) var(--gutter);
  background: var(--waves) var(--cream);
}

.heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}

.catalogue__note {
  margin-top: 1.25rem;
}

.catalogue__hook {
  font-size: var(--sub);
  font-weight: 900;
  line-height: 1.2;
  text-transform: lowercase;
}

.catalogue__hook + .catalogue__intro {
  margin-top: 0.5rem;
}

.catalogue__intro {
  max-width: 46rem;
}

.catalogue__small {
  margin-top: 0.5rem;
  font-size: var(--small);
}

/* A side-scrolling row of cards, one per type of print, three in view on a
   wide screen, with arrows beside the heading. Each card carries the type's
   name, a short line, what you get and where prices start. Picking a card
   swaps its text for its picture, inside the same card at the same size;
   picking it again brings the text back. */
.rail {
  position: relative;
  margin-top: calc(var(--stack) - 0.5rem);
}

/* The arrows sit on the row itself, one on each side of the cards. */
.arrows {
  position: absolute;
  inset: 0 -1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.arrows[hidden] {
  display: none;
}

/* With room in the margins, the arrows stand clear of the cards. */
@media (min-width: 56rem) {
  .arrows {
    inset: 0 -3.5rem;
  }
}

.arrow {
  width: 2.75rem;
  height: 2.75rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: translate 0.15s ease-out, background-color 0.15s ease-out, opacity 0.15s ease-out;
}

.arrow:hover {
  background: var(--sun);
  translate: 0 -2px;
}

.arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.types {
  display: flex;
  gap: 1.25rem;
  padding: 0.5rem 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.types::-webkit-scrollbar {
  display: none;
}

.type {
  position: relative;
  flex: none;
  display: flex;
  width: 85%;
  min-height: 24rem;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  scroll-snap-align: start;
  transition: translate 0.15s ease-out, background-color 0.15s ease-out;
}

.type__face {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The picture side: it covers the card, so the card never changes size. */
.type__pic {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.type.is-open .type__face {
  visibility: hidden;
}

.type__art {
  flex: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  cursor: pointer;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* A real picture fills the card, keeping the faces near the top in view. */
.type__art img {
  position: absolute;
  inset: 0;
  object-position: center 20%;
}

.type__tag {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  padding: 0.3em 0.7em;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--sun);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--small);
  font-weight: 600;
  rotate: -2deg;
}

.type__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  position: absolute;
  inset: auto 0 0;
  padding: 0.8rem;
  pointer-events: none;
}

/* The picture takes the whole card; the name and button float over it. */
.type__bar .type__name {
  padding: 0.25em 0.7em;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--paper);
  font-size: var(--sub);
  color: var(--ink);
}

.type__bar > * {
  pointer-events: auto;
}

.type__bar .button {
  padding: 0.5em 1em;
}

.type:hover {
  background: #fff8d6;
  translate: 0 -4px;
}

@media (min-width: 40rem) {
  .type {
    width: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 64rem) {
  .type {
    width: calc((100% - 2.5rem) / 3);
  }
}

.type__name {
  display: block;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--sea);
}

.type__details {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.type__details:empty,
.type__about:empty,
.type__note:empty {
  display: none;
}

.type__note {
  font-size: var(--small);
  font-weight: 600;
  line-height: 1.45;
}

.includes {
  display: grid;
  gap: 0.3rem;
  font-size: var(--small);
}

.includes li {
  display: flex;
  gap: 0.6rem;
}

.includes li::before {
  content: "+";
  font-weight: 900;
  color: var(--tang);
}

.includes:empty {
  display: none;
}

/* The starting price sits on the card's bottom edge, whatever the text above. */
.type__foot {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 2px dashed rgb(30 59 94 / 0.3);
}

.type__budget {
  font-size: var(--small);
  line-height: 1.45;
}

.type__from {
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.type__from strong {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--tang);
}

@media (min-width: 52rem) {
  .catalogue__intro {
    max-width: none;
  }

  .catalogue .catalogue__custom {
    width: auto;
    justify-content: space-between;
  }
}

/* Under the cards: the way to the ready-made prints and the custom note, side by side. */
.catalogue__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: var(--stack);
}

.catalogue__foot .catalogue__custom {
  flex: 1 1 22rem;
  margin-top: 0;
}

.catalogue__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  width: fit-content;
  margin-top: var(--stack);
  padding: 0.9rem 1rem 0.9rem 1.5rem;
  border-radius: 10px;
  background: var(--tang);
  color: var(--cream);
  font-weight: 600;
}

.catalogue__custom .button {
  background: var(--cream);
}

.catalogue__custom .button:hover {
  background: var(--sun);
}

.bar__nav [aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---------- How it works ---------- */

.how {
  display: grid;
  gap: var(--stack) clamp(2rem, 5vw, 5rem);
  padding: var(--section) var(--gutter);
  background: var(--scribble), var(--tang);
  color: var(--cream);
}

.how .display {
  color: var(--cream);
}

/* Left: heading with a short pointer to the terms */
.how__note {
  max-width: 22rem;
  margin-top: var(--stack);
  padding: 1rem 1.3rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--ink);
  color: var(--cream);
  rotate: -1.5deg;
}

/* Right: the two ways to order */
.how__types {
  display: grid;
  gap: 1.25rem;
}

/* The one line nobody should miss: a yellow tag under the steps. */
.terms__list dd p + p {
  margin-top: 0.6rem;
}

.terms__list dd .terms__h {
  margin-top: 1.4rem;
  font-size: var(--sub);
  font-weight: 900;
  line-height: 1.2;
  text-transform: lowercase;
}

.how__budget {
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--sun);
  color: var(--ink);
}

.how__type {
  padding: 1.5rem 1.75rem 1.7rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--cream);
  color: var(--ink);
}

.how__type h3 {
  margin-bottom: 1.1rem;
  font-size: var(--sub);
  font-weight: 900;
  line-height: 1.15;
  text-transform: lowercase;
}

@media (min-width: 58rem) {
  .how {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}

.steps {
  display: grid;
  gap: 0.7rem;
  counter-reset: step;
}

.steps li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--small);
  font-weight: 900;
  line-height: 1.7rem;
  text-align: center;
}

/* ---------- Commissions ---------- */

.commissions {
  display: grid;
  background: var(--sea);
}

.commissions__list {
  position: relative;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: var(--section) var(--gutter) calc(var(--section) + 2.5rem);
  background:
    radial-gradient(circle, rgb(30 59 94 / 0.2) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    var(--cream);
  text-align: center;
}

.menu {
  margin-top: 2rem;
}

.menu li {
  font-size: clamp(1.55rem, 2.8vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--sea);
}

.menu__note {
  margin-top: 1.75rem;
}
.menu small {
  margin-left: 0.6em;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
  vertical-align: 0.6em;
}

.commissions__title {
  margin-top: 0.75rem;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  color: var(--ink);
}

.commissions__hook {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--sun);
}

.commissions__how .includes {
  margin-top: 1.25rem;
  font-size: var(--text);
}

.commissions__how .includes li::before {
  color: var(--sun);
}

.order__hook {
  font-size: var(--sub);
  font-weight: 900;
  text-transform: lowercase;
}

.script--over {
  position: absolute;
  right: 4%;
  bottom: 5%;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  rotate: -10deg;
}

.commissions__how {
  align-self: center;
  padding: var(--section) var(--gutter);
  color: var(--cream);
}

.commissions__how p + p {
  margin-top: 1rem;
}

.commissions__terms {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--sun);
}

.brief {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  font-size: var(--text);
}

.brief label {
  display: grid;
  gap: 0.35rem;
}

.brief input,
.brief select,
.brief textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.brief__hint {
  margin-top: -0.4rem;
  font-size: var(--small);
  opacity: 0.9;
}

.brief :focus-visible {
  outline-color: var(--sun);
}

.brief button {
  font-family: inherit;
}

.brief button:disabled {
  opacity: 0.6;
  cursor: default;
}

.lighter {
  display: block;
  margin-top: 0.35rem;
  opacity: 0.85;
}

.brief .actions {
  margin-top: 0.5rem;
}

.brief__status:empty {
  display: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 60rem) {
  .commissions {
    grid-template-columns: 5fr 4fr;
  }
}

.how__terms {
  justify-self: start;
}

.sparks {
  display: grid;
  gap: 0.5rem;
}

/* A looping pen arrow */
.doodle-arrow {
  display: none;
}

@media (min-width: 58rem) {
  .doodle-arrow {
    display: inline-block;
    width: 4.5rem;
    height: 2.6rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    background: var(--curl) center / contain no-repeat;
  }
}

.brief__agree {
  margin-top: 2.25rem;
  font-size: var(--small);
}

.order .brief .brief__agree + .actions {
  margin-top: 1rem;
}

/* ---------- Terms page ---------- */

.terms {
  min-height: 70vh;
  padding: var(--section) var(--gutter);
  background: var(--cream);
}

.terms__sub {
  margin-top: 1.25rem;
  font-size: var(--sub);
  font-weight: 900;
  text-transform: lowercase;
}

.terms__lead {
  margin-top: 0.6rem;
}

.terms__close {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--stack);
}

/* A plain list: name on the left, what it means on the right */
.terms__list {
  margin: var(--stack) 0 0;
}

.terms__list div {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 1.5rem 0;
}

/* A faint dashed line is the only thing between sections */
.terms__list div + div {
  border-top: 1.5px dashed rgb(30 59 94 / 0.3);
}

.terms__list dd {
  padding-top: 0.35rem;
}

/* Each heading sits in a small hand-drawn tag */
.terms__list dt {
  justify-self: start;
  align-self: start;
  padding: 0.4rem 0.9rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--sun);
  font-weight: 900;
  line-height: 1.25;
  text-transform: lowercase;
  rotate: -1.5deg;
}

.terms__list div:nth-child(3n + 2) dt {
  background: var(--paper);
  rotate: 1deg;
}

.terms__list div:nth-child(3n) dt {
  background: var(--tang);
  color: var(--cream);
  rotate: -0.5deg;
}

.terms__list dd {
  margin: 0;
}

.terms__list dd p + ul,
.terms__list dd ul + p {
  margin-top: 0.6rem;
}

.terms__list ul {
  display: grid;
  gap: 0.35rem;
}

.terms__list li {
  padding-left: 1.1rem;
  background: radial-gradient(circle, currentColor 0.18rem, transparent 0.2rem) left 0.6em / 0.5rem 0.5rem no-repeat;
}

@media (min-width: 44rem) {
  .terms__list div {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

/* Wide screens: one list across the full page, with a wider heading column */
@media (min-width: 72rem) {
  .terms__list div {
    grid-template-columns: 22rem minmax(0, 1fr);
  }
}


.terms .contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

.terms .contacts a:hover {
  color: var(--tang);
}

/* The closing block: a plain paper card, no pattern */
.terms__end {
  margin-top: var(--stack);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--paper);
}

.terms__end .terms__close {
  margin-top: 0;
}

.terms__bye {
  font-size: var(--heading);
  font-weight: 900;
  line-height: 1;
  text-transform: lowercase;
  color: var(--sea);
}

.terms__bye .peek {
  font-size: 0.6em;
}

.terms__end .terms__foot {
  margin-top: 1.75rem;
}

.terms__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: var(--stack);
}

/* ---------- About ---------- */

.about {
  position: relative;
  display: grid;
}

.about {
  --about-pad: clamp(3rem, 6vw, 5.5rem);
}

.about__art {
  display: grid;
  place-items: center;
  padding: var(--about-pad) var(--gutter);
  background: var(--sun);
}

.about__frame {
  width: min(100%, 14rem);
  aspect-ratio: 4 / 5;
  rotate: -4deg;
}

.about__text {
  align-self: center;
  padding: var(--about-pad) var(--gutter);
}

.about__text .display {
  font-size: var(--heading);
}

.about__text p {
  margin-top: 0.8rem;
  font-size: var(--text);
  line-height: 1.55;
}

.about__text .about__lead {
  margin-top: 1.25rem;
  font-size: var(--sub);
  font-weight: 600;
  line-height: 1.3;
}

.about__lead strong {
  font-weight: 900;
}

.about__text .about__pledge {
  position: relative;
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.55rem 1.1rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--sun);
  font-size: var(--text);
  rotate: -2deg;
}

.about__pledge::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ticks) center / contain no-repeat;
}

.about__badge {
  position: absolute;
  right: var(--gutter);
  top: 1.5rem;
  background: var(--tang);
  color: var(--cream);
  rotate: 6deg;
}

@media (min-width: 52rem) {
  .about {
    grid-template-columns: 2fr 3fr;
  }

  .about__badge {
    left: 40%;
    right: auto;
    top: 9%;
    bottom: auto;
    translate: -50% 0;
  }
}

/* ---------- Order ---------- */

.order {
  display: grid;
  gap: var(--stack) clamp(2rem, 5vw, 5rem);
  padding: var(--section) var(--gutter);
  background: var(--sea);
  color: var(--cream);
}

.order .display {
  color: var(--cream);
}

.order__lead {
  margin-top: 1rem;
  font-size: var(--text);
}

.order__side {
  display: grid;
  align-content: start;
  gap: var(--stack);
}

.order .contacts {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}

.facts {
  position: relative;
  display: grid;
  gap: 0.6rem;
  max-width: 28rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--cream);
  color: var(--ink);
  rotate: -1.2deg;
}

.facts::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ticks) center / contain no-repeat;
}

.facts div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.facts dt {
  flex: none;
  width: 5.5rem;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.facts dd {
  margin: 0;
}

@media (min-width: 58rem) {
  .order {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  /* Form sits beside the heading and starts level with it */
  .order .brief {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 1.1rem;
  }
}

/* The order form: a plain navy panel, fields in an even two-column grid */

.order .brief {
  display: block;
  margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: 14px;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--text);
}

.brief__grid {
  display: grid;
  gap: 1.25rem 1.5rem;
}

@media (min-width: 40rem) {
  .brief__grid {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .brief__wide {
    grid-column: 1 / -1;
  }
}

.order .brief label {
  gap: 0.45rem;
  font-size: var(--small);
  font-weight: 600;
}

.order .brief input,
.order .brief select,
.order .brief textarea {
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--text);
  font-weight: 400;
}

.order .brief input,
.order .brief select {
  height: 3.1rem;
}

.order .brief input[type="file"] {
  padding: 0.6rem;
  font-size: var(--small);
}

.order .brief :focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

.order .brief__hint {
  margin-top: 1.25rem;
  font-size: var(--small);
  opacity: 0.85;
}

.order .brief .brief__agree {
  margin-top: 0.6rem;
}

.order .brief .actions {
  align-items: center;
  margin-top: 1.5rem;
}

.order .brief .button {
  border-radius: 8px;
  border-color: var(--sun);
}

.order .brief__status {
  flex: 1 1 14rem;
  font-size: var(--small);
}

.order .brief__copy {
  margin-top: 1rem;
}

.contacts a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  text-decoration: none;
}

.contacts a:hover {
  color: var(--sun);
}

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* ---------- Footer ---------- */

.foot {
  position: relative;
  overflow: hidden;
  padding: var(--section) var(--gutter) 2.5rem;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}

.foot__name {
  font-size: clamp(2.9rem, 11.7vw, 13.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

.foot__script {
  margin-top: -0.55em;
  color: var(--sun);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
  margin-top: 3rem;
}

/* ---------- More eyes ---------- */

/* A pair sitting on the top edge of a note or card */
.peek--perch {
  position: absolute;
  right: 1.5rem;
  top: -0.62em;
  margin: 0;
  font-size: 2.6rem;
  color: var(--ink);
}

.how__note .peek--perch {
  color: var(--cream);
}

.facts .peek--perch {
  width: auto;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.how__note {
  position: relative;
}

/* A pair peeking over the top of the opening picture frame */
.hero__peek {
  display: none;
}

@media (min-width: 52rem) {
  .hero__peek {
    display: block;
    position: absolute;
    left: 50%;
    top: 14%;
    margin: 0;
    translate: -50% 0;
    font-size: 3.5rem;
    color: var(--ink);
  }
}

/* ---------- Small motion ---------- */

/* Eyes blink now and then; pairs share a rhythm, places differ */
@keyframes blink {
  0%, 94%, 100% { scale: 1 1; }
  97% { scale: 1 0.08; }
}

.eye {
  animation: blink 5.5s infinite;
}

.peek .eye { animation-delay: -1.8s; }
.display .eye { animation-delay: -3.1s; }
.foot__name .eye { animation-delay: -4.2s; }
.bar__name .eye { animation-delay: -0.9s; }

/* Buttons lift on hover and press on click */
.button,
.bar__toggle {
  transition: translate 0.15s ease-out, background-color 0.15s ease-out;
}

.button:hover,
.bar__toggle:hover {
  translate: 0 -2px;
}

.button:active,
.bar__toggle:active {
  translate: 0 1px;
}

/* Tags give a little wiggle when pointed at */
@keyframes wiggle {
  0%, 100% { rotate: var(--tilt, -3deg); }
  35% { rotate: calc(var(--tilt, -3deg) + 3deg); }
  70% { rotate: calc(var(--tilt, -3deg) - 2deg); }
}

.badge:hover,
.hero__label:hover,
.about__pledge:hover,
.how__note:hover,
.facts:hover {
  animation: wiggle 0.45s ease-in-out;
}

.hero__label--mid { --tilt: 2deg; }
.hero__label--right { --tilt: 3deg; }
.about__badge { --tilt: 6deg; }
.about__pledge { --tilt: -2deg; }
.how__note { --tilt: -1.5deg; }
.facts { --tilt: -1.2deg; }

/* The looping arrow nudges towards the form */
@keyframes nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 6px 2px; }
}

.doodle-arrow {
  animation: nudge 1.6s ease-in-out infinite;
}

/* Things that open arrive with a short rise */
@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
}

.bar.is-open .bar__nav {
  animation: rise 0.18s ease-out;
}

/* Menu links and contact links underline as they're pointed at */
.bar__nav a,
.contacts a {
  transition: color 0.15s ease-out;
}

/* ---------- Ready-made prints (the all-prints page) ---------- */

.prints {
  padding: var(--section) var(--gutter);
  background: var(--waves) var(--cream);
}

.prints__note {
  margin-top: 1.25rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 44%), 1fr));
  gap: 3rem clamp(1.5rem, 3vw, 3rem);
  margin-top: 3rem;
}

@media (min-width: 52rem) {
  .grid > :nth-child(even) {
    margin-top: 3.5rem;
  }
}

.prints__intro {
  max-width: 46rem;
}

.prints__small {
  margin-top: 0.5rem;
  font-size: var(--small);
}

.prints__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1rem 0.9rem 1.5rem;
  border-radius: 10px;
  background: var(--tang);
  color: var(--cream);
  font-weight: 600;
}

.prints__custom .button {
  background: var(--cream);
}

.prints__custom .button:hover {
  background: var(--sun);
}

.prints--all {
  min-height: 70vh;
}

/* All-prints page: a short yellow band like the home opening, then count and search */
.prints--all {
  padding-top: 0;
  background:
    radial-gradient(circle, rgb(30 59 94 / 0.2) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    var(--cream);
}

.prints__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: calc(var(--section) * 0.7) var(--gutter);
  background: var(--sea);
  color: var(--cream);
}

.prints__hero .display {
  color: var(--cream);
}

.prints__hero .prints__note {
  margin-top: 0.75rem;
}

.prints__hero .prints__small {
  margin-top: 0.5rem;
}

.prints__hero .prints__custom {
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  rotate: 1.5deg;
}

.prints__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.75rem;
  margin-top: var(--stack);
}

.prints__top .prints__search {
  width: 14rem;
  margin-left: 0;
}

.prints--all .grid {
  margin-top: 1.75rem;
}

.search {
  width: 11rem;
  padding: 0.45rem 0.9rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--small);
}

.search::placeholder {
  color: var(--ink);
  opacity: 0.6;
}

.bar__search .search {
  width: 11rem;
}

.prints__search {
  width: min(100%, 16rem);
  margin-left: auto;
}

@media (max-width: 44rem) {
  .bar__search {
    display: none;
  }
}

.card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.card__art {
  aspect-ratio: 4 / 5;
  background: var(--paper);
}

.card:hover .card__art {
  rotate: -1.2deg;
}

.card__art {
  transition: rotate 0.2s ease-out;
}

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.9rem;
}

.card__title {
  font-size: var(--sub);
  font-weight: 900;
  line-height: 1.1;
  text-transform: lowercase;
}

.card__price {
  font-weight: 600;
  color: var(--tang);
}

.brief .check,
.sheet .check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  accent-color: var(--sun);
}

.sheet__field {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  font-size: var(--small);
}

.sheet select,
.sheet input[type="email"],
.sheet textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
}

.sheet .check input {
  accent-color: var(--ink);
}

/* ---------- Print sheet ---------- */

.sheet {
  width: min(58rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 0;
  background: var(--paper);
  color: var(--ink);
}

.sheet[open] {
  display: grid;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}

.sheet::backdrop {
  background: rgb(30 59 94 / 0.78);
}

.sheet__close {
  justify-self: end;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  text-decoration: underline;
  cursor: pointer;
}

.sheet__art {
  aspect-ratio: 4 / 5;
  max-height: 55dvh;
  justify-self: center;
}

/* One column, everything on the same left edge with even gaps */
.sheet__body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.25rem;
}

.sheet__group,
.sheet__pair {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  width: 100%;
}

.sheet__pair {
  gap: 1.25rem;
}

.sheet__price {
  font-size: var(--sub);
  font-weight: 900;
  color: var(--tang);
}

.sheet__hint {
  font-size: var(--small);
  line-height: 1.5;
  opacity: 0.85;
}

.sheet p:empty {
  display: none;
}

.sheet select,
.sheet input[type="email"] {
  height: 3rem;
}

@media (min-width: 46rem) {
  .sheet[open] {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .sheet__close {
    grid-column: 1 / -1;
  }

  .sheet__art {
    width: 100%;
    max-height: 70dvh;
  }
}

.peek--inline {
  display: inline-block;
  margin: 0 0.5rem 0 0.25rem;
  font-size: 1.7rem;
  vertical-align: middle;
}

.prints__counted {
  display: flex;
  align-items: center;
}

.sheet[open] {
  animation: rise 0.22s ease-out;
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}