/* Simon Laserna — QUIET ABOUT.
   The quiet, crafted language of the ledger (warm near-monochrome paper,
   Spectral for the voice, a little IBM Plex Mono apparatus, one terracotta
   whisper), restructured into a simple personal about-page. Mobile-first, plain
   responsive CSS: type is clamp() only, so nothing depends on a font metric or
   a script and nothing can overflow. */

@font-face{font-family:"Spectral";src:url("fonts/spectral.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-med.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --mono-fam:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --paper:#f4f1ea;
  --ink:#1f1d1a;
  --muted:#5a544b;         /* 6.6:1 */
  --hair:rgba(31,29,26,.14);
  --accent:#8f3f28;        /* 6.4:1 */

  --name:clamp(2.2rem, 1.5rem + 3.1vw, 3.2rem);
  --lede:clamp(1.18rem, 1.06rem + 0.6vw, 1.4rem);
  --body:clamp(1.05rem, 1.0rem + 0.25vw, 1.18rem);
  --mono:clamp(0.68rem, 0.64rem + 0.18vw, 0.75rem);

  --pad:clamp(1.25rem, 6vw, 2.5rem);
  --gap:clamp(2.8rem, 8vh, 4.8rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#191713;
    --ink:#e9e4d9;
    --muted:#9a9184;       /* 5.8:1 */
    --hair:rgba(233,228,217,.16);
    --accent:#d98a5c;      /* 6.6:1 */
  }
}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--body);
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,p,ul{margin:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.sheet{
  max-width:44rem;
  margin-inline:auto;
  padding:clamp(2.4rem,8vh,4.5rem) var(--pad) clamp(3rem,10vh,5rem);
}

.mono{
  font-family:var(--mono-fam);
  font-weight:500;
  font-size:var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}

.entry + .entry{margin-block-start:var(--gap)}

/* ---------- masthead: portrait, then who ---------- */
.mast{
  padding-block-end:clamp(1.6rem,5vh,2.4rem);
  border-block-end:1px solid var(--hair);
}
.avatar{
  inline-size:clamp(104px,26vw,132px);
  block-size:auto;              /* let aspect-ratio win over the HTML height attr */
  aspect-ratio:1;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 0 0 1px var(--hair);
  display:block;
  margin-block-end:clamp(1.2rem,3.5vh,1.8rem);
  max-inline-size:100%;
}
.name{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--name);
  line-height:1.04;
  letter-spacing:-.012em;
}
.role{margin-block-start:.85rem}
.mast__loc{margin-block-start:.5rem;letter-spacing:.11em}

/* ---------- ledger row: label rail + body ---------- */
.row{display:grid;grid-template-columns:1fr;gap:.7rem}
.label{padding-block-start:.15em;align-self:start}
.row__body{min-width:0}

.prose{
  color:var(--ink);
  line-height:1.62;
  max-inline-size:58ch;
  text-wrap:pretty;
}
.prose + .prose{margin-block-start:1rem}
.lede{font-size:var(--lede);line-height:1.5;letter-spacing:-.002em}

/* points */
.points{display:flex;flex-direction:column}
.point{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.15rem 1.5rem;
  padding-block:.7rem;
  border-block-start:1px solid var(--hair);
}
.point:first-child{border-block-start:0;padding-block-start:.1rem}
.point__l{font-size:var(--body);line-height:1.3}
.point__n{color:var(--muted);text-align:right;letter-spacing:.06em}

/* colophon / contact */
.colophon__links{margin-block-start:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline}
.link{
  display:inline-block;
  min-block-size:44px;
  line-height:44px;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat left 86% / 0% 1px;
  transition:background-size .3s var(--ease),color .2s var(--ease);
}
.link:not(.mono){font-size:var(--lede)}
.link.mono{color:var(--muted)}
.link:hover,.link:focus-visible{color:var(--accent);background-size:100% 1px}
.colophon__foot{margin-block-start:2.2rem;display:flex;align-items:center;gap:.55rem}
.tick{inline-size:6px;block-size:6px;background:var(--accent);display:inline-block;flex:0 0 auto}

/* ---------- desktop: the two-column rhythm ---------- */
@media (min-width:44rem){
  .row{grid-template-columns:9.5rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}
  .label{grid-column:1}
  .row__body{grid-column:2;max-inline-size:40rem}
}

/* ---------- motion: one quiet fade-up on load, base visible ---------- */
@media (prefers-reduced-motion:no-preference){
  .entry{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * .07s)}
  .sheet > .entry:nth-child(1){--i:0}
  .sheet > .entry:nth-child(2){--i:1}
  .sheet > .entry:nth-child(3){--i:2}
  .sheet > .entry:nth-child(4){--i:3}
  .sheet > .entry:nth-child(5){--i:4}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  :root{--paper:#fff;--ink:#000;--muted:#444;--hair:#ccc;--accent:#000}
  .sheet{max-width:none}
  .link{background:none}
  .avatar{box-shadow:none;border:1px solid #ccc}
}