/* Layout: one horizon. A dawn sky opens the page, the day unfolds down it, and every drawing is a single line of ink.
   3D edition: an ink-line ocean rolls below the horizon, the sun rises, and the book becomes an object you can turn. */
:root {
  --paper: #f6f8f9;
  --mist: #e7eef2;
  --ink: #223240;
  --ink-soft: #566673;
  --line: #d3dde3;
  --sun: #e59468;
  --sun-text: #a5532c;
  --dawn-top: #c9d9e3;
  --dawn-mid: #ecdcc9;
  --dawn-low: #f6c9a6;
  --card: #ffffff;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 4.2vw, 2.9rem);
  --step-4: clamp(2.6rem, 6vw, 4.4rem);
  --ease: cubic-bezier(.22, .8, .25, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1a22; --mist: #15232d; --ink: #e5ecf0; --ink-soft: #a3b3be; --line: #273743;
    --sun: #f0a37a; --sun-text: #f4b691; --dawn-top: #142431; --dawn-mid: #2a2c36; --dawn-low: #4a3226; --card: #172630;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1a22; --mist: #15232d; --ink: #e5ecf0; --ink-soft: #a3b3be; --line: #273743;
  --sun: #f0a37a; --sun-text: #f4b691; --dawn-top: #142431; --dawn-mid: #2a2c36; --dawn-low: #4a3226; --card: #172630;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--dawn-top); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-text); }

/* line drawings, recoloured by the theme */
.ill { display: block; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.m-tea { --m: url(img/line-tea.png); }
.m-butterfly { --m: url(img/line-butterfly.png); }
.m-flower { --m: url(img/line-flower.png); }
.m-tree { --m: url(img/line-tree.png); }
.m-plane { --m: url(img/line-plane.png); }
.m-path { --m: url(img/line-path.png); }
.m-bird { --m: url(img/line-bird.png); }
.m-sprout { --m: url(img/line-sprout.png); }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--dawn-top) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow .4s ease, background .4s ease; }
.top.scrolled { background: color-mix(in srgb, var(--paper) 86%, transparent); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(20, 35, 50, .35); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand b { font-family: var(--display); font-size: 1.65rem; font-weight: 600; letter-spacing: 0.01em; }
.brand span { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); align-self: center; margin-left: -2px; box-shadow: 0 0 0 0 var(--sun); animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 0%, transparent), 0 0 14px 2px color-mix(in srgb, var(--sun) 55%, transparent); } }
.nav { display: flex; gap: 22px; font-size: 0.95rem; }
.nav a { text-decoration: none; color: var(--ink-soft); position: relative; }
.nav a:hover { color: var(--ink); }
.nav a:not(.cta-small)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--sun); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:not(.cta-small):hover::after { transform: scaleX(1); transform-origin: left; }
.nav .cta-small { color: var(--ink); border-bottom: 1.5px solid var(--sun); }
@media (max-width: 720px) { .nav a:not(.cta-small) { display: none; } }

/* hero: the dawn */
.hero { background: linear-gradient(180deg, var(--dawn-top) 0%, var(--dawn-mid) 62%, var(--dawn-low) 100%); position: relative; overflow: hidden; }
.hero > .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: end; padding-block: 56px 0; position: relative; z-index: 1; }
.hero-text { padding-bottom: 72px; display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: var(--step-4); }
.hero h1 em { font-style: italic; color: var(--sun-text); }
.hero p.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink); max-width: 34ch; opacity: 0.9; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 0; cursor: pointer; font-family: inherit; position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), color-mix(in srgb, var(--sun) 55%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ink) 70%, transparent); }
.btn:hover::before { opacity: 1; }
.link { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid var(--sun); padding-bottom: 2px; background: linear-gradient(var(--sun), var(--sun)) left bottom / 0 1.5px no-repeat; transition: background-size .45s var(--ease); }
.link:hover { background-size: 100% 1.5px; }
.portrait { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 3 / 4; max-width: 100%; }
.portrait .sun { position: absolute; left: 50%; bottom: 18%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 70%, transparent) 0%, color-mix(in srgb, var(--sun) 25%, transparent) 55%, transparent 72%); }
.portrait .sun::after { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 22%, transparent), transparent 65%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .7; } }
.portrait img { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.portrait .bird { position: absolute; width: 92px; height: 70px; top: 4%; left: -6%; opacity: .85; animation: glide 9s ease-in-out infinite; }
@keyframes glide { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 10px -8px; rotate: -3deg; } 70% { translate: -6px 4px; rotate: 2deg; } }
.horizon { height: 1px; background: color-mix(in srgb, var(--ink) 35%, transparent); position: relative; z-index: 1; }
@media (max-width: 820px) {
  .hero > .wrap { grid-template-columns: 1fr; gap: 8px; padding-top: 40px; }
  .hero-text { padding-bottom: 8px; }
  .portrait { width: min(300px, 80%); }
}

/* the sea below the horizon (3D canvas) */
.sea { position: relative; height: clamp(150px, 21vw, 270px); background: linear-gradient(180deg, color-mix(in srgb, var(--dawn-low) 85%, var(--dawn-mid)) 0%, color-mix(in srgb, var(--dawn-low) 35%, var(--paper)) 55%, var(--paper) 100%); }
.sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

