:root{
  --paper:#FAF9F5; --paper-alt:#EFEBE0; --ink:#15140F; --ink-soft:#5B584E;
  --line:#DAD5C7; --signal:#1E3AE0;
  --serif:'Fraunces', Georgia, serif; --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',monospace;
  --gutter: clamp(1.25rem, 4vw, 4rem); --s-sm:1rem; --s-md:2rem; --s-lg:clamp(3rem,6vw,6rem); --s-xl:clamp(4rem,8vw,7rem);
  --maxw:1350px; --header-h:76px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,dl,dd,dt{ margin:0; }
::selection{ background:var(--signal); color:var(--paper); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:0.8rem 1.2rem; z-index:200; }
.skip-link:focus{ left:1rem; top:1rem; }

.eyebrow{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0.6rem; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* header */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:1.4rem 0; background:rgba(250,249,245,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.header-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; }
.site-header.hide{ transform:translateY(-110%); }
.logo{ font-family:var(--sans); font-weight:600; font-size:0.95rem; }
.main-nav{ display:flex; align-items:center; gap:2.1rem; }
.main-nav a{ font-size:0.9rem; font-weight:500; }
.main-nav a.is-current{ color:var(--signal); }
/* Three destinations rather than two, so the row gives ground on a narrow
   screen before the wordmark starts wrapping onto a second line. */
@media (max-width:560px){
  .logo-name{ white-space:nowrap; }
  .logo{ font-size:0.85rem; }
  .main-nav{ gap:1rem; }
  .main-nav a{ font-size:0.8rem; }
}
/* Narrower than this the name and three links cannot share a line at a size
   worth reading, so the sparrow carries the brand on its own. */
@media (max-width:340px){ .logo-name{ display:none; } }

@media (max-width:760px){
}

/* hero */
/* Full-bleed, so the grid texture reaches both edges of the window. The
   content is still held to --maxw, but by the side padding rather than by a
   max-width on the element — a max-width here clipped the background with it
   and left bare paper down each side on wide screens. */
.about-hero{
  padding-block:calc(var(--header-h) + var(--s-md)) var(--s-lg);
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background-image:
    linear-gradient(rgba(21,20,15,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,20,15,0.055) 1px, transparent 1px);
  background-size:32px 32px;
}
.about-back{ display:inline-block; font-size:0.9rem; font-weight:500; margin-bottom:2.2rem; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease; }
.about-back:hover{ color:var(--signal); border-color:var(--signal); }
.about-hero-grid{ display:grid; grid-template-columns:1fr 300px; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.about-hero-photo-wrap{ position:relative; }
.about-hero-photo{
  position:relative; width:100%; aspect-ratio:5/6;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-alt);
  box-shadow:14px 16px 0 -2px var(--paper-alt), 14px 16px 0 -1px var(--line);
}
.about-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-hero-doodle{
  position:absolute; pointer-events:none; z-index:2;
  background:var(--paper); border-radius:50%;
  box-shadow:0 6px 16px -6px rgba(21,20,15,0.3);
  padding:8px;
}
.about-hero-doodle--spark{ top:-1.8rem; left:-1.8rem; width:52px; height:52px; }
.about-hero-doodle--arrow{ bottom:-1.6rem; right:-1.8rem; width:60px; height:60px; }
@media (max-width:760px){
  .about-hero-grid{ grid-template-columns:1fr; }
  .about-hero-photo-wrap{ order:-1; width:220px; margin:0 auto 1rem; }
}
.about-hero h1{ font-family:var(--serif); font-weight:420; font-size:clamp(2.2rem,5.2vw,4.9rem); line-height:1.08; max-width:18ch; letter-spacing:-0.01em; margin-bottom:1.4rem; }
.about-hero-sub{ font-size:1.12rem; color:var(--ink-soft); max-width:58ch; margin-bottom:2.4rem; }
.about-meta{ display:flex; flex-wrap:wrap; gap:2.4rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.about-meta div{ min-width:140px; }
.about-meta dt{ font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:0.4rem; }
.about-meta dd{ font-size:0.95rem; font-weight:500; }

/* jump nav */
/* Sat 2rem under the meta row, which carries its own rule — two hairlines a
   thumb apart, with small mono text between them that read as more metadata
   than as navigation. More air above it, and the links are tabs now: a hit
   area, a hover state and a filled active state, using the same pill shape as
   the project tags elsewhere on the site. */
.about-jumpnav{
  position:sticky; top:var(--header-h); z-index:40;
  display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center;
  /* No horizontal padding: this nav sits inside .about-hero, which already
     insets content to the measure, so a gutter here was applied twice and put
     the labels 75px right of everything else. The negative start margin then
     cancels the first pill's own padding, so its text — not its box — lands on
     the same line as the headline and the meta row. */
  padding:0.85rem 0; margin-top:var(--s-lg); margin-inline-start:-0.9rem;
  background:rgba(250,249,245,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.about-jumpnav a{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-soft);
  padding:0.5rem 0.9rem; border-radius:999px;
  border:1px solid transparent; background:transparent;
  transition:color .25s ease, background-color .25s ease, border-color .25s ease;
}
.about-jumpnav a:hover{ color:var(--ink); background:var(--paper-alt); }
.about-jumpnav a.is-active{
  color:var(--ink); background:var(--paper-alt); border-color:var(--line);
}

/* timeline */
.timeline{ position:relative; padding:var(--s-lg) var(--gutter) var(--s-xl); max-width:var(--maxw); margin:0 auto; }
.timeline-head{ margin-bottom:var(--s-xl); }
.timeline-head h2{ font-family:var(--serif); font-weight:460; font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-0.01em; max-width:20ch; }
.tl-item{ display:grid; grid-template-columns:56px 1fr; gap:0 clamp(1.3rem,3.5vw,2.6rem); position:relative; padding-bottom:var(--s-lg); }
.tl-item:last-child{ padding-bottom:0; }
.tl-spine{ position:relative; display:flex; justify-content:center; }
.tl-spine::before{ content:''; position:absolute; top:2.9rem; bottom:calc(-1 * var(--s-lg)); left:50%; width:1px; background:var(--line); transform:translateX(-50%); }
.tl-item:last-child .tl-spine::before{ display:none; }
.tl-progress{ position:absolute; width:2px; background:var(--signal); height:0; z-index:1; transform:translateX(-50%); pointer-events:none; }
.tl-marker{
  width:44px; height:44px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1; flex-shrink:0;
}
.tl-marker::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--signal); }
.tl-year-pill{
  display:inline-block; font-family:var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:0.04em;
  color:var(--signal); border:1px solid var(--signal); border-radius:999px; padding:0.28rem 0.8rem; margin-bottom:0.9rem;
}
.tl-title{ font-family:var(--sans); font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem); letter-spacing:-0.003em; margin-bottom:0.6rem; }
.tl-statement{ font-size:1rem; color:var(--ink-soft); line-height:1.55; margin-bottom:0.8rem; max-width:58ch; }
.tl-caption{ font-family:var(--mono); font-size:0.74rem; color:var(--ink-soft); letter-spacing:0.01em; line-height:1.6; opacity:0.85; }
.tl-more{ margin-top:var(--s-md); padding-top:var(--s-md); border-top:1px solid var(--line); font-size:0.95rem; color:var(--ink-soft); }
.tl-more a{ color:var(--ink); border-bottom:1px solid var(--signal); transition:color .25s ease; }
.tl-more a:hover{ color:var(--signal); }
.about-hero-sub a, .tl-statement a, .beyond-work-lede a, .bw-card-text a, .about-contact-body p a{ color:inherit; border-bottom:1px solid var(--signal); transition:color .25s ease; }
.about-hero-sub a:hover, .tl-statement a:hover, .beyond-work-lede a:hover, .bw-card-text a:hover, .about-contact-body p a:hover{ color:var(--signal); }
.about-hero-sub b, .about-hero-sub strong, .tl-statement b, .tl-statement strong, .beyond-work-lede b, .beyond-work-lede strong, .bw-card-text b, .bw-card-text strong{ font-weight:600; color:var(--ink); }
.about-hero-sub p, .tl-statement p, .beyond-work-lede p{ margin:0 0 0.8em; }
.about-hero-sub p:last-child, .tl-statement p:last-child, .beyond-work-lede p:last-child{ margin-bottom:0; }
.bw-card-text p{ margin-bottom:0.8em; }
.bw-card-text p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .tl-item{ grid-template-columns:32px 1fr; gap:0 1rem; }
  .tl-marker{ width:28px; height:28px; }
  .tl-marker::after{ width:6px; height:6px; }
  .tl-spine::before{ top:2rem; }
}



