/* ── Sistema tipográfico Palmo ──────────────────────
   1. TITULARES / BRAND    → --display → Instrument Serif
   2. TEXTO / UI           → --sans    → Manrope
   3. CÓDIGO / METADATA    → --mono    → JetBrains Mono */
  :root{
    --display:'Instrument Serif', Georgia, serif;
    --serif:var(--display);
    --sans:'Manrope', system-ui, sans-serif;
    --mono:'JetBrains Mono', 'Courier New', monospace;
    --gutter:clamp(1.1rem, 3.5vw, 3.2rem);
    --tag:#F5311D;
    --ease:cubic-bezier(.72,0,.18,1);
  }
  /* ── LIGHT mode tokens ──────────────────────────── */
  html, html[data-theme="light"] {
    --paper:   #ffffff;
    --ink:     #0e0e0e;
    --cell-bg: #EEEAE2;
    --switch-bg:     rgba(0,0,0,.10);
    --switch-ink:    #0e0e0e;
    --switch-on-bg:  #0e0e0e;
    --switch-on-ink: #ffffff;
    --panel-bg:   #f8f7f5; --panel-ink:  #0e0e0e;
    --panel-body: #3a3835; --panel-muted:#8a8782;
    --panel-rule: rgba(14,14,14,.08);
    --lb-bg:  rgba(255,255,255,.97);
    --lb-ink: #0e0e0e;
  }
  /* ── DARK mode tokens ──────────────────────────── */
  html[data-theme="dark"] {
    --paper:   #0e0e0e;
    --ink:     #f0ede8;
    --cell-bg: #1a1a1a;
    --switch-bg:     rgba(240,237,232,.12);
    --switch-ink:    #f0ede8;
    --switch-on-bg:  #f0ede8;
    --switch-on-ink: #0e0e0e;
    --panel-bg:   #111110; --panel-ink:  #f0ede8;
    --panel-body: #b0ada6; --panel-muted:#706d68;
    --panel-rule: rgba(240,237,232,.12);
    --lb-bg:  rgba(0,0,0,.97);
    --lb-ink: #f0ede8;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; overflow:hidden; }
  body{ background:var(--paper); color:var(--ink); font-family:var(--sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden;
    transition:background .4s ease, color .4s ease; }
  html{ background:var(--paper); transition:background .4s ease; }
  ::selection{ background:var(--ink); color:var(--paper); }
  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid currentColor; outline-offset:4px; }

  /* ── top bar ── */
  .topbar{ position:fixed; inset:0 0 auto 0; z-index:50;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:1.15rem var(--gutter); font-family:var(--mono); font-weight:400; font-size:.76rem;
    color:var(--ink); }
  .topbar a, .topbar button{ color:var(--ink); background:none; border:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; cursor:inherit; padding:0; }
  .tb-center{ justify-self:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
  .tb-left{ justify-self:start; letter-spacing:.01em; }
  .tb-right{ justify-self:end; }

  /* ══════════════════════════════════════════════════════════════
     HOME — layout container
  ══════════════════════════════════════════════════════════════ */
  .home{ position:relative; min-height:100svh; display:flex; align-items:center;
    padding:6rem var(--gutter) 7rem; }

  body.view-grid .home{ display:block; height:100svh; overflow-y:auto; padding:5.4rem var(--gutter) 6rem; }
  body.view-journal .home{ position:fixed !important; inset:0 !important; overflow-y:auto !important; padding:0 !important; display:block !important; }
  body.view-journal #journal{ display:block !important; width:100% !important; box-sizing:border-box; padding:clamp(48px,5vw,72px) var(--gutter) 4rem; }

  /* ══════════════════════════════════════════════════════════════
     SELECTED PROJECTS INDEX
     Names inline large serif, wrap naturally.
     Categories as small superscript labels.
     Active: full opacity. Dimmed: 0.08 opacity.
     Image reveals on hover, fixed position left.
  ══════════════════════════════════════════════════════════════ */
  /* ── INDEX — original layout, cursor-following image ── */
  #index{ width:100%; text-align:right; font-family:var(--display); font-weight:400;
    font-size:clamp(.95rem, 2.1vw, 2rem); line-height:1.2; letter-spacing:-.01em; word-spacing:.02em; }
  /* crossfade: sections stay in DOM, opacity transitions */
  #index, #journal, #grid{
    opacity:0; pointer-events:none;
    transition:opacity .55s var(--ease);
    position:absolute; inset:0;
  }
  /* active states */
  body.view-index  #index  { opacity:1; pointer-events:auto; position:relative; }
  body.view-journal #journal{ opacity:1; pointer-events:auto; position:relative; }
  body.view-grid   #grid   { opacity:1; pointer-events:auto; position:relative; }
  /* keep display rules that let layout work */
  body.view-grid #index{ display:none; }
  body.view-journal #index{ display:none; }
  body.view-journal #float-img{ visibility:hidden !important; opacity:0 !important; }
  body.view-grid    #float-img{ visibility:hidden !important; opacity:0 !important; }

  /* Category label — superscript mono */
  .cat{ font-family:var(--mono); font-weight:400; font-size:clamp(.68rem,.88vw,.9rem);
    letter-spacing:.02em; vertical-align:1.7em; color:var(--ink); margin-left:.5em; white-space:nowrap;
    opacity:0; transition:opacity .6s ease .1s; }
  #index.lit .cat{ opacity:.72; }

  /* Project name */
  .name{ position:relative; white-space:nowrap; margin-inline:.06em; color:var(--ink);
    transition:opacity .35s ease; }

  /* Mask reveal — nm-mask clips, nm-txt slides up */
  .nm-mask{ display:inline-block; overflow:hidden; vertical-align:bottom;
    padding:.02em .05em .16em; margin:0 -.05em -.16em; }
  .nm-txt{ display:inline-block; transform:translateY(116%);
    transition:transform .9s var(--ease); transition-delay:var(--d,0s); }
  .name.revealed .nm-txt{ transform:translateY(0); }

  /* Category tag pill — appears on hover */
  .ix-tag{
    position: absolute;
    top: 80%;
    right: 0;
    font-family: var(--mono);
    font-size: clamp(.58rem, .72vw, .72rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--tag-color, #E8412A);
    color: #fff;
    padding: .28em .55em .26em;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .25s var(--ease);
  }

  .name.active .ix-tag{
    opacity: 1;
    transform: translateY(0);
  }

  /* Hover states */
  .name.dim{ opacity:.1; }
  .name.active{ opacity:1; z-index:6; }
  /* When any name is active, dim cats too */
  .name.dim ~ .cat,
  #index.previewing .cat{ opacity:.12; }

  /* ══════════════════════════════════════════════════════════════
     FLOATING IMAGE — fixed center-left, mask reveal
  ══════════════════════════════════════════════════════════════ */
  /* ── Float image: fixed position band left, uniform size ── */
  #float-img{
    position: fixed;
    left: var(--fi-x, 4vw);
    top:  var(--fi-y, 50%);
    transform: translateY(-50%);
    z-index: 4;
    pointer-events: none;
    width: clamp(200px, 24vw, 380px);
    overflow: hidden;
    visibility: hidden;
    transition: left .65s var(--ease), top .65s var(--ease),
                width .65s var(--ease), height .65s var(--ease),
                transform .65s var(--ease);
  }
  #float-img.on{
    visibility: visible;
  }
  /* ── Project expand: float grows to fill viewport ── */
  #float-img.expanding{
    left: 0 !important;
    top:  0 !important;
    width:  100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 999;
    pointer-events: none;
  }
  #float-img.expanding img{
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    transform: none !important;
    transition: none;
  }
  /* Page-out overlay that fades in on top of the image */
  #proj-exit-overlay{
    position: fixed; inset: 0; z-index: 998;
    background: var(--paper);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  #proj-exit-overlay.fade-in{ opacity: 1; }

  #float-img img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
    object-position: center;
    /* JS overrides transition inline; this is the fallback */
    transform: translateY(102%);
    transition: transform .85s var(--ease);
  }



  /* ══════════════════════════════════════════════════════════════
     GRID VIEW
  ══════════════════════════════════════════════════════════════ */
  #grid{ display:grid; width:100%; grid-template-columns:repeat(auto-fill, minmax(clamp(140px, 16vw, 280px), 1fr)); gap:clamp(.55rem,1.1vw,1.2rem); visibility:hidden; }
  body.view-grid #grid{ display:grid; visibility:visible; }
  /* body.view-grid #grid handled above */
  .cell{ all:unset; aspect-ratio:4/5; overflow:hidden; background:var(--cell-bg); cursor:inherit; display:block;
    opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  .cell.in{ opacity:1; transform:none; }
  .cell::before{
    content:''; display:block; width:100%; height:100%;
    background: linear-gradient(135deg,
      hsl(calc(var(--cell-hue, 0) * 1deg), 8%, 14%) 0%,
      hsl(calc(var(--cell-hue, 0) * 1deg + 40deg), 6%, 22%) 100%);
    transition: opacity .4s var(--ease);
  }
  body[data-theme="light"] .cell::before{
    background: linear-gradient(135deg,
      hsl(calc(var(--cell-hue, 0) * 1deg), 10%, 88%) 0%,
      hsl(calc(var(--cell-hue, 0) * 1deg + 40deg), 8%, 78%) 100%);
  }
  .cell img{ display:none !important; }
  .cell:hover::before{ opacity:.7; }

  /* ══════════════════════════════════════════════════════════════
     MODE SWITCHER PILL
  ══════════════════════════════════════════════════════════════ */
  .switch{ position:fixed; left:50%; bottom:clamp(1.3rem,4vh,2.4rem); transform:translateX(-50%);
    z-index:55; display:flex; gap:.2rem; padding:.28rem; background:rgba(20,20,20,0.88); border-radius:999px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.14); box-shadow:0 8px 32px rgba(0,0,0,0.55);
    transition:background .5s var(--ease); }
  .switch button{ font-family:var(--sans); font-size:.92rem; font-weight:500; border:0; cursor:inherit;
    padding:.55rem 1.5rem; border-radius:999px; background:transparent; color:rgba(255,255,255,0.5); transition:background .2s ease, color .2s ease; }
  .switch button[aria-pressed="true"]{ background:#ffffff; color:#111111; }
  .switch button:hover:not([aria-pressed="true"]){ color:rgba(255,255,255,0.9); }

  /* ══════════════════════════════════════════════════════════════
     STUDIO (ABOUT) PANEL
  ══════════════════════════════════════════════════════════════ */
  .pagedim{ position:fixed; inset:0; z-index:42; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
  body.about-open .pagedim{ opacity:1; pointer-events:auto; }
  .about{ position:fixed; top:0; right:0; bottom:0; z-index:60; width:clamp(320px, 56vw, 920px);
    background:var(--panel-bg); color:var(--panel-ink); padding:clamp(3.8rem,8vh,5.5rem) var(--gutter) clamp(2rem,5vh,3.5rem);
    overflow-y:auto; transform:translateX(100%); transition:transform .65s var(--ease), background .5s var(--ease); box-shadow:-30px 0 80px rgba(0,0,0,.25); }
  @media(max-width:640px){ .about{ width:100%; } }
  body.about-open .about{ transform:translateX(0); }
  .about-close{ position:absolute; top:1.15rem; right:var(--gutter); font-family:var(--mono); font-weight:400; font-size:.76rem; color:var(--panel-ink); background:none; border:0; cursor:inherit; padding:0; }
  .about-close:hover{ text-decoration:underline; }
  .about-inner{ max-width:48rem; }
  .about-inner > *{ opacity:0; transform:translateY(16px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
  body.about-open .about-inner > *{ opacity:1; transform:none; }
  body.about-open .about-inner > *:nth-child(1){ transition-delay:.14s; }
  body.about-open .about-inner > *:nth-child(2){ transition-delay:.20s; }
  body.about-open .about-inner > *:nth-child(3){ transition-delay:.26s; }
  body.about-open .about-inner > *:nth-child(4){ transition-delay:.30s; }
  body.about-open .about-inner > *:nth-child(5){ transition-delay:.34s; }
  body.about-open .about-inner > *:nth-child(6){ transition-delay:.38s; }
  body.about-open .about-inner > *:nth-child(7){ transition-delay:.42s; }
  body.about-open .about-inner > *:nth-child(8){ transition-delay:.46s; }
  .about-statement{ font-family:var(--display); font-weight:400; color:var(--panel-ink);
    font-size:clamp(1.4rem,2.6vw,2.4rem); line-height:1.2; letter-spacing:-.01em; margin:0 0 .9rem; max-width:22ch;
    opacity:1 !important; transform:none !important; }
  /* word-reveal spans */
  .stmt-word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
  .stmt-word-inner{
    display:inline-block;
    transform:translateY(110%);
    transition:transform .72s var(--ease);
    transition-delay:var(--wd,0s);
  }
  body.about-open .stmt-word-inner{ transform:translateY(0); }
  /* intro also gets a subtler reveal — fade+slide, slightly later */
  .about-intro{
    opacity:0 !important;
    transform:translateY(10px) !important;
    transition:opacity .6s var(--ease), transform .6s var(--ease) !important;
    transition-delay:.55s !important;
  }
  body.about-open .about-intro{ opacity:1 !important; transform:none !important; }
  .about-intro{ color:var(--panel-body); font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.55; max-width:50ch; margin:0; } /* base — animation overrides above */
  .rule{ height:1px; background:var(--panel-rule); margin:1.1rem 0; }
  .about-cols, .about-foot{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 2.4rem; }
  @media(max-width:560px){ .about-cols, .about-foot{ grid-template-columns:1fr; gap:2rem; } }
  .about h4{ font-family:var(--mono); font-weight:400; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:.5; color:var(--panel-ink); margin:0 0 .7rem; }
  .list{ list-style:none; margin:0; padding:0; }
  .list li{ padding:.28rem 0; color:var(--panel-body); line-height:1.4; }
  .list li a{ color:var(--panel-body); border-bottom:1px solid transparent; }
  .list li a:hover{ border-color:var(--panel-body); }
  .list .yr{ color:var(--panel-muted); font-size:.84rem; }
  .about .muted{ display:block; color:var(--panel-muted); font-size:1rem; line-height:1.5; }
  .about a.muted:hover{ color:var(--panel-ink); }
  .about .socials{ display:flex; flex-wrap:wrap; gap:1.2rem; }
  .about .socials a{ font-weight:600; color:var(--panel-ink); border-bottom:1px solid transparent; padding-bottom:2px; }
  .about .socials a:hover{ border-color:var(--panel-ink); }
  .wm-logo{ display:block; height:18px; width:auto; }
  .exp-item{ padding:.35rem 0; }
  .exp-item .er{ font-weight:600; color:var(--panel-ink); display:block; line-height:1.25; }
  .exp-item .eo{ color:var(--panel-body); }
  .exp-item .ey{ color:var(--panel-muted); font-size:.84rem; }
  .about-contact-cta{
    display:inline-block;
    font-family:var(--sans);font-size:.72rem;font-weight:400;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--panel-ink);
    border:1px solid rgba(255,255,255,.25);
    padding:.45em 1em;
    transition:background .2s,color .2s;text-decoration:none;
  }
  .about-contact-cta:hover{background:var(--panel-ink);color:var(--panel-bg);}

  /* ── Mail link in footer ── */
  .about-mail-link{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--panel-muted); transition:color .2s; margin-bottom:.5rem; }
  .about-mail-link:hover{ color:var(--panel-ink); }
  .about-mail-link:empty{ display:none; }

  /* ── Experience inline ── */
  .exp-inline{ list-style:none; margin:0; padding:0; }
  .exp-inline li{ display:flex; align-items:baseline; gap:.22em; padding:.11rem 0; border-bottom:1px solid var(--panel-rule); font-size:.8rem; line-height:1.3; }
  .exp-inline li:last-child{ border-bottom:none; }
  .exp-inline .er{ color:var(--panel-ink); white-space:nowrap; font-weight:500; }
  .exp-inline .eo{ color:var(--panel-muted); }
  .exp-inline .eo::before{ content:'·'; margin:0 .18em; opacity:.35; }
  .exp-inline .ey{ color:var(--panel-muted); font-family:var(--mono); font-size:.7rem; margin-left:auto; white-space:nowrap; opacity:.7; }
  /* ── Clients grid compacto ── */
  .clients-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--panel-rule); border-left:1px solid var(--panel-rule); }
  .clients-grid li{ padding:.26rem .44rem; border-right:1px solid var(--panel-rule); border-bottom:1px solid var(--panel-rule); font-size:.72rem; letter-spacing:.01em; color:var(--panel-muted); line-height:1.25; transition:color .16s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .clients-grid li:hover{ color:var(--panel-ink); }

  /* ══════════════════════════════════════════════════════════════
     LIGHTBOX
  ══════════════════════════════════════════════════════════════ */
  .lb{ position:fixed; inset:0; z-index:80; background:var(--lb-bg); display:none; align-items:center; justify-content:center; padding:clamp(1rem,5vw,4rem); }
  .lb.on{ display:flex; }
  .lb img{ max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.3); }
  .lb-close{ position:absolute; top:1.15rem; right:var(--gutter); font-family:var(--mono); font-weight:400; font-size:.76rem; color:var(--lb-ink); background:none; border:0; cursor:inherit; }
  .lb-close:hover{ text-decoration:underline; }

  /* ══════════════════════════════════════════════════════════════
     JOURNAL
  ══════════════════════════════════════════════════════════════ */
  #journal{ display:block; width:100%; visibility:hidden; }
  body.view-journal #journal{ visibility:visible; }

  .j-grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
  }

  .j-thumb{
    display: block;
    width: 100%;
    cursor: pointer;
    background: var(--cell-bg);
    overflow: hidden;
  }

  .j-mask{
    overflow: hidden;
    display: block;
    width: 100%;
    line-height: 0;
  }

  /* Journal thumb: clip-path curtain reveal + scale */
  .j-mask{
    clip-path: inset(100% 0 0 0);
    transition: clip-path .9s var(--ease);
    transition-delay: var(--jd, 0s);
    will-change: clip-path;
  }
  .j-thumb.revealed .j-mask{ clip-path: inset(0% 0 0 0); }
  .j-thumb img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform .9s var(--ease);
    transition-delay: var(--jd, 0s);
    will-change: transform;
  }
  .j-thumb.revealed img{ transform: scale(1); }

  /* Journal lightbox */
  #jlb{ position:fixed;inset:0;z-index:90; display:none; flex-direction:column; align-items:center; justify-content:center; }
  #jlb.on{ display:flex; }
  #jlb-bg{ position:absolute;inset:0; background:var(--paper); opacity:.96; transition:opacity .3s ease; }
  #jlb-img{ position:relative;z-index:1; max-height:90vh; max-width:90vw; width:auto;height:auto; object-fit:contain; display:block; transition:opacity .25s ease; }
  #jlb-img.fading{ opacity:0; }
  #jlb-close{ position:absolute;top:1.1rem;right:var(--gutter);z-index:2; background:none;border:0;padding:0; font-family:var(--mono);font-size:.72rem; letter-spacing:.1em;text-transform:uppercase; color:var(--ink);opacity:.55;cursor:pointer; }
  #jlb-close:hover{ opacity:1; }
  .jlb-arrow{ position:absolute;top:50%;z-index:2; transform:translateY(-50%); background:none;border:0;padding:0; font-family:var(--mono);font-size:.72rem; letter-spacing:.08em;text-transform:uppercase; color:var(--ink);opacity:.35;cursor:pointer; display:flex;align-items:center;gap:.5em; transition:opacity .2s; }
  .jlb-arrow:hover{ opacity:.9; }
  #jlb-prev{ left:var(--gutter); }
  #jlb-next{ right:var(--gutter); }
  #jlb-counter{ position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);z-index:2; font-family:var(--mono);font-size:.64rem; letter-spacing:.12em;text-transform:uppercase; color:var(--ink);opacity:.3; }
  .j-empty{ color:var(--mu,rgba(14,14,14,.4)); font-family:var(--mono,monospace); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:4rem var(--gutter); text-align:center; }

  /* ══════════════════════════════════════════════════════════════
     MOBILE
  ══════════════════════════════════════════════════════════════ */
  @media (max-width:640px){
    #float-img{ display:none; }
    .home{ display:block; height:100svh; overflow-y:auto; padding:4.5rem 0 6rem; }

    #index{ text-align:left; font-size:1rem; line-height:1; word-spacing:normal; }

    /* Category label */
    .cat{
      display: block;
      font-size: .56rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .38;
      padding: 2rem var(--gutter) .5rem;
      margin: 0;
      vertical-align: baseline;
    }
    .cat:first-child{ padding-top: 1rem; }

    /* Full-width card: image fills, title overlaid */
    .name{
      display: block;
      position: relative;
      white-space: normal;
      margin: 0 0 2px;
      padding: 0;
      overflow: hidden;
      background-image: var(--mob-thumb);
      background-size: cover;
      background-position: center;
      background-color: #111;
      aspect-ratio: 1/1;
    }

    /* Gradient: bottom dark */
    .name::after{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,0) 100%);
      pointer-events: none;
    }

    /* Title clip — mask reveal */
    .nm-mask{
      position: absolute;
      bottom: 0; left: 0; right: 0;
      overflow: hidden;           /* ← the clip */
      padding: 0 var(--gutter) .85rem;
      margin: 0;
      z-index: 1;
    }

    /* nm-txt slides up from below the clip */
    .nm-txt{
      display: block;
      font-size: clamp(1.1rem, 5.2vw, 1.6rem);
      line-height: 1.1;
      letter-spacing: -.01em;
      color: #fff;
      transform: translateY(105%);
      transition: transform .75s var(--ease);
      transition-delay: var(--d, 0s);
    }

    /* Revealed state (same class as desktop) */
    .name.revealed .nm-txt{ transform: translateY(0); }

    /* No tag on mobile — too crowded */
    .ix-tag{ display: none !important; }

    .name:active{ opacity: .82; }
    /* ── About panel mobile: tight spacing ── */
    .about{ padding:3.2rem 1.2rem 2rem; }
    .about-close{ top:.75rem; right:1.2rem; }
    .rule{ margin:.75rem 0; }
    .about-statement{ font-size:1.3rem; margin-bottom:.7rem; }
    .about-intro{ font-size:.9rem; line-height:1.5; }
    .about h4{ margin-bottom:.4rem; }
    .exp-inline li{ font-size:.82rem; padding:.12rem 0; }
    .clients-grid li{ padding:.2rem .36rem; font-size:.67rem; }
    .exp-inline li{ font-size:.76rem; padding:.1rem 0; }
    .exp-inline .ey{ font-size:.66rem; }
    .about-foot{ margin-top:.2rem; }
    .about-mail-link{ font-size:.68rem; margin-bottom:.4rem; }

    .j-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
    .nm-txt{ transform:none !important; }
    .cell, .about-inner > *{ opacity:1 !important; transform:none !important; }
  }