/* xabizabala.eus — V05. Original layout influenced by the editorial minimalism of Kelly. */
:root {
  --bg: #F5F4F0;
  --fg: #252A2C;
  --muted: #686E6B;
  --low: #727B78;
  --accent: #317B7A;
  --font-main: "Momo Trust Sans", "Inter", "Avenir Next", Arial, sans-serif;
  --font-display: "Momo Trust Display", "Momo Trust Sans", "Inter", Arial, sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--fg); font-family:var(--font-main); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
::selection { background:var(--accent); color:var(--bg); }
.layout { width:min(100%, 1180px); margin:0 auto; min-height:100vh; padding:122px 74px 110px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:118px; align-items:start; }
.sidebar { position:sticky; top:40px; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.identity { display:flex; flex-direction:column; align-items:flex-end; }
.avatar { height:70px; width:70px; object-fit:cover; border-radius:50%; filter:grayscale(1) contrast(1.07); margin-bottom:27px; }
.full-name { display:flex; flex-direction:column; margin:0; max-width:265px; font-family:var(--font-display); font-weight:400; letter-spacing:-.04em; line-height:1.12; }
.name-first { font-size:39px; }
.name-rest { font-size:24px; white-space:nowrap; }
.occupation { font-weight:600; letter-spacing:.15em; color:var(--accent); font-size:10px; text-transform:uppercase; margin:25px 0 0; }
.links { display:flex; flex-direction:column; align-items:flex-end; gap:14px; margin-top:75px; }
.links a, .contact-link, .more-link { font-size:14px; font-weight:400; line-height:1.35; color:var(--fg); transition:color .16s ease; }
.links a:hover, .links a:focus-visible, .contact-link:hover, .contact-link:focus-visible, .more-link:hover, .more-link:focus-visible { color:var(--accent); }
.sidebar-note { font-size:11px; font-weight:300; line-height:1.9; color:var(--low); margin:77px 0 24px; }
.content { width:100%; max-width:630px; min-width:0; }
.posts { display:flex; flex-direction:column; gap:76px; }
.post { width:100%; }
.post-media { display:flex; position:relative; justify-content:center; align-items:center; width:100%; aspect-ratio:1.8 / 1; overflow:hidden; margin:0; background:#E6E9E5; }
/* Placeholder art: replace entire figure with a real <img> or <video>. Never stretch source files. */
.post-media--first { background:linear-gradient(125deg,#d7e4df 0%,#e8ebe8 52%,#c5d2cd 100%); }
.post-media--second { background:linear-gradient(145deg,#d7dedb 0%,#e8ebe7 55%,#ccd6d1 100%); }
.post-media__placeholder { position:absolute; z-index:2; bottom:20px; left:22px; font-size:9px; font-weight:500; letter-spacing:.17em; color:#4D7871; }
.post-media__gesture { width:36%; height:76%; border:1px solid rgba(43,98,91,.22); border-radius:50%; transform:rotate(-34deg); position:relative; left:18%; }
.post-media__gesture::after { content:""; position:absolute; width:190%; height:1px; left:-75%; top:48%; transform:rotate(-12deg); background:rgba(43,98,91,.22); }
.post-media__circle { width:96px; height:96px; border:1px solid rgba(43,98,91,.25); border-radius:50%; position:relative; }
.post-media__circle::after { content:""; border-left:15px solid rgba(43,98,91,.65); border-top:9px solid transparent; border-bottom:9px solid transparent; position:absolute; left:43px; top:38px; }
.post-content { padding-top:24px; }
.post h2 { font-family:var(--font-main); font-size:23px; font-weight:500; letter-spacing:-.025em; line-height:1.3; margin:0 0 13px; }
.post p { color:var(--muted); font-size:14px; line-height:1.8; font-weight:300; margin:0; max-width:560px; }
.more-link { display:inline-block; margin-top:75px; font-size:13px; }
.preview-note { margin:72px 0 0; font-size:10px; line-height:1.7; color:#707875; }
@media (max-width:1040px) { .layout { grid-template-columns:225px minmax(0,1fr); gap:74px; padding:115px 42px 100px; } .name-first { font-size:36px; }.name-rest {font-size:22px;} }
@media (max-width:720px) { .layout {display:block; padding:96px 25px 70px; } .sidebar { position:static; align-items:flex-start; text-align:left; } .identity { align-items:flex-start; } .avatar { width:64px; height:64px; margin-bottom:18px; } .name-first {font-size:34px;} .name-rest {font-size:21px;} .occupation {margin-top:14px;} .links { align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:12px 22px; margin-top:35px; } .links a, .contact-link { font-size:13px; } .sidebar-note { margin:22px 0 8px; } .content {max-width:none; margin-top:68px;} .posts{gap:58px;} .post-content{padding-top:18px;} .post h2{font-size:20px;} .post p{font-size:13px;} .more-link{margin-top:55px;} .preview-note{margin-top:55px;} }
@media (max-width:420px) { .layout {padding-left:20px;padding-right:20px;} .post-media__placeholder {left:14px;bottom:12px;font-size:8px;} .post h2{font-size:19px;} .name-rest{font-size:20px;} }
@media (prefers-reduced-motion: reduce) { html {scroll-behavior:auto;} .links a,.contact-link,.more-link{transition:none;} }

/* Nombre completo: MoMo Trust Display 400. Resto de textos: opción A original en MoMo Trust Sans. */
.full-name, .name-first, .name-rest { font-family:var(--font-display); font-weight:400; }

/* Vídeo real de YouTube: miniatura original, reproducción previa interacción. */
.video-frame {position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#CED9D4;}
.video-activate {position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#d2ddd8;color:inherit;display:block;}
.video-poster {position:absolute;inset:0;display:block;background:linear-gradient(135deg,rgba(38,64,59,.23),rgba(20,32,34,.35)),url('https://i.ytimg.com/vi/WhWc3b3KhnY/hqdefault.jpg') center center/cover no-repeat;transition:filter .2s;}
.video-activate:hover .video-poster{filter:brightness(.83);}
.play-disc {position:absolute;width:67px;height:67px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(245,244,240,.93);box-shadow:0 2px 28px rgba(0,0,0,.15);}
.play-triangle{display:block;width:0;height:0;border-left:17px solid #252A2C;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;}
.video-frame iframe {position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.post-credit {font-size:12px!important;margin-top:15px!important;color:var(--low)!important;}
.post-credit a {color:var(--fg);border-bottom:1px solid #a5b4b0;transition:color .2s,border-color .2s;}
.post-credit a:hover {color:var(--accent);border-bottom-color:var(--accent);}
@media(max-width:720px){.play-disc{width:58px;height:58px}}