/* talks — the same rules the homepage used, moved with the markup so the
   section looks the same in its new home rather than being restyled. */
.talks-section{ background:var(--paper); padding:var(--s-lg) 0 var(--s-xl); }
.talks-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* The same weight as "Beyond work" further down: on this page .section-head h2
   is the small 1.5rem heading used inside columns, which left this section
   looking like a subsection of Education rather than a section of its own. */
.talks-section .section-head{ max-width:60ch; }
.talks-section .section-head h2{ font-family:var(--serif); font-weight:420;
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.14; letter-spacing:-0.01em;
  color:var(--ink); margin-bottom:1.1rem; }
.talks-lede{ font-size:1.05rem; color:var(--ink-soft); line-height:1.65;
  max-width:60ch; margin-bottom:var(--s-lg); }
.talks{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-bottom:var(--s-md); }
.talk{ display:flex; align-items:center; gap:1.3rem; padding:1.3rem 0; border-bottom:1px solid var(--line); transition:padding-left .3s ease; }
.talk:hover{ padding-left:0.6rem; }
.talk-logo{ flex-shrink:0; width:150px; display:flex; align-items:center; }
.talk-logo img{ height:var(--logo-h,28px); width:auto; max-width:230px; object-fit:contain;
    filter:grayscale(1) contrast(1.05); opacity:0.6; transition:filter .4s ease, opacity .4s ease; }
