/* Tarka Today, the browser's new tab: one photograph fills the page; the
   mark, the date, a greeting, the search pill and three facts are laid
   over it on a gradient of the paper colour. The tokens are paper.css's,
   so light and dark follow the device; the photograph is the photograph. */
:root { --glow: rgba(246, 241, 231, .6); }
@media (prefers-color-scheme: dark) { :root { --glow: rgba(0, 0, 0, .45); } }

/* The page is one screen where there is room; where there is not (a phone
   on its side, a small window), it scrolls, and the photograph stays. */
body.today { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
.photo { position: fixed; inset: 0; z-index: 0; background: var(--paper); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* No photograph today: the stand-in the mockup used. */
.photo.stand-in { background:
  radial-gradient(ellipse at 70% 20%, rgba(255, 197, 61, .35), transparent 50%),
  radial-gradient(ellipse at 20% 80%, rgba(143, 136, 255, .35), transparent 55%),
  linear-gradient(160deg, #2b1d3a 0%, #5a2d4f 35%, #c2653a 70%, #f0a35c 100%); }

.over { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between; padding: 34px 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 55%, transparent) 0%, transparent 35%, transparent 55%, color-mix(in srgb, var(--paper) 85%, transparent) 100%); }

.t-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-top .brand .mark { width: 44px; height: 36px; }
.date { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); text-shadow: 0 1px 12px var(--glow); }

/* The middle block sits on a faint pool of paper, so the greeting reads
   over a bright photograph as well as a dark one. */
.t-mid { width: 46%; margin: 0 auto; padding: 28px 32px; border-radius: 28px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--paper) 55%, transparent) 0%, color-mix(in srgb, var(--paper) 35%, transparent) 55%, transparent 100%); }
.greet { margin: 0 0 16px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.greet .script { display: block; font-size: clamp(32px, 5vw, 56px); text-shadow: 0 2px 24px var(--glow), 0 0 2px var(--glow); }
.greet .lat { display: block; margin-top: 8px; font: 500 14px/1.3 var(--sans); color: var(--ink); opacity: .85; letter-spacing: .02em; text-shadow: 0 1px 12px var(--glow); }

/* The search pill: the search box, as a pill with an indigo ring. */
.search.pill { max-width: none; height: 44px; border: 2px solid var(--indigo); box-shadow: none; background: var(--raised); }
.search.pill input { padding: 0 6px 0 18px; font-size: 15px; }
.search.pill button { padding: 0 14px; }
.search.pill .go { border-left: 0; }
.search.pill:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 35%, transparent); }

.t-foot { display: flex; flex-direction: column; gap: 14px; }
.t-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; font: 400 13px/1.35 var(--sans); color: var(--soft); }
.t-facts article { max-width: 360px; }
.t-facts a { color: inherit; text-decoration: none; }
.t-facts a:hover b { text-decoration: underline; }
.t-facts b { display: block; color: var(--ink); font-weight: 600; }
.t-facts span { display: block; color: var(--faint); }
.t-credit { margin: 0; align-self: flex-end; font: 400 11px/1.3 var(--sans); color: var(--faint); }
.t-credit a { color: inherit; }

/* The greeting's face, by script: each stylesheet fonts-<script>.css
   serves one, linked only on its day. */
.script-deva { font-family: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif; }
.script-beng { font-family: "Noto Serif Bengali", serif; }
.script-gujr { font-family: "Noto Serif Gujarati", serif; }
.script-guru { font-family: "Noto Serif Gurmukhi", serif; }
.script-knda { font-family: "Noto Serif Kannada", serif; }
.script-mlym { font-family: "Noto Serif Malayalam", serif; }
.script-orya { font-family: "Noto Serif Oriya", serif; }
.script-taml { font-family: "Noto Serif Tamil", serif; }
.script-telu { font-family: "Noto Serif Telugu", serif; }
.script-olck { font-family: "Noto Sans Ol Chiki", sans-serif; }
.script-mtei { font-family: "Noto Sans Meetei Mayek", sans-serif; }
.script-arab { font-family: "Noto Nastaliq Urdu", serif; line-height: 1.6; }

@media (max-width: 720px) {
  .over { padding: 22px 18px; }
  .t-mid { width: 100%; }
  .greet .script { font-size: clamp(30px, 9vw, 44px); }
  .t-facts { flex-direction: column; gap: 10px; }
  .t-credit { align-self: flex-start; }
}