/* Writerphernalia: paper, ink and a little gold. */
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-latin-full-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('fonts/literata-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('fonts/literata-latin-wght-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #f7f2e9; --bg-2: #efe8db; --surface: #fffdf8;
  --ink: #2b2620; --ink-2: #544a40; --muted: #6e6357; --heading: #2b2620;
  --line: #e3dacb; --line-2: #d3c7b3; --hover: rgba(90, 70, 40, 0.08);
  --accent: #2b2620; --accent-hover: #433a31; --accent-ink: #fbf6ea; --accent-soft: #efe5d2;
  --eyebrow: #80601f; --link: #7a5a1c; --focus: #b88d3f;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --display-weight: 500; --brand-weight: 500; --display-vars: 'SOFT' 100;
  --text: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --header-bg: rgba(247, 242, 233, 0.88);
  --shot-shadow: 0 2px 4px rgba(60, 40, 20, 0.06), 0 18px 40px -12px rgba(60, 40, 20, 0.28);
  --card-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 12px 34px rgba(60, 40, 20, 0.07);
  --frame-line: rgba(60, 40, 20, 0.12); --chrome: #ece4d6; --chrome-dot: #d6c9b4; --chrome-url: #f9f4ea;
  --footer-bg: #24201c; --footer-ink: #e6ddd0; --footer-heading: #fbf6ee; --footer-muted: #b3a898; --footer-line: rgba(255, 240, 220, 0.12);
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%232b2620' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.home-hero { padding: 96px 0 72px; text-align: center; background: radial-gradient(800px 420px at 50% 0%, rgba(201, 156, 75, 0.16), transparent 70%), var(--bg); }
.home-hero .mark-lg { width: 72px; height: 72px; margin: 0 auto 26px; filter: drop-shadow(0 4px 12px rgba(40, 30, 20, .2)); }
.home-hero h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.03; letter-spacing: -0.025em; font-weight: 450; font-variation-settings: 'SOFT' 100, 'opsz' 144; }
.home-hero h1 em { color: #8a6420; }
.home-hero .lede { margin: 24px auto 0; text-align: center; }
.home-hero .pron { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.tool { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.tool .shot { padding: 34px 34px 0; overflow: hidden; }
.tool .shot .frame-desktop { margin-bottom: -40px; }
.tool .body { padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 12px; flex: 1; border-top: 1px solid var(--line); background: var(--surface); position: relative; }
.tool h3 { display: flex; align-items: center; gap: 12px; font-size: 28px; }
.tool h3 svg, .tool h3 .smark { width: 40px; height: 40px; flex: none; }
.tool .tagline { font-style: italic; color: var(--ink-2); margin: 0; font-size: 19px; }
.tool .desc { color: var(--ink-2); font-size: 16.5px; margin: 0; }
.tool .links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
.tool.story .shot { background: linear-gradient(160deg, #f4e3d6, #eadccb); }
.tool.story .btn { background: #b2532e; } .tool.story .btn:hover { background: #9d4626; }
.tool.journal .shot { background: linear-gradient(160deg, #3d5741, #2d4231); }
.tool.journal .btn { background: #46654a; } .tool.journal .btn:hover { background: #3a573e; }
.tool .btn-quiet { background: transparent !important; color: var(--ink); }
.tool .btn-quiet:hover { background: var(--hover) !important; }
.smark { display: inline-grid; place-items: center; border-radius: 10px; background: #2a2520; color: #f6f1e8; font-family: var(--text); font-weight: 600; font-style: italic; font-size: 24px; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: left; }
.values h3 { font-size: 21px; margin-bottom: 6px; }
.values p { font-family: var(--sans); font-size: 15.5px; color: var(--ink-2); margin: 0; line-height: 1.6; }
.coming { text-align: center; max-width: 620px; margin: 0 auto; padding: 44px 32px; border: 1.5px dashed var(--line-2); border-radius: 22px; }
.coming h2 { font-size: clamp(26px, 3.4vw, 34px); }
.coming p { color: var(--ink-2); margin: 14px 0 0; }
@media (max-width: 900px) { .tools { grid-template-columns: minmax(0, 1fr); } .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-hero { padding: 56px 0 40px; } .tool .shot { padding: 22px 22px 0; } .tool .body { padding: 24px 22px 26px; } .tool h3 { font-size: 25px; } .values { grid-template-columns: minmax(0, 1fr); gap: 22px; } .coming { padding: 34px 22px; } }