.talk-copy{ display:flex; flex-direction:column; gap:0.35rem; flex:1; min-width:0; }
.talk-title{ font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.25rem); font-weight:460; line-height:1.3; }
.talk-meta{ font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
.talk-media{ width:168px; height:168px; flex-shrink:0; overflow:hidden; border:1px solid var(--line); }
.talk-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); transition:filter .4s ease; }
.talk:hover .talk-media img{ filter:grayscale(0); }
.talk:hover .talk-logo img{ filter:grayscale(0); opacity:1; }
@media (max-width:640px){
    .talk{ flex-direction:column; align-items:stretch; gap:0; padding:1.5rem 0; }
    /* Full width and a fixed height: a square thumbnail beside the text left
       the title about twenty characters, and shrinking it to a 104px chip —
       which an older rule below used to do — made the row look like a list
       item that had lost its picture. */
    .talk-media{ width:100%; height:180px; margin:0 0 1.1rem; order:-1; }
    .talk-logo{ width:auto; margin-bottom:0.8rem; }
    .talk-logo img{ height:calc(var(--logo-h,28px) * 0.72); opacity:0.75; }
    .talk-copy{ gap:0.3rem; }
    .talk:hover{ padding-left:0; }
  }

/* education */
.details-grid{
  padding-block:var(--s-xl);
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background-image:
    linear-gradient(rgba(21,20,15,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,20,15,0.055) 1px, transparent 1px);
  background-size:32px 32px;
}
.details-col .section-head h2{ font-family:var(--serif); font-weight:460; font-size:1.5rem; margin-bottom:1.4rem; }
.edu-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem 3rem; }
.edu-item{ display:flex; gap:1rem; align-items:flex-start; border-top:1px solid var(--line); padding-top:1rem; }
@media (max-width:760px){ .edu-list{ grid-template-columns:1fr; } }
.edu-logo{
  flex-shrink:0; width:60px; height:60px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.edu-logo img{ width:70%; height:70%; object-fit:contain; filter:grayscale(1); opacity:0.75; transition:filter .3s ease, opacity .3s ease; }
.edu-item:hover .edu-logo img{ filter:grayscale(0); opacity:1; }
.edu-logo svg{ width:60%; height:60%; }
.edu-logo--taltech img{ width:34%; height:34%; }
.edu-item .edu-years{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); }
.edu-item h4{ font-family:var(--serif); font-weight:500; font-size:1.05rem; margin:0.3rem 0 0.15rem; }
.edu-item p{ font-size:0.9rem; color:var(--ink-soft); margin:0; }

