/* ===========================================================================
   MightyIdea — mightyidea.com

   Two layouts share one header and one footer:
     .layout-home  full-screen, header/footer pinned to the viewport corners
     .layout-page  normal document flow, header on top, footer after content
   Everything below the tokens is organised in that order.
   =========================================================================== */

/* --- webfonts -----------------------------------------------------------
   Self-hosted so no visitor's IP is handed to a third party just to render
   text. Both faces are SIL Open Font License 1.1 — see assets/fonts/.
   Latin subset only. Both are variable files: Public Sans covers every
   weight from 100 to 900 in one download, and Newsreader carries the
   optical-size axis so display sizes render as designed. Newsreader is
   weight 400 only — adding another weight means adding a file, not just
   changing a number in a rule.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* variable file: carries the optical-size axis, which browsers apply
     automatically via font-optical-sizing. A static instance is 35 KB
     smaller but renders ~2% off at display sizes. */
  src: url('../fonts/newsreader.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* --- tokens -------------------------------------------------------------- */

:root {
  --ink:          #0f3a4d;
  --ink-body:     #295a70;
  --ink-muted:    #40687f;
  --ink-soft:     #3d6e85;
  --accent:       #2b6b87;
  --accent-dark:  #17475c;

  --sky-1: #7fb4d4;
  --sky-2: #a8cee4;
  --sky-3: #d5e8f2;
  --sky-4: #f2f7f9;
  --page:  #f6f9fb;   /* reading surface below the sky band on content pages */

  --card-bg:     rgba(255, 255, 255, 0.72);
  --card-border: rgba(255, 255, 255, 0.85);
  --card-shadow: 0 10px 30px rgba(23, 71, 92, 0.10);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:    56px;
  --edge-top:  44px;
  --edge-bot:  40px;
}

/* --- reset --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 34%, var(--sky-3) 68%, var(--sky-4) 100%) fixed;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
}

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

/* a class that sets display beats the UA rule for [hidden], so restate it */
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 10px 16px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* --- sky ----------------------------------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.cloud {
  position: absolute;
  left: 0;
  /* Painted from overlapping gradient lobes rather than one ellipse — a single
     radial gradient reads as an oval blob. No filter: blur() either, so the
     layer rasterises once and is only translated after that. */
  animation: drift linear infinite;
  will-change: transform;
}

/* Travel is the viewport plus the cloud's own width, so a cloud is fully off
   the right edge before the loop restarts it off the left.
   translateX percentages resolve against the ELEMENT, not the viewport, so
   the previous -38%/138% moved a 520px cloud only 916px on a 1440px screen
   and then snapped it back while it was still in view. */
@keyframes drift {
  from { transform: translateX(calc(-100% - 60px)); }
  to   { transform: translateX(calc(100vw + 60px)); }
}

.cloud--1 {
  --o: .75;
  top: 10%; width: 520px; height: 166px;
  animation-duration: 52s;
  background:
    radial-gradient(ellipse 18% 30% at 20% 62%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 42% at 40% 48%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 20% 36% at 60% 56%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 16% 26% at 80% 66%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 46% 22% at 50% 72%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%);
}

.cloud--2 {
  --o: .55;
  top: 23%; width: 340px; height: 106px;
  animation-duration: 74s; animation-delay: -21s;
  background:
    radial-gradient(ellipse 16% 30% at 18% 64%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 42% at 36% 46%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 34% at 56% 58%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 30% at 76% 64%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 44% 22% at 48% 74%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%);
}

.cloud--3 {
  --o: .42;
  top: 48%; width: 700px; height: 198px;
  animation-duration: 94s; animation-delay: -57s;
  background:
    radial-gradient(ellipse 12% 28% at 14% 64%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 20% 40% at 32% 52%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 44% at 54% 48%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 32% at 76% 60%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 48% 24% at 50% 72%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%);
}

.cloud--4 {
  --o: .60;
  top: 71%; width: 900px; height: 242px;
  animation-duration: 112s; animation-delay: -30s;
  background:
    radial-gradient(ellipse 14% 26% at 16% 66%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 34% at 34% 58%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 24% 42% at 56% 46%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 32% at 78% 60%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 46% 24% at 52% 72%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%);
}

.cloud--5 {
  --o: .50;
  top:  3%; width: 260px; height: 88px;
  animation-duration: 40s; animation-delay: -14s;
  background:
    radial-gradient(ellipse 20% 36% at 26% 58%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 16% 30% at 48% 64%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 40% at 70% 52%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 44% 24% at 50% 72%,
      rgba(255,255,255,calc(var(--o) * 0.50)) 0%,
      rgba(255,255,255,calc(var(--o) * 0.20)) 58%,
      rgba(255,255,255,0) 100%);
}

/* --- shell, header, footer (shared) -------------------------------------- */

.shell { position: relative; z-index: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-dark);
}
.brand:hover { color: var(--ink); }

