/* Long-form reading pages: the site's colours and fonts from style.css, set
   for text. Loaded after style.css. */

.guide
{
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 32px 72px;
    position: relative;
    z-index: 10;
}

@media (max-width: 600px)
{
    .guide
    {
        padding: 16px 20px 56px;
    }
}

.guide .crumb
{
    font-family: 'DM Mono', monospace;
    font-size: 0.69rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin-bottom: 18px;
}

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

.guide .crumb a:hover
{
    color: var(--secondary);
}

.guide h1
{
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: white;
    margin-bottom: 20px;
}

.guide h2
{
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 1.75rem);
    line-height: 1.2;
    color: white;
    margin: 44px 0 14px;
}

.guide p,
.guide li
{
    font-size: 1.04rem;
    line-height: 1.7;
    color: #c9d4df;
}

.guide p
{
    margin-bottom: 16px;
}

.guide .lead
{
    font-size: 1.15rem;
    color: var(--text);
}

.guide ul,
.guide ol
{
    margin: 0 0 18px 22px;
}

.guide li
{
    margin-bottom: 8px;
    padding-left: 4px;
}

.guide li::marker
{
    color: var(--secondary);
}

.guide strong
{
    color: var(--text);
    font-weight: 600;
}

.guide a
{
    color: #e8aa6a;
}

.guide figure
{
    margin: 28px 0 32px;
}

.guide figure img
{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.guide figcaption
{
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 10px;
}

.guide .btn-row
{
    margin: 22px 0 10px;
}

/* The store buttons look exactly as on the home page, not like a text link. */
.guide a.store-btn
{
    color: var(--text);
}

.guide .note
{
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--muted);
}

/* "What you read" against "what the file contains" */

.glyph-demo
{
    margin: 26px 0 20px;
}

.gd-panes
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
}

@media (max-width: 640px)
{
    .gd-panes
    {
        grid-template-columns: 1fr;
    }
}

.gd-pane
{
    position: relative;
    border-radius: 12px;
    padding: 22px 18px 16px;
}

.gd-label
{
    position: absolute;
    top: -0.75em;
    left: 14px;
    padding: 0 6px;
    background: var(--ink);
    font-family: 'DM Mono', monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.gd-human
{
    background: #fbfaf7;
    color: #16181b;
    display: flex;
    align-items: center;
    min-height: 180px;
}

.gd-sentence
{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    line-height: 2;
}

.gd-line
{
    display: block;
    white-space: nowrap;
}

.gd-letter
{
    border-radius: 3px;
    cursor: default;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.gd-letter.hot
{
    background: rgba(232, 170, 106, 0.5);
    box-shadow: 0 0 0 1px #c8823a;
}

.gd-machine
{
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
}

.gd-page
{
    display: block;
    width: 100%;
    height: auto;
    background: #fbfaf7;
    border-radius: 6px;
}

.gd-glyph
{
    opacity: 0;
    transition: opacity 0.25s;
    cursor: default;
}

.gd-glyph.on
{
    opacity: 1;
}

.gd-glyph rect
{
    fill: rgba(42, 120, 214, 0.1);
    stroke: #2a78d6;
    stroke-width: 0.3;
}

.gd-glyph text
{
    fill: #0b0b0b;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
}

.gd-glyph.fresh rect,
.gd-glyph.hot rect
{
    fill: rgba(232, 170, 106, 0.6);
    stroke: #a5671e;
    stroke-width: 0.6;
}

.gd-tick
{
    fill: #8a8983;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 3.4px;
}

.gd-caption
{
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gd-actions
{
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.gd-replay
{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e8aa6a;
    background: rgba(200, 130, 58, 0.14);
    border: 1px solid rgba(200, 130, 58, 0.6);
    border-radius: 100px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.gd-replay:hover
{
    background: rgba(200, 130, 58, 0.26);
    transform: translateY(-1px);
}

.gd-records
{
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 3px;
}

.gd-cell
{
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: #c9d4df;
    font-size: 0.75rem;
    cursor: default;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.gd-cell span
{
    opacity: 0;
    transition: opacity 0.2s;
}

.gd-cell.on span
{
    opacity: 1;
}

.gd-cell.fresh,
.gd-cell.hot
{
    border-color: #e8aa6a;
    color: #e8aa6a;
    background: rgba(232, 170, 106, 0.16);
}

/* Room for its longest text, so the panes keep their height while it changes. */
.gd-readout
{
    min-height: 4.5em;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #c9d4df;
}

/* Before and after: the printed page against PDFreflow, light and dark split
   along the diagonal. Column widths are set so both images end up the same
   height (page 1000x1610, reflow 800x1625). */

.compare
{
    display: grid;
    grid-template-columns: 1.262fr 1fr;
    gap: 14px;
    margin: 28px 0 10px;
    align-items: start;
}

.compare-label
{
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}

.compare-label-app
{
    color: #e8aa6a;
}

.compare-frame
{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.compare-frame img
{
    display: block;
    width: 100%;
    height: auto;
}

.compare-pdf
{
    background: #ffffff;
}

.compare-split .compare-dark
{
    position: absolute;
    inset: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* The seam between light and dark: the 50% line of a corner gradient runs
   between the two other corners, here top-right to bottom-left. */
.compare-split::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e8aa6a calc(50% - 1px), #e8aa6a calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
}

.compare-modes
{
    color: var(--muted);
}

/* On a phone the suffix would wrap the label onto a second line and push this
   side's picture below the other's; the caption names both modes anyway. */
@media (max-width: 640px)
{
    .compare-modes
    {
        display: none;
    }
}

.guide .compare-caption
{
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 28px;
}

.guide .hl
{
    color: #e8aa6a;
    font-weight: 600;
}

/* Two columns read straight across: each line keeps its column's colour. */

.cols-demo
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    margin: 26px 0 22px;
}

@media (max-width: 640px)
{
    .cols-demo
    {
        grid-template-columns: 1fr;
    }
}

.cols-box
{
    position: relative;
    border-radius: 12px;
    padding: 22px 18px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.cols-label
{
    position: absolute;
    top: -0.75em;
    left: 14px;
    padding: 0 6px;
    background: var(--ink);
    font-family: 'DM Mono', monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cols-page
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
}

.col-a
{
    color: #7fb4ee;
}

.col-b
{
    color: #e8aa6a;
}

.guide .cols-mixed
{
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
}

.guide .related
{
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}