/* beyond work — full-bleed feature section */
.beyond-work{ background:var(--paper); color:var(--ink); padding:var(--s-xl) 0; overflow:hidden; }
.beyond-work-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.beyond-work-head{ max-width:60ch; margin-bottom:var(--s-lg); }
.beyond-work-head h2{ font-family:var(--serif); font-weight:420; font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.14; letter-spacing:-0.01em; color:var(--ink); margin-bottom:1.1rem; }
.beyond-work-lede{ font-size:1.05rem; color:var(--ink-soft); line-height:1.65; }
/* Two per row: there are four cards, so three across left a single orphan
   on a second row. A 2x2 also gives each card room for its picture. */
.beyond-work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; }
.bw-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:var(--paper); border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bw-card:nth-child(odd){ transform:rotate(-1deg); }
.bw-card:nth-child(even){ transform:rotate(1deg); }
.bw-card:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:0 18px 32px -18px rgba(21,20,15,0.28); }
.bw-photo{ position:relative; width:100%; }
.bw-photo-crop{ width:100%; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--line); }
.bw-photo-crop img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.bw-card:hover .bw-photo-crop img{ transform:scale(1.04); }
.bw-icon{
  position:absolute; left:1.4rem; bottom:-28px; z-index:2;
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--signal); border:3px solid var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px -8px rgba(21,20,15,0.4);
  transition:background-color .3s ease;
}
.bw-icon svg{ width:50%; height:50%; }
.bw-body{ padding:2.3rem 1.4rem 1.4rem; }
.bw-card h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; line-height:1.25; margin-bottom:0.7rem; color:var(--ink); }
.bw-card-text{ color:var(--ink-soft); font-size:0.98rem; line-height:1.6; max-width:40ch; }
@media (max-width:700px){
  .beyond-work-grid{ grid-template-columns:1fr; gap:1.4rem; max-width:520px; }
  .bw-card:nth-child(odd), .bw-card:nth-child(even){ transform:none; }
}

