/* Fregato design system. One file, linked by every page, so a colour, a face or
   a button can only ever be changed in one place.

   TWO FACES, and size is free.

     display  Times New Roman italic   the wordmark, every heading, prices
     text     the system sans          everything else, running text, labels,
                                       buttons, inputs and the Stripe iframe

   Upright Times is a print face. On screen at 16px it goes thin and spindly,
   which is what made the checkout look cheap. Times earns its place in the
   italic, at display sizes, and nowhere else.

   Colour is the thing that stays fixed: one ink for all text. Two exceptions
   and each has a reason:
     - input placeholders use --hint, in full ink they read as a typed value
     - error text uses --warn, an error the eye cannot find is not an error

   BUTTONS, exactly two:
     .btn        filled, for the one action that matters on a page
     .btn.ghost  outlined, for every secondary action
   The filled one carries no border. A border in the same colour as the fill
   paints a second edge on the curve, which is what made the pill look rough. */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #17223b;
  --line: #dde2ea;
  --line-strong: #c9d1de;
  --hint: #8b93a4;
  --accent: #31558f;
  --warn: #9a6412;
  --serif: "Times New Roman", Times, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-size: 16px;
  --small-size: 14px;
  --sub-size: 22px;
  --display-size: clamp(34px, 4.4vw, 46px);
  /* every page starts its headline at the same distance from the header */
  --page-top: 84px;
  --radius: 10px;
  --radius-lg: 20px;
  --border: 1px;
  --ring: inset 0 0 0 1px rgba(23, 34, 59, .34);
  --ring-strong: inset 0 0 0 1px var(--ink);
  --ring-selected: inset 0 0 0 2px var(--ink);
  --ring-focus: inset 0 0 0 2px var(--accent);
}

@media (max-width: 640px) {
  :root { --page-top: 56px; }
}

* { box-sizing: border-box; }

/* Product photos are not files to drag away. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

html { overflow-y: scroll; scrollbar-gutter: stable; }

/* ---------- the text face, the default for everything ---------- */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: #fff; }

[hidden] { display: none !important; }

.small { font-size: var(--small-size); }

/* ---------- the display face ---------- */

h1, h2, h3, .display, .brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

h1, .display { font-size: var(--display-size); margin: 0 0 18px; }
h2 { font-size: var(--sub-size); margin: 0 0 12px; }
h3 { font-size: 19px; margin: 0 0 10px; }

/* ---------- header ---------- */

header { border-bottom: var(--border) solid var(--line); background: var(--bg); }
.wide { width: min(1320px, 100%); margin: auto; padding: 0 40px; }
.nav { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* the wordmark is the way home, so it needs a finger sized hit area */
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 26px; line-height: 1; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }
.back { color: var(--ink); font-size: var(--small-size); text-decoration: none; }
.back:hover { opacity: .65; }

/* ---------- buttons, the only two ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-size);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.btn:hover:not(:disabled) { opacity: .88; }
.btn.ghost { transition: background .18s ease, transform .18s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }

/* Tonal, not outlined. An outlined pill was the one edge left on the site and
   it read as the cheapest thing on the page. */
.btn.ghost {
  border: 0;
  background: rgba(23, 34, 59, .07);
  color: var(--ink);
  font-weight: 500;
}
.btn.ghost:hover:not(:disabled) { background: rgba(23, 34, 59, .12); opacity: 1; }

.btn.block { width: 100%; }

/* A busy button keeps its size. Swapping the label for "one moment" made it
   jump, so the label only turns transparent and a spinner sits on top. */
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.btn.ghost.is-loading::after {
  border-color: rgba(23, 34, 59, .22);
  border-top-color: var(--ink);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- surfaces ---------- */

.page { width: min(960px, 100%); margin: auto; padding: var(--page-top) 30px 96px; }
.page.narrow { width: min(680px, 100%); }

/* Flat. No surface, no outline, no shadow. A card is a grouping, and spacing
   does that job without drawing an edge that can look cheap at the corners. */
.card {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ---------- forms ---------- */

/* Every field carries its outline at rest as well, drawn with an inset shadow
   rather than a border: a shadow follows the rounded corner with proper
   antialiasing, a 1px border stair-steps along the same arc. */
input, select, textarea {
  font-family: var(--sans);
  font-size: var(--text-size);
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: var(--ring);
  transition: box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--hint); opacity: 1; }
/* :focus, not :focus-visible. A field you clicked into has to show where you
   are typing, and :focus-visible only fires for keyboard focus. */
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  box-shadow: var(--ring-strong);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: var(--ring-focus);
}
label, .label { display: block; font-size: var(--small-size); margin-bottom: 7px; }

/* ---------- odds and ends ---------- */

.num { font-variant-numeric: tabular-nums; }
.error { color: var(--warn); }

@media (max-width: 640px) {
  .wide { padding: 0 22px; }
  .page { padding: var(--page-top) 22px 72px; }
  .actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}