/* Notebook's website. The page is a sheet of the notebook on its icon: warm stone paper, ink-blue links, a button
   cut from the cover's leather, and the gold bookmark ribbon hanging from the top. Everything comes with the page;
   nothing loads from elsewhere. */

:root {
  --paper: #F1ECE4;
  --paper-deep: #E6DED2;
  --card: #FBF9F5;
  --text: #1E1B18;
  --text-2: #6A635A;
  --line: rgba(30, 27, 24, 0.12);
  --ink: #34508F;
  --on-ink: #FFFFFF;
  --shadow: rgba(70, 48, 26, 0.24);
  --rim: rgba(30, 27, 24, 0.14);
  --grain-opacity: 0.38;
  /* The button's leather: the icon's oxblood cover, with its grain (images/leather.webp) multiplied over it. For
     leather in the ink blue of the links instead: linear-gradient(#4767A9, #263F78), and (#5471B3, #2A437A) in the
     dark. */
  --leather: linear-gradient(#B04746, #7A2928);
  /* Pressed into the paper: a shadow along the top inside, a highlight along the bottom outside. */
  --deboss-shade: rgba(70, 48, 26, 0.2);
  --deboss-light: rgba(255, 255, 255, 0.75);
  /* The ribbon, read by ribbon.js; the fallback below draws the same gold as a gradient. */
  --ribbon: #DC9C30;
  --ribbon-sheen: #FFF1C9;
  --ribbon-notch: 13px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  /* Above the hero: room for the ribbon, which ends just above the window. */
  --hero-top: clamp(80px, 14vh, 150px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1816;
    --paper-deep: #121110;
    --card: #242120;
    --text: #EDE8E1;
    --text-2: #A39B90;
    --line: rgba(255, 248, 238, 0.11);
    --ink: #93ABE3;
    --on-ink: #10141E;
    --shadow: rgba(0, 0, 0, 0.55);
    --rim: rgba(255, 248, 238, 0.13);
    --grain-opacity: 0.22;
    --leather: linear-gradient(#BC5251, #82302F);
    --deboss-shade: rgba(0, 0, 0, 0.5);
    --deboss-light: rgba(255, 248, 238, 0.07);
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 90% at 85% 0%, transparent 40%, var(--paper-deep) 100%),
    var(--paper);
  position: relative;
}

/* Paper grain, drawn by an SVG filter: no picture to load. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; }
}

a { color: var(--ink); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

svg { width: 1em; height: 1em; flex: none; }

/* ---------- Home ---------- */

body.home {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-x: hidden;
}

/* The ribbon: gold grosgrain, with the notch of the one on the icon. ribbon.js draws it as fabric that the pointer
   pushes around; without it (no script, no WebGL) this gradient unrolls once when the page opens. It hangs in the
   open paper at the top right, over the window's outline and ending just above it. */
.ribbon {
  position: absolute;
  top: 0;
  right: max(72px, calc(50% - 560px));
  width: 26px;
  height: calc(var(--hero-top) - 14px);
  z-index: 2;
  filter: drop-shadow(0 6px 6px rgba(90, 58, 12, 0.22));
  pointer-events: none;
}
.ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #C3841E 0%, #E7B455 30%, #F7D683 52%, #E2AA45 74%, #C07F1A 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--ribbon-notch)), 0 100%);
  transform-origin: top;
}
.ribbon.live::before { display: none; }
.ribbon canvas { position: absolute; top: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .ribbon::before { animation: unroll 0.95s cubic-bezier(0.2, 0.85, 0.25, 1) 0.15s both; }
  @keyframes unroll { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

.hero {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: var(--hero-top) var(--gutter) clamp(32px, 5vh, 56px);
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.copy { position: relative; z-index: 1; min-width: 0; }

.app-icon {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 0 6px -14px;
}

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }

.home h1 {
  margin: 0;
  font-size: clamp(50px, 6.2vw, 78px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.lead {
  margin: 18px 0 0;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lead span { color: var(--text-2); }

.sub {
  margin: 14px 0 0;
  max-width: 38ch;
  color: var(--text-2);
  font-size: 16px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.button svg { font-size: 18px; fill: currentColor; }

/* A piece of the icon's leather cover: grained, stitched along the edge, and pressed in when clicked. */
.button.primary {
  position: relative;
  color: #FFF;
  background: url("images/leather.webp") 0 0 / 128px 128px, var(--leather);
  background-blend-mode: multiply, normal;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(40, 20, 0, 0.18),
    0 8px 18px -10px rgba(30, 20, 10, 0.6);
}
.button.primary svg { filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)); }
/* The stitching, sunk a little into the leather. */
.button.primary::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1.25px dashed rgba(255, 244, 225, 0.5);
  filter: drop-shadow(0 0.75px 0 rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.button.primary:hover { filter: brightness(1.06) saturate(1.04); }
.button.primary:active {
  filter: brightness(0.95);
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(0, 0, 0, 0.26),
    0 0 0 rgba(40, 20, 0, 0),
    0 4px 10px -8px rgba(30, 20, 10, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .button.primary { transition: filter 0.15s, transform 0.1s, box-shadow 0.1s; }
}

/* Not a button yet: a place pressed into the paper, waiting for the App Store's. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 17px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-deep) 55%, transparent);
  box-shadow:
    inset 0 1.5px 2.5px var(--deboss-shade),
    inset 0 0 0 0.5px var(--deboss-shade),
    0 1px 0 var(--deboss-light);
  color: var(--text-2);
  text-shadow: 0 1px 0 var(--deboss-light);
  font-size: 14px;
  font-weight: 500;
}
.soon svg { font-size: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 14px;
}
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts svg { color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* The app, and the same note as its file. The stage is a container, so that the window's corners and the phone in
   front of it are sized in the window's width (cqw). */
.stage { --phone-width: 18cqw; --phone-left: -2.5cqw; margin: 0; min-width: 0; container-type: inline-size; }

.window-frame { position: relative; }

/* The window as it is on the Mac, lying on the paper: its own corners, the hairline macOS draws around it, and a
   shadow. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.33cqw;
  box-shadow:
    0 0 0 0.5px var(--rim),
    0 1px 3px rgba(40, 28, 16, 0.08),
    0 30px 60px -24px var(--shadow);
  transition: filter 0.4s ease;
}

/* The iPhone standing in front of the window's lower left corner, drawn around its screenshot: a dark bezel with a
   graphite edge, the screen's own corners and the Dynamic Island, in an iPhone's proportions. */
.phone {
  --width: var(--phone-width);
  --bezel: calc(var(--width) * 0.028);
  --screen: calc(var(--width) - 2 * var(--bezel));
  position: absolute;
  left: var(--phone-left);
  bottom: -6cqw;
  width: var(--width);
  padding: var(--bezel);
  border-radius: calc(var(--screen) * 0.137 + var(--bezel));
  background: #111113;
  box-shadow:
    inset 0 0 0 calc(var(--width) * 0.005) rgba(255, 255, 255, 0.1),
    0 0 0 calc(var(--width) * 0.007) #4A4A4F,
    0 0 0 calc(var(--width) * 0.011) rgba(0, 0, 0, 0.18),
    0 1.6cqw 3cqw -0.8cqw rgba(0, 0, 0, 0.42),
    0 3cqw 6cqw -2cqw var(--shadow);
  transition: filter 0.4s ease;
}
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--screen) * 0.137); }
.phone::after {
  content: "";
  position: absolute;
  top: calc(var(--bezel) + var(--screen) * 0.027);
  left: 50%;
  width: calc(var(--screen) * 0.313);
  height: calc(var(--screen) * 0.092);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}

.file {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: min(64%, 600px);
  max-height: 88%;
  overflow: hidden;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 28px 60px -16px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.stage[data-view="file"] .file { opacity: 1; transform: none; pointer-events: auto; }
.stage[data-view="file"] :is(.shot, .phone) { filter: saturate(0.85) brightness(0.96); }

@media (prefers-reduced-motion: reduce) {
  .file, .shot, .phone { transition: none; }
}

.file-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.file-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; flex: none; }
.file-bar i:nth-child(2) { background: #FEBC2E; }
.file-bar i:nth-child(3) { background: #28C840; }
.file-bar b { margin-left: 8px; font-weight: 600; }
.file-bar span { margin-left: auto; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.file-text {
  margin: 0;
  padding: 16px 18px 20px;
  font: clamp(10.5px, 0.85vw, 12.5px)/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.file-text s { text-decoration: none; color: var(--text-2); opacity: 0.85; }
.file-text b { font-weight: 700; }

/* Next to the phone, below the window. */
figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
  padding-left: calc(var(--phone-left) + var(--phone-width) + 24px);
}

.switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.switch button {
  font: 500 13px/1 var(--font);
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
}
.switch button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
@media (prefers-reduced-motion: no-preference) { .switch button { transition: background 0.15s, color 0.15s; } }

.caption { color: var(--text-2); font-size: 13px; }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px var(--gutter) max(22px, env(safe-area-inset-bottom, 0px));
  color: var(--text-2);
  font-size: 13px;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover, .footer a[aria-current="page"] { color: var(--text); }

/* ---------- Narrow windows and phones ---------- */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(72px, 12vh, 110px);
    gap: 44px;
  }
  .ribbon { right: max(48px, calc(env(safe-area-inset-right, 0px) + 32px)); width: 22px; height: 150px; }
  .stage { --phone-left: -1.5cqw; }
  .file { width: 74%; right: 4%; }
}

@media (max-width: 560px) {
  .stage { --phone-width: 24cqw; }
  .ribbon { width: 18px; height: 118px; right: max(28px, calc(env(safe-area-inset-right, 0px) + 20px)); }
  .app-icon { width: 108px; height: 108px; margin-left: -11px; }
  .file { width: 92%; right: 4%; bottom: 4%; max-height: 92%; }
  .file-bar span { display: none; }
  .file-text { font-size: 10.5px; padding: 12px 13px 14px; }
}

/* ---------- Support, privacy and the legal notice ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 26px var(--gutter) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img { width: 36px; height: 36px; margin: -2px -2px -2px -4px; }
.top .link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.top .link svg { fill: currentColor; font-size: 16px; }
.top .link:hover { color: var(--text); }

.doc {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 72px) var(--gutter) 56px;
}
.doc h1 { margin: 0; font-size: clamp(36px, 5vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; }
.doc h2 { margin: 40px 0 10px; font-size: 21px; letter-spacing: -0.015em; }
.doc p, .doc li { max-width: 68ch; }
.doc p { margin: 0 0 12px; }
.doc ul { padding-left: 20px; margin: 0 0 12px; }
.doc li { margin-bottom: 6px; }
.doc .intro { margin-top: 14px; color: var(--text-2); font-size: 18px; line-height: 1.5; }
.doc .updated { color: var(--text-2); font-size: 14px; }
.doc address { font-style: normal; margin-bottom: 12px; }
.doc code { font: 0.9em var(--font-mono); padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--text) 7%, transparent); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 30px 0 8px;
}
.card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.card:hover { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.card svg { font-size: 24px; margin-bottom: 8px; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card svg.filled { fill: currentColor; stroke: none; }
.card b { font-size: 16px; }
.card span { color: var(--text-2); font-size: 14px; line-height: 1.45; }

.faq { display: grid; gap: 10px; margin-top: 16px; }
.faq details {
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0 18px;
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-2); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--text-2); margin: -4px 0 16px; }

.doc + .footer { max-width: 820px; }