/* Ephemeral Notepad at matthewpreiser.com/ephemeral-notepad, in the app's own
   look: its warm paper and near-black, the system's pure black and white ink,
   and iA Writer Duo, the one face the app is set in. The app has no
   accent colour, so blue is used sparingly, for eyebrows and links: the
   icon's cursor blue in dark mode, and in light mode a darker blue of the
   same hue, because neither of the icon's blues reaches 4.5:1 on the paper.
   A Mac app only, so its screens are windows, captured with their own
   shadows. */
/* Only this page's theme lives here; the layout is /css/projects.css. */

/* iA Writer Duo S, iA's own web fonts from their iA-Fonts repository,
   unmodified, SIL OFL 1.1 with Reserved Font Names "iA Writer" and "Plex";
   the licence sits beside them. iA's files rather than a conversion of the
   app's variable TTF, because a converted or subset copy would have to be
   renamed. Regular and Bold only: the 600 the layout asks for in places
   takes the bold, and nothing on the page is italic. */
@font-face { font-family: "iA Writer Duo S"; src: url("/ephemeral-notepad/fonts/iAWriterDuoS-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "iA Writer Duo S"; src: url("/ephemeral-notepad/fonts/iAWriterDuoS-Bold.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --page: #FAF7F2;
  --card: #FAF7F2;
  --ink: #000000;
  --ink2: rgba(0, 0, 0, 0.72);
  --muted: rgba(0, 0, 0, 0.52);
  --rule: rgba(0, 0, 0, 0.12);
  --accent: #1F6E8F;
  --wash: rgba(51, 165, 210, 0.12);
  --scrim: rgba(26, 26, 28, 0.9);
  --shadow: rgba(40, 32, 20, 0.3);
  --on-accent: #FFFFFF;
  --font-head: "iA Writer Duo S", ui-monospace, Menlo, monospace;
  --font-text: "iA Writer Duo S", ui-monospace, Menlo, monospace;
  --head-weight: 700;
  --cap-gap: 0.202;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #1A1A1C; --card: #1A1A1C; --ink: #FFFFFF; --ink2: rgba(255, 255, 255, 0.74);
    --muted: rgba(255, 255, 255, 0.52); --rule: rgba(255, 255, 255, 0.14); --accent: #5CC8F2;
    --wash: rgba(51, 165, 210, 0.16); --scrim: rgba(0, 0, 0, 0.92); --shadow: rgba(0, 0, 0, 0.7); --on-accent: #06161E; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #1A1A1C; --card: #1A1A1C; --ink: #FFFFFF; --ink2: rgba(255, 255, 255, 0.74);
    --muted: rgba(255, 255, 255, 0.52); --rule: rgba(255, 255, 255, 0.14); --accent: #5CC8F2;
    --wash: rgba(51, 165, 210, 0.16); --scrim: rgba(0, 0, 0, 0.92); --shadow: rgba(0, 0, 0, 0.7); --on-accent: #06161E; color-scheme: dark;
}

/* The icon's plate is white, so on the paper it needs a hairline to hold its
   edge. icon.png is cropped to the plate, the 824px square the macOS grid
   centres in 1024, so it fills its square like the other projects' icons,
   and the shadow baked around the plate is taken out of the corners, or it
   showed as a smudge under the list's own shadow. 192px, because /projects
   draws it at 56 and a 96px file was soft on a 3x screen beside the vector
   icons. */
.app-icon { border-radius: 22.4%; box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -8px var(--shadow); }

/* The screens are real captures, each with the macOS shadow baked into a
   transparent margin, so they go unframed: a .window frame would clip the
   shadow. The margin is cancelled instead, so the window itself, not its
   shadow, lines up with the column. The writing window is 1655 of the
   capture's 1880 pixels, inset 112 left and 76 top, 148 at the bottom; the
   image is drawn 1880/1655 of the column wide and pulled back by the insets,
   as percentages of the column, which is what margins resolve against. */
/* The shadow is allowed past the column into the page's gutter, and the
   full-width wrapper clips it at the window's edge so it never makes the page
   scroll. Not on html: overflow on the root passes to the viewport as plain
   hidden, which still scrolls. */
#preview { overflow-x: clip; }
.capture { overflow: visible; }
.capture img { width: 113.6%; max-width: none; margin: -4.59% 0 -8.94% -6.77%; }
/* The dialog is 522 of 820 pixels, inset 149 at each side: drawn at its
   natural 2x width and shifted left by its own inset, which a transform's
   percentage measures against the image itself. */
.capture-dialog { max-width: 410px; overflow: visible; }
.capture-dialog img { transform: translateX(-18.2%); }

/* Duo is a wide face: at the shared size the headline broke into three
   lines and the paragraph ran twice the window's height. A smaller headline
   holds its two sentences on two lines, and a slightly tighter paragraph
   sits level with the window beside it. */
.hero h1 { font-size: clamp(32px, 4vw, 48px); max-width: none; letter-spacing: -0.04em; }
/* The window aligns to the headline's capitals at this page's size, so the
   shared offset is restated with it. */
.hero-shot { margin-top: calc(8px + var(--cap-gap) * clamp(32px, 4vw, 48px)); }
.hero .lede { font-size: 17px; letter-spacing: -0.02em; line-height: 1.6; }