.brand__name {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.01em;
}

/* U+2122 already sits high in the glyph, so it only needs shrinking, not
   superscripting on top. line-height: 0 keeps it out of the line box. */
.brand__tm {
  font-size: 0.42em;
  line-height: 0;
  letter-spacing: 0;
  margin-left: 0.04em;
  vertical-align: super;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;   /* privacy sits under the copyright line */
  gap: 2px;
  font-size: 13px;
  color: var(--ink-muted);
}
.site-footer__legal a { color: var(--ink-muted); }
.site-footer__legal a:hover { color: var(--accent-dark); }

.site-footer__links { display: flex; align-items: baseline; gap: 7px; }
.site-footer__sep { opacity: 0.45; }

.site-footer__social { display: flex; align-items: center; gap: 10px; }

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease;
}
.social-link:hover { background: rgba(255, 255, 255, 0.9); color: var(--accent-dark); }

/* --- layout: home -------------------------------------------------------- */

.layout-home .shell {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--edge-top) + 60px) var(--gutter) calc(var(--edge-bot) + 72px);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.layout-home .site-header {
  position: absolute;
  top: var(--edge-top);
  right: var(--gutter);
  left: var(--gutter);
}

.layout-home .site-footer {
  position: absolute;
  right: var(--gutter);
  bottom: var(--edge-bot);
  left: var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.layout-home .main { width: 100%; max-width: 1260px; }

/* --- home content -------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto 46px;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* Scales to any number of projects. Flex rather than grid on purpose: a grid
   leaves a leftover card hard against the left edge of the last row, whereas
   wrapped flex rows centre themselves. Cards grow to share the row and stop at
   300px, which is exactly four across at the 1260px cap. 300 rather than 285
   because the longest domain here needs 239px of the 248px that leaves. */
.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card-wrap { display: contents; }

.card {
  flex: 1 1 250px;
  max-width: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "status status"
    "title  title"
    "desc   desc";
  gap: 14px 12px;
  /* Cards stretch to the tallest in the row. Without this, the leftover space
     is shared out between the rows of each card, so a card with a shorter
     description pushes its own title and text down out of line with its
     neighbours. Pin the rows to the top; slack collects at the bottom. */
  align-content: start;
  padding: 26px 26px 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(23, 71, 92, 0.16);
}

.card__status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  /* Composed here, not on :root — var(--dot-hue) has to resolve against the
     card that sets it, and a custom property substitutes where it is declared.
     Every status shares this lightness and chroma, so a new one only picks a
     hue and stays in palette. */
  background: oklch(0.62 0.09 var(--dot-hue, 240));
}

.card__status-short { display: none; }

.card__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.15;
  color: var(--ink);
  /* Domains have no spaces, so an over-long one would spill outside the card
     rather than wrap. Cards are sized for the longest name currently listed;
     this is the safety net if a longer one is added later. */
  overflow-wrap: anywhere;
}
.card__tld { opacity: 0.45; }

.card__desc {
  grid-area: desc;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- layout: page (privacy, 404) ----------------------------------------- */

/* The sky is a masthead band here, not the whole page: prose needs a calm,
   constant surface no matter how far down you scroll. */
body.layout-page {
  position: relative;
  background:
    linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) 150px, var(--sky-3) 320px, var(--page) 460px) no-repeat top center / 100% 460px,
    var(--page);
}

.layout-page .sky {
  position: absolute;
  inset: 0 0 auto;
  height: 460px;
  /* fade the clouds out rather than letting the band's edge slice them */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}

.layout-page .shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.layout-page .site-header { padding: var(--edge-top) var(--gutter) 0; }


.layout-page .main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 88px;
}

