/* ————————————————————————————————————————————
     System: one type size, one spacing unit.
     Hierarchy comes from position, colour and italics —
     never from scale or weight.
     ———————————————————————————————————————————— */
  :root{
    --u: 21px;                 /* the single spacing unit */
    --ink: #161614;
    --mid: #9a9a94;            /* secondary grey — lighter, distinct from black ink */
    --line: #e7e5df;
    --bg: #fcfcfa;
    --ph: #f0efe9;             /* placeholder tile */
    --accent: #5a6b4f;         /* the one colour: hover veil */
    --header-h: calc(33px + var(--u) * 2);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  /* Söhne Kräftig — place soehne-kraftig.woff2 next to this file
     (or ask for it to be base64-embedded). Falls back to Helvetica. */
  /* Söhne Kräftig (Klim) — embedded so this file is self-contained. */
  @font-face{
    font-family:'Soehne Kraftig';
    src:url('font.woff2') format('woff2');
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }

  html{
    font-family:'Soehne Kraftig', 'Helvetica Neue', Helvetica, 'Instrument Sans', Arial, sans-serif;
    font-size:15px;            /* universal — one size everywhere */
    font-weight:500;           /* Kräftig — one weight everywhere */
    -webkit-font-smoothing:antialiased;
  }
  body{
    background:var(--bg);
    color:var(--ink);
    line-height:1.55;
    display:flex; flex-direction:column;
    min-height:100svh;          /* short pages: footer sits at the bottom margin */
  }
  main{ flex:1; }

  a{ color:inherit; text-decoration:none; }
  em{ font-style:normal; }   /* italics removed site-wide; emphasis carried by tone */
  p a, li a, dd a{
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
    transition:text-decoration-color .15s ease;
  }
  p a:hover, li a:hover, dd a:hover{ text-decoration-color:var(--ink); }

  a:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

  ::selection{ background:var(--ink); color:var(--bg); }

  /* ——— Header: logo left, the navigation sentence right.
         The active item is marked with a filled square. ——— */
  header{
    position:sticky; top:0; z-index:10;
    background:var(--bg);
    padding:var(--u);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:var(--u);
    align-items:start;
  }
  .wordmark{ grid-column:1; }
  .logo{ display:block; height:33px; width:auto; fill:currentColor; }
  header nav{
    grid-column:2 / -1;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    column-gap:var(--u);
  }
  header nav a{ color:var(--ink); transition:opacity .15s ease; }
  header nav a:hover{ opacity:.5; }
  header nav a[aria-current="page"]{ color:var(--ink); }
  nav span.sep{ margin-left:0.5em; font-size:0.7em; vertical-align:middle; }

  /* ——— burger + full-page menu (mobile) ——— */
  .burger{
    display:none;                       /* shown ≤820px */
    grid-column:2; justify-self:end;
    flex-direction:column; justify-content:center; gap:7px;
    width:34px; height:34px;
    background:none; border:0; padding:0; cursor:pointer;
  }
  .burger span{ display:block; width:28px; height:2.5px; background:var(--ink); }
  .mnav{
    position:fixed; inset:0; z-index:50;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
  }
  .mnav[hidden]{ display:none; }
  .mnav nav{ display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*2); }
  .mnav nav a{ color:var(--ink); font-size:28px; line-height:1; }
  .mnav nav a[aria-current="page"]{ opacity:.45; }
  .mnav-close{
    position:absolute; top:var(--u); right:var(--u);
    width:34px; height:34px;
    background:none; border:0; padding:0; cursor:pointer;
  }
  .mnav-close span{
    position:absolute; left:3px; top:16px;
    display:block; width:28px; height:2.5px; background:var(--ink);
  }
  .mnav-close span:first-child{ transform:rotate(45deg); }
  .mnav-close span:last-child{ transform:rotate(-45deg); }
  body.menu-open{ overflow:hidden; }

  main{ padding:var(--u); min-height:70vh; }

  /* main content sits on the same 4-column guide as the header */
  .colguide{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:var(--u);
  }

  /* ——— Section labels: grey, same size as everything ——— */
  .label{
    color:var(--mid);
    margin-top:calc(var(--u) * 3);
    margin-bottom:var(--u);
  }
  main > .label:first-child, main > section:first-child > .label:first-child{ margin-top:0; }

  /* ——— Works: paginated grid — 4 per page, arrow advances. No page scroll. ——— */
  body.works{ height:100svh; overflow:hidden; }
  body.works footer{ display:none; }
  .works-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--u);
  }
  .works-nav{ display:flex; align-items:center; gap:var(--u); }
  .works-nav button{
    font:inherit; background:none; border:none; cursor:pointer;
    color:var(--ink); padding:0 .2em;
    transition:opacity .15s ease;
  }
  .works-nav button:hover{ opacity:.5; }
  .works-nav button[disabled]{ opacity:.2; cursor:default; }
  .wcount{ color:var(--mid); }

  .grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--u);
  }
  /* JS adds .paged once active; tiles outside the current page are hidden */
  .grid.paged .mtile{ display:none; }
  .grid.paged .mtile.show{ display:block; }
  @media (max-width:1100px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:820px){ .grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:520px){ .grid{ grid-template-columns:1fr; } }

  .mtile{ position:relative; }
  .mtile a{ display:block; position:relative; }
  .mtile img, .mtile .ph{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    display:block;
    background:var(--ph);
  }
  .mtile .ph{
    display:flex; align-items:center; justify-content:center;
    color:var(--mid);
  }

  /* hover veil: flat colour, project name in paper */
  .veil{
    position:absolute; inset:0;
    background:var(--accent);
    color:var(--bg);
    opacity:0;
    transition:opacity .25s ease;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:var(--u);
  }
  .veil em{ display:block; font-style:normal; opacity:.75; }
  @media (hover:hover) and (pointer:fine){
    .mtile a:hover .veil, .mtile a:focus-visible .veil{ opacity:1; }
  }
  /* caption below the image — phones only */
  .cap{ display:none; margin-top:calc(var(--u)/2); }
  .cap em{ color:var(--mid); }
  /* Tablet (incl. iPad, touch, no hover): title overlaid inside the image, always visible —
     so it takes no extra height and the paged grid fits without clipping. */
  @media (hover:none) and (min-width:521px){
    .veil{ display:flex; opacity:1; background:transparent; color:var(--bg);
           justify-content:flex-end; }
    .veil::before{ content:""; position:absolute; inset:0;
                   background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
    .veil b, .veil em{ position:relative; z-index:1; }
    .cap{ display:none; }
  }
  /* phones (and any very narrow screen): caption below instead of overlay */
  @media (max-width:520px){
    .veil{ display:none; }
    .cap{ display:block; }
  }
  img{ transition:opacity .25s ease; }

  /* ——— Custom cursor: a dot that opens into a ring
         over anything you can act on ——— */
  @media (pointer:fine){
    body{ cursor:none; }
    a, img, button{ cursor:none; }
    #cursor{
      position:fixed; top:0; left:0;
      width:8px; height:8px;
      border-radius:50%;
      background:#fff;
      pointer-events:none;
      z-index:999;
      transform:translate(-50%,-50%);
      transition:width .18s ease, height .18s ease, background .18s ease, border .18s ease;
      mix-blend-mode:difference;
    }
    #cursor.hot{
      width:34px; height:34px;
      background:transparent;
      border:1px solid #fff;
    }
    #cursor.txt{
      width:auto; height:auto;
      background:none; border:none; border-radius:0;
      color:#fff; white-space:nowrap;
    }
  }
  @media (pointer:coarse){ #cursor{ display:none; } }

  /* ——— Project pages ——— */
  .prose{ max-width:34em; }
  .prose p + p{ margin-top:var(--u); }
  .lede{ max-width:34em; margin-bottom:calc(var(--u) * 2); }
  /* accessible heading, present for screen-readers & SEO, invisible on screen */
  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap; border:0;
  }
  .lede em{ color:var(--mid); }

  /* ——— Landing composition: the lede floats halfway between
         header and grid; the first row of tiles ends exactly
         at the bottom margin (height set by layoutLanding). ——— */
  .hero{ display:flex; align-items:center; }
  .hero .lede{ margin-bottom:0; }

  /* ——— Project pages: a fixed split.
         Right side holds the slideshow at full height — photographs
         keep their own proportions (no cropping), filling the height
         where the ratio allows. Left side scrolls independently.
         Clicking the slideshow advances; the cursor says so. ——— */
  .pwrap{ display:block; }
  .pcol{ min-width:0; }
  .slides{ margin-top:calc(var(--u) * 2); }
  .slides img{
    width:100%; height:auto; display:block;
    margin-bottom:var(--u);
    transition:opacity .3s ease;
  }
  .count{ display:none; }
  .pfoot{ display:none; }

  @media (min-width:901px){
    body.project{ height:100svh; overflow:hidden; }
    body.project main{ flex:1 1 auto; min-height:0; }
    body.project footer{ display:none; }
    .pwrap{
      display:grid;
      grid-template-columns:repeat(4, 1fr);   /* same 4-col guide as header */
      gap:var(--u);
      height:100%;
      align-items:stretch;
    }
    .pcol{ grid-column:1 / 3; }                /* text: columns 1–2 */
    .slides{ grid-column:3 / -1; }             /* photos: columns 3–4 */
    .pwrap.noimg .pcol{ grid-column:1 / 4; }
    .pcol{
      height:100%;
      overflow-y:auto;
      scrollbar-width:none;            /* Firefox: no bar */
      -ms-overflow-style:none;          /* old Edge */
      padding-right:calc(var(--u) / 2);
    }
    .pcol::-webkit-scrollbar{ width:0; height:0; display:none; }  /* Chrome/Safari */
    .slides{
      margin:0;
      position:relative;
      height:100%;
      overflow:hidden;
    }
    .slides img{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:contain;          /* never crop — respect each photo's ratio */
      object-position:left center;  /* portrait photos anchor to the left (About gutter); landscape fills the frame so it's unaffected */
      margin:0;
      opacity:0;
    }
    .slides img.on{ opacity:1; }
    .count{ display:inline; color:var(--mid); }
    .pfoot{ display:block; color:var(--mid); margin-top:calc(var(--u) * 3); }
  }

  /* ——— About page: normal scrolling, on the 4-column guide ——— */
  .about-intro{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:var(--u);
    align-items:stretch;
  }
  .about-intro .aside{ grid-column:1 / 3; }      /* text: columns 1–2, defines the row height */
  .about-intro .aside > .label:first-child{ margin-top:0; }  /* top-align text with portrait */
  .about-intro .portrait{
    grid-column:3 / 4;                            /* portrait: one column wide, left edge at the About gutter */
    align-self:stretch;
    position:relative;
    min-height:0;                                  /* frame height follows the text column, not the image */
    overflow:hidden;
    background:var(--ph);
  }
  .about-intro .portrait img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
  }
  .about-lists{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:var(--u);
    margin-top:calc(var(--u) * 3);
  }
  .al-awards{ grid-column:1 / 3; }
  .al-press{ grid-column:3 / -1; }
  .al-awards .label, .al-press .label{ margin-top:0; }

  dl.credits{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:calc(var(--u)/2) calc(var(--u)*2);
    max-width:34em;
  }
  dl.credits dt{ color:var(--mid); }

  .backlink{ color:var(--mid); display:inline-block; margin-bottom:calc(var(--u)*2); }
  .backlink:hover{ color:var(--ink); }
  .nextlink{ display:inline-block; margin-top:calc(var(--u)*2); }
  .outro{ color:var(--mid); margin-top:calc(var(--u)*3); }

  /* ——— About: awards + press lists ——— */
  .rows{ list-style:none; }
  .rows li{
    padding:calc(var(--u)/4) 0;
  }
  .rows .y{ color:var(--mid); margin-right:0.6em; }
  .rows em{ color:var(--mid); font-style:normal; }

  .links{ list-style:none; }
  .links li{ padding:calc(var(--u)/4) 0; }
  .links em{ color:var(--mid); }

  /* ——— Qualifications: elegant grey list under the profile ——— */
  .quals{ list-style:none; max-width:34em; color:var(--ink); }
  .quals li{ padding:calc(var(--u)/5) 0; }

  /* ——— Two-column blocks: text left, image at the right margin ——— */
  .cols{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:var(--u);
    align-items:start;
  }
  .cols img{ width:100%; display:block; background:var(--ph); }

  /* Contact: image runs alongside the text from the very top. */
  .contact-top .ctext > .lede:first-child{ margin-top:0; }
  .contact-top img{ position:sticky; top:calc(var(--header-h) + var(--u)); }
  /* contact: photo occupies half the screen width */
  .contact-top{ grid-template-columns:1fr 1fr; }

  address{ font-style:normal; }
  address p + p{ margin-top:var(--u); }
  .duo{ display:grid; gap:calc(var(--u) * 2); align-content:start; }
  .quiet{ color:var(--mid); }

  /* ——— Enquiry form: one type size, one unit, ruled underlines only ——— */
  .enquiry{ max-width:34em; }
  .frow{ margin-bottom:calc(var(--u) * 0.28); }
  .frow label{ display:block; color:var(--mid); margin-bottom:calc(var(--u) / 8); }
  .enquiry input, .enquiry textarea{
    font:inherit; color:var(--ink);
    width:100%;
    background:none;
    border:none;
    border-bottom:1px solid var(--line);
    padding:calc(var(--u) / 6) 0;
    border-radius:0;
    transition:border-color .15s ease;
  }
  .enquiry input:focus, .enquiry textarea:focus{
    outline:none; border-bottom-color:var(--ink);
  }
  .enquiry textarea{ resize:vertical; }
  .fsend{ margin-top:calc(var(--u) * 1.5); }
  .enquiry button{
    font:inherit; color:var(--ink);
    background:none; border:none; padding:0; cursor:pointer;
    border-bottom:1px solid var(--ink);
    padding-bottom:2px;
    transition:opacity .15s ease;
  }
  .enquiry button:hover{ opacity:.55; }

  footer{
    padding:var(--u);
    color:var(--mid);
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--u);
  }

  /* ——— 404: simple, on-brand. Keeps the normal header and footer. ——— */
  body.notfound main{ display:flex; align-items:center; }
  .nf{ max-width:34em; }
  .nf .lede{ margin-bottom:var(--u); }
  .nf-back a{ color:var(--mid); }
  .nf-back a:hover{ color:var(--ink); }

  /* About page: stack on tablet + mobile, portrait at natural proportion. */
  @media (max-width:1024px){
    .about-intro{ display:block; }
    .about-intro .portrait{ position:relative; aspect-ratio:4 / 5; min-height:0; margin-top:calc(var(--u)*2); }
    .about-intro .portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .about-lists{ display:block; }
    .al-press{ margin-top:calc(var(--u)*2); }
    .al-press .label{ margin-top:calc(var(--u)*3); }
  }

  /* Tablet (iPad, 821–1024px): keep the desktop paged 4-grid + overlay titles,
     but allow the page to scroll so a tall 4-up grid never clips on a short screen. */
  @media (min-width:821px) and (max-width:1024px){
    body.works{ height:auto; min-height:100svh; overflow:visible; }
    body.works footer{ display:block; }
  }

  /* Phones only: Works grid scrolls through all projects (no paging). */
  @media (max-width:820px){
    body.works{ height:auto; overflow:visible; }
    body.works footer{ display:block; }
    /* header: logo top-left (20% smaller), burger menu top-right */
    header{ grid-template-columns:auto 1fr; align-items:center; }
    .wordmark{ grid-column:1; }
    .logo{ height:26px; }
    header nav{ display:none; }
    .burger{ display:flex; }
    /* even vertical rhythm: header → lede → Works → first photo all one unit apart */
    .works-head .label{ margin-top:var(--u); }
    /* About: Practice text first, then the portrait, then Profile text.
       display:contents lifts the aside's children into the flex flow so the
       photo can sit between the two text blocks — no HTML change needed. */
    .about-intro{ display:flex; flex-direction:column; }
    .about-intro .aside{ display:contents; }
    .about-intro .aside > .label:nth-of-type(1){ order:1; }              /* Practice label */
    .about-intro .aside > .prose:nth-of-type(1){ order:2; }              /* Practice text */
    .about-intro .portrait{ order:3; margin-top:calc(var(--u)*2); margin-bottom:calc(var(--u)*2); }
    .about-intro .aside > .label:nth-of-type(2){ order:4; margin-top:0; } /* Profile label */
    .about-intro .aside > .prose:nth-of-type(2){ order:5; }              /* Profile text */
    /* Contact: photo first, then the text */
    .contact-top{ display:flex; flex-direction:column; }
    .contact-top > a{ order:-1; margin-bottom:calc(var(--u)*2); }
  }

  @media (max-width:640px){
    .cols{ grid-template-columns:1fr; }
    .contact-top img{ position:static; }
    .imgs{ grid-template-columns:1fr; }
    header nav{ grid-template-columns:1fr; row-gap:calc(var(--u)/3); }
  }

  @media (prefers-reduced-motion:reduce){
    *{ transition:none !important; }
  }