/* The ophir.gold teaser's one stylesheet: the d12 Washi Terminal look, written in here
   since the page loads nothing else. Light and dark follow the device. Motion only where the visitor allows it. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/geist-mono.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/source-serif-4.woff2") format("woff2"); }

:root {
  --ground: #F4F2EC; --surface: #FAF9F5; --ink: #1D1C1A; --ink2: #45433E; --muted: #66635B;
  --accent: #7A5B16; --accent-hover: #5F470F; --accent-tint: #F4ECD8; --accent-line: #D6C59E;
  --bull: #2A7549; --bull-tint: #E3F0DF; --neutral: #626058; --neutral-tint: #E9E6DE;
  --veil: rgba(250, 249, 245, 0.72); --hair: rgba(29, 28, 26, 0.08); --grid: rgba(29, 28, 26, 0.05);
  --sans: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141412; --surface: #1B1B18; --ink: #ECE9E1; --ink2: #C7C3B8; --muted: #9B978C;
    --accent: #D6AE5C; --accent-hover: #E2BE6E; --accent-tint: #2A230F; --accent-line: #6B5A33;
    --bull: #8FD0A0; --bull-tint: #16291C; --neutral: #A6A398; --neutral-tint: #26261F;
    --veil: rgba(27, 27, 24, 0.72); --hair: rgba(236, 233, 225, 0.1); --grid: rgba(236, 233, 225, 0.045);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* the background: washi paper, a slow grid, the rosette and a line drawn for illustration */
.field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: var(--ground); }
.gridbg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%); }
.rosette { position: absolute; left: 50%; top: 34%; width: 620px; height: 620px; margin: -310px 0 0 -310px; fill: none; stroke: var(--accent); stroke-width: 0.8; opacity: 0.16; }
.ros-g { transform-box: fill-box; transform-origin: center; }
.trendwin { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; overflow: hidden; opacity: 0.55; }
.trend { position: absolute; left: 0; top: 0; height: 100%; width: 200%; }
.tfill { fill: var(--bull); fill-opacity: 0.07; }
.tline { fill: none; stroke: var(--bull); stroke-width: 2; stroke-opacity: 0.5; stroke-linejoin: round; }
.topline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }

/* the page: one screen, centred */
.page { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 3px 16px 0; }
.bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1120px; margin: 0 auto; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); }
.brand span { color: var(--ink); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.signin:hover { color: var(--accent); }
.signin:focus-visible, .teaser:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.hero { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 4px 0 6px; }
.eb { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; max-width: 13em; font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 16px 0 0; max-width: 36em; text-wrap: pretty; font-size: 16px; line-height: 1.6; color: var(--ink2); }

.teasers { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.teaser { display: grid; align-content: start; grid-template-columns: 30px 1fr; column-gap: 10px; padding: 12px 16px; background: var(--veil); border-radius: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.num { grid-row: span 2; padding-top: 3px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; color: var(--accent); }
.teaser h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3; }
.teaser p { margin: 2px 0 0; text-wrap: pretty; font-size: 14px; line-height: 1.5; color: var(--ink2); }

/* "Coming soon" and the one sign-up form, posted to the hosted newsletter */
.updates { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 0 0; }
.soon { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--accent-tint); color: var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bull); }
.signup { width: 100%; max-width: 460px; margin: 0; }
.signup-label { display: block; margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.signup-row { display: flex; gap: 8px; }
.signup input[type="email"] { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--accent-line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup button { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--surface); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.signup button:hover { background: var(--accent-hover); }
.signup input[type="email"]:focus-visible, .signup button:focus-visible, .privacy a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.privacy a { color: var(--ink2); text-underline-offset: 2px; }
.privacy { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.privacy a:hover { color: var(--accent); }

.foot { flex: none; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 0 16px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* a tablet or laptop: more room, the teasers in a row */
@media (min-width: 720px) {
  .page { padding: 3px 48px 0; }
  .bar { min-height: 80px; }
  .hero { padding: 28px 0 32px; }
  .eb { margin-bottom: 24px; }
  h1 { font-size: 64px; line-height: 1.02; }
  .lede { margin-top: 26px; font-size: 18px; line-height: 1.75; }
  .teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
  .teaser { grid-template-columns: 1fr; padding: 24px 24px 26px; }
  .num { grid-row: auto; padding: 0 0 14px; }
  .teaser h2 { font-size: 21px; }
  .teaser p { margin-top: 8px; font-size: 15px; line-height: 1.7; }
  .updates { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 36px; }
  .soon { align-self: flex-end; margin-bottom: 28px; }
  .foot { padding-bottom: 24px; }
  .rosette { left: auto; right: -140px; top: 46%; width: 900px; height: 900px; margin: -450px 0 0; opacity: 0.14; }
}
@media (min-width: 1200px) { h1 { font-size: 76px; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes tintBreath { 0% { background-color: var(--ground); } 50% { background-color: var(--accent-tint); } 100% { background-color: var(--bull-tint); } }
  @keyframes rosTurn { from { transform: rotate(0deg); } to { transform: rotate(12deg); } }
  @keyframes gridDrift { from { background-position: 0 0; } to { background-position: -48px 0; } }
  @keyframes slideHalf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--bull-tint); } 50% { box-shadow: 0 0 0 5px var(--bull-tint); } }
  .field { animation: tintBreath 14s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
  .ros-g { animation: rosTurn 24s ease-in-out infinite alternate; }
  .gridbg { animation: gridDrift 12s linear infinite; }
  .trend { animation: slideHalf 60s linear infinite; }
  .rise { animation: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  h1.rise { animation-delay: 80ms; } .lede.rise { animation-delay: 160ms; }
  .teaser:nth-child(1) { animation-delay: 260ms; } .teaser:nth-child(2) { animation-delay: 340ms; } .teaser:nth-child(3) { animation-delay: 420ms; }
  .updates.rise { animation-delay: 520ms; }
  .dot { animation: pulse 2.6s ease-in-out infinite; }
  .signin, .privacy a { transition: color 150ms ease; }
  .signup button { transition: background-color 150ms ease; }
}