.layout-page .site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding: 30px var(--gutter) 38px;
  border-top: 1px solid rgba(23, 71, 92, 0.12);
  background: color-mix(in srgb, var(--page) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --- prose --------------------------------------------------------------- */

.page-head { margin-bottom: 38px; }

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-head__meta {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #35566a;            /* dark enough for AA high on the sky band */
}

.prose h2 {
  margin: 38px 0 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.prose p, .prose li {
  font-size: 15.5px;
  line-height: 1.72;
  color: #33637a;
  text-wrap: pretty;
}

.prose p  { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

.prose a { border-bottom: 1px solid rgba(43, 107, 135, 0.3); }
.prose a:hover { border-bottom-color: var(--accent-dark); }

.prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(43, 107, 135, 0.09);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.87em;
  color: #1f5771;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--outline {
  border: 1px solid rgba(23, 71, 92, 0.25);
  background: rgba(255, 255, 255, 0.55);
  color: var(--accent-dark);
}
.btn--outline:hover {
  border-color: rgba(23, 71, 92, 0.55);
  background: rgba(255, 255, 255, 0.85);
}

.btn--solid {
  border: 1px solid var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
}
.btn--solid:hover { background: #0f3a4d; border-color: #0f3a4d; }
.btn--solid:disabled { opacity: 0.6; cursor: default; }

.btn--block { width: 100%; }

/* --- contact modal ------------------------------------------------------- */

.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(15, 58, 77, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 34px 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: #fbfdfe;
  box-shadow: 0 24px 60px rgba(15, 58, 77, 0.22);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal__close:hover { background: rgba(23, 71, 92, 0.07); color: var(--accent-dark); }

.modal__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.modal__lede {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

.modal__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0 4px;
}
.modal__tick { color: oklch(0.62 0.09 150); }
.modal__done .btn { margin-top: 10px; }

/* --- form ---------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* honeypot: off-screen rather than display:none, which some bots skip */
.form__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-body);
}
.field__opt { font-weight: 400; color: var(--ink-muted); }

.field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(23, 71, 92, 0.20);
  border-radius: 9px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field__input::placeholder { color: #8fa9b6; }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 107, 135, 0.14);
}
.field__input:user-invalid { border-color: oklch(0.58 0.13 25); }

.field__input--area { min-height: 104px; resize: vertical; }

.field__input--select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232b6b87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.form__legal {
  margin: -6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-muted);
}
.form__legal a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(64, 104, 127, 0.4);
}
.form__legal a:hover { color: var(--accent-dark); text-decoration-color: currentColor; }

.form__status {
  margin: -4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-body);
}
.form__status--error { color: oklch(0.5 0.15 25); }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --gutter: 32px; }
}

@media (max-width: 700px) {
  /* one per row, full width, rather than a 285px column floating in the middle */
  .projects { gap: 14px; }
  .card { max-width: none; flex-basis: 100%; }
}

@media (max-width: 640px) {
  :root { --gutter: 24px; --edge-top: 34px; --edge-bot: 30px; }

  .brand__name { font-size: 24px; }
  .brand__mark { width: 26px; height: 26px; }

  /* clears the stacked footer: 112px tall plus its 30px offset */
  .layout-home .shell { padding: 104px 24px 158px; }
  .layout-home .main  { max-width: 420px; }

  .hero { align-items: flex-start; gap: 12px; margin-bottom: 28px; text-align: left; }
  .hero__lede { font-size: 15px; }

  /* status moves up beside the domain to keep each card two lines tall */
  .card {
    grid-template-areas:
      "title status"
      "desc  desc";
    align-items: center;
    gap: 8px 10px;
    padding: 18px 18px 17px;
    border-radius: 13px;
  }
  .card__title  { font-size: 23px; }
  .card__desc   { font-size: 13.5px; line-height: 1.55; }
  .card__status { font-size: 10.5px; letter-spacing: 0.08em; }

  .card__status-full  { display: none; }
  .card__status-short { display: inline; }


  /* hover lift is a mouse affordance; on touch it just fires on tap */
  .card:hover { transform: none; box-shadow: var(--card-shadow); }

  .btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; }

  .modal__panel { padding: 28px 22px 24px; }
  .modal__title { font-size: 26px; }
  .form__row { grid-template-columns: 1fr; }

  /* Four 44px targets plus the legal block do not fit one line on a phone:
     the copyright wrapped to "© 2026 / MightyIdea LLC". Stack instead, icons
     above, so both stay on one line each. */
  .layout-home .site-footer,
  .layout-page .site-footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .site-footer__social { gap: 8px; }
  .social-link { border-radius: 11px; }

  .layout-page .main { padding: 64px 24px 72px; }
  .layout-page .site-footer { padding: 26px var(--gutter) 30px; }
  .prose h2 { margin-top: 32px; font-size: 22px; }
}

/* Very short viewports: let the home page scroll rather than crush the cards. */
@media (max-height: 700px) and (min-width: 641px) {
  .layout-home .shell { padding-block: 120px 130px; }
}

/* --- motion and print ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
  .card  { transition: none; }
  .card:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media print {
  .sky, .site-footer__social, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .layout-page .main { padding: 0; max-width: none; }
}