/* Shared by index.html and cases.html. Editing tokens here changes both,
   which is the point: two pages with two copies of a palette will drift. */

  :root{
    --paper:#fbfaf8;
    --ink:#191817;          /* name, link text */
    --read:#3c3a37;         /* running text, paco sets this at #3a3a3a */
    --soft:#5e5b56;         /* descriptions */
    --faint:#75716a;        /* labels, meta. Kept dark enough to clear AA at 10.5px;
                               the reference sites' greys do not. */
    --rule:rgba(25,24,23,.12);
    --accent:#a8422a;

    --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    --mono:'Commit Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    /* one reading size, one small size, one label size */
    --t-body:1rem;          /* 16px, as measured on both references */
    --t-small:.875rem;      /* 14px */
    --t-label:.66rem;       /* 10.5px */
  }

  @font-face{
    font-family:'Commit Mono';
    src:url('/fonts/CommitMono-475.woff2') format('woff2');
    font-weight:475; font-style:normal; font-display:optional;
  }
  @font-face{
    font-family:'Commit Mono';
    src:url('/fonts/CommitMono-700.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:optional;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#111110;
      --ink:#f0ede7;
      --read:#c9c4bb;
      --soft:#a39d92;
      --faint:#888177;
      --rule:rgba(240,237,231,.14);
      --accent:#e08260;
    }
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--paper);color:var(--read);
    font-family:var(--ui);font-optical-sizing:auto;
    font-size:var(--t-body);font-weight:400;line-height:1.72;
    letter-spacing:-.011em;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important;}}

  main{
    max-width:36rem;margin-inline:auto;
    padding:clamp(3.5rem,12vh,7rem) 1.5rem clamp(3rem,7vw,4.5rem);
  }
  p{margin:0;text-wrap:pretty;}
  a{color:inherit;text-decoration:none;}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

  /* --- greeting: always Helsinki, and it says why --- */
  .greet{
    font-family:var(--mono);
    font-size:var(--t-small);line-height:1.5;color:var(--faint);
    margin-bottom:2.2rem;
  }
  .greet b{font-weight:500;color:var(--accent);cursor:default;}
  .greet .gloss{opacity:0;transition:opacity .35s ease;}
  .greet:hover .gloss{opacity:1;}
  @media (hover:none){.greet .gloss{opacity:1;}}

  /* the name is the same size as the text. only the weight changes. */
  .name{font-weight:600;color:var(--ink);margin-bottom:1.7rem;}

  .statement p + p{margin-top:1.5rem;}
  .statement em{font-style:italic;}

  /* --- labels --- */
  h2{
    font-family:var(--mono);
    margin:0 0 .9rem;font-size:.625rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
    line-height:1.4;
  }

  .block{margin-top:clamp(2.8rem,6vw,4rem);}
  ul{list-style:none;margin:0;padding:0;}
  .row{
    display:grid;grid-template-columns:9.5rem 1fr;gap:.1rem 1.5rem;
    padding:.42rem 0;align-items:baseline;
  }
  .row .t{font-weight:500;color:var(--ink);}
  .row .t a{transition:color .18s ease;}
  .row .t a:hover{color:var(--accent);}
  .row .t a::after{
    content:'↗';font-size:.7em;margin-left:.4em;color:var(--faint);
    display:inline-block;transition:transform .18s ease,color .18s ease;
  }
  .row .t a:hover::after{color:var(--accent);transform:translate(.12em,-.12em);}
  .row .d{font-size:var(--t-small);line-height:1.55;color:var(--soft);}
  @media (max-width:30rem){
    .row{grid-template-columns:1fr;gap:0;padding:.55rem 0;}
  }

  /* --- contact --- */
  .links{margin-top:.5rem;}
  .links a{
    color:var(--ink);
    box-shadow:inset 0 -1px 0 0 var(--rule);
    transition:color .18s ease,box-shadow .18s ease;
  }
  .links a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent);}
  .sep{color:var(--faint);padding:0 .5em;}

  footer{
    font-family:var(--mono);
    margin-top:clamp(3rem,7vw,4.5rem);padding-top:1.1rem;border-top:1px solid var(--rule);
    font-size:var(--t-small);line-height:1.55;color:var(--faint);
  }

  /* --- view swap: the page becomes the CV, no dialog chrome --- */
  [hidden]{display:none !important;}
  .view{animation:rise .3s ease both;}
  @keyframes rise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){.view{animation:none;}}

  .back{
    display:inline-block;margin-bottom:1.7rem;
    font-size:var(--t-small);color:var(--faint);
    transition:color .18s ease;
  }
  .back:hover{color:var(--accent);}
  .back::before{content:'←';margin-right:.45em;}

  .cv-head{margin-bottom:.35rem;}
  /* the bio carries weight by sitting at reading size in the reading colour,
     not by breaking the one-size system with a bigger number */
  .cv-bio{font-size:var(--t-body);color:var(--read);max-width:31rem;margin-bottom:.55rem;}
  .cv-contact{font-size:var(--t-small);color:var(--soft);margin-bottom:2.4rem;}
  .cv-contact a{
    box-shadow:inset 0 -1px 0 0 var(--rule);
    transition:color .18s ease,box-shadow .18s ease;
  }
  .cv-contact a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent);}

  .cv-group{margin-top:2.1rem;}
  .cv-group:first-of-type{margin-top:0;}
  .entry{
    display:grid;grid-template-columns:4.9rem 1fr;gap:.05rem 1.3rem;
    padding:.5rem 0;align-items:baseline;
  }
  .entry .yr{
    font-family:var(--mono);
    font-size:var(--t-small);color:var(--faint);
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .entry .who{font-weight:500;color:var(--ink);}
  .entry .what{grid-column:2;font-size:var(--t-small);line-height:1.55;color:var(--soft);}
  @media (max-width:30rem){
    .entry{grid-template-columns:1fr;gap:0;}
    .entry .yr{grid-column:1;order:-1;}
    .entry .what{grid-column:1;}
  }

  /* --- employers, each opening to the clients underneath --- */
  .job{border-top:1px solid var(--rule);}
  .job:last-of-type{border-bottom:1px solid var(--rule);}
  .job-head{
    display:grid;grid-template-columns:4.9rem 1fr auto;gap:.05rem 1.3rem;
    width:100%;padding:.7rem 0;margin:0;border:0;background:none;
    font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:baseline;
  }
  .job-head .yr{font-family:var(--mono);grid-column:1;grid-row:1;}
  .job-head .who{grid-column:2;grid-row:1;font-weight:500;color:var(--ink);transition:color .18s ease;}
  .job-head .role{
    grid-column:2;grid-row:2;font-size:var(--t-small);color:var(--soft);
  }
  .job-head .sign{
    grid-column:3;grid-row:1 / span 2;align-self:center;
    color:var(--faint);font-size:var(--t-small);
    transition:transform .28s ease,color .18s ease;
  }
  .job-head.static{cursor:default;}
  .job-head:not(.static):hover .who,.job-head[aria-expanded="true"] .who{color:var(--accent);}
  .job-head[aria-expanded="true"] .sign{transform:rotate(45deg);color:var(--accent);}
  .job-body{
    display:grid;grid-template-rows:0fr;visibility:hidden;
    transition:grid-template-rows .32s ease,visibility 0s linear .32s;
  }
  .job-body > div{overflow:hidden;}
  .job-body.open{
    grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .32s ease,visibility 0s;
  }
  .job-inner{margin-left:6.2rem;padding:.15rem 0 1rem;}
  .proj{padding:.26rem 0;line-height:1.55;}
  .proj .pname{font-size:var(--t-small);color:var(--ink);font-weight:500;}
  .tag{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:500;}
  .job-note{
    font-size:var(--t-small);line-height:1.6;color:var(--soft);max-width:30rem;
  }
  @media (max-width:34rem){
    .job-inner{margin-left:0;}
  }
  @media (max-width:30rem){
    .job-head{grid-template-columns:1fr auto;}
    .job-head .yr{grid-column:1;grid-row:1;order:-1;}
    .job-head .who{grid-column:1;grid-row:2;}
    .job-head .role{grid-column:1;grid-row:3;}
    .job-head .sign{grid-row:1 / span 3;}
  }

  .dots{
    margin:2.2rem 0;color:var(--faint);letter-spacing:.5em;
    font-size:1.15rem;line-height:1;
  }
  .before{font-size:var(--t-small);line-height:1.65;color:var(--soft);max-width:32rem;}
  .before + .before{margin-top:.9rem;}

  @media print{
    :root{--paper:#fff;--ink:#000;--read:#111;--soft:#333;--faint:#555;--rule:#ccc;}
    body{font-size:10.5pt;line-height:1.5;}
    main{max-width:none;padding:0;}
    /* Print whatever view is open. Forcing the CV here meant Cmd+P on the
       front page silently printed the wrong document. */
    .back,.greet,footer,.job-head .sign{display:none !important;}
    .view{animation:none;}
    /* a printed CV shows everything, whatever was open on screen */
    .job-body{grid-template-rows:1fr !important;visibility:visible !important;}
    .job{break-inside:avoid;}
    .entry{break-inside:avoid;}
  }