/* TidierCloud: locked direction E (see site-design/ROUND-2-CONTEXT.md).
   One centred narrow column, long pauses, one text colour on hazy lilac. */
@font-face { font-family: "Erode"; src: url(fonts/Erode-Variable.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Erode"; src: url(fonts/Erode-VariableItalic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --canvas: #e5dfe8;
  --ink: #4b4456;
  --pause: clamp(64px, 12vh, 140px);
  --pause-long: clamp(96px, 18vh, 200px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --canvas: #2b2731; --ink: #e5dfe8; }
}
:root[data-theme="dark"] { --canvas: #2b2731; --ink: #e5dfe8; }

* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: "Erode", Georgia, serif; font-weight: 400;
  font-size: clamp(16px, 1.1vw, 18px); line-height: 2.1;
  text-align: center;
}
main, footer { max-width: 23em; margin: 0 auto; padding: 0 16px; }
main { padding-top: clamp(96px, 18vh, 220px); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.name { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 var(--pause-long); }
.name a { text-decoration: none; }
h1 { font-weight: 300; font-style: italic; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.35; margin: 0 0 var(--pause); text-wrap: balance; }
h2 { text-wrap: balance; }
h1.with-tagline { margin-bottom: .5em; }
h3 { font-weight: 500; font-style: italic; font-size: 19px; line-height: 1.5; margin: 2.2em 0 .4em; text-wrap: balance; }
.tagline { font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .01em; margin: 0 0 clamp(40px, 7vh, 72px); }
h2 { font-weight: 300; font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; margin: 0 0 1em; }
p { margin: 0 0 1.4em; }
section { margin: 0 0 var(--pause); }
.pause { margin-bottom: var(--pause); }

.download { font-weight: 560; letter-spacing: .04em; text-decoration: none; }
.download:hover { text-decoration: underline; }
.small { font-size: 13px; line-height: 1.9; }

/* The one call to action: the plum ink becomes the button, the lilac the text. */
.cta-wrap { margin: 0 0 1.6em; }
.cta {
  display: inline-block;
  padding: 18px 44px;
  font-size: clamp(20px, 1.6vw, 24px); font-weight: 450; font-style: italic; letter-spacing: .01em; line-height: 1.2;
  color: var(--canvas); background: var(--ink);
  border-radius: 999px; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 1px 0 rgba(75, 68, 86, .15), 0 10px 30px -12px rgba(75, 68, 86, .55);
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(75, 68, 86, .15), 0 16px 36px -14px rgba(75, 68, 86, .6); text-decoration: none; }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } .cta:hover { transform: none; } }

/* Install and sign-in steps: still one centred column, numbers set as words of the text. */
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
ol.steps li { counter-increment: step; margin: 0 0 1.4em; }
ol.steps li::before { content: counter(step); display: block; font-size: 13px; letter-spacing: .22em; }

code { font-family: inherit; font-style: italic; }

footer { padding-bottom: clamp(120px, 30vh, 320px); }
footer p { font-size: 13px; line-height: 1.9; margin: 0 0 1.2em; }

/* Privacy page: same column, left-aligned body so long legal text stays readable. */
.legal main { max-width: 32em; }
.legal section { text-align: left; margin-bottom: clamp(48px, 8vh, 96px); }
.legal h2 { text-align: center; }
.legal ul { padding-left: 1.2em; margin: 0 0 1.4em; }
.legal li { margin-bottom: .6em; }

@media (max-width: 600px) {
  :root { --pause: 64px; --pause-long: 88px; }
  main { padding-top: 96px; }
}

/* Join page: the same centred column, fields as quiet lines. */
.join-form { text-align: left; margin: 0 0 var(--pause); }
.join-form label { display: block; font-size: 13px; letter-spacing: .08em; margin: 0 0 22px; }
.join-form input:not([type="checkbox"]) {
  display: block; width: 100%; margin-top: 4px; padding: 8px 2px;
  font: 18px "Erode", Georgia, serif; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
}
.join-form input::placeholder { color: var(--ink); opacity: .45; font-style: italic; }
.join-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.join-form .tick { display: flex; gap: 10px; align-items: baseline; letter-spacing: 0; font-size: 15px; line-height: 1.6; }
.join-form .tick input { accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.join-form .cta-wrap { text-align: center; margin-top: 36px; }
.join-form .small { text-align: center; }
button.cta { border: 0; cursor: pointer; font-family: "Erode", Georgia, serif; }
button.cta:disabled { opacity: .6; cursor: default; }
.as-link { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: 560 17px "Erode", Georgia, serif; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 4px; }
.form-error { font-style: italic; text-align: center; }
.login { text-align: center; }

/* Screenshots: the one place the page widens beyond the column, like E's
   full-width pauses. */
.see { text-align: center; }
.shot { margin: 48px calc(50% - min(48vw, 560px)) 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 1px 0 rgba(75, 68, 86, .12), 0 24px 60px -28px rgba(75, 68, 86, .55); }
.shot figcaption { font-size: 13px; line-height: 1.7; margin-top: 14px; font-style: italic; }

/* Guides: the reading column of the privacy page, with the try-it button centred. */
.center { text-align: center; }
.guide h3 a { text-decoration: none; }
.guide h3 a:hover { text-decoration: underline; }