/* --- Detail sheets -------------------------------------------------------
   The stylesheet of every page that is one more sheet of the drawing
   rather than the drawing itself: Got Cash?'s privacy policy (sheet 03.1)
   and the site's own (00.1). The same blueprint field, the same three
   voices, a framed sheet with a numbered list of notes and a title block in
   the corner. Written for the first of them and lifted out of its <style>
   when the second arrived, so the two cannot drift apart; what is left in
   each page's own <style> is the object its Fig. 1 draws.

   Absolute paths throughout, because the sheets live at different depths.
   The main sheet is style.css, which these pages do not load. */

@font-face {
    font-family: 'Nohemi';
    src: url('/fonts/Nohemi-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('/fonts/Caveat-Latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* The main sheet's tokens, by value: see style.css for the
       measured contrast list every one of these sits on. */
    --bg-color: #10416A;
    --fg-color: #ffffff;
    --ink-quiet: rgba(255, 255, 255, 0.7);   /* 6.1:1 */
    --rule-quiet: rgba(255, 255, 255, 0.35);
    --font-display: 'Nohemi', 'Helvetica Neue', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --font-hand: 'Caveat', cursive;
    --ease-drawer: cubic-bezier(0.22, 1, 0.36, 1);

    --measure: 66ch;
    --sheet-pad: clamp(20px, 6vw, 72px);
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg-color);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--fg-color);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.7;
}

/* The blueprint field, the main sheet's own grid at its authored
   pitch: 40px cells ruled every 8px. Fixed, so the sheet slides over
   the table rather than the table scrolling with it. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(rgba(255, 255, 255, 0.139) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.139) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(rgba(255, 255, 255, 0.033) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.033) 0 1px, transparent 1px 8px);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg-color); outline-offset: 4px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Chrome: the wordmark home, and the language pair. ----------- */

.chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px clamp(16px, 4vw, 30px);
}

.home {
    display: block;
    line-height: 0;
    color: var(--fg-color);
}
/* Both ends give a little on the narrowest phones: at 320px the
   wordmark's 150px floor and the pair's 16px padding came to 358px
   of chrome, and the whole page was laid out wider than the screen. */
.home svg {
    width: clamp(118px, 30vw, 210px);
    height: auto;
}

.langs {
    display: flex;
    gap: 10px;
}

/* The main sheet's chrome buttons: dashed while they are an option,
   solid on a faint plate for where you are, inverted under the
   pointer. */
.langs a {
    display: block;
    padding: 10px clamp(10px, 3vw, 16px);
    border: 1px dashed var(--fg-color);
    background: var(--bg-color);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.langs a[aria-current="true"] {
    border-style: solid;
    background: rgba(255, 255, 255, 0.14);
}
@media (hover: hover) {
    .langs a:hover {
        background: var(--fg-color);
        color: var(--bg-color);
    }
}

/* --- The sheet. -------------------------------------------------- */

main {
    padding: 24px clamp(10px, 4vw, 30px) 64px;
}

.sheet {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: calc(var(--sheet-pad) + 8px) var(--sheet-pad);
    border: 1px solid var(--fg-color);
    background: var(--bg-color);
    scroll-margin-top: 24px;
}

/* Only while both sheets are drawn, which is only without
   JavaScript. An adjacent-sibling rule still matches when the first
   sheet is display: none, so written as `.sheet + .sheet` alone it
   put 96px of empty field above the Italian sheet every time it was
   the one shown. */
html:not([data-lang]) .sheet + .sheet { margin-top: 96px; }

html[data-lang="en"] #policy-it,
html[data-lang="it"] #policy-en { display: none; }

/* The inner border line of a drawing frame, and the zone ticks along
   the top and bottom edges: eight zones, as on an A-size sheet. */
.sheet::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--rule-quiet);
    pointer-events: none;
}
.sheet::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -9px;
    bottom: -9px;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, var(--fg-color) 0 1px, transparent 1px 12.5%) top / 100% 8px no-repeat,
        repeating-linear-gradient(90deg, var(--fg-color) 0 1px, transparent 1px 12.5%) bottom / 100% 8px no-repeat;
}

