/* Shared stylesheet — extracted from the four Claude Design .dc.html <helmet> blocks.
   Base + selection + per-page keyframes + hover rules (formerly style-hover=) + mobile. */

html{scroll-behavior:smooth}
body{margin:0;background:#FAF9F4;color:#171A17;font-family:"Bricolage Grotesque","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
a{color:#24503B;text-decoration:none}
a:hover{color:#171A17}
summary::-webkit-details-marker{display:none}
summary{list-style:none;cursor:pointer}
::selection{background:#24503B;color:#FAF9F4}

/* ---- Home keyframes ---- */
@keyframes breathe{0%,100%{transform:scale(1) rotate(-1.6deg)}50%{transform:scale(1.024) rotate(-1.6deg)}}
@keyframes breatheGlow{0%,100%{box-shadow:0 14px 34px -24px rgba(23,26,23,.30)}50%{box-shadow:0 28px 60px -26px rgba(23,26,23,.48)}}
@keyframes railPulse{0%{left:12.5%;opacity:0}10%{opacity:.85}88%{opacity:.85}100%{left:87.5%;opacity:0}}
@keyframes railPulse3{0%{left:16.667%;opacity:0}10%{opacity:.85}88%{opacity:.85}100%{left:83.333%;opacity:0}}
@keyframes jobIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes capBlink{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- Papers keyframes / open state ---- */
@keyframes openDownP{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
body.page-papers details[open] > div[data-body]{animation:openDownP .38s cubic-bezier(.2,.7,.2,1)}
body.page-papers details[open] summary span[data-plus]{transform:rotate(135deg);border-color:#24503B;color:#24503B}

/* ---- Diary keyframes / open state ---- */
@keyframes openDownD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
body.page-diary details[open] > div[data-body]{animation:openDownD .42s cubic-bezier(.2,.7,.2,1)}
body.page-diary details[open] summary span[data-cta]{color:#24503B}
body.page-diary details[open] summary span[data-cta] em{font-style:normal}

/* ---- Gallery keyframes ---- */
@keyframes fadeUp{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ---- Logo marks dropped into the 44px timeline circles ---- */
.mark-img{width:100%;height:100%;display:block;object-fit:contain;padding:3px}

/* ---- Hover rules (were style-hover= attributes, applied by the design runtime).
        Kept as a JS shim in app.js for exact parity; these are a no-JS fallback. ---- */
a[data-hover]{transition:color .2s,background .2s,border-color .2s,padding-left .25s,transform .22s cubic-bezier(.2,.7,.2,1)}

/* ================= Mobile ================= */
@media (max-width:720px){
  nav{padding:14px 20px !important;flex-wrap:wrap;gap:12px !important}
  nav > div{flex-wrap:wrap}
  section,header{padding-left:20px !important;padding-right:20px !important}
  footer > div{padding-left:20px !important;padding-right:20px !important}

  /* Home hero: 2-col -> stacked, drop the portrait's negative pull */
  .hero-grid{grid-template-columns:1fr !important;gap:40px !important}
  .portrait-col{margin-top:0 !important}

  /* Home timelines: label + rail sit on top of each other */
  .rail-row{flex-direction:column;align-items:stretch !important;gap:14px !important}
  .rail-row > p:first-child{width:auto !important}

  /* Papers / Diary: 170px sidebar -> stacked */
  .side-grid{grid-template-columns:1fr !important;gap:16px !important}

  /* Home hero headline scales down a touch further */
  .hero-h1{font-size:clamp(44px,15vw,88px) !important}

  /* Gallery masonry -> single column */
  .masonry{columns:1 !important}
  /* Gallery lightbox map overlay is noisy on a phone */
  .lb-map{display:none !important}
  [data-lb-inner]{max-width:100% !important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}