/* An editorial spread: words on the left, the sheet pinned on the right. */
:root {
  --bg: #f3efe6;
  --fg: #171612;
  --muted: #6d685c;
  --line: #cdc6b6;
  --field: #fffdf8;
  --accent: #1f4d3a;
  --paper: #fbfaf6;
  --ink: #1f1d1a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --on-accent: #fff;
  --accent-hover: #163a2b;
  color-scheme: light dark;
}
/* The page follows the system theme; the sheet is paper in both. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513;
    --fg: #edebe5;
    --muted: #9a968c;
    --line: #37342f;
    --field: #211f1c;
    --accent: #2f6b52;
    --accent-hover: #3a7d61;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 22px 32px 16px; border-bottom: 1px solid var(--line); }
.mark { display: block; color: inherit; }
.mark svg { display: block; height: 24px; width: auto; }

main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 56px 32px 80px; }
h1 { margin: 0 0 34px; font: 400 clamp(46px, 5.2vw, 72px)/0.98 var(--serif); letter-spacing: -0.025em; }

.ask { display: grid; gap: 10px; }
.ask > input { width: 100%; height: 56px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--fg); background: var(--field); border: 1px solid var(--fg); border-radius: 0; }
.ask > input::placeholder { color: var(--muted); opacity: .8; }
.ask button { height: 54px; font: 600 14px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border: 0; cursor: pointer; }
.ask button:hover { background: var(--accent-hover); }
.ask button:disabled { opacity: .6; cursor: default; background: var(--accent); }

/* Square, tall or wide: three cells in a row, the chosen one ruled in ink. */
.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.shapes label { position: relative; }
.shapes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.shapes span { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }
.shapes i { display: block; border: 1.5px solid currentColor; }
.shapes .square { width: 13px; height: 13px; }
.shapes .tall { width: 9px; height: 16px; }
.shapes .wide { width: 16px; height: 9px; }
.shapes label:hover span { color: var(--fg); }
.shapes input:checked + span { color: var(--fg); background: var(--field); border-color: var(--fg); }
.shapes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.shapes input:disabled { cursor: default; }
.shapes input:disabled + span { opacity: .6; }

.work { position: sticky; top: 28px; }
.sheet { margin: 0; }
/* A tall sheet is only as wide as lets the whole of it fit on the screen. */
.sheet[data-aspect="tall"] { width: min(100%, max(240px, calc((100vh - 200px) * 9 / 16))); width: min(100%, max(240px, calc((100dvh - 200px) * 9 / 16))); margin-inline: auto; }
.sheet[data-aspect="tall"] #paper { aspect-ratio: 9 / 16; }
.sheet[data-aspect="wide"] #paper { aspect-ratio: 16 / 9; }
#paper { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px rgba(40, 32, 16, .14), 0 24px 48px -12px rgba(40, 32, 16, .22); }
#paper svg.drawing { display: block; width: 100%; height: 100%; }

.working, .notice { padding: 28px; text-align: center; color: var(--ink); }
.working p, .notice p { margin: 0; }
.working .stage { font: italic 19px var(--serif); }
.working .hint { margin-top: 4px; font-size: 13px; color: #6d685c; }
.scribble { display: block; width: 104px; margin: 0 auto 14px; }
.scribble path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 170 170; stroke-dashoffset: 170; animation: scribble 1.9s ease-in-out infinite; }
@keyframes scribble { 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -170; } }
.notice p { max-width: 30ch; font: 19px/1.4 var(--serif); }

figcaption { display: flex; align-items: center; justify-content: flex-end; min-height: 36px; margin-top: 16px; }
.actions { display: flex; align-items: center; gap: 18px; }
.actions > button, .menu > button { padding: 4px 0; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--fg); cursor: pointer; }
.actions button:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
.menu { position: relative; display: flex; }
.formats { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 1; display: grid; width: 260px; padding: 6px; background: var(--field); border: 1px solid var(--fg); box-shadow: 0 16px 36px -10px rgba(20, 16, 8, .3); }
.formats button { display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; font: inherit; font-size: 14px; text-align: left; color: var(--fg); background: transparent; border: 0; cursor: pointer; }
.formats button:hover, .formats button:focus-visible { background: var(--bg); }
.formats b { font: 500 17px var(--serif); }
.formats small { font-size: 13px; color: var(--muted); }
.note { margin: 8px 0 0; text-align: right; font-size: 14px; color: var(--muted); }
.noscript { max-width: 1180px; margin: 0 auto; padding: 0 32px 40px; }

@media (max-width: 880px) {
  .top { padding: 18px 20px 14px; }
  main { display: flex; flex-direction: column; gap: 0; padding: 30px 20px 56px; align-items: stretch; }
  .words, .work { display: contents; }
  h1 { order: 1; margin-bottom: 24px; }
  .ask { order: 3; }
  .sheet { order: 4; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .scribble path { animation: none; stroke-dashoffset: 0; }
}