/*
 * GraspIt — the landing page.
 *
 * The page is set as one dictionary entry: a headword, then numbered senses
 * with the numbers hanging in the margin the way print sets them. Type is
 * split the way a dictionary is — Newsreader for anything lexical (the
 * headword, the passage, the definitions, the italic examples), Instrument
 * Sans for anything that is interface (chips, labels, hints). Colour is the
 * app's own: #00A273 for the selection, violet-tinted greys, indigo for
 * phonetics, so the page and the product read as one thing.
 */

:root {
    --ink:        #1B1A22;
    --paper:      #F4F2F8;
    --card:       #FFFFFF;
    --hairline:   #E7E3EF;
    --muted:      #6F6B7D;

    --grasp:      #00A273;
    --grasp-deep: #006346;
    --grasp-wash: rgba(0, 162, 115, 0.16);
    --indigo:     #4A3AE0;

    --bezel:      #14131A;

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --radius: 18px;

    --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* --- running head --------------------------------------------------------- */

.runhead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem var(--gutter) 0;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.runhead__rule {
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

/* --- page ----------------------------------------------------------------- */

.page {
    max-width: 66rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 8vw, 5rem) var(--gutter) clamp(3rem, 8vw, 5rem);
}

/* --- masthead: GraspIt's own entry ---------------------------------------- */

.masthead { margin-bottom: clamp(2.5rem, 7vw, 4rem); }

.masthead__word {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(3rem, 13vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
}

.masthead__meta {
    margin: 0.75rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.masthead__sense {
    margin: 1rem 0 0;
    max-width: 30rem;
    font-family: var(--serif);
    font-size: clamp(1.125rem, 3.6vw, 1.375rem);
    line-height: 1.5;
}

/* The second sense: how the first one happens. Set below the headline sense so
   the outcome is what carries, and the mechanism explains it. */
.masthead__sense--how {
    margin-top: 0.7rem;
    font-size: clamp(1rem, 2.9vw, 1.125rem);
    color: var(--muted);
}

.ipa {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--indigo);
}

.chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--grasp-wash);
    color: var(--grasp-deep);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- hero: the gesture on the page, the result on the phone --------------- */

.hero {
    display: grid;
    gap: clamp(2rem, 6vw, 3.5rem);
    align-items: center;
    padding-bottom: clamp(3rem, 9vw, 5.5rem);
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 56rem) {
    .hero {
        grid-template-columns: minmax(0, 1fr) 19rem;
        /* Top edges line up; the phone is simply taller than the column
           beside it, which is what a device next to a column of type does. */
        align-items: start;
    }
}

.reading {
    position: relative;
    margin: 0;
    padding: clamp(1.25rem, 4vw, 1.75rem);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04),
                0 18px 40px -24px rgba(27, 26, 34, 0.28);

    font-family: var(--serif);
    font-size: clamp(1.0625rem, 3.4vw, 1.25rem);
    line-height: 1.75;
    color: #35323F;
}

/* Sits behind the text and sweeps onto the word. */
.selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--grasp-wash);
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.selection.is-armed {
    opacity: 1;
    transition: transform 0.5s var(--ease),
                width 0.5s var(--ease),
                height 0.5s var(--ease),
                opacity 0.2s linear;
}

/* Android's teardrop grab handles: a circle with one square corner, pointing
   back at the edge of the selection it controls. */
.handle {
    position: absolute;
    bottom: -10px;
    width: 12px;
    height: 12px;
    background: var(--grasp);
}

.handle--start { left: -10px;  border-radius: 100% 0 100% 100%; }
.handle--end   { right: -10px; border-radius: 0 100% 100% 100%; }

.word {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px dotted #B9B3C7;
    transition: border-color 0.2s ease;
}

.word:hover { border-bottom-color: var(--grasp); }
.word[aria-pressed="true"] { border-bottom-color: transparent; }

.word:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 2px;
}

.hint {
    margin: 0.85rem 0 0;
    padding-left: 0.15rem;
    font-size: 0.8125rem;
    color: var(--muted);
    transition: opacity 0.3s linear;
}

.hint.is-spent { opacity: 0; }

