:root {
    --primary-color-dark:    #000000;
    --primary-color:         #2A292E;
    --primary-color-light:   #676570;

    --between-color:         #AAA9AF;

    --secondary-color-dark:  #ededed;
    --secondary-color:       #f6f6f6;
    --secondary-color-light: #ffffff;

    --accent-color: #f6b872;
    
    --shadow:                    0 0 10px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.1);
    --shadow-light:              0 0 10px rgba(0,0,0,0.05), 0 0 10px rgba(0,0,0,0.05), 0 0 10px rgba(0,0,0,0.05);
    --shadow-drop:               drop-shadow(0 0 4px rgba(0,0,0,0.3));
    --shadow-blurry:             0 0 24px rgba(0, 0, 0, 0.1), 0 0 36px rgba(0, 0, 0, 0.1);
    --shadow-blurry-light:       0 0 24px rgba(0, 0, 0, 0.05), 0 0 36px rgba(0, 0, 0, 0.05);
    --shadow-blurry-drop:        drop-shadow(0 0 14px rgba(0, 0, 0, 0.19));
    --shadow-medium:             0 0 14px rgba(0,0,0,0.15), 0 0 14px rgba(0,0,0,0.15), 0 0 14px rgba(0,0,0,0.15);
    --shadow-strong:             0 0 20px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.2);
    --shadow-strong-blurry:      0 0 48px rgba(0, 0, 0, 0.2), 0 0 72px rgba(0, 0, 0, 0.2);
    --shadow-strong-blurry-drop: drop-shadow(0 0 26px rgba(0, 0, 0, 0.38));
    
    --shadow-white:        0 0 10px rgba(255,255,255,0.1), 0 0 10px rgba(255,255,255,0.1), 0 0 10px rgba(255,255,255,0.1);
    --shadow-blurry-white: 0 0 24px rgba(255,255,255,0.1), 0 0 36px rgba(255,255,255,0.1);
    --shadow-medium-white: 0 0 14px rgba(255,255,255,0.15), 0 0 14px rgba(255,255,255,0.15), 0 0 14px rgba(255,255,255,0.15);
    --shadow-strong-white: 0 0 20px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.2);
    --shadow-strong-blurry-white: 0 0 48px rgba(255,255,255,0.2), 0 0 72px rgba(255,255,255,0.2);

    
    --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --sans: 'Geist', ui-sans-serif, -apple-system, 'Helvetica Neue', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --matangi: "Matangi", sans-serif;
    
    --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;



    --nav-h: 72px;
    --gutter: clamp(20px, 4vw, 48px);

    --ease: cubic-bezier(.2,.7,.1,1);

    /* One screen height, measured from innerHeight by the script in base.html and only updated
       when the width changes on touch devices, so nothing moves while a phone's toolbar slides
       in and out. Not svh: iOS 26 Safari sometimes reports svh/lvh as the whole screen,
       toolbars included (after it tints its bars), which pushed content under the toolbar. */
    --screen-h: 100svh;
}

html { background: var(--secondary-color); }

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--secondary-color);
    color: var(--primary-color);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    /* viewport-fit=cover: keep content clear of the notch in landscape */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* Scroll lock while the menu is open. Only on html, which hands it to the viewport: on body as
   well it would make body a scroll container of its own, and the sticky header would then stick
   inside body (never scrolled) instead of the viewport, jumping back to the top of the page,
   off screen whenever the menu was opened further down. */
html.is-menu-open { overflow: hidden; }
img, svg { display: block; }
::selection { background: var(--between-color); color: var(--primary-color); }

.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}


/* -- Layout  ------ */

.page-section-track {
    height: calc(var(--screen-h) * var(--steps, 1));
    width: 100%;
}

.page-section {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    height: var(--screen-h);
    width: 100%;

    margin-top: calc(var(--nav-h) * -1);
    padding: var(--nav-h) var(--gutter) var(--gutter) var(--gutter);
}

/* -- Headers ------ */

/* punctuation picked out in the accent colour (journal titles: see journal_tags.accent_marks) */
.accent-mark { color: var(--accent-color); }

/* Headers keep the same inset on the left and the right. The width fills whatever is left
   between the two margins (width: 100% plus a margin ran past the right edge); the plain
   100% stays as the fallback for browsers without the fill keyword. */

.header {
    height: min-content;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;

    margin: 10px var(--gutter) var(--gutter) var(--gutter);
    margin: var(--gutter);

    font-family: var(--sans);
    font-weight: 300;
    color: var(--primary-color);
    font-size: clamp(36px, 5.2vw + 14px, 75px);
    line-height: 1.1;
}

.header-sub {
    height: min-content;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;

    margin: 10px var(--gutter) calc(var(--gutter) / 2) var(--gutter);

    font-family: var(--sans);
    font-weight: 300;
    color: var(--primary-color);
    font-size: clamp(28px, 3vw + 14px, 50px);
    line-height: 1.15;
}

.header-reg {
    height: min-content;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;

    margin: 10px var(--gutter) calc(var(--gutter) / 2) var(--gutter);

    font-family: var(--sans);
    font-weight: 300;
    color: var(--primary-color);
    font-size: clamp(26px, 2vw + 15px, 38px);
    line-height: 1.15;
}

.header-micro {
    height: min-content;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;

    margin: 10px var(--gutter) calc(var(--gutter) / 2) var(--gutter);

    font-family: var(--sans);
    font-weight: 300;
    color: var(--primary-color);
    font-size: clamp(24px, 1.2vw + 16px, 30px);
}

.header-nano {
    height: min-content;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;

    margin: 10px var(--gutter) calc(var(--gutter) / 2) var(--gutter);

    font-family: var(--sans);
    font-weight: 450;
    color: var(--primary-color);
    font-size: 20px;
}

