/* ==========================================================================
   Possible Things — the house site

   Grey for what's made for everyone; colour for what's yours, and what's
   yours comes in many colours (house yellow, Tuesdays lime, Second Draft
   pink, sky blue). The hero sits beside a field of things (drawn by
   tools/things.py). The two ways are two panels in their examples' colours:
   choosing what fits in Tuesdays' lime and ink, having it made your way in
   Second Draft's pink and plum.
   Night by default and for dark systems; day for light systems.
   Two voices: Literata (serif) for you and your world, including the name
   and the tools; Commissioner (sans) for me speaking, and small labels.
   Links keep their colour and gain an underline on hover; no link blue.
   Text keeps 4.5:1 everywhere.
   ========================================================================== */

@font-face {
  font-family: "Literata";
  src: url("fonts/literata.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Two voices. Serif is you and your world, including the name "possible
     things" and the tools made for you. Sans is me speaking. */
  --serif: "Literata", ui-serif, Georgia, serif;
  --sans:
    "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* Night: the default, and for anyone whose system prefers dark. */
  --bg: #11152a;
  --text: #eef0f7;
  --soft: #c4cadd;
  --muted: #aab1c9;
  --thing: rgba(170, 177, 201, 0.2);
  --outline: #aab1c9;
  --hairline: rgba(238, 240, 247, 0.14);
  --badge-fill: rgba(238, 240, 247, 0.08);
  --badge-line: rgba(238, 240, 247, 0.3);
  --badge-text: #c9cfe0;
  --mark-thing: #5d6687;
  --glow: rgba(255, 207, 102, 0.07);

  /* What's yours comes in many colours: the house's warm light, Tuesdays'
     lime, Second Draft's pink, and a sky blue. Rings mark what you chose. */
  --yours-1: #ffcf66;
  --yours-2: #d4f25c;
  --yours-3: #f7a8c4;
  --yours-4: #7cb4ff;
  --ring: #ffcf66;
  --yours-text: #ffcf66;
  --shine: 1;

  /* The two ways wear their example's colours. */
  --choose-bg: #e8f3b8;
  --choose-ink: #141413;
  --choose-ink-2: #43462f;
  --make-bg: #f7d6de;
  --make-ink: #4a2138;
  --make-ink-2: #6e3d57;

  --wide: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(80px, 10vw, 144px);
  --gap: clamp(16px, 2vw, 28px);
  /* Where the site's wrapped content begins, for full-bleed panels. */
  --edge: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
}

/* Day: for anyone whose system prefers light. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f6f9;
    --text: #151a30;
    --soft: #454b62;
    --muted: #5b6177;
    --thing: rgba(21, 26, 48, 0.11);
    --outline: #7b8197;
    --hairline: rgba(21, 26, 48, 0.12);
    --badge-fill: #ffffff;
    --badge-line: rgba(21, 26, 48, 0.22);
    --badge-text: #454b62;
    --mark-thing: #b9bfd0;
    --glow: rgba(255, 196, 64, 0.16);

    --yours-1: #f5b82e;
    --yours-2: #a9d12a;
    --yours-3: #ec8fb0;
    --yours-4: #3d8ae6;
    --ring: #e0a21a;
    --yours-text: #8a5d00;
    --shine: 0;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

::selection {
  background: var(--yours-1);
  color: #151a30;
}

[hidden] {
  display: none !important;
}

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--yours-1);
  color: #151a30;
  font-family: var(--sans);
  font-size: 15px;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   Wordmark, masthead, colophon
   -------------------------------------------------------------------------- */

.masthead {
  padding-block: 28px;
}

/* The name is for you, so it's in your voice: Literata italic. */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-style: italic;
  font-size: 27px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.colophon {
  padding-top: 28px;
  padding-bottom: 44px;
  border-top: 1px solid var(--hairline);
}

.colophon .wordmark {
  font-size: 22px;
}

/* --------------------------------------------------------------------------
   Hero: the statement beside the field of things
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: var(--section);
  background: radial-gradient(42% 46% at 78% 52%, var(--glow), transparent 70%);
}

.hero h1 {
  grid-column: 1 / span 7;
  font-size: clamp(32px, 4vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.hero h1 span {
  display: block;
}

.hero .why {
  color: var(--soft);
}

/* The promise is me speaking, so it's in my voice: the sans. */
.hero .promise {
  margin-top: 0.4em;
  font-family: var(--sans);
  font-weight: 450;
  letter-spacing: -0.03em;
  color: var(--text);
}

.things-frame {
  grid-column: 8 / -1;
}

/* The field of things. Grey squares in very different sizes: made for
   everyone, a few big ones with good badges. Dashed odd shapes: particular
   needs nobody made anything for. Warm: made your way. Warm rings: chosen
   because they fit, one small and plain, one big and badged. */
.things {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.things .mass rect {
  fill: var(--thing);
}

.things .unmade > * {
  fill: none;
  stroke: var(--outline);
  stroke-width: 1.4;
  stroke-dasharray: 3 3.5;
}

.things .made > * {
  --c: var(--yours-1);
  fill: var(--c);
  stroke: var(--c);
  stroke-width: 1.6;
  filter: drop-shadow(
    0 0 calc(6px * var(--shine)) color-mix(in srgb, var(--c) 55%, transparent)
  );
}

.things .made .c2 {
  --c: var(--yours-2);
}

.things .made .c3 {
  --c: var(--yours-3);
}

.things .made .c4 {
  --c: var(--yours-4);
}

/* Good badges: neutral, never in colour. Colour is only what's yours. */
.things .badges rect {
  fill: var(--badge-fill);
  stroke: var(--badge-line);
  stroke-width: 1;
}

.things .badges text {
  font-family: var(--sans);
  fill: var(--badge-text);
}

.things .chosen {
  fill: none;
  stroke: var(--ring);
  stroke-width: 1.6;
}

.things .note {
  font-family: var(--sans);
  fill: var(--muted);
}

.things .note.warm {
  fill: var(--yours-text);
}

.things .lead {
  stroke: var(--muted);
  stroke-width: 1;
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   The badge, and why things feel off
   -------------------------------------------------------------------------- */

.badge-note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-bottom: var(--section);
}

.badge-line {
  grid-column: 1 / span 8;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 340;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.badge-why {
  grid-column: 6 / span 6;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Two ways to make it happen: two panels, side by side and equal
   -------------------------------------------------------------------------- */

.ways-title {
  margin-bottom: 28px;
  font-style: italic;
  font-size: clamp(21px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--muted);
}

.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
  display: flex;
  flex-direction: column;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 64px);
}

.panel > * {
  max-width: 34rem;
}

.panel-choose {
  padding-left: var(--edge);
  background: var(--choose-bg);
  color: var(--choose-ink);
}

.panel-make {
  padding-right: var(--edge);
  background: var(--make-bg);
  color: var(--make-ink);
}

.panel-figure {
  display: block;
  width: 216px;
  height: 64px;
  margin-bottom: clamp(32px, 4vw, 48px);
  overflow: visible;
}

.panel h3 {
  margin-bottom: 18px;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.panel-choose p {
  color: var(--choose-ink-2);
}

.panel-make p {
  color: var(--make-ink-2);
}

.panel-choose .mass {
  fill: rgba(20, 20, 19, 0.16);
}

.panel-choose .chosen {
  fill: none;
  stroke: var(--choose-ink);
  stroke-width: 2;
}

.panel-make .unmade {
  fill: none;
  stroke: var(--make-ink);
  stroke-width: 1.6;
  stroke-dasharray: 3.5 4;
}

.panel-make .step {
  fill: none;
  stroke: var(--make-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-make .made {
  fill: var(--make-ink);
}

.example {
  padding-top: clamp(36px, 4vw, 56px);
}

.example::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 24px;
  background: currentColor;
  opacity: 0.35;
}

.example-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: clamp(21px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-decoration: none;
}

.example-name svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.example-name .arrow {
  font-size: 0.75em;
  opacity: 0.6;
  transition: transform 0.2s;
}

.example-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.example-name:hover .arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

.panel :focus-visible {
  outline-color: currentColor;
}

/* --------------------------------------------------------------------------
   Either way
   -------------------------------------------------------------------------- */

.close {
  padding-block: var(--section);
  text-align: center;
}

.close p {
  max-width: 16em;
  margin-inline: auto;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 360;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .hero {
    background: radial-gradient(
      60% 34% at 50% 72%,
      var(--glow),
      transparent 70%
    );
  }

  .hero h1,
  .things-frame {
    grid-column: 1 / -1;
  }

  .things-frame {
    width: 100%;
    max-width: 520px;
    margin-top: clamp(48px, 7vw, 80px);
  }

  .hero h1 {
    font-size: clamp(32px, 5.4vw, 56px);
  }

  .badge-line {
    grid-column: 1 / span 11;
  }

  .badge-why {
    grid-column: 3 / -1;
  }
}

@media (max-width: 860px) {
  .panels {
    grid-template-columns: 1fr;
  }

  .panel-choose,
  .panel-make {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 18px;
  }

  .masthead {
    padding-block: 16px;
  }

  .wordmark {
    font-size: 24px;
  }

  .hero h1 {
    font-size: clamp(27px, 7.8vw, 40px);
  }

  .badge-line,
  .badge-why {
    grid-column: 1 / -1;
  }

  .panel-figure {
    width: 180px;
    height: 54px;
  }
}

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

  .example-name .arrow {
    transition: none;
  }
}