/* Layout: an index. First screen, dark: a turning wireframe and an orange bead the visitor can throw around, the name
   set edge to edge with the one line and the contact buttons under it. Then one full-width row per app with its icon as a tilted
   3D tile, then three facts across the width. Color comes only from the app icons and the buttons' hover states. */
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --bg:#efefec;--ink:#111214;--muted:#64666b;--line:#d6d6d1;--hover:#e7e7e3;
  --mail:#e5534b;--in:#0a66c2;--on-color:#ffffff;
  --display:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,2.6vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0e10;--ink:#efefec;--muted:#9a9ca2;--line:#26272b;--hover:#16161a;
  --mail:#f0665e;--in:#3b8fe0;--on-color:#ffffff;
  color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* First screen */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--gutter) + env(safe-area-inset-top,0px)) var(--gutter) clamp(28px,5vh,56px);overflow:hidden}
#tiles,.tiles-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.topline,.hero-main{position:relative}
.topline{display:flex;justify-content:space-between;gap:16px;font:500 14px/1 var(--display);color:var(--muted)}
.topline a:hover{color:var(--ink)}
.hero-main{padding-top:6vh}
/* Sized so "Alejandro" fills the line between the gutters (about 4 em wide at this tracking), capped by screen height. */
.name{font:700 min(calc((100vw - 2 * var(--gutter)) / 4.1),28svh)/.84 var(--display);letter-spacing:-.055em;margin:0 0 0 -.04em}
.name .w{display:inline-block;white-space:nowrap}
.name .ch{display:inline-block;transform:translateY(.32em);opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{transform:none;opacity:1}}
.line{font:500 clamp(20px,2.4vw,32px)/1.25 var(--display);letter-spacing:-.01em;margin:clamp(18px,2.4vw,32px) 0 0;max-width:30ch}

/* Contact buttons: quiet line icons that take their color on hover */
.contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 14px;border-radius:999px;font:500 15px/1 var(--display);transition:background-color .25s,color .25s,border-color .25s}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn svg.fill{fill:currentColor;stroke:none}
/* Email is the main action: solid ink. LinkedIn is an outline on the page color, so neither blends into the grid. */
.btn-mail{background:var(--ink);color:var(--bg)}
.btn-in{background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.btn-in svg{color:var(--in)}
.btn-mail:hover{background:var(--mail);color:var(--on-color)}
.btn-in:hover{background:var(--in);border-color:var(--in);color:var(--on-color)}
.btn-in:hover svg{color:var(--on-color)}

/* App index */
.index{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.6vw,40px);padding:clamp(22px,3vw,40px) var(--gutter);border-bottom:1px solid var(--line);transition:background-color .3s}
.tile{--rx:10deg;--ry:-16deg;--lift:0px;display:block;width:clamp(76px,9.5vw,148px);aspect-ratio:1;perspective:700px}
.tile img{display:block;width:100%;height:100%;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 18px 22px rgba(0,0,0,.22)) drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.row-name{font:700 clamp(40px,7.2vw,128px)/.95 var(--display);letter-spacing:-.045em;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.row-text{font:500 clamp(17px,1.5vw,22px)/1.35 var(--display);color:var(--muted);max-width:28ch}
.row-url{display:block;margin-top:8px;font:500 13px/1 var(--display);letter-spacing:.04em;color:var(--ink)}
.row-meta{font:500 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:14px}
.arrow{font-size:22px;letter-spacing:0;color:var(--ink);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.row:hover{background:var(--hover)}
.row:hover .tile{--lift:24px}
.row:hover .row-name{transform:translateX(.06em)}
.row:hover .arrow{transform:translateX(6px)}

/* Three facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.facts div{padding:clamp(40px,7vw,96px) var(--gutter);display:flex;flex-direction:column;gap:10px}
.facts div + div{border-left:1px solid var(--line)}
.facts em{font:500 12px/1 var(--display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* One size for all three headlines, set by the longest (the first column lists three areas). */
.facts strong{font:700 clamp(28px,3vw,44px)/1.05 var(--display);letter-spacing:-.03em}
.facts span{color:var(--muted);font:500 clamp(16px,1.4vw,19px)/1.35 var(--display);max-width:24ch}

.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));font:500 14px/1.4 var(--display);color:var(--muted)}
.foot .contact{margin-top:0}

/* The facts close the page as a dark band, like the first screen, with a timeline: a dot for each column, the present one
   the bead's orange with its glow. */
.facts.dark{--bg:#0c0c0e;--ink:#ececea;--muted:#8d8f95;--line:#26272b;background:var(--bg);color:var(--ink);border-bottom:0}
.facts.timeline{position:relative;--dot-y:clamp(40px,7vw,96px)}
.facts.timeline div{position:relative;padding-top:calc(var(--dot-y) + 34px)}
.facts.timeline div + div{border-left:0}
.facts.timeline::before{content:"";position:absolute;left:0;right:0;top:var(--dot-y);height:1px;background:color-mix(in srgb,var(--ink) 22%,transparent);transform-origin:left center}
.facts.timeline div::before{content:"";position:absolute;left:var(--gutter);top:calc(var(--dot-y) - 4px);width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.facts.timeline div:nth-child(1)::before{background:var(--muted)}
.facts.timeline div:nth-child(2)::before{width:13px;height:13px;top:calc(var(--dot-y) - 6px);background:#DA5019;box-shadow:0 0 0 4px rgba(218,80,25,.16),0 0 22px rgba(218,80,25,.6)}
.facts.timeline div:nth-child(3)::before{border:1px solid var(--ink);background:var(--bg)}

/* The timeline is drawn in segments, solid from "been" to "now", dashed and fainter towards "going" and
   fading out past it; a small orange light runs along the past once, then the "now" dot glows slowly, like the bead.
   The footer goes dark too, so the facts and the footer close the page as one dark block. */
.facts.path::before{display:none}
.facts.path div::after{content:"";position:absolute;top:var(--dot-y);height:1px;transform-origin:left center}
.facts.path div:nth-child(1)::after{left:calc(var(--gutter) + 9px);width:calc(100% - 9px);background:color-mix(in srgb,var(--ink) 34%,transparent)}
.facts.path div:nth-child(2)::after{left:calc(var(--gutter) + 13px);width:calc(100% - 13px);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 5px,transparent 5px 11px)}
.facts.path div:nth-child(3)::after{left:calc(var(--gutter) + 9px);right:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 26%,transparent) 0 5px,transparent 5px 11px);-webkit-mask-image:linear-gradient(to right,#000 30%,transparent);mask-image:linear-gradient(to right,#000 30%,transparent)}
.facts.path::after{content:"";position:absolute;top:calc(var(--dot-y) - 1px);left:var(--gutter);width:42px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(218,80,25,0),#DA5019 70%,#ffb08a);box-shadow:0 0 12px rgba(218,80,25,.75);opacity:0;pointer-events:none}
.facts.path.pre div::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.facts.path.pre.in div::after{transform:none}
.facts.path.pre div:nth-child(1)::after{transition-delay:.1s}
.facts.path.pre div:nth-child(2)::after{transition-delay:.55s}
.facts.path.pre div:nth-child(3)::after{transition-delay:.8s}
.facts.path.in::after{animation:runlight 1.15s cubic-bezier(.45,0,.25,1) .35s forwards}
.facts.path.in div:nth-child(2)::before{animation:breathe 3.6s ease-in-out 1.5s infinite}
@keyframes runlight{0%{left:var(--gutter);opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% / 3 + var(--gutter) - 34px);opacity:0}}
@keyframes breathe{50%{box-shadow:0 0 0 7px rgba(218,80,25,.10),0 0 34px rgba(218,80,25,.85)}}
.close-dark .foot{--bg:#0c0c0e;--ink:#ececea;--muted:#8d8f95;--line:#26272b;background:var(--bg)}
.close-dark .facts.dark{box-shadow:0 2px 0 var(--bg)}   /* no light seam where the facts meet the footer */

/* The facts come in been, am, going (js/home.js adds .pre, then .in when they scroll into view). */
.facts.pre div > *,.facts.pre.timeline div::before{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.facts.pre.timeline::before{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.facts.pre.in div > *,.facts.pre.in.timeline div::before{opacity:1;transform:none}
.facts.pre.in.timeline::before{transform:scaleX(1)}
.facts.pre div:nth-child(2) > *,.facts.pre.timeline div:nth-child(2)::before{transition-delay:.18s}
.facts.pre div:nth-child(3) > *,.facts.pre.timeline div:nth-child(3)::before{transition-delay:.36s}

@media (max-width:820px){
  .row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .row-text,.row-meta{grid-column:2}
  .tile{grid-row:span 3;align-self:start}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div + div{border-left:0;border-top:1px solid var(--line)}
  /* On phones the timeline runs down the left edge, a dot at the top of each fact. */
  .facts.timeline div{padding-top:clamp(40px,7vw,96px);padding-left:calc(var(--gutter) + 30px)}
  .facts.timeline div + div{border-top:0}
  .facts.timeline::before{left:calc(var(--gutter) + 4px);right:auto;top:calc(var(--dot-y) + 2px);bottom:var(--dot-y);width:1px;height:auto;transform-origin:center top}
  .facts.pre.timeline::before{transform:scaleY(0)}
  .facts.pre.in.timeline::before{transform:scaleY(1)}
  .facts.timeline div::before{top:calc(clamp(40px,7vw,96px) + 2px)}
  .facts.timeline div:nth-child(2)::before{top:clamp(40px,7vw,96px)}
  .facts.path div::after{top:calc(var(--dot-y) + 13px);left:calc(var(--gutter) + 4px)!important;width:1px!important;height:calc(100% - 13px);transform-origin:center top}
  .facts.path div:nth-child(2)::after{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 5px,transparent 5px 11px)}
  .facts.path div:nth-child(3)::after{right:auto;height:calc(100% - var(--dot-y) - 13px);background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--ink) 26%,transparent) 0 5px,transparent 5px 11px);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
  .facts.path.pre div::after{transform:scaleY(0)}
  .facts.path::after{display:none}
}
@media (hover:none){
  .tile{--rx:6deg;--ry:-10deg}
  .row:hover{background:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .facts.path::after,.facts.path div:nth-child(2)::before{animation:none}
  .name .ch{animation:none;transform:none;opacity:1}
  .row,.row-name,.arrow,.tile img,.btn{transition:none}
}

/* The first screen is dark above the light page; js/hero.js draws the wireframe and the bead. */
.hero.dark{--bg:#0c0c0e;--ink:#ececea;--muted:#8d8f95;--line:#26272b;background:var(--bg);color:var(--ink);color-scheme:dark}
.hero .bead{position:absolute;top:0;left:0;user-select:none;-webkit-user-drag:none;will-change:transform;cursor:grab;touch-action:none}
.hero.grabbing,.hero.grabbing .bead{cursor:grabbing;user-select:none}
@media (prefers-reduced-motion:reduce){.hero .bead{cursor:default;pointer-events:none}}
.bead-hint{position:absolute;top:0;left:0;z-index:3;pointer-events:none;white-space:nowrap;font:500 11px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .2s}
.bead-hint.on{opacity:1}
.bead-hint.on::after{content:"";display:inline-block;width:1px;height:11px;margin-left:3px;vertical-align:-1px;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* Legal page and 404: one readable column on the page's own colours. */
.foot .legal-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot .legal-link:hover{color:var(--ink)}
.doc{max-width:68ch;margin:0 auto;padding:calc(48px + env(safe-area-inset-top,0px)) var(--gutter) 96px;font:400 16px/1.6 var(--text)}
.doc h1{font:700 clamp(34px,5vw,56px)/1.05 var(--display);letter-spacing:-.03em;margin:28px 0 8px}
.doc h2{font:600 20px/1.3 var(--display);margin:40px 0 10px}
.doc p{margin:0 0 14px;color:var(--ink)}
.doc a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc hr{border:0;border-top:1px solid var(--line);margin:48px 0 8px}
.doc-back{font:500 14px/1 var(--display);color:var(--muted)}
.doc-back a{text-decoration:none}
.doc-date{color:var(--muted)!important;font-size:14px}

/* Email and LinkedIn at the top as round icon buttons; the footer keeps the address written out. */
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;gap:0}
.btn-icon svg{width:20px;height:20px}

/* The email panel (js/home.js): both addresses, each with Copy. Both places it opens are dark. */
.contact{position:relative}
.mail-pop{position:absolute;left:0;top:calc(100% + 10px);z-index:10;width:max-content;max-width:calc(100vw - 2 * var(--gutter));padding:6px;border-radius:16px;background:#17171a;border:1px solid #2a2b30;box-shadow:0 18px 40px rgba(0,0,0,.45);color:#ececea}
.mail-pop[hidden]{display:none}
/* Both sets of buttons sit low in their section, so the panel opens upward. */
.hero .mail-pop{top:auto;bottom:calc(100% + 10px)}
.foot .mail-pop{top:auto;bottom:calc(100% + 10px);left:auto;right:0;text-align:left}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 12px 12px 14px}
.mail-row + .mail-row{border-top:1px solid #26272b}
.mail-who{flex-basis:100%;font:500 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#8d8f95}
.mail-addr{font:500 16px/1.3 var(--display);margin-right:auto;user-select:all}
.mail-acts{display:flex;gap:6px}
.mail-acts button,.mail-acts a{font:500 13px/1 var(--display);padding:8px 12px;border-radius:999px;border:1px solid #34353b;background:none;color:inherit;cursor:pointer;transition:background-color .2s,border-color .2s}
.mail-acts button:hover,.mail-acts a:hover{background:#26272b;border-color:#3d3e45}
.mail-acts button:focus-visible,.mail-acts a:focus-visible{outline:2px solid #ececea;outline-offset:2px}
@media (max-width:820px){.foot .mail-pop{left:0;right:auto}}