/* -- Forms ------ */

/* A small uppercase line above a form's title ("Account", "Early access"). */
.form-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-color-light);
}

/* A message about the whole form, above its fields. */
.form-alert {
    margin: 0 0 20px 0;
    padding: 12px 16px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-color) 22%, var(--secondary-color-light));
    border: 1px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
    font-size: 14px;
    line-height: 1.45;
    color: var(--primary-color);
}

/* One labelled input (accounts/field.html draws it). */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.form-field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.form-field-head label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--primary-color);
}

.form-input-wrap { position: relative; }

.form-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--secondary-color-dark);
    border-radius: 11px;
    background: var(--secondary-color-light);
    color: var(--primary-color);
    font-family: var(--sans);
    font-size: 16px; /* 16px keeps iOS Safari from zooming in on focus */
    outline: none;
    transition: border-color .3s, box-shadow .3s var(--ease);
}

.form-input::placeholder { color: var(--between-color); }
.form-input:hover { border-color: var(--between-color); }
.form-input[aria-invalid="true"] { border-color: var(--accent-color); }
.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.form-input[type="password"],
.form-input-wrap:has(.form-reveal) .form-input { padding-right: 52px; }

/* the quiet line under an input: a hint, or its error */
.form-note {
    font-size: 13px;
    line-height: 1.4;
    color: var(--primary-color-light);
}

.form-note--error { color: var(--primary-color); }
.form-note--error::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    vertical-align: 2px;
}

/* an error takes the hint's place, also when it's added in the browser */
.form-field:has(.form-note--error:not([hidden])) .form-note:not(.form-note--error) { display: none; }

/* A checkbox with its sentence. The real input lies invisibly over the drawn box, so it keeps the
   keyboard and screen readers. Ticking, the accent grows out of the box's middle and the tick
   draws itself on top; unticking is quicker and the other way round. */
.form-check {
    position: relative;
    margin: 2px 0 18px 0;
}

.form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.form-check label {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary-color-light);
    cursor: pointer;
}

.form-check a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--accent-color);
}

.form-check-box {
    position: relative;
    flex: none;
    display: block;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border: 1px solid var(--between-color);
    border-radius: 7px;
    background: var(--secondary-color-light);
    transition: border-color .3s, box-shadow .3s var(--ease), transform .4s var(--ease);
}

.form-check-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    transform: scale(.2);
    transition: transform .18s ease-in, opacity .18s;
}

.form-check-box svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-check-box path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0; /* a round cap would leave a dot where the tick starts */
    transition: stroke-dashoffset .14s ease-in, opacity 0s .14s;
}

.form-check-input:hover + label .form-check-box,
.form-check label:hover .form-check-box { border-color: var(--primary-color-light); }
.form-check-input:active + label .form-check-box { transform: scale(.88); }
.form-check-input[aria-invalid="true"] + label .form-check-box { border-color: var(--accent-color); }
.form-check-input:focus-visible + label .form-check-box {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.form-check-input:checked + label .form-check-box { border-color: var(--accent-color); }
.form-check-input:checked:focus-visible + label .form-check-box { border-color: var(--primary-color); }

.form-check-input:checked + label .form-check-box::before {
    opacity: 1;
    transform: scale(1.6);
    transition: transform .34s var(--ease), opacity .1s;
}

.form-check-input:checked + label .form-check-box path {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset .3s var(--ease) .08s, opacity 0s .08s;
}

.form-check .form-note { margin: 6px 0 0 34px; }
.form-check-input:checked ~ .form-note--error { display: none; } /* they just fixed it */

@media (prefers-reduced-motion: reduce) {
    .form-check-box,
    .form-check-box::before,
    .form-check-box path,
    .form-check-input:checked + label .form-check-box::before,
    .form-check-input:checked + label .form-check-box path { transition: none; }
    .form-check-input:active + label .form-check-box { transform: none; }
}

/* the four-digit code we email (accounts/code_step.html): four boxes in the middle, like the
   four in the email, each one digit */
.code-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.code-box {
    flex: 0 1 64px;
    min-width: 0;
    height: 72px;
    padding: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 28px;
    caret-color: var(--accent-color);
}

.code-field .form-note { text-align: center; }

/* A quiet line under a form, its question in grey and the way out underlined in the accent
   (log in's "New to ADA?" is the same). The way out can be a link or a button. */
.form-switch {
    margin: 18px 0 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--primary-color-light);
}

.form-switch a,
.form-switch button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--accent-color);
    cursor: pointer;
}

/* the show / hide button inside a password input */
.form-reveal {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--primary-color-light);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .3s;
}

.form-reveal:hover { color: var(--primary-color); }
.form-reveal:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -4px; }
.form-reveal .icon-hide { display: none; }
.form-reveal[aria-pressed="true"] .icon-show { display: none; }
.form-reveal[aria-pressed="true"] .icon-hide { display: block; }

.form-link {
    font-size: 13px;
    color: var(--primary-color-light);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--accent-color);
    transition: color .3s;
}

.form-link:hover { color: var(--primary-color); }


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

/* A form's buttons. The primary one is dark and turns to the accent on hover; --secondary is
   the light one for the choices next to it. An arrow (svg) inside nudges right on hover. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, color .3s, box-shadow .5s var(--ease);
}

.btn svg { flex: none; transition: transform .5s var(--ease); }
.btn:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-blurry-light);
}
.btn:hover svg { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

.btn--secondary {
    border-color: var(--secondary-color-dark);
    background-color: var(--secondary-color-light);
    color: var(--primary-color);
}

.btn--secondary:hover {
    border-color: var(--between-color);
    background-color: var(--secondary-color-light);
}