/* ==========================================================================
   Site Sequel design system
   Reusable tokens and components. Nothing here is tied to a single page:
   no section ids, no page-specific layout, no illustrative animations.
   Load this before any page stylesheet.
   ========================================================================== */

:root{
  /* Brand channels — the only place a raw brand RGB triplet appears.
     Everything else composes these with an alpha. */
  --ink-rgb:15,23,42;          /* slate-900, for hairlines, shadows, scrims */
  --paper-rgb:248,250,252;     /* slate-50, for ink on dark surfaces */
  --mint-rgb:163,240,196;      /* Site Sequel mint */
  --mint-deep-rgb:69,185,124;  /* mint at signal strength */

  /* Surfaces */
  --paper:#F8FAFC;             /* page canvas */
  --paper-lift:#FFFFFF;        /* raised surfaces: cards, fields, controls */
  --paper-sunken:#F1F5F9;      /* recessed surfaces and contrast sections */
  --surface-dark:#020617;      /* full-bleed dark bands */

  /* Ink on light */
  --ink:#020617;               /* headings, primary actions */
  --ink-lift:#1E293B;          /* hover state of ink-filled actions */
  --ink-soft:#475569;          /* body copy */
  --ink-faint:#5F6F84;         /* labels, fine print, placeholders; AA on sunken paper */

  /* Ink on dark */
  --ink-on-dark:#F8FAFC;       /* headings and input text */
  --ink-on-dark-soft:rgba(var(--paper-rgb),.68);   /* body copy */
  --ink-on-dark-faint:rgba(var(--paper-rgb),.62);  /* fine print */
  --ink-on-dark-quiet:rgba(var(--paper-rgb),.5);   /* placeholders, prefixes */

  /* Accent */
  --mint:#A3F0C4;                                  /* full-strength brand mint */
  --mint-lift:#B6F5D3;                             /* hover of mint-filled actions */
  --mint-deep:#45B97C;                             /* focus ring, signal lines */
  --mint-ink:#166534;                              /* ink on a mint surface */
  --mint-surface:rgba(var(--mint-rgb),.45);         /* icon tiles */
  --mint-surface-soft:rgba(var(--mint-rgb),.3);     /* selected/preferred tiles */

  /* Hairlines */
  --line:rgba(var(--ink-rgb),.16);         /* default border */
  --line-soft:rgba(var(--ink-rgb),.09);    /* dividers between related items */
  --line-strong:rgba(var(--ink-rgb),.28);  /* hovered control border */
  --line-focus:rgba(var(--ink-rgb),.42);   /* focused field border */
  --line-dark:rgba(var(--paper-rgb),.2);   /* border on a dark surface */

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(var(--ink-rgb),.06);          /* resting cards, fields */
  --shadow-lift:0 18px 42px -26px rgba(var(--ink-rgb),.48); /* floating previews */

  /* Corner radii */
  --radius-xs:4px;        /* chips */
  --radius-sm:6px;        /* tiles nested inside a card */
  --radius-md:8px;        /* icon tiles, icon buttons, preview frames */
  --radius-lg:12px;       /* cards */
  --radius-control:999px;/* buttons and button-like actions */
  --radius-field:11px;    /* shell around a composed field + button group */
  --radius-focus:5px;     /* focus ring and focus-only affordances */

  /* Type */
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;

  /* Layout */
  --shell:1120px;         /* content column */
  --gutter:32px;          /* container inline padding */
  --control-height:44px;  /* minimum tap target for primary controls */

  /* Motion */
  --ease-out:cubic-bezier(.22,.7,.3,1);
  --dur-fast:.15s;        /* affordances appearing */
  --dur:.18s;             /* control state changes */
  --dur-reveal:.6s;       /* entrance */

  /* Semantic feedback */
  --error:#A34F38;
  --error-text:#7D2F22;
  --error-surface:rgba(163,79,56,.08);
}

/* --- Base ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ol,ul,figure,figcaption{margin:0}
ol,ul{padding:0}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border-radius:var(--radius-control)}
button:disabled{cursor:not-allowed}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--mint);color:var(--ink)}
/* Every icon in the system is a stroked line icon. Zero specificity so any
   component can override size, weight, or fill. */
:where(svg){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* --- Page shell --------------------------------------------------------- */

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* --- Accessibility ------------------------------------------------------ */

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:16px;top:-60px;z-index:50;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  border-radius:var(--radius-focus);text-decoration:none;transition:top var(--dur-fast) ease;
}
.skip:focus{top:16px}
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--mint-deep);outline-offset:3px;border-radius:var(--radius-focus);
}

/* --- Typography roles --------------------------------------------------- */

/* Page title */
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,6.2vw,68px);line-height:1.05;letter-spacing:-.022em;
  margin-bottom:22px;
}
/* Section title */
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.018em;
  margin-bottom:20px;
}
/* Card title */
.card-title{
  font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.18;
  letter-spacing:-.01em;margin-bottom:10px;
}
/* Compact list-item title */
.item-title{font-size:15.5px;font-weight:650;line-height:1.3;letter-spacing:-.005em}
/* Small uppercase label above a title */
.eyebrow{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:650;color:var(--ink-faint);margin-bottom:20px;
}
/* Opening paragraph under a page title */
.lede{
  font-size:clamp(17px,1.55vw,19.5px);line-height:1.6;color:var(--ink-soft);
  max-width:53ch;margin:0 auto 34px;
}
/* Supporting paragraph under a section title */
.body{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:47ch}
/* Centred eyebrow + title + body stack */
.section-head{text-align:center;max-width:560px;margin-inline:auto}
.section-head .body{margin-inline:auto}

/* --- Buttons ------------------------------------------------------------ */

