/* A personal introduction, with the same paper gesture as the home page. */
.about{align-items:start;gap:clamp(40px,7vw,96px)}
.about-paper{position:relative;margin:38px 12px 0 0;padding:24px 28px 30px;background:var(--blue);max-width:350px;transform:rotate(-3deg);border:1px solid var(--ink);border-radius:2px 3px 7px 2px;box-shadow:8px 9px 0 var(--olive)}
.about-paper .eyebrow{display:block;margin-bottom:10px}
.about-paper .paper-bottom{position:static;display:block;font-size:12px;letter-spacing:2px}
/* Portrait: the blue paper note becomes a 4:5 frame with tape; empty = a few hand-drawn lines, later a photo. */
.about-portrait{margin-left:0;margin-bottom:0;width:min(100%,320px);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between}
.about-portrait:before{content:'';position:absolute;top:-13px;left:38%;width:84px;height:26px;background:var(--sand);transform:rotate(6deg);opacity:.92}
.portrait-sketch{display:block;width:72%;margin:0 auto;color:var(--ink)}
.portrait-sketch svg{display:block;width:100%;height:auto;overflow:visible}
.portrait-sketch .sketch-trail{stroke:var(--rust)}
.about-portrait figcaption{text-transform:uppercase;color:var(--brown)}
.about-portrait.has-photo{padding:12px;background:var(--paper)}
.about-portrait.has-photo img{display:block;width:100%;height:100%;object-fit:cover}
.about-copy{align-self:start;padding-top:36px}
.about-copy>.intro{font:clamp(23px,2.1vw,29px)/1.5 Georgia,serif;color:var(--ink);text-wrap:pretty;margin-bottom:28px}
.about-copy>p:not(.intro){max-width:48ch}
/* Why TerezAI: a short section with the same eyebrow + Georgia heading rhythm as the work list below. */
.about-why{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.about-why .eyebrow{margin-bottom:12px}
.about-why h2{font:var(--section-title)/1.2 Georgia,serif;letter-spacing:-1px;margin-bottom:16px}
.about-why p:not(.eyebrow){color:var(--muted);max-width:48ch}
.about-why h2+p{color:var(--ink)}
.about-paths{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:20px}
.about-paths .text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px}
/* Contact: an olive band like "A někdy stačí vyjít za roh" on the home page; e-mail as a large handwritten link. */
.about-contact{background:var(--olive);display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:48px;margin:8px 0 0;scroll-margin-top:24px}
.about-contact h2{font:46px/1.15 Georgia,serif;letter-spacing:-1.5px;margin:0}
.about-contact>div+div{align-self:center}
.about-contact p:not(.eyebrow){max-width:380px;color:var(--brown);margin-bottom:18px}
.contact-mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:italic clamp(22px,2.2vw,28px)/1.3 Georgia,serif;color:var(--ink);overflow-wrap:anywhere;position:relative;padding-bottom:6px}
.contact-mail:after{content:'';position:absolute;left:0;right:26px;bottom:0;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%;transform:rotate(-1deg)}
.contact-mail span{color:var(--rust);font-style:normal}
.contact-soon{font:italic 20px/1.4 Georgia,serif;color:var(--ink)!important;display:inline-block;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%;padding-bottom:6px;margin:0!important}
/* Link from the olive band to the full Kontakt page (questions and commissions). */
.about-contact-more{display:table;margin-top:18px}
.about-work{margin-top:36px;padding:28px 0 0;border-top:1px solid var(--line)}
.about-work .section-heading{display:block}
.about-work .eyebrow{margin-bottom:12px}
.about-work h2{font-size:var(--section-title)}
.about-work .category{grid-template-columns:24px 40px 1fr 28px;gap:4px 14px;padding:18px 0;container-type:inline-size;container-name:about-category}
@container about-category (width < 12em){
 main .about-work .category h3{grid-column:1 / -1;grid-row:2}
 main .about-work .category p{grid-column:1 / -1;grid-row:3}
 main .about-work .category p.category-how{grid-column:1 / -1;grid-row:4}
 main .about-work .category .cat-icon{grid-row:1}
}
.about-work .category h3{font-size:var(--row-title);grid-column:3;grid-row:1}
.about-work .category p{grid-column:3;grid-row:2}
.about-work .category .arrow{grid-column:4;grid-row:1}
.about-work .category .number{grid-column:1;grid-row:1}
.about-work .category .cat-icon{grid-column:2;grid-row:1 / span 2;align-self:start;width:40px;height:40px;margin-top:2px}
/* What and how I create (o-mne.json "how"): one more line under the short description, ink instead of grey. */
.about-work .category .category-how{grid-column:3;grid-row:3;color:var(--ink);max-width:52ch;margin-top:6px;text-wrap:pretty;overflow-wrap:break-word}
/* Hand-drawn sketch under the paper note: the same pencil as the home page, dragging a rust line. */
.about-sketch{display:block;width:min(100%,360px);margin:56px 0 0 8px;color:var(--ink);transform:rotate(-2deg)}
.about-sketch svg{display:block;width:100%;height:auto;overflow:visible}
.about-sketch .sketch-trail{stroke:var(--rust)}
.about-sketch .sketch-spark{color:var(--brown)}
.about-sketch .sketch-pencil{transform-box:fill-box;transform-origin:0% 100%}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .contact-mail span{transition:translate 200ms ease}
  .contact-mail:hover span{translate:2px -2px}
  .about-portrait .portrait-sketch .sketch-trail{stroke-dasharray:1;stroke-dashoffset:0}
  .about-portrait:hover .portrait-sketch .sketch-trail{animation:icon-redraw 600ms ease-out}
  .about-work .category:hover .cat-icon{transform:translate(2px,-3px) rotate(4deg)}
  .about-work .category:hover .stroke-trail{animation:icon-redraw 520ms ease-out}
  .about-sketch .sketch-trail{stroke-dasharray:1;stroke-dashoffset:0}
  .about-sketch .sketch-pencil{transition:rotate 260ms ease,translate 260ms ease}
  .about-sketch:hover .sketch-pencil{rotate:6deg;translate:3px -4px}
  .about-sketch:hover .sketch-trail{animation:icon-redraw 700ms ease-out}
}
/* Always readable: unsupported scroll timelines simply leave a static layout. */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    /* The work list itself stays put; only its rows arrive (as on the home page),
       so the two motions never add up to a delayed 20px drift. */
    .about-paper,.about-sketch{animation:about-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .about-work .category{animation:about-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes about-arrive{from{translate:0 10px}to{translate:0 0}}
  }
}
@media(max-width:900px){
  .about-contact{gap:32px;padding:32px}
}
@media(max-width:700px){
  .about{gap:24px}
  .about-paper{max-width:290px;margin-bottom:28px}
  .about-portrait{width:min(78%,260px);margin-left:6px}
  .about-sketch{width:min(78%,280px);margin:-4px 0 28px 18px}
  .about-copy{padding-top:0}
  .about-contact{grid-template-columns:1fr;padding:28px;gap:20px}
  .about-contact h2{font-size:39px}
}