section { padding-block: 88px; }
.section-head { display: grid; gap: 12px; margin-bottom: 44px; max-width: 640px; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--ink-soft); }

/* about */
.about .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.about h2 { font-size: var(--step-3); }
.about .story { display: grid; gap: 18px; max-width: 62ch; min-width: 0; }
.about .story p:first-child::first-letter { font-family: var(--display); font-size: 3.4em; float: left; line-height: 0.8; padding: 6px 10px 0 0; color: var(--sun-text); }
.signature { font-family: var(--display); font-style: italic; font-size: var(--step-2); color: var(--ink-soft); }
.quote { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); font-family: var(--display); font-style: italic; font-size: var(--step-2); line-height: 1.3; }
.quote cite { display: block; margin-top: 10px; font-family: var(--body); font-style: normal; font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.04em; }
@media (max-width: 820px) { .about .wrap { grid-template-columns: 1fr; gap: 28px; } }

/* focus areas */
.areas { background: var(--mist); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.area { background: var(--paper); padding: 32px 28px 34px; display: grid; gap: 12px; align-content: start; min-width: 0; position: relative; transition: background .5s ease; }
.area::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--sun) 16%, transparent), transparent 70%); }
.area:hover::before { opacity: 1; }
.area .ill { width: 100%; height: 92px; -webkit-mask-position: left center; mask-position: left center; margin-bottom: 6px; transition: transform .6s var(--ease), background .5s ease; }
.area:hover .ill { background: var(--sun-text); }
.area h3 { font-size: 1.6rem; }
.area p { color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

/* approach */
.approach .rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.principle { display: grid; gap: 10px; align-content: start; padding-top: 18px; min-width: 0; position: relative; }
.principle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sun); transform-origin: left; transform: scaleX(var(--line-x, 1)); }
.principle h3 { font-size: 1.55rem; }
.principle p { color: var(--ink-soft); }
.note { margin-top: 44px; font-size: 0.92rem; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 820px) { .approach .rows { grid-template-columns: 1fr; gap: 28px; } }

/* book */
.book { background: linear-gradient(180deg, var(--paper), var(--mist)); overflow: hidden; }
.book .wrap { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.covers { position: relative; width: 340px; height: 420px; max-width: 100%; }
.covers canvas { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); display: block; cursor: grab; touch-action: pan-y; }
.covers canvas:active { cursor: grabbing; }
.covers img { position: absolute; width: 220px; height: auto; border-radius: 3px 8px 8px 3px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 40px -12px rgba(20,35,50,.45); transition: opacity .8s ease; }
.covers .es { left: 100px; top: 10px; transform: rotate(4deg); }
.covers .en { left: 20px; top: 44px; transform: rotate(-3deg); }
.covers.is-3d img { opacity: 0; pointer-events: none; }
.book-text { display: grid; gap: 16px; max-width: 58ch; min-width: 0; }
.book-text h2 { font-size: var(--step-3); }
.book-text .sub { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--ink-soft); }
.book-text p { color: var(--ink-soft); }
.editions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip { font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
@media (max-width: 820px) { .book .wrap { grid-template-columns: 1fr; gap: 36px; justify-items: center; } .book-text { justify-self: stretch; } .covers { width: 300px; height: 380px; } .covers img { width: 200px; } .covers .es { left: 80px; } .covers .en { left: 10px; } }

/* contact */
.contact .panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 48px; position: relative; overflow: hidden; }
.contact .panel::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 20%, transparent), transparent 65%); animation: breathe 8s ease-in-out infinite; }
.contact h2 { font-size: var(--step-3); }
.contact .intro { display: grid; gap: 16px; min-width: 0; }
.contact .intro p { color: var(--ink-soft); }
.ways { display: grid; gap: 14px; align-content: start; min-width: 0; position: relative; z-index: 1; }
.way { display: grid; gap: 4px; padding: 18px 20px; border-radius: 14px; background: var(--mist); }
.way small { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.way .value { font-size: 1.05rem; font-weight: 500; user-select: all; overflow-wrap: anywhere; }
.contact .tree { width: 120px; height: 120px; margin-top: 8px; opacity: .8; }
@media (max-width: 820px) { .contact .panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; } }

footer { padding-block: 40px 56px; color: var(--ink-soft); font-size: 0.9rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 28px; }

/* language switch, contact actions, Spanish book order */
.right { display: flex; align-items: center; gap: 22px; }
.lang { display: inline-flex; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 999px; padding: 3px; gap: 2px; }
.lang button { font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; border: 0; background: transparent; color: var(--ink-soft); padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .3s ease, color .3s ease; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) { .right { gap: 12px; } }
.mail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn.small { padding: 10px 18px; font-size: 0.92rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
:root[lang="es"] .covers .es { left: 20px; top: 44px; transform: rotate(-3deg); z-index: 2; }
:root[lang="es"] .covers .en { left: 100px; top: 10px; transform: rotate(4deg); z-index: 1; }