.btn{
  min-height:var(--control-height);padding:0 19px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;border:1px solid transparent;text-decoration:none;
  border-radius:var(--radius-control);font-size:15px;font-weight:650;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease,transform var(--dur) ease;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink-lift)}
.btn-secondary{border-color:var(--line);background:var(--paper-lift);color:var(--ink-soft)}
.btn-secondary:hover{border-color:var(--line-strong);color:var(--ink);background:var(--paper-sunken)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:var(--mint-lift)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Square icon-only control */
.icon-btn{
  flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius-control);
  background:var(--paper-lift);color:var(--ink-soft);cursor:pointer;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn svg{width:17px;height:17px;stroke-width:1.8}

/* --- Composed field + action group ------------------------------------- */

.urlform{
  display:flex;align-items:stretch;max-width:560px;margin:0 auto;padding:5px;
  border:1px solid var(--line);border-radius:var(--radius-field);
  background:var(--paper-lift);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) ease,box-shadow var(--dur) ease;
}
.urlform:focus-within{border-color:var(--line-focus);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.55)}
.urlform-field{
  flex:1 1 auto;display:flex;align-items:center;gap:2px;
  min-height:var(--control-height);padding:0 12px;
}
.urlform-prefix{color:var(--ink-faint);font-size:15.5px}
.urlform-field input{
  flex:1;min-width:0;padding:9px 0;border:0;background:transparent;outline:none;
  font-size:16.5px;color:var(--ink);
}
.urlform-field input::placeholder{color:var(--ink-faint)}

/* --- Shared control field ---------------------------------------------- */

.control-field{
  border:1px solid var(--line);border-radius:var(--radius-field);
  background:var(--paper-lift);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) ease,box-shadow var(--dur) ease;
}
.control-field:focus-within{border-color:var(--line-focus);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.55)}
.control-field :is(input,textarea){border:0;outline:0;background:transparent}
.control-field :is(input,textarea)::placeholder{color:var(--ink-faint)}

/* --- Card -------------------------------------------------------------- */

.card{
  position:relative;display:flex;flex-direction:column;padding:20px 20px 18px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--paper-lift);box-shadow:var(--shadow-sm);
}

/* --- Icon tile --------------------------------------------------------- */

.icon-tile{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:var(--radius-md);background:var(--mint-surface);color:var(--mint-ink);
}
.icon-tile svg{width:16px;height:16px}

/* --- Reassurance line -------------------------------------------------- */

.reassure{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:14px;color:var(--ink-faint);
}
.tick{width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--mint);flex:none}
.tick::after{
  content:"";width:3.5px;height:6px;border:1.6px solid var(--ink);
  border-top:0;border-left:0;transform:translateY(-.6px) rotate(42deg);
}

/* --- Dark contrast section --------------------------------------------- */
/* Any band that inverts the interface. Components adapt from this context
   rather than needing their own dark modifier class. */

.section-dark{background:var(--surface-dark);color:var(--ink-on-dark)}
.section-dark h2{color:inherit}
.section-dark .urlform{background:rgba(255,255,255,.07);border-color:var(--line-dark);box-shadow:none}
.section-dark .urlform:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.18)}
.section-dark .urlform-field input{color:var(--ink-on-dark)}
.section-dark .urlform-field input::placeholder,
.section-dark .urlform-prefix{color:var(--ink-on-dark-quiet)}
.section-dark .reassure{color:var(--ink-on-dark-faint)}

/* --- Site header, wordmark, footer ------------------------------------- */

.site-header{padding:26px 0 8px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:650;font-size:16.5px;letter-spacing:-.008em;text-decoration:none;
}
.brand-mark{width:27px;height:27px;flex:none}
.site-nav{display:flex;gap:28px}
.site-nav a{
  font-size:14.5px;color:var(--ink-soft);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.site-footer{padding:30px 0 44px}
.footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-faint);
}
.footer-row .wordmark{color:var(--ink)}
.footer-row nav{display:flex;gap:22px}
.footer-row a{text-decoration:none;color:var(--ink-soft)}
.footer-row a:hover{color:var(--ink)}

/* --- HTMX and form feedback -------------------------------------------- */

.form-note,.url-loading{
  max-width:560px;min-height:21px;margin:9px auto 0;
  color:var(--ink-faint);font-size:13px;line-height:1.5;text-align:left;
}
.form-note.is-success{color:var(--mint-ink);font-weight:650}
.form-note.is-error{color:var(--error-text);font-weight:650}
.form-terms{max-width:560px;margin:4px auto 0;color:var(--ink-faint);font-size:12px;line-height:1.5;text-align:left}
.form-terms a{color:inherit;text-decoration:underline}
.url-loading{display:flex;align-items:center;gap:7px}
.url-spinner{
  width:12px;height:12px;border:1.5px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite;
}
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:flex}
.url-capture:has(.htmx-request) .form-note{display:none}
.urlform:has(input[aria-invalid="true"]){border-color:var(--error)}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Entrance motion --------------------------------------------------- */
/* Applied by script; the resting state is the visible one so the page is
   readable without JavaScript. */

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) ease,transform var(--dur-reveal) var(--ease-out);
}

/* --- Responsive component behaviour ------------------------------------ */

@media (max-width:700px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  .site-nav{display:none}
  .urlform{flex-direction:column;max-width:none}
  .btn{width:100%}
  .reassure{align-items:flex-start}
  .tick{margin-top:3px}
  .footer-row{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width:400px){
  .footer-row nav{gap:14px;flex-wrap:wrap}
}

/* --- User preferences -------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

@media (prefers-contrast:more){
  :root{--line:rgba(var(--ink-rgb),.42);--line-soft:rgba(var(--ink-rgb),.26);--ink-faint:#334155}
}