.sheet > * { position: relative; }

/* --- The head: whose policy this is, and since when. ------------- */

/* One heading, two lines: the app a visitor came from, then what this
   is. The app's line is the icon and the name exactly as the card on
   the main sheet draws them; the second line is the callout, lettered
   over the 2px rule the main sheet gives [01] to [04]. Read aloud it
   is "Got Cash? Privacy policy", which is the page's name. */
h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
}
.h1-app {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    line-height: 1;
}
.h1-app img {
    display: block;
    width: 60px;
    height: 60px;
}
.h1-doc {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: 30px;
    padding-bottom: 10px;
    font-size: clamp(2rem, 6.4vw, 3rem);
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
}
.h1-doc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--fg-color);
    transform-origin: left;
    animation: rule-draw 0.9s var(--ease-drawer) 0.1s both;
}

.issue {
    margin: 14px 0 0;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-quiet);
}

.lede {
    max-width: 56ch;
    margin: 44px 0 0;
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.2rem);
    line-height: 1.6;
    text-wrap: pretty;
}

/* --- Fig. 1: every way out of the object. ------------------------ */

/* The sheet's one drawing, and the answer to the question people open
   a privacy policy to ask. Real text throughout, not an image: it is
   policy, it is in two languages, and it has to read in order to a
   screen reader -- the object and what it keeps, then each way out,
   each in words that do not lean on the kind of line it is drawn in.

   The object is the one thing each sheet draws for itself, in its own
   <style>: Got Cash?'s phone, the site's browser window. Everything
   that hangs off it -- the note, the centre lines, the trunk, the
   exits, the legend -- is the same assembly on every sheet, so it is
   here.

   Composed twice, by the width the figure itself gets rather than the
   viewport's: the object beside its exits on a wide sheet, above them
   on a tall one. Either way the exits hang off one trunk, so the
   drawing reads as a single assembly rather than a list with
   arrows on it. */
.flow {
    container-type: inline-size;
    margin: clamp(32px, 7vw, 72px) 0 0;
}

.flow-body {
    --object-w: 248px;
    --gap: 40px;
    --trunk-x: 20px;     /* where the trunk drops, on a tall sheet */
    display: grid;
    row-gap: var(--gap);
    /* Room for the note written above the object, which is placed out
       of flow so it moves nothing it points at. */
    padding-top: 64px;
}

/* The object's box. Its outline is the sheet's to draw, at 2px, the
   visible edge of the object, against the 1px the lines of the
   assembly carry. */
.object {
    position: relative;
    width: min(var(--object-w), 100%);
    /* A stacking context of its own, so the centre lines' z-index
       puts them behind the object and not behind the sheet. */
    isolation: isolate;
}
/* Centre lines, the chain lines a drawing runs through a part's axes.
   Behind the object's own fill, so they show only where they run past
   its outline -- which is what centre lines do on paper. */
.centre {
    position: absolute;
    inset: -22px;
    width: calc(100% + 44px);
    height: calc(100% + 44px);
    overflow: visible;
    z-index: -1;
    fill: none;
    stroke: var(--rule-quiet);
    stroke-width: 1;
    stroke-dasharray: 14 4 2 4;
}

/* The app's storage: a boundary, so dashed -- the one dashed box on
   the sheet, and it is the thing the whole policy is about. */
.store {
    flex: 1;
    border: 1px dashed var(--fg-color);
    padding: 10px 12px 12px;
}
.store-label,
.contents-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.store ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.6;
}

/* The author, writing on the drawing: an arrow from the note into
   the object. The arrow is drawn from the note's first letter, which
   sits at the same place in either language, so its geometry is fixed
   however long the sentence runs. */