/* contact */
.about-contact{ background:var(--ink); color:var(--paper); padding:var(--s-xl) 0; }
.about-contact-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.about-contact-inner h2{ font-family:var(--serif); font-weight:420; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.14; margin-bottom:1.3rem; letter-spacing:-0.01em; max-width:22ch; }
.about-contact-body{ color:#C9C6BA; font-size:1.02rem; max-width:50ch; margin-bottom:1.8rem; }
.about-contact-body p{ margin-bottom:0.8em; }
.about-contact-body p:last-child{ margin-bottom:0; }
.about-cta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.about-contact .btn-primary{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.about-contact .btn-primary:hover{ background:var(--signal); border-color:var(--signal); color:var(--paper); }
.about-contact .btn-ghost{ border-color:#54524A; color:var(--paper); }
.about-contact .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.about-email{ font-family:var(--mono); font-size:0.92rem; }

.btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.85rem 1.6rem; font-size:0.92rem; font-weight:500; border:1px solid var(--ink); transition:background-color .3s ease, color .3s ease, transform .3s ease; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--signal); border-color:var(--signal); transform:translateY(-2px); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* footer */
.site-footer{ padding:var(--s-md) 0; background:var(--ink); color:var(--paper); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:1.6rem; }
.footer-col p{ font-weight:600; font-size:0.9rem; margin-bottom:0.4rem; }
.footer-loc{ font-weight:400 !important; color:#B7B4A8; font-size:0.85rem !important; }
.footer-nav{ display:flex; gap:1.6rem; }
.footer-nav a, .footer-col--right a{ font-size:0.88rem; color:#D6D3C7; }
.footer-nav a:hover, .footer-col--right a:hover{ color:var(--paper); }
.footer-col--right{ display:flex; flex-direction:column; gap:0.5rem; text-align:right; }
.footer-copy{ max-width:var(--maxw); margin:0 auto; padding:1.4rem var(--gutter) 0; font-family:var(--mono); font-size:0.72rem; color:#7A7768; border-top:1px solid #33322A; }

/* wordmark:start — index.html keeps a copy of this block and syncs it from
   here; the sentinels are what makes replacing it exact rather than a guess at
   where the block ends. */
/* --- wordmark -------------------------------------------------------------
   The sparrow sizes in em, so it tracks the logo's own type rather than
   needing its own breakpoints. overflow:visible because the wing swings
   outside the 64-unit box at the top of its stroke and would otherwise be
   clipped mid-flap. */
/* The gap is measured from the beak tip, because the viewBox is cropped to
   the drawing — there is no built-in margin doing part of the work. */
.logo{ display:inline-flex; align-items:center; gap:0.6em; }
.logo-name::after{ content:'·'; color:var(--signal); margin-left:0.15em; }
/* The viewBox is cropped to the drawing rather than left at the exported
   0 0 64 64. That export carries about a third of its box in empty margin, so
   a mark sized in em came out a third smaller than the number said and the gap
   beside the name was mostly nothing. */
/* The nudge is optical, not arithmetic, and it is measured rather than guessed.
   align-items centres the mark's *box*, but the bird's mass — crown to belly —
   sits 3.5px above that box centre because the tail and legs hang below it,
   while the name's ink centre is higher again than the line box's. Measured in
   the page: the string's ink band against the body's band, the difference being
   -0.13em. Anything expressed in em holds when the logo's size changes. */
.logo-mark{ width:2.2em; height:auto; display:block; overflow:visible; flex:0 0 auto;
  transform:translateY(-0.13em); }
/* view-box, not the default border-box, and the coordinates are the drawing's
   own — the point where the top-front corner of the wing meets the body, just
   under the head. Found by rendering the mark large and rotating the wing about
   several candidates: hinged anywhere else it either swings the shoulder
   through the body or lifts the wing over the eye.

   The range either side of rest is not symmetric, and cannot be. The wing is
   drawn folded *inside* the body, so it has room to rise above the back but
   almost none to drop: past about -10 degrees the blue tip clears the belly and
   the bird looks broken. The beats below go up and barely dip. */
.logo-wing{ transform-box:view-box; transform-origin:39px 27px; }

/* Two names for one movement. An animation cannot be restarted by adding a
   rule that names the animation already on the element, so the arrival flap
   and the hover flap have to be distinct — otherwise the bird moves once on
   load and then never again.

   Two beats inside one run, the second smaller than the first, and a shallow
   dip between them: a bird does not make one slow stroke and stop. */
@keyframes sparrow-flap{
  0%,100%{ transform:rotate(0) }
  16%{ transform:rotate(26deg) }
  34%{ transform:rotate(-5deg) }
  52%{ transform:rotate(18deg) }
  74%{ transform:rotate(-3deg) }
}
@keyframes sparrow-flap-hover{
  0%,100%{ transform:rotate(0) }
  16%{ transform:rotate(26deg) }
  34%{ transform:rotate(-5deg) }
  52%{ transform:rotate(18deg) }
  74%{ transform:rotate(-3deg) }
}
/* Once on arrival, a beat after the page has settled, so it is seen at least
   once by a reader who will never hover — which is every reader on a phone.
   One run, because the two beats are inside it. ease-in-out per segment: the
   wing accelerates out of each turn rather than starting at full speed. */
.logo-wing{ animation:sparrow-flap .85s ease-in-out 1.1s 1 both; }
.logo:hover .logo-wing,
.logo:focus-visible .logo-wing{ animation:sparrow-flap-hover .85s ease-in-out 1; }

@media (prefers-reduced-motion: reduce){
  .logo-wing,
  .logo:hover .logo-wing,
  .logo:focus-visible .logo-wing{ animation:none; }
}
/* wordmark:end */