.hero__lede {
    margin: clamp(1.75rem, 5vw, 2.25rem) 0 0;
    max-width: 30rem;
    font-size: clamp(1rem, 2.6vw, 1.0625rem);
    line-height: 1.65;
    color: #45414F;
}

.hero__cta {
    margin: 1.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--grasp-deep);
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grasp);
    flex: none;
}

.hero__shot { margin: 0; }

.hero__shot figcaption {
    margin-top: 0.9rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}

/* --- the device ----------------------------------------------------------- */

.phone {
    padding: 7px;
    background: var(--bezel);
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(27, 26, 34, 0.10),
                0 30px 60px -34px rgba(27, 26, 34, 0.55);
}

.phone img {
    width: 100%;
    border-radius: 23px;
}

/* --- senses --------------------------------------------------------------- */

.senses { margin: 0; }

.sense {
    display: grid;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding: clamp(3rem, 9vw, 5rem) 0;
    border-bottom: 1px solid var(--hairline);
}

.sense:last-child { border-bottom: 0; }

@media (min-width: 56rem) {
    .sense {
        grid-template-columns: minmax(0, 1fr) 16.5rem;
        align-items: center;
    }

    /* The pair of review shots needs more room than a single device. */
    .sense--wide {
        grid-template-columns: minmax(0, 1fr) 21rem;
    }

    .sense__shot { margin-left: clamp(2rem, 5vw, 4rem); }
}

/* The number is a sibling of the prose, not of the row, so it hangs beside
   the definition's first line the way print sets a sense number. */
.sense__text {
    min-width: 0;
    display: flex;
    gap: 1rem;
}

.sense__num {
    flex: none;
    width: 1.25rem;
    margin: 0;
    padding-top: 0.45rem;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--grasp);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sense__prose { min-width: 0; }

