:root { --ink:#1e2220; --paper:#f3f0e8; --lime:#d9e94d; --rust:#be4a30; --line:#1e2220; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
a { color:inherit; text-decoration:none; }
.paper-cover { --cursor-x:50%; --cursor-y:50%; align-items:center; background:#e6e0ce; color:#172223; display:flex; min-height:100svh; overflow:hidden; position:relative; }
.cover-photo { background-image:url('assets/cuaderno-portada.png'); background-position:center; background-size:cover; filter:contrast(1.08) saturate(.8); inset:-3%; position:absolute; transform:translate(calc((var(--cursor-x) - 50%) * -.018),calc((var(--cursor-y) - 50%) * -.018)) scale(1.07); animation:slow-zoom 16s ease-out forwards; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.cover-wash { background:linear-gradient(90deg,rgba(237,232,216,.94) 0%,rgba(237,232,216,.76) 32%,rgba(237,232,216,.13) 69%,rgba(20,30,29,.15)); inset:0; position:absolute; }
.cover-content { margin-left:10vw; max-width:640px; position:relative; z-index:2; }.cover-kicker { animation:reveal .7s .15s both; font:10px "DM Mono",monospace; letter-spacing:.08em; margin:0 0 23px; }.cover-content h1 { animation:reveal .9s .35s both; font:normal clamp(3.7rem,7.6vw,8rem)/.82 "DM Serif Display",serif; letter-spacing:-.075em; margin:0; }.cover-content h1 em { color:#305c5c; font-weight:400; }.cover-subtitle { animation:reveal .7s .75s both; font-size:15px; line-height:1.55; margin:31px 0; max-width:335px; }.enter-button { animation:reveal .7s 1s both; background:#172223; border:1px solid #172223; color:#f4f0e6; cursor:pointer; font:11px "DM Mono",monospace; padding:17px 20px; text-transform:uppercase; transition:background .25s,color .25s,transform .25s; }.enter-button:hover { background:transparent; color:#172223; transform:translateY(-4px); }.enter-button span { animation:bob 1.3s 1.7s ease-in-out infinite; display:inline-block; font-size:18px; margin-left:15px; }.cover-note { animation:reveal .7s 1.2s both; bottom:22px; font:9px "DM Mono",monospace; margin:0; position:absolute; right:3vw; transform:rotate(-90deg); transform-origin:right bottom; z-index:2; }
.cover-details i { font-style:normal; position:absolute; z-index:1; }.cover-star { color:#315e5f; font:50px "DM Serif Display",serif; opacity:.8; }.star-a { animation:float 5s ease-in-out infinite; right:13%; top:13%; }.star-b { animation:float 6.5s 1s ease-in-out infinite; bottom:12%; right:23%; }.star-c { animation:float 5.8s .4s ease-in-out infinite; right:38%; top:29%; }.cover-cloud { color:#f3eee2; font-size:85px; text-shadow:2px 2px #244d50; }.cloud-a { animation:drift 10s ease-in-out infinite; right:5%; top:48%; }.cloud-b { animation:drift 13s 2s ease-in-out infinite reverse; right:33%; top:76%; transform:scale(.6); }.cover-line { border-top:2px solid #315e5f; height:25px; opacity:.75; width:110px; }.line-a { animation:drift 9s ease-in-out infinite; right:28%; top:18%; transform:rotate(-24deg); }.line-b { animation:drift 12s ease-in-out infinite reverse; right:8%; top:81%; transform:rotate(31deg); }.cover-spark { background:#e4773e; border-radius:50%; box-shadow:0 0 0 7px rgba(228,119,62,.16); height:7px; width:7px; }.spark-a { animation:pulse 2.4s .4s ease-in-out infinite; right:20%; top:64%; }.spark-b { animation:pulse 2.4s 1.2s ease-in-out infinite; right:43%; top:12%; }
.curiosity-warning { align-items:center; background:rgba(23,34,35,.5); display:flex; inset:0; justify-content:center; opacity:0; padding:24px; pointer-events:none; position:absolute; transition:opacity .25s ease; z-index:5; }.curiosity-warning.is-open { opacity:1; pointer-events:auto; }.warning-card { background:#f4efdf; border:3px solid #172223; box-shadow:10px 10px 0 #d7e84c; max-width:460px; padding:44px 35px 34px; position:relative; text-align:center; transform:rotate(-3deg) scale(.8); transition:transform .38s cubic-bezier(.2,1.35,.4,1); width:100%; }.is-open .warning-card { transform:rotate(-3deg) scale(1); }.warning-card>p { font:10px "DM Mono",monospace; margin:0 0 22px; }.warning-card h2 { font-size:clamp(3rem,7vw,5.7rem); line-height:.78; }.warning-card h2 em { color:#be4a30; font-weight:400; }.close-warning { background:transparent; border:0; cursor:pointer; font:32px/1 "DM Mono",monospace; position:absolute; right:12px; top:8px; }.cat-mark { display:block; font-size:31px; margin:25px 0 20px; }.back-button { background:#172223; border:0; color:#f4efdf; cursor:pointer; font:10px "DM Mono",monospace; padding:13px 17px; text-transform:uppercase; }.warning-stickers span { background:#f6bc43; border:2px solid #172223; border-radius:50%; color:#172223; font:52px/1 "DM Serif Display",serif; height:72px; padding-top:6px; position:absolute; text-align:center; transform:rotate(var(--tilt)); width:72px; }.warning-stickers span:nth-child(1) { --tilt:-18deg; animation:sticker-pop .7s .15s both, sticker-bob 2.4s 1s ease-in-out infinite; left:9%; top:14%; }.warning-stickers span:nth-child(2) { --tilt:15deg; animation:sticker-pop .7s .27s both, sticker-bob 2.2s 1.1s ease-in-out infinite; right:9%; top:17%; }.warning-stickers span:nth-child(3) { --tilt:9deg; animation:sticker-pop .7s .4s both, sticker-bob 2.7s 1.2s ease-in-out infinite; bottom:13%; left:12%; }.warning-stickers span:nth-child(4) { --tilt:-12deg; animation:sticker-pop .7s .52s both, sticker-bob 2.5s 1.3s ease-in-out infinite; bottom:12%; right:11%; }.warning-stickers span:nth-child(5) { --tilt:-4deg; animation:sticker-pop .7s .64s both, sticker-bob 2.3s 1.4s ease-in-out infinite; right:20%; top:6%; }
@keyframes slow-zoom { to { transform:translate(calc((var(--cursor-x) - 50%) * -.018),calc((var(--cursor-y) - 50%) * -.018)) scale(1.14); } } @keyframes reveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes float { 50% { transform:translateY(-16px) rotate(10deg); } } @keyframes drift { 50% { margin-right:25px; } } @keyframes pulse { 50% { box-shadow:0 0 0 17px rgba(228,119,62,0); transform:scale(1.25); } } @keyframes bob { 50% { transform:translateY(5px); } } @keyframes sticker-pop { from { opacity:0; transform:scale(0) rotate(var(--tilt)); } to { opacity:1; transform:scale(1) rotate(var(--tilt)); } } @keyframes sticker-bob { 50% { margin-top:-13px; } }
.site-header { align-items:flex-start; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:22px 4vw; position:relative; }
.brand { font:600 12px/1.03 "DM Mono", monospace; letter-spacing:-.6px; }
.brand em { font-family:"DM Serif Display", serif; font-size:14px; font-weight:400; }
nav { display:flex; gap:28px; font:11px "DM Mono", monospace; text-transform:uppercase; }
nav a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.menu-button { display:none; }
.hero { background:var(--lime); min-height:600px; overflow:hidden; padding:74px 8vw 40px; position:relative; }
.eyebrow,.section-number,.meta { font:10px "DM Mono", monospace; letter-spacing:.02em; }
.hero h1 { font:normal clamp(3rem,7vw,7.4rem)/.9 "DM Serif Display",serif; letter-spacing:-.065em; margin:44px 0 74px; max-width:1040px; position:relative; z-index:1; }
.hero-bottom { align-items:end; display:flex; justify-content:space-between; max-width:880px; position:relative; z-index:1; }
.hero-bottom p { font-size:15px; line-height:1.55; margin:0; max-width:320px; }
.arrow-link,.outline-button { font:11px "DM Mono",monospace; text-transform:uppercase; }
.arrow-link span { font-size:24px; margin-left:12px; }
.sun { background:var(--rust); border-radius:50%; bottom:-210px; height:520px; position:absolute; right:8vw; width:520px; }
.intro { display:grid; gap:8vw; grid-template-columns:1fr 2fr; padding:128px 12vw; }
h2 { font:normal clamp(2.5rem,5vw,5.5rem)/.92 "DM Serif Display",serif; letter-spacing:-.055em; margin:0; }
.large-copy { font-size:20px; line-height:1.5; max-width:620px; }
.text-link { border-bottom:1px solid; display:inline-block; font:11px "DM Mono",monospace; margin-top:20px; padding-bottom:7px; text-transform:uppercase; }
.text-link span { margin-left:16px; }
.stories { background:var(--ink); color:var(--paper); padding:100px 8vw 115px; }
.section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:64px; }
.section-heading h2 { text-align:right; }
.section-heading em,.letter em { color:var(--lime); font-weight:400; }
.story-grid { display:grid; gap:35px; grid-template-columns:1.25fr 1fr 1fr; }
.story-image { display:block; height:350px; overflow:hidden; position:relative; }
.story-image span { background:var(--paper); color:var(--ink); font:11px "DM Mono",monospace; left:0; padding:9px 12px; position:absolute; top:0; z-index:1; }
.image-one { background:linear-gradient(135deg,#a75a3f 0 42%,#f0bf6c 42% 58%,#294d4b 58%); }.image-two { background:linear-gradient(155deg,#d8c9b5 0 46%,#706048 46% 50%,#9cba9a 50%); }.image-three { background:linear-gradient(45deg,#9181bd 0 44%,#e4d6be 44% 54%,#d56843 54%); }
.story-image:hover { filter:brightness(1.15); }
.meta { color:#b7bbb0; margin:16px 0 10px; }
.story h3 { font:normal 30px/.98 "DM Serif Display",serif; letter-spacing:-.03em; margin:0; }.story h3 a:hover{text-decoration:underline}.story>p:last-child { color:#b7bbb0; font-size:13px; line-height:1.5; }
.outline-button { border:1px solid var(--paper); display:flex; justify-content:space-between; margin:72px auto 0; max-width:400px; padding:17px 20px; }.outline-button:hover{background:var(--paper);color:var(--ink)}
.letter { background:var(--rust); color:var(--paper); padding:115px 16vw; text-align:center; }.letter h2 { margin:30px auto; max-width:900px; }.letter>p:not(.section-number):not(.form-message) { font-size:16px; line-height:1.55; margin:0 auto 32px; max-width:480px; }
.subscribe-form { border-bottom:1px solid var(--paper); display:flex; margin:0 auto; max-width:480px; }.subscribe-form input { background:transparent; border:0; color:var(--paper); font:14px Manrope,sans-serif; outline:none; padding:15px 0; width:100%; }.subscribe-form input::placeholder { color:#f5c6b9; }.subscribe-form button { background:transparent; border:0; color:var(--paper); cursor:pointer; font:11px "DM Mono",monospace; white-space:nowrap; }.subscribe-form button span { margin-left:12px; }.form-message { font-size:12px; min-height:18px; }
footer { align-items:center; display:flex; justify-content:space-between; padding:23px 4vw; }footer p { font:10px "DM Mono",monospace; margin:0; }.footer-brand { white-space:nowrap; }
.sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
@media (max-width:720px) { .paper-cover{align-items:end;min-height:100svh}.cover-photo{background-position:62% center}.cover-wash{background:linear-gradient(0deg,rgba(237,232,216,.97) 0%,rgba(237,232,216,.84) 39%,rgba(237,232,216,.05) 79%)}.cover-content{margin:0 7vw 10vh;max-width:360px}.cover-content h1{font-size:clamp(3.35rem,15.5vw,5rem)}.cover-subtitle{font-size:14px;margin:23px 0}.cover-note{bottom:15px;right:6vw;transform:none}.cover-star{font-size:36px}.star-a{right:9%;top:11%}.star-b{bottom:55%;right:7%}.star-c{right:25%;top:30%}.cloud-a{font-size:60px;right:4%;top:39%}.cloud-b{display:none}.line-a{right:4%;top:25%}.line-b{display:none}.site-header{padding:18px 6vw} nav { background:var(--paper); border-bottom:1px solid; display:none; flex-direction:column; left:0; padding:22px 6vw; position:absolute; top:100%; width:100%; z-index:3; }.site-header.menu-open nav{display:flex}.menu-button{background:none;border:0;display:block;font:11px "DM Mono",monospace;text-transform:uppercase}.hero{min-height:570px;padding:65px 6vw 35px}.hero h1{margin:35px 0 52px}.hero-bottom{align-items:start;flex-direction:column;gap:28px}.sun{bottom:-70px;height:270px;right:-80px;width:270px}.intro{display:block;padding:80px 8vw}.intro>div{margin-top:50px}.large-copy{font-size:17px}.stories{padding:75px 6vw}.section-heading{align-items:start;flex-direction:column;gap:35px}.section-heading h2{text-align:left}.story-grid{grid-template-columns:1fr}.story-image{height:260px}.outline-button{margin-top:48px}.letter{padding:80px 8vw}footer{align-items:flex-start;flex-direction:column;gap:15px;padding:22px 6vw} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }