/* letitsid.com hub. One screen: portrait, name, index; sections open in place (:target panels).
   Motion is transform/opacity only and honours prefers-reduced-motion. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ink: #0d0d0c;
  --ink-2: #141413;
  --paper: #ecebe7;
  --mute: rgba(236, 235, 231, .56);   /* AA on --ink and --ink-2 */
  --dim: rgba(236, 235, 231, .40);    /* decorative numbers only */
  --line: rgba(236, 235, 231, .12);
  --pad: clamp(20px, 3.2vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --slow: 900ms;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--paper);
  font: 400 15px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
img { display: block; max-width: 100%; }
p { margin: 0; }
.label {
  font-size: 11px; line-height: 1; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}
.num { font-variant-numeric: tabular-nums; color: var(--dim); }
[data-placeholder], [data-placeholder] .t { color: var(--mute); }
.skip { position: fixed; left: var(--pad); top: -100px; z-index: 20; padding: 10px 14px; background: var(--paper); color: var(--ink); }
.skip:focus { top: var(--pad); }

/* The left column is only as wide as the name needs ("Sid" sets about 1.145em wide); the portrait and the
   panels take the rest. Set on the body so the stage and the panels share it. */
.hub {
  --name-size: min(34vw, 64vh);
  --left: calc(var(--name-size) * 1.145 + var(--pad) * 2);
}

/* ---------- Stage ---------- */
/* In normal flow with min-height: one screen when it fits, scrolls (never clips) when the window is too short or zoomed. */
.stage {
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-columns: var(--left) 1fr;
}
.copy {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) * .7);
  min-width: 0;
}
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.facets { display: flex; gap: 1.6em; }
.copy > nav { align-self: center; margin-left: 50%; }
.index { margin: 0; padding: 0; list-style: none; }
.index li { overflow: hidden; }
.index a {
  display: flex; align-items: center;
  padding: 8px 0; min-height: 44px;
  font-size: clamp(18px, 1.55vw, 24px); font-weight: 450; letter-spacing: -.012em;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
@media (hover: hover) {
  .index:hover a { opacity: .38; }
  .index a:hover, .index a:focus-visible { opacity: 1; transform: translateX(10px); }
}
/* With a section open, the empty part of the left side closes it (hub.js). */
.hub:has(.panel:target) .copy { cursor: pointer; }
.name {
  margin: 0;
  font-size: var(--name-size);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .76;
  margin-left: -.06em;
  white-space: nowrap;
  overflow: hidden;
  padding-top: .04em;
}
.name span { display: inline-block; }
.name span:first-child { margin-right: -.025em; }

/* ---------- Portrait ---------- */
.photo { position: relative; overflow: hidden; background: #d9d9d6; margin: 0; }
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 54% 30%;
  transition: opacity .7s var(--ease), transform 1.2s var(--ease);
}
.photo .alt { opacity: 0; object-fit: contain; padding: 22%; background: #eee; }
.photo .alt.on { opacity: 1; }
.photo .main.off { opacity: 0; }
.photo .veil { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); }

/* ---------- Panels ---------- */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  left: var(--left);
  background: var(--ink-2);
  padding: var(--pad);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
  z-index: 5;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.panel:focus { outline: none; }
.panel:target {
  transform: none; visibility: visible;
  transition: transform var(--slow) var(--ease), visibility 0s;
}
.panel > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.panel:target > * { opacity: 1; transform: none; transition-delay: .32s; }
.panel:target > *:nth-child(2) { transition-delay: .4s; }
.panel:target > *:nth-child(3) { transition-delay: .48s; }
.panel:target > *:nth-child(4) { transition-delay: .56s; }
.hub:has(.panel:target) .photo img { transform: scale(1.06); }
.hub:has(.panel:target) .index a { opacity: .38; }
.hub:has(#projects:target) .index a[href="#projects"],
.hub:has(#experience:target) .index a[href="#experience"],
.hub:has(#music:target) .index a[href="#music"],
.hub:has(#contact:target) .index a[href="#contact"] { opacity: 1; transform: translateX(10px); }
.hub:has(.panel:target) .index a:hover, .hub:has(.panel:target) .index a:focus-visible { opacity: 1; }

.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(48px, 9vh, 96px);
}
.close { position: relative; display: block; width: 44px; height: 44px; margin: -14px -13px -14px 0; color: var(--mute); transition: color .3s, transform .5s var(--ease); }
.close::before, .close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; margin: -.75px 0 0 -10px; background: currentColor; }
.close::before { transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }
.close:hover { transform: rotate(90deg); }
.close:hover { color: var(--paper); }
.panel h2 {
  margin: 0 0 clamp(28px, 5vh, 48px);
  font-size: clamp(44px, 5.4vw, 84px); font-weight: 500; letter-spacing: -.045em; line-height: .95;
}
.lede { max-width: 38ch; color: var(--mute); margin: -16px 0 32px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
/* Hovering a list brings one row forward and lets the others fall back (same idea as the main menu). */
@media (hover: hover) {
  .rows li { transition: opacity .4s var(--ease); }
  .rows:hover li { opacity: .42; }
  .rows li:hover, .rows li:focus-within { opacity: 1; }
  .rows li:hover .d, .rows li:hover .x, .rows li:hover .end, .rows li:hover .ico, .rows li:hover .go,
  .rows li:hover .row.more .t, .rows li:hover .row.edu .t { color: var(--paper); }
  .row .d, .row .x, .row .end, .row.more .t, .row.edu .t { transition: color .3s; }
}
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center;
  padding: 18px 0; min-height: 64px;
}
.row .t { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.row .d { display: block; color: var(--mute); font-size: 14px; margin-top: 2px; }
.row .end { display: flex; align-items: center; gap: 16px; color: var(--mute); font-variant-numeric: tabular-nums; font-size: 14px; }
.row .go { color: var(--dim); transition: transform .5s var(--ease), color .3s; }
a.row:hover .go, a.row:focus-visible .go { transform: translate(3px, -3px); color: var(--paper); }
.row.more .t { font-weight: 450; color: var(--mute); }
/* Contact rows: platform mark, name, arrow. Marks are Font Awesome Free icons (CC BY 4.0, fontawesome.com). */
.row.link { grid-template-columns: 22px 1fr auto; gap: 0 18px; }
.ico { width: 20px; height: 20px; fill: currentColor; color: var(--mute); transition: color .3s; justify-self: center; }
a.row:hover .ico, a.row:focus-visible .ico { color: var(--paper); }
.row .x { display: block; color: var(--mute); font-size: 13px; margin-top: 6px; max-width: 42ch; }
.row.job { align-items: start; }
.row.job .end { padding-top: 4px; }
.row.edu { min-height: 0; padding: 14px 0; }
.row.edu .t { font-size: 15px; font-weight: 450; color: var(--mute); line-height: 1.35; }
.row.edu .d { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; order: -1; }
.row.edu > span:first-child { display: flex; flex-direction: column; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }

.mail {
  display: inline-block; font-size: clamp(28px, 3.2vw, 46px); font-weight: 450; letter-spacing: -.03em;
  margin-bottom: 48px; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

/* ---------- Load sequence (CSS only) ---------- */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes unveil { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
.photo .veil { animation: unveil 1.3s var(--ease) .15s both; transform-origin: 100% 50%; }
.photo .main { animation: settle 2.2s var(--ease) .15s backwards; }
.name span { animation: rise 1.2s var(--ease) both; }
.name span:nth-child(1) { animation-delay: .55s; }
.name span:nth-child(2) { animation-delay: .62s; }
.name span:nth-child(3) { animation-delay: .69s; }
.index li a { animation: rise 1s var(--ease) both; }
.index li:nth-child(1) a { animation-delay: .9s; }
.index li:nth-child(2) a { animation-delay: .96s; }
.index li:nth-child(3) a { animation-delay: 1.02s; }
.index li:nth-child(4) a { animation-delay: 1.08s; }
.top { animation: fade 1.2s ease 1.2s both; }

/* ---------- Phone ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(38svh, 1fr) auto; }
  .photo { grid-row: 1; }
  .photo img { object-position: 50% 26%; }
  .photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(to bottom, rgba(13,13,12,0), var(--ink)); pointer-events: none; }
  .copy {
    grid-row: 2;
    grid-template-rows: auto auto auto;
    padding: 18px var(--pad) calc(12px + env(safe-area-inset-bottom));
  }
  .name { order: 0; font-size: min(40vw, 24svh); }
  .copy > nav { order: 1; margin-left: 0; }
  .index { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .index a { font-size: 18px; padding: 10px 0; }
  .top { order: 2; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
  .panel { left: 0; transform: translateY(101%); padding-top: calc(var(--pad) + env(safe-area-inset-top)); padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom)); }
  .panel-head { margin-bottom: 40px; }
  .photo .veil { transform-origin: 50% 0; animation-name: unveil-y; }
  @keyframes unveil-y { from { transform: scaleY(1); } to { transform: scaleY(0); } }
}
@media (max-width: 860px) and (orientation: portrait) and (max-height: 700px) {
  .name { font-size: 21svh; }
  .index a { padding: 6px 0; }
}
/* Short landscape windows (phones on their side): two columns stay, the name is capped by height and the index goes 2x2. */
@media (max-height: 520px) and (orientation: landscape) {
  .hub { --name-size: min(34vw, 56vh); }
  .top > .label:not(.facets) { display: none; } /* the narrow column has no room for the domain label */
  .copy > nav { margin-left: 0; }
  .index { display: grid; grid-template-columns: auto auto; column-gap: 16px; justify-content: start; }
  .index a { font-size: 16px; padding: 4px 0; }
  .panel-head { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .photo .veil { display: none; }
}

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad); }
.lost h1 { margin: 0; align-self: end; font-size: min(30vw, 50vh); font-weight: 500; letter-spacing: -.065em; line-height: .76; margin-left: -.06em; }
.lost p { margin-top: 24px; color: var(--mute); }
.lost p a { color: var(--paper); border-bottom: 1px solid var(--line); }