.sense__def {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.375rem, 4vw, 1.875rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.sense__body {
    margin: 0.9rem 0 0;
    max-width: 32rem;
    font-size: clamp(0.9375rem, 2.4vw, 1rem);
    line-height: 1.65;
    color: #45414F;
}

.sense__eg {
    margin: 1.1rem 0 0;
    padding-left: 0.9rem;
    border-left: 2px solid var(--grasp-wash);
    max-width: 32rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
    line-height: 1.5;
    color: var(--muted);
}

.sense__eg::before { content: "“"; }
.sense__eg::after  { content: "”"; }

.sense__shot { margin: 0; }

.sense__shot--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

/* The card turns over, so the two shots sit at slightly different heights. */
@media (min-width: 56rem) {
    .sense__shot--pair .phone:last-child { transform: translateY(1.75rem); }
}

/* --- documents: privacy, terms -------------------------------------------- */

.page--doc { max-width: 46rem; }

.doc__back {
    display: inline-block;
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.doc__back:hover { color: var(--grasp-deep); }

.doc__head {
    padding-bottom: clamp(1.5rem, 4vw, 2rem);
    border-bottom: 1px solid var(--hairline);
}

.doc__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.25rem, 8vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.doc__meta {
    margin: 0.75rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--muted);
}

.doc__sep { color: var(--hairline); }

.doc__lede {
    margin: 1.25rem 0 0;
    font-family: var(--serif);
    font-size: clamp(1.0625rem, 3vw, 1.1875rem);
    line-height: 1.6;
}

.toc {
    margin: clamp(2rem, 5vw, 2.5rem) 0 0;
    padding: clamp(1.1rem, 4vw, 1.5rem) clamp(1.25rem, 4vw, 1.75rem);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.toc ol {
    margin: 0;
    padding-left: 1.35rem;
    columns: 2;
    column-gap: 2rem;
    font-size: 0.9375rem;
}

@media (max-width: 34rem) {
    .toc ol { columns: 1; }
}

.toc li {
    margin: 0.3rem 0;
    color: var(--muted);
    break-inside: avoid;
}

.toc a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.toc a:hover { border-bottom-color: var(--grasp); }

.doc { margin-top: clamp(2.25rem, 6vw, 3rem); }

.doc h2 {
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.375rem, 4vw, 1.625rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    scroll-margin-top: 1.5rem;
}

.doc h3 {
    margin: 1.75rem 0 0.6rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grasp-deep);
}

.doc p,
.doc li {
    font-size: 1rem;
    line-height: 1.7;
    color: #45414F;
}

.doc p { margin: 0 0 1rem; }
.doc p:last-child { margin-bottom: 0; }

.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li { margin: 0.4rem 0; }

.doc strong { color: var(--ink); font-weight: 600; }

.doc a {
    color: var(--grasp-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc__table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    text-align: left;
}

.doc__table th {
    padding: 0 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.doc__table td {
    padding: 0.7rem 0.75rem 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
    line-height: 1.5;
    color: #45414F;
    vertical-align: top;
}

.doc__table td:last-child,
.doc__table th:last-child { padding-right: 0; }

/* --- imprint -------------------------------------------------------------- */

/* Set as a book's imprint page: the entry line, then the publisher's details,
   the legal notices and the contact address in labelled columns, then the
   rights line. The legal links live inside that structure rather than floating
   between the wordmark and everything else. */

.imprint {
    margin-top: clamp(2.5rem, 7vw, 4rem);
    padding-top: clamp(1.5rem, 4vw, 2rem);
    border-top: 1px solid var(--hairline);
}

.imprint__entry {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.imprint__word {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.imprint__word a { color: inherit; text-decoration: none; }

.imprint__status {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* The bibliography. Set at the size of a footnote, two columns where there is
   room, with the citation hanging under the thing it accounts for. */

.sources {
    margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
    padding-top: clamp(1.5rem, 4vw, 2rem);
    border-top: 1px solid var(--hairline);
}

.sources__label {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sources__list {
    display: grid;
    gap: 1.25rem 2.5rem;
    margin: 1.25rem 0 0;
}

@media (min-width: 42rem) {
    .sources__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.source { min-width: 0; }

.source__of {
    margin: 0 0 0.25rem;
    font-family: var(--serif);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--ink);
}

.source__cite {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: #5C5769;
}

.source__cite cite {
    font-style: italic;
}

/* SM-2 is a name, not a range; it should not break at the hyphen. */
.nowrap { white-space: nowrap; }

.source__cite a {
    color: var(--grasp-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--grasp-wash);
    white-space: nowrap;
}

.source__cite a:hover {
    border-bottom-color: var(--grasp);
}

.imprint__cols {
    display: grid;
    gap: 1.75rem 2.5rem;
    margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
}

@media (min-width: 42rem) {
    .imprint__cols {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

.imprint__col { min-width: 0; }

.imprint__cols dt {
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.imprint__cols dd {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: #5C5769;
}

.imprint__cols a {
    color: #5C5769;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
}

.imprint__cols a:hover {
    color: var(--grasp-deep);
    border-bottom-color: var(--grasp);
}

.imprint__cols a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--grasp);
}

.imprint__rights {
    margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

/* --- entrance ------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(14px);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* --- quality floor -------------------------------------------------------- */

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

    .selection.is-armed,
    .hint,
    .reveal.is-in { transition: none; }

    .reveal { opacity: 1; transform: none; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:      #ECEAF2;
        --paper:    #17161C;
        --card:     #201E28;
        --hairline: #322E3D;
        --muted:    #9B96AA;
        --grasp-wash: rgba(0, 162, 115, 0.24);
        --indigo:   #A38DFF;
        --bezel:    #08080C;
    }

    body { color: var(--ink); }

    .reading { color: #D7D3E0; }
    .word { border-bottom-color: #5A5468; }
    .chip { color: #6FE3B4; }
    .hero__cta { color: #6FE3B4; }
    .hero__lede,
    .sense__body { color: #C6C2D2; }
    .sense__num { color: #6FE3B4; }

    .doc p,
    .doc li,
    .doc__table td { color: #C6C2D2; }

    .doc h3,
    .doc a,
    .doc__back:hover,
    .imprint__cols a:hover { color: #6FE3B4; }

    .imprint__cols dd,
    .imprint__cols a { color: #A9A4B8; }

    .source__cite { color: #A9A4B8; }
    .source__of { color: var(--ink); }
    .source__cite a { color: #6FE3B4; }
    .imprint__cols a { border-bottom-color: #322E3D; }

    .phone {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                    0 30px 60px -34px rgba(0, 0, 0, 0.9);
    }
}