.object-note {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    margin: 0;
    padding: 0 0.35em 0 62px;
    font-family: var(--font-hand);
    font-size: 1.9rem;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.9;
    transform: rotate(-3deg);
    transform-origin: left bottom;
    /* Over the object, whose fill would otherwise paint across the
       arrowhead where it lands inside the outline. */
    z-index: 1;
}
.object-note span {
    display: inline-block;
    padding: 0 0.35em;
    margin-left: -0.35em;
    animation: hand-write 0.9s cubic-bezier(0.45, 0, 0.55, 1) 1.1s both;
}
.object-note svg {
    position: absolute;
    left: 14px;
    top: 8px;
    width: 50px;
    height: 52px;
    overflow: visible;
    fill: none;
    stroke: var(--fg-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.object-note path {
    stroke-dasharray: 1;
    animation: stroke-draw 0.5s var(--ease-drawer) 1.85s both;
}

/* The exits, hung off one trunk. Each row draws its own length of the
   trunk, so the line runs from the first branch to the last and never
   past either end, however many rows there are. --branch is the
   centre of the first line of the exit's name, which is where its
   leader leaves the trunk. */
.exits {
    --branch: 12px;
    --leader: 52px;
    --half-gap: 13px;
    display: grid;
    row-gap: calc(var(--half-gap) * 2);
    margin: 0 0 0 var(--trunk-x);
    padding: 0;
    list-style: none;
}
.exit {
    position: relative;
    padding-left: calc(var(--leader) + 14px);
}
.exit::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * var(--half-gap));
    bottom: calc(-1 * var(--half-gap));
    border-left: 1px solid var(--fg-color);
}
.exit:first-child::before { top: 0; }
.exit:last-child::before {
    bottom: auto;
    height: calc(var(--half-gap) + var(--branch));
}

/* The stub from the object into the trunk: straight down on a tall
   sheet, across on a wide one. */
.object::after {
    content: "";
    position: absolute;
    left: var(--trunk-x);
    top: 100%;
    height: var(--gap);
    border-left: 1px solid var(--fg-color);
}

.leader {
    position: absolute;
    left: 0;
    top: calc(var(--branch) - 6px);
    width: var(--leader);
    height: 12px;
    overflow: visible;
    fill: none;
    stroke: var(--fg-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: leader-draw 0.55s var(--ease-drawer) both;
}
.exit:nth-child(1) .leader { animation-delay: 0.45s; }
.exit:nth-child(2) .leader { animation-delay: 0.57s; }
.exit:nth-child(3) .leader { animation-delay: 0.69s; }
.exit:nth-child(4) .leader { animation-delay: 0.81s; }

.exit-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 24px;
}
.exit-say {
    max-width: 46ch;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty;
}

/* The note a line points at: a reference, in the mono, after the
   name. It is the drawing's way into the text below it. */
