:root{
    --black:#121211;
    /* Bondi iMac palette, used on the Work page */
    --bondi:#0095B6;
    --deep-bondi:#006C7C;
    --ice:#E5E8E3;
    --frost:#C9D0CC;
    --crt:#5B6264;
    --charcoal:#242829;
    --white:#f2efe9;
    --grey:#5f5c54;   /* darkened for contrast: about 5.7:1 on the cream */
    --serif:"Times New Roman",Times,serif;
    --sans:Helvetica,"Helvetica Neue",Arial,sans-serif;
    --g:clamp(1.25rem,3vw,2.5rem);   /* page gutter */
    --gap:clamp(1rem,2vw,2rem);       /* grid gap */

    /* hand-drawn marks, used as masks so they take the colour of the text */
    --wob:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 2, 55 9, 90 5 S 150 2, 198 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --loop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M30 12 C 70 3, 170 6, 190 26 C 202 46, 110 57, 56 53 C 8 48, 2 24, 46 11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow:hidden}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    background:var(--white);
    color:var(--black);
    font-family:var(--serif);
    min-height:100vh;overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body.home{background:var(--black)}
  a{color:inherit}
  button{font-family:inherit}
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  :focus-visible{outline:2px solid var(--bondi);outline-offset:3px}

  /* shared pieces */
  .label{font-family:var(--sans);font-size:11px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
  .stretch{display:block;transform:scaleY(var(--k,1.4));transform-origin:0 0}

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:500;
    display:flex;justify-content:space-between;align-items:center;
    padding:1.3rem var(--g);color:var(--black);
  }
  body.home header{color:var(--white)}
  /* a solid bar on the pages that scroll, so the writing and the windows pass under it instead of through the menu */
  body.about header,body.contact header{background:var(--white)}
  body.work2 header{background:var(--black)}
  header .mark{
    justify-self:start;font-size:1.15rem;text-decoration:none;cursor:pointer;
    display:inline-block;transform:scaleY(1.4);transform-origin:left center;
  }
  /* a little wiggle on hover; uses translate/rotate so it sits on top of the stretch */
  header .mark:hover{animation:markshimmy .55s ease-in-out}
  @keyframes markshimmy{
    0%,100%{translate:0 0;rotate:0deg}
    15%{translate:-3px 0;rotate:-2deg} 35%{translate:3px 0;rotate:1.5deg}
    55%{translate:-2px 0;rotate:-1.5deg} 75%{translate:1px 0;rotate:1deg}
  }
  @media(prefers-reduced-motion:reduce){header .mark:hover{animation:none}}
  nav{justify-self:end;display:flex;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap;justify-content:flex-end}
  nav a{
    position:relative;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;
  }
  nav a i{font-style:normal;font-size:8px;vertical-align:super;margin-right:3px;opacity:.8}
  nav a::before{content:"";position:absolute;inset:-1rem -.4rem}   /* bigger tap area (about 44px tall), nothing visible */
  nav a::after{
    content:"";position:absolute;left:-2px;right:-2px;bottom:-8px;height:6px;background:currentColor;
    clip-path:inset(0 100% 0 0);transition:clip-path .35s ease;   /* drawn in from the left, rubbed out from the right */
    -webkit-mask:var(--wob) center/100% 100% no-repeat;mask:var(--wob) center/100% 100% no-repeat;
  }
  nav a:hover::after,nav a.cur::after{clip-path:inset(0 0 0 0)}
  @media(prefers-reduced-motion:reduce){nav a::after{transition:none}}
  @media(max-width:760px){
    header{display:flex;justify-content:flex-end}
    header .mark{display:none}
    nav a i{display:none}
  }

  /* ---------- PAGES ---------- */
  .page{display:none;min-height:100vh;padding:7rem var(--g) 5rem}
  .page.active{display:block;animation:fade .6s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* big statement type: stretched Times */
  .stmt{
    font-weight:400;font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:1.02;
    letter-spacing:-.01em;max-width:18ch;
  }
  .stmt + *{margin-top:3.6rem}

  /* ---------- HOME ---------- */
  #home.active{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100vh;height:100dvh;min-height:0;background:var(--black);color:var(--white);text-align:center;
  }
  .hero{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:0 clamp(.6rem,3vw,2.5rem);
    min-height:clamp(12rem,38vw,24rem);
  }
  .word{display:flex;align-items:center}

  /* each letter is its own box: drag it to stretch or squish (up/down = height, left/right = width) */
  .l{
    position:relative;display:inline-block;font-family:var(--serif);
    font-size:clamp(3rem,13vw,10rem);line-height:1;
    cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .l.grabbed{cursor:grabbing}
  .l .t{display:inline-block;transform:scale(var(--sx,1),var(--sy,1.7))}

  .tagline{margin-top:2.2rem;font-size:clamp(1.1rem,2.4vw,1.6rem);font-style:italic;color:#c9c5bb}
  .squish{margin-top:2.4rem;color:var(--white);opacity:.85;transform:rotate(-2deg)}
  .squish.shimmy{animation:shimmy .8s ease-in-out}
  @keyframes shimmy{
    0%,100%{transform:rotate(-2deg)}
    12%{transform:translateX(-7px) rotate(-5deg)} 28%{transform:translateX(7px) rotate(2deg)}
    44%{transform:translateX(-5px) rotate(-4deg)} 60%{transform:translateX(5px) rotate(1deg)}
    76%{transform:translateX(-2px) rotate(-3deg)}
  }
  .resq{margin-top:.3rem;background:none;border:none;color:var(--white);opacity:.75;cursor:pointer;text-decoration:underline;padding:.75rem 1rem}
  .resq:hover,.resq:focus-visible{opacity:1}
  /* a phone on its side: the name, the line under it and reset all have to fit in about 340px of height */
  @media(max-height:500px){
    #home.active{padding:3.4rem var(--g) 1rem}
    .hero{min-height:0}
    .l{font-size:min(13vw,22vh)}
    .tagline{margin-top:1.2rem}
    .squish{margin-top:1rem}
  }

  /* scroll cue, sun and song: Home only */
  .scrollcue,.sun,.song{display:none}
  body.home .scrollcue{display:block}
  body.home .sun{display:flex}
  body.home .song:not([hidden]){display:block}
  .scrollcue{
    position:fixed;left:calc(var(--g) - .8rem);bottom:.8rem;z-index:30;background:none;border:none;
    color:var(--white);opacity:.85;cursor:pointer;padding:.7rem .8rem;
  }
  .sun{
    position:fixed;right:var(--g);bottom:1.2rem;z-index:56;width:3rem;height:3rem;
    align-items:center;justify-content:center;background:none;border:none;color:var(--white);cursor:pointer;
    transition:transform .3s;
  }
  .sun:hover{transform:rotate(18deg) scale(1.08)}
  .sun .rays{transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .5s}
  .sun.playing .rays{opacity:0;transform:scale(.5) rotate(40deg)}
  .song{
    position:fixed;right:var(--g);bottom:5rem;z-index:55;width:min(360px,88vw);
    background:var(--white);color:var(--black);padding:.9rem .9rem 1rem;transform:rotate(-1.5deg);
    border-radius:8px 16px 10px 14px / 14px 8px 16px 10px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  }
  .song .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem}
  .song .x{background:none;border:none;cursor:pointer;color:inherit;text-decoration:underline}
  .song .yt iframe{display:block;width:100%;height:200px;border:0;background:#000}
  .song .yt iframe[src*="spotify"]{height:152px;border-radius:12px;background:none}
  .song .yt iframe.spotify{height:152px;border-radius:12px;background:none}
  .song .miss{font-size:1rem;line-height:1.4}

  .nope{
    position:fixed;left:50%;bottom:6vh;z-index:600;max-width:min(26rem,86vw);
    background:var(--white);color:var(--black);padding:1rem 1.4rem;text-align:center;
    font-size:1.25rem;font-style:italic;line-height:1.3;
    transform:translateX(-50%) rotate(-2deg) scale(.9);opacity:0;pointer-events:none;
    border-radius:10px 18px 12px 16px / 16px 10px 18px 12px;
    transition:opacity .15s,transform .2s;
  }
  .nope.on{opacity:1;transform:translateX(-50%) rotate(-2deg) scale(1)}
  /* About and Contact are cream too, so the message box goes dark there */
  body.about .nope,body.contact .nope{background:var(--black);color:var(--white)}

  /* ---------- ORGANIC SHAPES ---------- */
  .blob{
    background:#dad6cc;display:flex;align-items:center;justify-content:center;
    color:var(--grey);font-style:italic;font-size:1rem;text-align:center;padding:1.5rem;
  }
  .b1{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}

  /* ---------- ABOUT ---------- */
  /* pages that must fit the window: the .fit wrapper is scaled by script until nothing needs scrolling */
  .fit{transform-origin:0 0}
  #about.active,#contact.active{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  /* About and Contact scale down a little to fit, then scroll rather than let the text get too small */
  #about.active,#contact.active{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  #about.active,#contact.active{padding-top:6.5rem;padding-bottom:2rem}
  #about.active{padding-top:7rem;padding-bottom:3.4rem}
  #contact.active{padding-bottom:6.8rem}
  body.contact footer{background:var(--white)}
  body footer{position:fixed;left:0;right:0;bottom:0}
  /* phones, upright or on their side: nothing shrinks, the page scrolls, and the footer comes at the end of it instead of
     sitting over the bottom of the screen. Keep this media query the same as phoneMQ in main.js. */
  @media(max-width:560px),(max-height:500px){
    #about.active{padding-bottom:3rem}
    #contact.active{padding-bottom:0}
    #contact footer{position:static;margin:3.5rem calc(var(--g) * -1) 0;padding-top:1.2rem}
  }
  /* on its side the photo can't take its size from the height, there is too little of it */
  @media(max-height:500px) and (min-width:561px){#about .photo{width:clamp(9rem,28vw,16rem)}}
  /* and the Contact heading sits closer to the writing, so the first screen isn't only the heading */
  @media(max-height:500px){.contact-grid{row-gap:1.4rem}}
  .about-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:calc(var(--gap) * 1.6);row-gap:3.2rem}
  #about .about-grid{grid-template-columns:auto minmax(0,35rem);justify-content:center;column-gap:clamp(1.2rem,4vw,5rem)}
  #about .stmt{max-width:none;text-align:center}
  #about .stmt + *{margin-top:0}
  #about .prose{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55}
  #about .prose p{margin-bottom:1.3rem}
  .about-left{display:flex;flex-direction:column}
  .about-right{align-self:center}
  /* photo and text stay side by side, the photo shrinking first; they only stack on a phone-width screen */
  @media(max-width:560px){#about .about-grid{grid-template-columns:1fr}#about .photo{width:min(100%,20rem);margin:0 auto}}
  .photo{position:relative;width:clamp(9rem,min(34vw,(100vh - 20rem) * .744),32rem);aspect-ratio:32/43}
  .photo.blob{padding:0;border-radius:50% 50% 46% 54% / 30% 34% 18% 22%}
  .photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit}
  .photo::after{
    content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid var(--black);
    border-radius:50% 50% 46% 54% / 30% 34% 18% 22%;transform:rotate(-3deg);pointer-events:none;
  }
  .prose{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.62}
  .prose p{margin-bottom:1.7rem}
  .prose .aside{font-style:italic;color:var(--grey)}

  .win{
    position:fixed;z-index:20;display:none;flex-direction:column;overflow:hidden;
    min-width:300px;min-height:200px;background:#f7f5f0;border:1px solid var(--black);
    font-family:var(--sans);color:var(--black);outline:none;
  }
  .win .tbar{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  .win .tbar:active{cursor:grabbing}
  .tbar{
    display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
    background:linear-gradient(#ebe8e1,#dcd8cf);border-bottom:1px solid #b7b2a6;
    font-size:.82rem;color:#3d3a33;
  }
  .dots{display:flex;gap:.4rem}
  .dots i,.dots button{display:block;width:.75rem;height:.75rem;border-radius:50%;border:none;padding:0}
  .dots > :nth-child(1){background:#ff5f57}
  .dots > :nth-child(2){background:#febc2e}
  .dots > :nth-child(3){background:#28c840}
  .dots button{cursor:pointer;position:relative}
  .dots .wclose::after{content:"\00d7";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 .72rem/1 var(--sans);color:rgba(80,10,5,.7);padding-bottom:.08rem}
  .tbar .ttl{flex:1;text-align:center;margin-right:3.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .win.closed{display:none!important}
  @media(max-width:700px){
    .win{left:2vw!important;top:5rem!important;width:96vw!important;height:calc(100vh - 8rem)!important;height:calc(100dvh - 8rem)!important;resize:none}
  }

  /* ---------- toolbar and buttons shared by the windows ---------- */
  .tools{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;background:#efece5;border-bottom:1px solid #cfcabd;flex-wrap:wrap}
  .btn{
    font:inherit;font-size:.8rem;padding:.35rem .85rem;background:#fff;color:var(--black);
    border:1px solid var(--black);border-radius:0;cursor:pointer;
  }
  .btn:disabled{opacity:.35;cursor:default}
  .btn:not(:disabled):hover{background:var(--black);color:#fff}
  .stat{margin-left:auto;font-size:.78rem;color:#5d5a50}
  @media(max-width:700px){
    .stat{margin-left:0;width:100%}
  }

  /* ---------- SUBSTACK ---------- */
  #substack{text-align:center;display:none;align-items:center;justify-content:center}
  #substack.active{display:flex}
  #substack.over{display:flex;position:fixed;inset:0;z-index:900;min-height:0;padding:0;background:var(--white);color:var(--black);animation:fade .25s ease}
  #substack .big{font-size:clamp(3rem,14vw,9rem);display:inline-block;transform:scaleY(1.6)}

  /* ---------- CONTACT (accidentally on purpose handmade) ---------- */
  .contact-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:3.5rem}
  .contact-left{grid-column:1 / span 5}
  .contact-right{grid-column:7 / span 6}
  @media(min-width:901px){.contact-right{margin-top:-4rem}}
  @media(max-width:900px){.contact-left,.contact-right{grid-column:1 / -1}}
  .royal{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;max-width:30rem;margin-bottom:2.2rem}
  .email-line{font-size:1.2rem;line-height:1.5}
  .email-line a,.email-copy{position:relative;text-decoration:none;display:inline-block}
  .email-copy{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
  .email-line a::after,.email-copy::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;background:currentColor;
    -webkit-mask:var(--wob) center/100% 100% no-repeat;mask:var(--wob) center/100% 100% no-repeat;
  }
  .email-line .label{display:block;color:var(--grey);margin-top:1.2rem;line-height:1.6;max-width:22rem}
  .copy-hint{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-left:.8rem;color:var(--deep-bondi)}
  .royal b{font-weight:inherit;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em}
  /* "Loading hire-ability" counts up to 100% when the page opens; browsers without @property just show 100% */
  @property --pct{syntax:"<integer>";inherits:false;initial-value:100}
  .hire-load .pct{counter-reset:pct var(--pct)}
  .hire-load .pct::after{content:counter(pct) "%";font-weight:700}
  #contact.active .hire-load .pct{animation:hireload 2.4s cubic-bezier(.3,.1,.2,1) both}
  @keyframes hireload{from{--pct:0}to{--pct:100}}
  @media(prefers-reduced-motion:reduce){#contact.active .hire-load .pct{animation:none}}
  .terms{list-style:none;margin:0;padding:0;font-size:.95rem;line-height:1.7}
  .terms li{display:flex;gap:.6rem;align-items:baseline}
  .terms li:not(.terms-h)::before{content:"\2611";color:var(--deep-bondi)}
  .terms-h{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:.3rem}
  form{display:flex;flex-direction:column;gap:1.8rem}
  .field{position:relative;padding-bottom:.4rem}
  .field::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--black);
    -webkit-mask:var(--wob) center/100% 100% no-repeat;mask:var(--wob) center/100% 100% no-repeat;
  }
  .field label{display:inline-block;color:var(--grey);margin-bottom:.4rem;transform:rotate(-1deg);transform-origin:left}
  .field:nth-child(2) label{transform:rotate(.9deg)}
  input,textarea{
    display:block;width:100%;font-family:var(--serif);font-size:1.4rem;color:var(--black);
    background:transparent;border:none;padding:.4rem 0 .7rem;outline:none;border-radius:0;
  }
  input:focus,textarea:focus{background:rgba(18,18,17,.04)}
  .field:focus-within{outline:2px solid var(--deep-bondi);outline-offset:4px}
  textarea{min-height:8rem;resize:none}
  .send-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
  .send{
    font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    background:var(--black);color:var(--white);border:none;padding:1.05rem 2.3rem;cursor:pointer;
    border-radius:42% 58% 63% 37% / 46% 41% 59% 54%;transform:rotate(-2deg);transition:transform .2s;
  }
  .send:hover{transform:rotate(1.5deg) scale(1.03)}
  .send s{text-decoration-thickness:.12em;opacity:.7;margin-right:.35em}

  /* ---------- FOOTER ---------- */
  footer{
    position:relative;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding:1.6rem var(--g) 1.8rem;color:var(--grey);
  }
  footer::before{
    content:"";position:absolute;top:0;left:var(--g);right:var(--g);height:6px;background:currentColor;opacity:.6;
    -webkit-mask:var(--wob) center/100% 100% no-repeat;mask:var(--wob) center/100% 100% no-repeat;
  }
  /* "legal stuff" is a heading that opens and closes the links under it */
  footer .legal{flex-basis:100%;justify-content:flex-start}
  footer .legal summary{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;list-style:none;color:var(--black);opacity:.75}
  footer .legal summary::-webkit-details-marker{display:none}
  footer .legal summary::after{content:"+";font-size:1.3em;line-height:1}
  footer .legal details[open] summary::after{content:"\2212"}
  footer .legal summary:hover,footer .legal summary:focus-visible{opacity:1}
  footer .lg{display:flex;gap:.3rem 1.2rem;flex-wrap:wrap;justify-content:flex-start;margin-top:.5rem}
  footer .tag{text-transform:none;letter-spacing:.04em}
  @media(max-width:560px){
    footer{gap:.5rem 1rem}
    footer .tag{order:-1;flex-basis:100%}
    footer .lg{gap:.2rem 1.1rem}
  }
  footer .legal a{text-decoration:none}
  footer .legal button{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
  footer .legal button:hover,footer .legal button:focus-visible{text-decoration:underline;color:var(--black)}
  footer .legal a:hover,footer .legal a:focus-visible{text-decoration:underline;color:var(--black)}
  body footer{display:none}
  body.contact footer{display:flex}

  @media (prefers-reduced-motion: reduce){
    .page.active{animation:none}
    .sun,.sun .rays,.nope{transition:none}
  }

  /* ---------- the cookie: an outline, like everything else here ---------- */
  .cookie{
    position:fixed;left:50%;top:50%;z-index:700;width:min(25rem,92vw);aspect-ratio:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
    padding:3.6rem 3.8rem 3.2rem 3.4rem;text-align:center;color:var(--black);
    transform:translate(-50%,-50%) rotate(-2deg);
    animation:cookie-in .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  .cookie[hidden]{display:none}
  .cookie .ckbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
  .ckbg path{fill:var(--white);stroke:var(--black);stroke-width:1.6;stroke-linejoin:round}
  .ckbg circle{fill:var(--white);stroke:var(--black);stroke-width:1.3}
  .ckbg circle.f{fill:var(--black)}
  @keyframes cookie-in{from{transform:translate(-50%,-50%) scale(.3) rotate(-40deg);opacity:0}to{transform:translate(-50%,-50%) rotate(-2deg);opacity:1}}
  .cookie h2{font-size:1.7rem;font-weight:400;font-style:italic;line-height:1;transform:scaleY(1.3)}
  .cookie p{font-size:.88rem;line-height:1.28}
  .cookie p a{text-underline-offset:.15em}
  .cookie .row{display:flex;gap:.5rem;margin-top:.35rem}
  .cookie button{
    font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
    background:none;color:var(--black);border:1px solid var(--black);padding:.5rem .85rem;border-radius:50% / 60%;
    transition:background .2s,color .2s;
  }
  .cookie button:hover{background:var(--black);color:var(--white)}
  @media(max-width:700px){.cookie{padding:3.2rem 3.4rem 2.8rem 3rem}.cookie p{font-size:.8rem}}

  /* ---------- about: stat bars + character sheet ---------- */
  .stats{margin-top:2rem}
  .srow{display:grid;grid-template-columns:minmax(0,13.5rem) 1fr 2.2rem;align-items:center;gap:1rem;padding:.42rem 0}
  .sl{font-size:1.02rem;line-height:1.2}
  .sb{position:relative;height:.7rem;border:1px solid var(--black);border-radius:.4rem;overflow:hidden}
  .sb i{display:block;height:100%;width:0;background:var(--black);border-radius:.4rem;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
  .stats.in .sb i{width:calc(var(--v) * 1%)}
  .stats.in .srow:nth-child(2) i{transition-delay:.08s}.stats.in .srow:nth-child(3) i{transition-delay:.16s}
  .stats.in .srow:nth-child(4) i{transition-delay:.24s}.stats.in .srow:nth-child(5) i{transition-delay:.32s}
  .stats.in .srow:nth-child(6) i{transition-delay:.4s}
  .sn{font-family:var(--sans);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
  /* narrow phones: a narrower name column, so the bars keep some length */
  @media(max-width:560px){.srow{grid-template-columns:minmax(0,9.5rem) minmax(3rem,1fr) 2rem;gap:.7rem}}
  .sheetrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;color:var(--grey)}
  .sheetbtn{
    cursor:pointer;background:none;color:var(--black);border:1px solid var(--black);padding:.8rem 1.3rem;
    border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;transform:rotate(-1.5deg);transition:background .2s,color .2s,transform .2s;
  }
  .sheetbtn:hover{background:var(--black);color:var(--white);transform:rotate(1deg)}
  @media(prefers-reduced-motion:reduce){.sb i{transition:none}}

  .sheet{width:min(30rem,92vw);height:auto;max-height:calc(100vh - 5.5rem);max-height:calc(100dvh - 5.5rem)}
  body.about .sheet{display:flex}
  .sbody{flex:1;min-height:0;overflow:auto;padding:1.2rem 1.4rem 1.6rem;font-family:var(--sans);color:var(--black)}
  .lvl{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
  .lvl b{
    flex:none;display:flex;align-items:center;justify-content:center;width:3.6rem;height:3.6rem;border:1.5px solid var(--black);
    border-radius:50%;font-family:var(--serif);font-weight:400;font-size:1.05rem;transform:rotate(-6deg);
  }
  .lvl span{font-family:var(--serif);font-size:1.5rem;line-height:1.05;transform:scaleY(1.25);transform-origin:left center}
  .build dl{border-top:1px solid var(--black)}
  .build dl div{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px dashed rgba(18,18,17,.35);font-size:.84rem}
  .build dt{color:#6b675c;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;padding-top:.15rem}
  .build dd{text-align:right}
  .boss{margin-top:1rem;padding:.8rem .9rem;border:1.5px solid var(--black);border-radius:.9rem .5rem 1rem .6rem;font-family:var(--serif);font-size:1.08rem;line-height:1.3;transform:rotate(-.6deg)}
  .boss b{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem;color:#c4452d}
  .tabs{display:flex;gap:.4rem;margin:1.3rem 0 .7rem}
  .tabs button{font:inherit;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:none;border:1px solid var(--black);padding:.4rem .8rem;border-radius:50% / 60%}
  .tabs button.on,.tabs button:hover{background:var(--black);color:#f7f5f0}
  .tab{display:none;list-style:none}
  .tab.on{display:block}
  .tab li{padding:.45rem 0 .45rem 1.2rem;position:relative;font-size:.9rem;line-height:1.3;border-bottom:1px dashed rgba(18,18,17,.25)}
  .tab li::before{content:"\25AA";position:absolute;left:0}
  .tab li i{font-style:normal;font-weight:700;color:#c4452d;margin-right:.2rem}

  /* ---------- EXPERIMENT: a Bondi accent on About and Contact (delete this block to undo) ---------- */
  ::selection{background:var(--bondi);color:var(--white)}
  .stats .sb i{background:var(--bondi)}
  .photo::after{border-color:var(--bondi);border-width:1.5px}
  .sheetbtn:hover{background:var(--deep-bondi);border-color:var(--deep-bondi)}
  .email-line a::after,.email-copy::after{background:var(--bondi)}
  .field:focus-within::after{background:var(--bondi)}
  input:focus,textarea:focus{background:rgba(0,149,182,.07)}
  .send{background:var(--deep-bondi)}
  .send:hover,.send:focus-visible{background:var(--bondi);color:var(--charcoal)}

  /* resize handles: every edge and every corner of every window */
  .rz{position:absolute;z-index:6;display:block;touch-action:none}
  .rz-n,.rz-s{left:14px;right:14px;height:6px;cursor:ns-resize}
  .rz-e,.rz-w{top:14px;bottom:14px;width:6px;cursor:ew-resize}
  .rz-n{top:-1px}.rz-s{bottom:-1px}.rz-e{right:-1px}.rz-w{left:-1px}
  .rz-ne,.rz-nw,.rz-se,.rz-sw{width:16px;height:16px}
  .rz-ne{top:-1px;right:-1px;cursor:nesw-resize}
  .rz-sw{bottom:-1px;left:-1px;cursor:nesw-resize}
  .rz-nw{top:-1px;left:-1px;cursor:nwse-resize}
  .rz-se{bottom:-1px;right:-1px;cursor:nwse-resize}
  .win.max .rz{display:none}
  .win.max .tbar{cursor:default}
  .dots .wmax{cursor:pointer;position:relative}
  @media(pointer:coarse){
    .dots{gap:.5rem}
    .dots i,.dots button{width:1.5rem;height:1.5rem}
    .dots .wclose::after{font-size:1rem}
    .tabs button,.sheetbtn,.cookie button,.btn{min-height:2.75rem}
    /* fingers need about 44px: the email gets an invisible margin, the legal links get padding */
    .email-copy::before{content:"";position:absolute;inset:-.5rem -.3rem}
    footer .legal summary{padding:.85rem 0;margin:-.85rem 0}
    footer .lg{gap:0 1.2rem;margin-top:.2rem}
    footer .legal a,footer .legal button{display:inline-block;padding:.95rem 0}
  }
  .dots .wmax::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 .8rem/1 var(--sans);color:rgba(5,60,15,.75);padding-bottom:.05rem}
  @media(max-width:700px){.rz,.wmax{display:none}}

  @media(prefers-reduced-motion:reduce){
    .cookie{animation:none}
    .sun,.sun .rays,.nope,.send,.sheetbtn{transition:none}
    .sun:hover,.send:hover,.sheetbtn:hover{transform:none}
    .sheetbtn:hover{transform:rotate(-1.5deg)}
  }