/* Gouache Pantry, the app's look (docs/kitchen-ios-style-guide.md): speckled paper, Instrument Serif titles at
   regular weight, the system sans for everything you read to act on, pantry green for links. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f4f1ea;
  --sheet: #fffefa;
  --ink: #1e211c;
  --ink-soft: #4a4f45;
  --muted: #5a5f54;
  --green: #2b5a34;
  --forest: #23402a;
  --rule: rgba(30, 33, 28, 0.14);
  --serif: "Instrument Serif", ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper) url("/paper.jpg") repeat;
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: absolute; left: 1rem; top: 1rem; padding: .6rem .9rem; background: var(--ink); color: var(--paper); border-radius: 6px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* header and footer */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.brand img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 1px 2px rgba(35, 64, 42, .25); }
.site-nav { display: flex; gap: 1.4rem; font-size: .95rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 2rem var(--gutter); border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.site-footer a { text-decoration: none; color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-brand { font-family: var(--serif); font-size: 1.2rem; color: var(--ink) !important; }

/* home */
.home { flex: 1; width: min(100%, 72rem); margin: 0 auto; padding: clamp(1rem, 4vw, 3rem) var(--gutter) clamp(3rem, 7vw, 6rem); text-align: center; }
.home h1 { margin: 0 auto; max-width: 14ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -.02em; }
.lede { margin: 1.1rem auto 0; max-width: 42rem; color: var(--ink-soft); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.55; }
.soon { display: inline-block; margin-top: 1.5rem; padding: .55rem 1.1rem; border-radius: 999px; background: var(--green); color: #fff; font-size: .95rem; font-weight: 600; }
.still-life { margin: clamp(2rem, 4.5vw, 3rem) auto 0; width: min(100%, 56rem); aspect-ratio: 3 / 2; border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -18px rgba(30, 33, 28, .35), 0 2px 6px rgba(30, 33, 28, .08); }

/* Four points, each with one of the app's painted objects on the page's own paper. */
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 72rem; margin: clamp(3.5rem, 7vw, 6rem) auto 0; }
.point img { width: auto; height: 7.5rem; margin: 0 auto; filter: drop-shadow(0 6px 6px rgba(30, 33, 28, .12)); }
.point h2 { margin: 1.4rem 0 .4rem; font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.2; }
.point p { margin: 0 auto; max-width: 17rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }

/* information pages */
.document { flex: 1; width: min(100%, 46rem); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.eyebrow { margin: 0 0 1rem; color: var(--green); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.document h1 { margin: 0 0 1.6rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em; }
.document-content { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.document-content p { margin: 0 0 1.2rem; }
.document-content h2 { margin: 2.6rem 0 .9rem; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.25; }
.document-content h3 { margin: 1.6rem 0 .5rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.document-content ul { margin: .8rem 0 1.4rem; padding-left: 1.2rem; }
.document-content li { margin-bottom: .55rem; padding-left: .2rem; }
.document-content strong { color: var(--ink); font-weight: 600; }
.document-content a { color: var(--green); text-underline-offset: 3px; }
.updated { color: var(--muted); font-size: .85rem; margin-bottom: 2rem !important; }
.support-email { display: inline-block; margin: .2rem 0 .6rem; font-family: var(--serif); font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--green) !important; text-decoration: none; }
.support-email:hover { text-decoration: underline; }
.summary { margin: 0 0 2.6rem; padding: 1.15rem 1.35rem .3rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); box-shadow: 0 6px 18px -12px rgba(30, 33, 28, .3); }
.document-content .summary h2 { margin: 0 0 .3rem; font-size: 1.35rem; }
.document-content .summary ul { margin-bottom: .9rem; }

.not-found { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 4rem var(--gutter); text-align: center; }
.not-found img { height: 7rem; width: auto; }
.not-found h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.2rem); }
.not-found p { margin: 0; color: var(--ink-soft); }
.not-found a { color: var(--green); }

@media (min-width: 900px) {
  .home h1 { max-width: none; }
}
@media (max-width: 1000px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; max-width: 40rem; }
}
@media (max-width: 560px) {
  .points { grid-template-columns: 1fr; max-width: 22rem; }
}
@media (max-width: 760px) {
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .site-nav { gap: 1rem; }
  .brand { font-size: 1.3rem; }
}