.ref {
    margin-left: 0.5ch;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
@media (hover: hover) {
    .ref:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Caption and legend: the three kinds of line, in words. */
.flow figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px 28px;
    margin-top: 48px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-quiet);
    font-size: 13px;
    color: var(--ink-quiet);
}
.flow figcaption b {
    color: var(--fg-color);
    margin-right: auto;
}
.legend {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.legend svg {
    width: 40px;
    height: 12px;
    overflow: visible;
    fill: none;
    stroke: var(--fg-color);
    stroke-linecap: round;
    stroke-linejoin: round;
}

@container (min-width: 600px) {
    .flow-body {
        grid-template-columns: var(--object-w) 1fr;
        column-gap: 56px;
        align-items: center;
    }
    .object::after {
        left: 100%;
        top: 50%;
        width: 56px;
        height: 0;
        border-left: 0;
        border-top: 1px solid var(--fg-color);
    }
    .exits { margin-left: 0; }
    .exit:first-child::before { top: var(--branch); }
    .flow figcaption {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* --- The list of notes. ------------------------------------------ */

.contents {
    margin-top: clamp(56px, 10vw, 88px);
}
.contents-label {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fg-color);
}
.contents ol {
    columns: 2 260px;
    column-gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contents li {
    break-inside: avoid;
    border-bottom: 1px solid var(--rule-quiet);
}
.contents a {
    display: flex;
    gap: 1.5ch;
    padding: 9px 0;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
}
.contents .n {
    min-width: 4ch;
    color: var(--ink-quiet);
}
@media (hover: hover) {
    .contents a:hover span:last-child {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* --- The notes: the policy in full. ------------------------------ */

/* Numbered notes, as a drawing keeps them: the number hung in a
   gutter of its own, so the ten read down one edge and the text
   holds one measure. On a narrow sheet there is no room for a gutter
   and the number goes back inline. */
.clauses {
    container-type: inline-size;
    max-width: calc(var(--measure) + 72px);
    margin-top: 72px;
}
.clause {
    position: relative;
    scroll-margin-top: 24px;
}
.clause + .clause { margin-top: 48px; }

.clause h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    text-wrap: balance;
}
.clause .n {
    display: inline-block;
    margin-right: 0.6ch;
    padding: 0 4px;
    margin-left: -4px;
    transition: background-color 0.3s, color 0.3s;
}
/* Where a jump from the drawing or the list lands: the number turns
   into the plate a chrome button turns into, so the eye finds the
   note it was sent to. */
.clause:target .n {
    background: var(--fg-color);
    color: var(--bg-color);
}

.clause p,
.clause ul {
    margin: 0 0 12px;
    font-size: clamp(15px, 0.86rem + 0.15vw, 16px);
    text-wrap: pretty;
}
.clause > :last-child { margin-bottom: 0; }
.clause ul {
    padding: 0;
    list-style: none;
}
.clause li {
    position: relative;
    padding-left: 2ch;
}
.clause li + li { margin-top: 10px; }
.clause li::before {
    content: "–";
    position: absolute;
    left: 0;
}

@container (min-width: 520px) {
    .clause { padding-left: 72px; }
    .clause .n {
        position: absolute;
        left: 0;
        margin: 0 0 0 -4px;
    }
}

.clause a,
.title-block a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .clause a:hover,
    .title-block a:hover { text-decoration-thickness: 2px; }
}

/* --- The title block, in the corner where drawings keep it. ------ */

.title-block {
    margin: 96px 0 0 auto;
    max-width: 460px;
}
.title-block dl {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.6fr;
    gap: 1px;
    margin: 0;
    border: 1px solid var(--fg-color);
    background: var(--fg-color);
}
.title-block dl > div {
    padding: 8px 12px 10px;
    background: var(--bg-color);
    min-width: 0;
}
.title-block .span-3 { grid-column: span 3; }
.title-block .span-4 { grid-column: 1 / -1; }
.title-block dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.title-block dd {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.drawn {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.signature {
    font-family: var(--font-hand);
    font-size: 1.9rem;
    line-height: 0.8;
    transform: rotate(-4deg);
    padding: 0 0.35em;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .title-block dl {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row dense;   /* Sheet and Rev. side by side */
    }
    .title-block .span-3 { grid-column: 1 / -1; }
}

/* --- Foot: the way to the maker, and to him. --------------------- */

.foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 960px;
    margin: 40px auto 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.foot a { text-decoration: none; }
@media (hover: hover) {
    .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- Motion: the callout's rule is drawn, the exits' leaders run
   out of the trunk one after another, then the note is written and
   its arrow drawn into the object. Every word is on the page from the
   first frame; only lines are drawn, so reading never waits. */

@keyframes rule-draw {
    from { transform: scaleX(0); }
}
@keyframes leader-draw {
    from { clip-path: inset(-50% 100% -50% 0); }
    to { clip-path: inset(-50% -10% -50% 0); }
}
@keyframes hand-write {
    from { clip-path: inset(-20% 100% -20% 0); }
    to { clip-path: inset(-20% -10% -20% -10%); }
}
@keyframes stroke-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .h1-doc::after,
    .leader,
    .object-note span,
    .object-note path { animation: none; }
    .clause .n { transition: none; }
}

@media print {
    :root {
        --bg-color: #fff;
        --fg-color: #000;
        --ink-quiet: rgba(0, 0, 0, 0.7);
        --rule-quiet: rgba(0, 0, 0, 0.35);
    }
    body::before, .chrome, .foot, .contents { display: none; }
    html[data-lang] .sheet { display: block; }
    .leader, .object-note span, .object-note path { animation: none; }
}