/* rainazar.com paper page: one sheet of paper. People see the fold, AI agents see it laid flat. */
:root { --bg:#d3c9c5; --paper:#efe6df; --paper2:#e9dfd7; --ink:#2b2622; --soft:#6a5f58; --blue:#9db7c9; --coral:#d9765c; --amber:#e3a83b; --ui:-apple-system, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; z-index:30; font:14px var(--ui); }
.skip:focus { left:8px; }
.draft { font:600 10px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:#9a5a12; background:#fbe9c9; padding:2px 5px; border-radius:3px; vertical-align:middle; }

/* which side of the sheet is up */
/* without script both sides simply follow each other down the page */
.js body.agent .people, .js body:not(.agent) .agentside, body.agent .corner { display:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.flip { transition:transform .45s cubic-bezier(.5,0,.5,1); transform-origin:50% 40vh; }
.flip.turning { transform:perspective(1600px) rotateY(90deg); }

/* the stage: the sheet, and his words as real text on its ruled lines */
.stage { position:relative; height:100svh; min-height:700px; max-height:1000px; container-type:size; overflow:hidden; touch-action:pan-y; }
.sheet { position:absolute; top:0; left:50%; height:100%; aspect-ratio:2/3; transform:translateX(-50%); }
.sheet img { position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.sheet img.first { display:none; }
.fold .sheet img.first { display:block; }
/* with script: the finished fold waits for the animation. If the script never arrives, it shows itself after 4.5s. */
.fold .sheet img.last { opacity:0; animation:arrive .01s 4.5s forwards; }
.fold .sheet.ready img.last { animation:none; }
@keyframes arrive { to { opacity:1; } }
.sheet .mid { position:absolute; left:0; top:60%; width:1px; height:1px; }
.words { position:absolute; left:24.5%; width:51%; top:4.35cqh; margin:0; line-height:4.03cqh; font-size:2.02cqh; }
.words h1 { margin:0; font-size:1.43em; line-height:4.03cqh; font-weight:700; letter-spacing:-.01em; }
.words p { margin:0; }
.words .find { margin-top:4.03cqh; }
.words .find a { font-weight:700; text-decoration-color:var(--coral); text-decoration-thickness:2px; text-underline-offset:.5cqh; }
.scrub { position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:8px 14px; border-radius:999px; box-shadow:0 2px 10px rgba(60,40,30,.18); font:600 12px/1 var(--ui); color:var(--soft); white-space:nowrap; }
.scrub[hidden] { display:none; }
.scrub input { width:130px; accent-color:var(--coral); }
.corner { position:absolute; top:10px; right:12px; z-index:20; padding:8px; font:600 12px/1 var(--ui); color:var(--soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* the same sheet keeps going: each section is one more panel between two creases */
.more { position:relative; width:min(92vw, 780px); margin:-2px auto 0; background:var(--paper); box-shadow:0 18px 40px rgba(70,50,40,.18); }
.more::before { content:""; position:absolute; left:0; right:0; top:-13px; height:14px; background:var(--paper); clip-path:polygon(0 100%, 4% 0, 8% 100%, 12% 0, 16% 100%, 20% 0, 24% 100%, 28% 0, 32% 100%, 36% 0, 40% 100%, 44% 0, 48% 100%, 52% 0, 56% 100%, 60% 0, 64% 100%, 68% 0, 72% 100%, 76% 0, 80% 100%, 84% 0, 88% 100%, 92% 0, 96% 100%, 100% 0, 100% 100%); }
.panel { padding:38px clamp(18px, 5vw, 48px) 44px; background-image:repeating-linear-gradient(180deg, transparent 0 39px, rgba(157,183,201,.3) 39px 40px); transform-origin:50% 0; transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.panel:nth-of-type(even) { background-color:var(--paper2); }
.fold .panel.wait { transform:perspective(900px) rotateX(-78deg); opacity:0; }
.crease { height:0; border-top:1px dashed rgba(217,118,92,.75); box-shadow:0 1px 0 rgba(255,255,255,.7), 0 6px 10px -4px rgba(70,50,40,.25); }
h2 { font-size:clamp(26px, 5vw, 36px); margin:0 0 22px; letter-spacing:-.01em; }
.all { margin:18px 0 0; font:600 14px/1.4 var(--ui); }

.essay { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:10px; margin:0 -10px 8px; text-decoration:none; background:rgba(255,255,255,.6); border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 6px 14px rgba(70,50,40,.08); transition:transform .2s, box-shadow .2s; }
.essay:hover { transform:translateY(-2px) rotate(-.3deg); box-shadow:0 1px 0 rgba(0,0,0,.05), 0 12px 22px rgba(70,50,40,.14); }
.essay img { width:96px; height:64px; object-fit:cover; border-radius:2px; display:block; }
.essay b { display:block; font-size:17.5px; line-height:1.25; font-weight:600; }
.essay small, .notes small { color:var(--soft); font:12.5px/1.7 var(--ui); }
.essay.feat { grid-template-columns:1fr; }
.essay.feat img { width:100%; height:auto; aspect-ratio:16/9; }
.essay.feat b { font-size:clamp(22px, 4.4vw, 28px); }

.built { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.proj { display:flex; flex-direction:column; text-decoration:none; background:rgba(255,255,255,.66); border-radius:3px; overflow:hidden; box-shadow:0 6px 14px rgba(70,50,40,.08); transition:transform .2s, box-shadow .2s; }
.proj:hover { transform:translateY(-2px) rotate(.3deg); box-shadow:0 12px 22px rgba(70,50,40,.14); }
.proj img, .proj video { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.proj div { padding:10px 12px 14px; font-size:15px; line-height:1.38; }
.proj small { display:block; margin-top:6px; color:var(--soft); font:12px/1.4 var(--ui); }
.proj b { display:block; font:600 13px/1.8 ui-monospace, Menlo, monospace; }
.proj.lead { grid-column:1 / -1; }
.proj.lead div { font-size:17px; }
.chart { margin:0; padding:16px 14px 12px; background:#fbf8f4; border-bottom:1px solid rgba(70,50,40,.1); font:13px/1.3 var(--ui); color:var(--ink); }
.chart figcaption { font-weight:600; margin-bottom:12px; }
.chart .row { display:grid; grid-template-columns:minmax(96px, 30%) 1fr; gap:10px; align-items:center; margin-bottom:7px; }
.chart .bar { display:flex; height:24px; border-radius:2px; overflow:hidden; }
.chart i { font-style:normal; display:grid; place-items:center; font-weight:700; font-size:12px; min-width:22px; }
.chart .w { background:var(--blue); }
.chart .p { background:var(--coral); color:#fff; }
.chart .key { margin:10px 0 0; color:var(--soft); font-size:12px; }
.chart .key i { display:inline-block; width:10px; height:10px; min-width:0; border-radius:2px; margin:0 5px 0 0; vertical-align:-1px; }
.chart .key .p { margin-left:12px; }

.notes { list-style:none; margin:0; padding:0; font-size:17px; line-height:1.45; }
.notes li { padding:12px 0 14px; border-bottom:1px dashed rgba(157,183,201,.6); }
.notes b { display:block; font-size:19px; line-height:1.3; margin:2px 0 4px; }
.notes small { display:block; }
.mail { font-size:clamp(20px, 5vw, 28px); overflow-wrap:anywhere; }
.me { display:flex; align-items:center; gap:clamp(14px, 4vw, 24px); }
.me > div { min-width:0; }
.face { flex:none; width:clamp(96px, 28vw, 150px); height:auto; aspect-ratio:3/4; object-fit:cover; background:#fff; padding:5px 5px 14px; box-shadow:0 1px 0 rgba(0,0,0,.06), 0 8px 18px rgba(70,50,40,.2); transform:rotate(-2deg); }
.me .links { margin-left:-8px; white-space:nowrap; }
.me .links a { padding:13px 8px; }
.me .mail { font-size:clamp(17px, 4.6vw, 28px); }
.links { margin-top:16px; font:15px/1.6 var(--ui); color:var(--soft); }
.links a { margin-right:16px; }
footer { width:min(92vw, 780px); margin:0 auto; padding:26px 0 calc(40px + env(safe-area-inset-bottom)); text-align:center; }
.turn { cursor:pointer; }
footer .turn { display:inline-block; text-decoration:none; border:1px solid rgba(43,38,34,.35); background:rgba(255,255,255,.5); border-radius:999px; padding:10px 18px; font:600 13px/1 var(--ui); color:var(--ink); }

/* the other side: the crease pattern, and plain words an AI can read */
.agentside { padding:26px 0 0; }
.flat { position:relative; width:min(92vw, 740px); margin:0 auto; background:#fbfaf8; box-shadow:0 18px 40px rgba(70,50,40,.18); overflow:hidden; }
.flat .pattern { display:block; width:100%; aspect-ratio:1024/640; background:url(art/crease.webp) 50% 60% / 124% auto; }
.flat .tag { position:absolute; z-index:1; left:12px; top:12px; font:600 11px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); background:#fbfaf8; padding:6px 8px; }
.flat .body { position:relative; padding:8px clamp(18px, 5vw, 46px) clamp(22px, 6vw, 44px); font:14px/1.7 ui-monospace, Menlo, Consolas, monospace; overflow-wrap:anywhere; }
.flat .nm { font-size:20px; margin:14px 0 2px; letter-spacing:0; }
.flat h3 { font-size:15px; margin:26px 0 6px; padding-top:14px; border-top:1px dashed var(--blue); }
.flat ul { margin:0; padding-left:18px; }
.flat li { margin:0 0 6px; }
.flat p { margin:6px 0; }
.flat .m { color:var(--soft); }
.flat a { text-decoration-color:var(--coral); }

/* phone comfort: every link is at least a fingertip tall (44px), and the smallest text is 13px */
.all a { display:inline-block; padding:13px 0; }
.all { margin-top:6px; }
.mail { display:inline-block; padding:9px 0; }
.links { margin-top:4px; }
.links { margin-left:-12px; }
.links a { display:inline-block; min-width:44px; padding:13px 12px; margin-right:0; text-align:center; }
footer .turn { padding:15px 22px; }
.corner { padding:16px 12px; top:2px; right:4px; }
.essay small, .notes small { font-size:13px; }
.proj small { font-size:13px; }

@media (min-width:900px) {
  .essay { grid-template-columns:150px 1fr; gap:18px; }
  .essay img { width:150px; height:96px; }
  .essay b { font-size:20px; }
}
@media (prefers-reduced-motion: reduce) { .panel, .flip, .essay, .proj { transition:none; } }
@media print { .scrub, .corner, footer { display:none; } .fold .panel.wait { transform:none; opacity:1; } .fold .sheet img.last { opacity:1; animation:none; } }