/* Pauta's own identity, lifted from the app: paper, ink, cyan and magenta,
   Source Serif 4 everywhere, hierarchy by rules and white space.
   Cyan and magenta never meet inside the same small component. */
:root{color-scheme:light;--paper:#f3f2f2;--ink:#201e1d;--ink-700:#4a4644;--ink-600:#6b6663;--rule:#cfcac6;--cyan:#0088b0;--cyan-deep:#006a8a;--magenta:#d6006c;--serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-padding-top:2rem;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font:1.0625rem/1.62 var(--serif)}
a{color:var(--cyan);text-underline-offset:.22em}
a:hover{color:var(--cyan-deep)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
h1,h2,h3{font-weight:700;line-height:1.14;letter-spacing:-.012em;margin:0}
p{margin:0}
.wrap{width:min(100% - 3rem,1080px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:1rem;left:1rem;z-index:5;padding:.5rem 1rem;background:var(--paper);transform:translateY(-200%)}
.skip:focus{transform:none}

/* Masthead: the studio line, then the double rule a front page starts with */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.35rem;font-size:.9375rem}
.studio{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;color:var(--ink)}
.studio:hover{color:var(--ink)}
.languages{position:relative;z-index:3}
.languages summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:.6rem;padding:.4rem .85rem;border:1px solid var(--rule)}
.languages summary::-webkit-details-marker{display:none}
.languages nav{position:absolute;right:0;top:calc(100% + .4rem);width:max-content;max-width:calc(100vw - 3rem);padding:.4rem;background:var(--paper);border:1px solid var(--rule);box-shadow:0 10px 26px #201e1d12}
.languages a{display:block;min-height:44px;padding:.45rem 1rem;text-decoration:none;color:var(--ink)}
.languages a:hover,.languages a[aria-current]{background:#e7e5e3}
.languages a[aria-current]{font-weight:700}
.rule-double{border:0;border-top:3px double var(--ink);margin:0}

.eyebrow{margin:0 0 .6rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--magenta)}
.eyebrow-quiet{color:var(--ink-600)}

/* Hero: the headline is the front page's headline, set as big as one */
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:3.5rem;align-items:center;padding-block:3rem 3.25rem}
.status{display:inline-block;margin:0 0 1.1rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--magenta)}
h1{font-size:clamp(3.5rem,7vw,5.5rem);line-height:1;letter-spacing:-.03em;margin:0 0 1.1rem}
h1 .dot{color:var(--magenta)}
.headline{font-size:clamp(1.75rem,3.1vw,2.6rem);font-weight:700;line-height:1.16;letter-spacing:-.02em;max-width:19ch;margin:0 0 1.2rem;text-wrap:balance}
.intro{max-width:46ch;margin:0 0 .9rem;color:var(--ink-700)}
.platform{font-size:.9375rem;margin:0 0 1.5rem;color:var(--ink-600)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:48px;padding:.7rem 1.5rem;background:var(--cyan);color:var(--paper);text-decoration:none;font-weight:700;font-size:1rem}
.button:hover{background:var(--cyan-deep);color:var(--paper)}
.hero-art{justify-self:center;max-width:260px;width:100%}
.hero-art img{display:block;width:100%;height:auto;border-radius:22.37%;box-shadow:0 10px 30px #201e1d1f}

/* The section index reads like a paper's contents line */
.page-sections{display:flex;flex-wrap:wrap;gap:.35rem 2rem;padding-block:.9rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.9375rem}
.page-sections a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;text-decoration:none}
.page-sections a:hover{text-decoration:underline}

section{scroll-margin-top:1rem}
.capture{padding-block:3rem 2.6rem}
.capture h2,.household h2,.desk h2,.quiet h2,.platforms h2{font-size:clamp(1.7rem,3.4vw,2.35rem);margin:0 0 1rem;text-wrap:balance}
.capture-body{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem 3.5rem;align-items:start}
.capture-body p{color:var(--ink-700);max-width:48ch}
.said{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.said li{padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid var(--rule);font-size:1.0625rem;position:relative}
.said li::before{content:"”";position:absolute;left:0;top:.75rem;color:var(--cyan);font-size:1.5rem;line-height:1}
.capture-note{margin-top:1.4rem;font-size:1.0625rem;color:var(--ink);border-left:3px solid var(--magenta);padding-left:1rem}

.household{padding-block:2.6rem;border-top:1px solid var(--rule)}
.household>.wrap>p{max-width:52ch;color:var(--ink-700);margin-bottom:2rem}
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.columns article{border-top:2px solid var(--ink);padding-top:.9rem}
.columns h3{font-size:1.25rem;margin:0 0 .6rem}
.columns p{color:var(--ink-700);font-size:1rem}
.column-mark{display:block;font-size:.6875rem;letter-spacing:.14em;font-weight:700;color:var(--ink-600);margin-bottom:.5rem;font-variant-numeric:tabular-nums}

.desk{padding-block:2.6rem;border-top:1px solid var(--rule)}
.desk .columns article{border-top:1px solid var(--rule)}

/* The quiet part gets the paper's quietest treatment: rules, no colour blocks */
.quiet{padding-block:2.8rem;border-top:3px double var(--ink)}
.quiet-body{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3.5rem;align-items:start}
.quiet p{color:var(--ink-700);max-width:50ch}
.quiet .more{margin-top:1rem;display:inline-flex;gap:.4rem;min-height:44px;align-items:center;font-weight:700}

.platforms{padding-block:2.6rem;border-top:1px solid var(--rule)}
.platforms p{color:var(--ink-700);max-width:52ch}
.platforms .note{margin-top:1.1rem;font-style:italic;color:var(--ink-600)}

footer{border-top:1px solid var(--rule);margin-top:1.5rem;padding-block:1.8rem 2.6rem;font-size:.875rem;color:var(--ink-600)}
footer p{margin:0 0 .7rem}
footer strong{font-size:1.35rem;color:var(--ink);font-weight:700}
footer strong .dot{color:var(--magenta)}
footer nav{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin-bottom:.9rem}
footer nav a{display:inline-flex;gap:.4rem;min-height:44px;align-items:center;color:var(--ink-600);text-decoration:none}
footer nav a:hover{color:var(--ink);text-decoration:underline}

@media(max-width:860px){.hero{grid-template-columns:1fr;gap:2rem;padding-block:2.2rem 2.5rem}.hero-art{grid-row:1;max-width:132px;justify-self:start}.columns{grid-template-columns:1fr;gap:1.8rem}.capture-body,.quiet-body{grid-template-columns:1fr;gap:1.6rem}.headline{max-width:none}.intro{max-width:none}}
@media(max-width:370px){.wrap{width:calc(100% - 2rem)}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}