/*
Theme Name: Some Kind of Nature
Author: Alizia Schief
Description: Responsives Kunstportfolio mit asymmetrischem Desktop-Raster und gestapelten Karten auf Mobilgeräten.
Version: 2.9.78
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: some-kind-of-nature
*/
:root{
  --ink:#1e1e1b;
  --muted:#878680;
  --line:#efeee9;
  --paper:#fff}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth}
body{
  margin:0;
  background:#242424;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased}
a{
  color:inherit;
  text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:2px solid #6a7465;
  outline-offset:3px}
img{
  max-width:100%;
  display:block}
.site{
  max-width:1440px;
  margin:40px auto;
  background:var(--paper);
  overflow:hidden}
.site-header{
  min-height:88px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding:30px 6.4%}
.nav{
  display:flex;
  gap:28px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.09em;
  color:#777}
.menu-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  font-size:21px;
  color:#777}
.hero{
  padding:50px 6.4% 74px}
.hero h1,.contact h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(70px,9vw,154px);
  font-weight:900;
  letter-spacing:-.085em;
  line-height:.86;
  margin:0}
.hero h1 span{
  display:block}
.hero .signature{
  margin:30px 0 0;
  font-weight:800;
  font-size:clamp(18px,2.1vw,30px);
  letter-spacing:-.055em;
  color:#777}
.ticker{
  height:55px;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-block:1px solid var(--line);
  white-space:nowrap;
  color:#aaa;
  font-weight:700;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase}
.ticker span{
  animation:marquee 35s linear infinite;
  flex:none}
@keyframes marquee{
  to{
    transform:translateX(-50%)}
}
.works{
  padding:92px 9.4% 230px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-content:start}
.work-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:3px;
  background:#e8e6e2;
  min-width:0}
.work-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s}
.work-card:hover img{
  transform:scale(1.035)}
.work-card .label{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--ink);
  color:white;
  padding:15px 17px;
  text-transform:uppercase;
  font-size:clamp(10px,1vw,17px);
  font-weight:900;
  letter-spacing:-.045em}
.work-card:nth-child(1){
  grid-column:1/3;
  grid-row:1/3;
  aspect-ratio:1/1.12}
.work-card:nth-child(2){
  grid-column:3/5;
  grid-row:1;
  aspect-ratio:2.2/1}
.work-card:nth-child(3){
  grid-column:3/4;
  grid-row:2;
  aspect-ratio:1/1.08}
.work-card:nth-child(4){
  grid-column:4/5;
  grid-row:2;
  aspect-ratio:1/1.08}
.work-card.no-image::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 35% 40%,#cfcac3,transparent 45%),linear-gradient(145deg,#eeeae5,#a5aaa1)}
.work-card:nth-child(2).no-image::before{
  background:repeating-linear-gradient(123deg,#e7e5e2 0 3px,#343532 3px 5px,#eee 5px 15px)}
.work-card:nth-child(3).no-image::before{
  background:repeating-radial-gradient(circle at 40% 50%,#242424 0 2px,#eee 3px 8px)}
.work-card:nth-child(4).no-image::before{
  background:linear-gradient(140deg,#4a7778,#c4cec4 45%,#315751)}
.about{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  border-top:1px solid var(--line);
  min-height:550px}
.about-copy{
  padding:17% 14% 12% 19%;
  align-self:center}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#aaa;
  font-size:11px}
.about-copy p{
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.65;
  max-width:430px}
.about-media{
  background:#dadbd3;
  min-height:500px}
.about-media img{
  height:100%;
  width:100%;
  object-fit:cover}
.workshops{
  border-block:1px solid var(--line);
  padding:64px 6.4%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  font-size:21px}
.workshops a{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:400}
.footer{
  background:var(--ink);
  color:#fff;
  padding:150px 6.4% 45px}
.contact h2{
  font-size:clamp(38px,5vw,85px);
  letter-spacing:-.065em;
  line-height:1}
.footer-bottom{
  border-top:1px solid #353532;
  margin-top:95px;
  padding-top:32px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#888;
  font-size:11px}
.footer-links{
  display:flex;
  gap:30px;
  text-transform:uppercase}
.page-content{
  padding:60px 9.4% 120px;
  min-height:60vh;
  max-width:950px}
.page-content h1{
  font-size:clamp(38px,6vw,75px);
  letter-spacing:-.06em}
.page-content p{
  line-height:1.7}
.screen-reader-text{
  position:absolute;
  left:-10000px}
.screen-reader-text:focus{
  left:10px;
  top:10px;
  background:white;
  padding:10px;
  z-index:99}
@media(max-width:1024px){
  .site{
    width:min(100%,390px);
    margin:0 auto}
  .site-header{
    min-height:78px;
    padding:23px 8%;
    align-items:flex-start}
  .nav{
    display:none;
    position:absolute;
    z-index:10;
    right:8%;
    top:65px;
    background:white;
    padding:20px;
    box-shadow:0 7px 25px #0002;
    flex-direction:column}
  .nav.is-open{
    display:flex}
  .menu-toggle{
    display:block}
  .hero{
    padding:20px 8% 105px}
  .hero h1{
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(44px,14vw,66px);
    font-weight:700;
    letter-spacing:-.075em;
    line-height:.87}
  .hero .signature{
    font-family:Georgia,serif;
    font-weight:400;
    font-size:20px;
    margin-top:24px}
  .ticker{
    height:45px;
    font-size:10px}
  .works{
    display:flex;
    flex-direction:column;
    gap:13px;
    padding:66px 8% 125px}
  .work-card,.work-card:nth-child(n){
    aspect-ratio:1.04/1;
    min-height:0;
    width:100%}
  .work-card:nth-child(2){
    aspect-ratio:1.04/.88}
  .work-card .label{
    padding:12px 13px;
    font-size:10px;
    letter-spacing:.05em;
    background:#1e1e1bc9}
  .about{
    display:flex;
    flex-direction:column;
    min-height:0}
  .about-copy{
    padding:54px 12% 26px}
  .about-copy p{
    font-size:15px;
    line-height:1.55}
  .about-media{
    min-height:0;
    aspect-ratio:1/1.12}
  .workshops{
    padding:35px 8%;
    font-family:Georgia,serif;
    font-size:20px}
  .workshops a{
    font-family:Arial,sans-serif;
    font-size:9px}
  .footer{
    padding:85px 8% 38px}
  .contact h2{
    font-family:Georgia,serif;
    font-weight:700;
    font-size:clamp(33px,9vw,48px);
    letter-spacing:-.05em;
    line-height:.98}
  .footer-bottom{
    margin-top:75px;
    display:block;
    font-size:10px}
  .footer-links{
    margin-top:25px;
    gap:17px;
    font-size:9px}
  .page-content{
    padding:30px 8% 90px}
}
/* Unterkategorien: echtes WordPress-Menü anstelle des Laufbands. */
.category-nav{
  border-block:1px solid var(--line);
  padding:0 8px}
.category-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:100%;
  min-height:55px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  text-align:center}
.category-list li{
  margin:0;
  color:#888;
  text-transform:uppercase;
  font-size:clamp(9px,.78vw,12px);
  font-weight:700;
  letter-spacing:.09em;
  white-space:nowrap}
.category-list a{
  display:block;
  padding:16px 2px}
.category-list a:hover{
  text-decoration:underline;
  text-underline-offset:5px}
/* Zwei exakt gleich hohe Rasterzeilen; die große Karte überspannt beide. */
.works{
  grid-template-rows:repeat(2,minmax(0,1fr));
  aspect-ratio:auto}
.work-card:nth-child(n){
  aspect-ratio:auto}
.work-card img{
  position:absolute;
  inset:0}
.work-card:nth-child(1){
  min-height:0}
.works{
  --work-width:min(calc((100vw - 80px) * .812),1169px);
  grid-template-rows:repeat(2,minmax(0,calc((var(--work-width) / 2 - 9px) * .53)))}
/* Drei Spalten: Text, Leerraum, Bild. Außenkanten wie beim Werk-Raster. */
.about{
  grid-template-columns:1fr 1fr 1fr;
  min-height:440px;
  padding-inline:9.4%}
.about-copy{
  padding:55px 0}
.about-copy p{
  max-width:390px}
.about-copy p+p{
  margin-top:25px}
.about-space{
  min-width:0}
.about-media{
  min-height:440px}
.about-media img{
  object-fit:cover}
/* Kompakte Kontaktfläche, höchstens etwa doppelt so hoch wie Workshops. */
.footer{
  padding:54px 6.4% 26px}
.contact h2{
  font-size:clamp(32px,4vw,64px)}
.footer-bottom{
  margin-top:38px;
  padding-top:23px}
@media(max-width:1024px){
  .category-nav{
    padding:0 7px}
  .category-list{
    justify-content:center;
    gap:0 9px;
    padding:9px 0;
    min-height:0}
  .category-list li{
    font-size:9px;
    letter-spacing:.04em}
  .category-list a{
    padding:6px 1px}
  .works{
    grid-template-rows:none;
    aspect-ratio:auto}
  .work-card:nth-child(n){
    aspect-ratio:1.04/1}
  .work-card:nth-child(2){
    aspect-ratio:1.04/.88}
  .about{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding-inline:8%}
  .about-copy{
    padding:54px 0 35px}
  .about-space{
    display:none}
  .about-media{
    min-height:0}
  .footer{
    padding:42px 8% 30px}
  .contact h2{
    font-size:clamp(30px,9vw,42px)}
  .footer-bottom{
    margin-top:35px;
    padding-top:22px}
}
/* Lege die lizenzierten WOFF2-Dateien unter assets/fonts ab. */
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap}
@font-face{
  font-family:'Clash Display Variable';
  src:url('assets/fonts/ClashDisplay-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap}
@font-face{
  font-family:'Satoshi Variable';
  src:url('assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight:300 900;
  font-style:normal;
  font-display:swap}
.portfolio-page,.contact-page{
  font-family:'Satoshi',Arial,Helvetica,sans-serif}
.portfolio-page h1,.portfolio-page h2,.contact-page h1{
  font-family:'Clash Display',Arial,Helvetica,sans-serif;
  font-weight:600}
.portfolio-intro{
  padding:65px 8% 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:6%;
  align-items:end}
.portfolio-intro h1{
  grid-column:2;
  text-align:right;
  font-size:clamp(55px,7vw,118px);
  line-height:.94;
  letter-spacing:-.055em;
  overflow-wrap:anywhere;
  margin:0}
.portfolio-intro-text{
  grid-column:1;
  grid-row:1;
  align-self:end;
  max-width:450px;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.55}
.portfolio-intro-text p:last-child{
  margin-bottom:0}
.portfolio-packet{
  padding:90px 8% 115px;
  border-top:1px solid var(--line);
  scroll-margin-top:20px}
.packet-heading{
  display:flex;
  justify-content:flex-end}
.packet-heading h2{
  text-align:right;
  max-width:75%;
  font-size:clamp(45px,6vw,93px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 35px;
  overflow-wrap:anywhere}
.packet-intro{
  max-width:440px;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.65;
  margin:0 0 60px}
.packet-intro p:first-child{
  margin-top:0}
.packet-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:row dense;
  grid-auto-rows:clamp(150px,18vw,275px);
  gap:16px}
.packet-artwork{
  display:block;
  position:relative;
  overflow:hidden;
  background:#eeeae5;
  min-width:0}
.packet-artwork:nth-child(5n+1){
  grid-column:span 2;
  grid-row:span 2}
.packet-artwork:nth-child(5n+2){
  grid-column:span 2}
.packet-artwork img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s}
.packet-artwork:hover img{
  transform:scale(1.035)}
.artwork-caption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:12px;
  color:white;
  background:#1e1e1ba8;
  font-size:12px}
.portfolio-empty{
  padding:20px 8% 100px;
  color:#777}
.contact-page{
  padding:90px 8% 130px;
  min-height:75vh}
.contact-page-heading{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start}
.contact-page-heading h1{
  grid-column:2;
  text-align:right;
  font-size:clamp(65px,9vw,140px);
  letter-spacing:-.06em;
  line-height:.9;
  margin:0}
.contact-page-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12%;
  margin-top:85px}
.contact-aside{
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.6;
  max-width:390px}
.contact-aside-text:empty{
  display:none}
.contact-email{
  display:inline-block;
  border-bottom:1px solid currentColor;
  margin-top:30px;
  overflow-wrap:anywhere}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:11px}
.contact-form>label:not(.privacy-check){
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:16px}
.contact-form input:not([type=checkbox]),.contact-form textarea{
  border:0;
  border-bottom:1px solid #a9a8a3;
  border-radius:0;
  background:transparent;
  font:inherit;
  padding:12px 2px;
  color:var(--ink);
  width:100%}
.contact-form input:focus,.contact-form textarea:focus{
  outline:0;
  border-bottom:2px solid var(--ink)}
.contact-form textarea{
  resize:vertical;
  min-height:120px}
.privacy-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:1.45;
  margin:25px 0 10px}
.privacy-check input{
  margin:3px 0 0;
  flex:none}
.privacy-check a{
  text-decoration:underline;
  text-underline-offset:3px}
.contact-form button{
  background:var(--ink);
  color:white;
  border:0;
  font:500 16px 'Satoshi',Arial,sans-serif;
  cursor:pointer;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center}
.contact-form button:hover{
  background:#42423e}
.form-status{
  border-left:3px solid var(--ink);
  padding:12px 15px;
  background:#f2f1ed}
.contact-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden}
@media(max-width:1024px){
  .portfolio-intro{
    padding:45px 8% 75px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:35px}
  .portfolio-intro h1{
    font-size:clamp(48px,13vw,70px);
    text-align:right}
  .portfolio-intro-text{
    align-self:flex-start;
    font-size:16px}
  .portfolio-packet{
    padding:65px 8% 85px}
  .packet-heading h2{
    max-width:100%;
    font-size:clamp(39px,11vw,58px);
    margin-bottom:25px}
  .packet-intro{
    font-size:15px;
    margin-bottom:35px}
  .packet-gallery{
    display:flex;
    flex-direction:column;
    gap:14px}
  .packet-artwork{
    aspect-ratio:1/1}
  .packet-artwork img{
    position:absolute;
    inset:0}
  .contact-page{
    padding:55px 8% 90px}
  .contact-page-heading{
    display:flex;
    flex-direction:column;
    gap:26px}
  .contact-page-heading h1{
    align-self:flex-end;
    font-size:clamp(50px,14vw,75px)}
  .contact-page-body{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:45px}
  .contact-aside{
    font-size:16px}
}
/* Typografische Feinabstimmung: 5 % Laufweite für große Headlines. */
.hero h1,.portfolio-intro h1,.packet-heading h2,.contact-page-heading h1{
  font-family:'Clash Display',Arial,Helvetica,sans-serif;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1;
}
.category-list{
  justify-content:space-evenly;
  gap:0}
.category-nav{
  padding-inline:0}
@media(max-width:1024px){
  .hero h1{
    font-size:clamp(38px,11vw,52px)}
  .category-list{
    justify-content:space-evenly;
    gap:0}
  .category-nav{
    padding-inline:0}
}
/* Feinabstimmung der Startseite. Die lokalen variablen Fonts erlauben exakte Schnitte. */
.hero h1{
  font-family:'Clash Display Variable','Clash Display',Arial,Helvetica,sans-serif;
  font-weight:650;
  letter-spacing:.3rem}
.portfolio-intro h1,.contact-page-heading h1{
  font-family:'Clash Display Variable','Clash Display',Arial,Helvetica,sans-serif;
  font-weight:650}
.hero .signature{
  font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
  font-weight:350;
  letter-spacing:0;
  color:#000}
.work-card .label{
  font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
  font-size:17px;
  font-weight:350;
  letter-spacing:0;
  text-transform:lowercase;
  padding:8px 14px;
}
.nav,.category-list li{
  text-transform:lowercase}
@media(max-width:1024px){
  .hero .signature{
    font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
    font-weight:350;
    color:#000}
  .work-card .label{
    font-size:17px;
    font-weight:350;
    padding:7px 11px}
}
.artwork-caption{
  font-family:'Satoshi Variable','Satoshi',Arial,sans-serif;
  font-size:17px;
  font-weight:350;
  padding:8px 14px;
  text-transform:lowercase}
/* Sichtbare Portfolio-Vorschau, bis eigene Werk-Pakete angelegt werden. */
.portfolio-demo .demo-artwork{
  display:flex;
  align-items:flex-end;
  padding:1rem;
  color:#272823;
  font:300 1rem 'Satoshi Variable','Satoshi',Arial,sans-serif}
.portfolio-demo .demo-artwork:nth-child(4n+1){
  background:#d0c7bd}
.portfolio-demo .demo-artwork:nth-child(4n+2){
  background:#bac7c1}
.portfolio-demo .demo-artwork:nth-child(4n+3){
  background:#dfdcd1}
.portfolio-demo .demo-artwork:nth-child(4n){
  background:#b9b5ae}
.portfolio-demo .demo-artwork span{
  position:relative;
  background:#ffffffc9;
  padding:.4rem .6rem}
.portfolio-demo-note{
  margin:2rem 0 0;
  color:#777;
  font:400 .9rem/1.5 'Satoshi Variable','Satoshi',Arial,sans-serif}
/* Vierergruppen bleiben asymmetrisch; Restbilder schließen die letzte Zeile. */
@media(min-width:1025px){
  .packet-gallery .packet-artwork:nth-child(n){
    grid-column:auto;
    grid-row:auto}
  .packet-gallery .packet-artwork:nth-child(4n+1){
    grid-column:span 2;
    grid-row:span 2}
  .packet-gallery .packet-artwork:nth-child(4n+2){
    grid-column:span 2}
  /* Ein Restbild nimmt eine volle Zeile ein. */
  .packet-gallery .packet-artwork:last-child:nth-child(4n+1){
    grid-column:1/-1;
    grid-row:span 1}
  /* Zwei Restbilder teilen die letzte Zeile. */
  .packet-gallery .packet-artwork:nth-last-child(2):nth-child(4n+1){
    grid-column:span 2;
    grid-row:span 1}
  /* Drei Restbilder: ein breites Feld neben zwei schmalen Feldern. */
  .packet-gallery .packet-artwork:nth-last-child(3):nth-child(4n+1){
    grid-column:span 2;
    grid-row:span 1}
  .packet-gallery .packet-artwork:nth-last-child(2):nth-child(4n+2){
    grid-column:span 1;
    grid-row:span 1}
}
/* Bildansicht innerhalb der Portfolio-Seite. */
.artwork-lightbox{
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:3.5rem 1.5rem 1.5rem;
  border:0;
  background:#151515;
  color:#fff;
  overflow:hidden}
.artwork-lightbox::backdrop{
  background:#151515}
.artwork-lightbox figure{
  height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem}
.artwork-lightbox img{
  display:block;
  max-width:100%;
  max-height:calc(100dvh - 7rem);
  width:auto;
  height:auto;
  object-fit:contain}
.artwork-lightbox figcaption{
  font:350 .95rem/1.4 'Satoshi Variable','Satoshi',Arial,sans-serif;
  text-align:center}
.artwork-lightbox figcaption:empty{
  display:none}
.artwork-lightbox-close{
  position:absolute;
  top:.7rem;
  right:1.4rem;
  padding:.1rem .5rem;
  border:0;
  background:transparent;
  color:#fff;
  font:300 2.5rem/1 'Satoshi Variable','Satoshi',Arial,sans-serif;
  cursor:pointer}
.artwork-lightbox-close:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px}
/* Portfolio-Typografie: rechtsbündige H1 in einer Zeile, H2 im Verhältnis 1 : 1,618. */
.portfolio-intro h1{
  grid-column:1/-1;
  grid-row:1;
  width:100%;
  font-size:clamp(2.5rem,5vw,5rem);
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  text-align:right;
}
.portfolio-intro-text{
  grid-column:1;
  grid-row:2;
  margin-top:3rem}
.packet-heading h2{
  font-family:'Clash Display Variable','Clash Display',Arial,Helvetica,sans-serif;
  font-size:clamp(1.545rem,3.09vw,3.09rem);
  font-weight:650}
.about .eyebrow{
  text-transform:lowercase}
@media(max-width:1024px){
  .portfolio-intro h1{
    font-size:clamp(2.5rem,9vw,4rem);
    white-space:normal}
  .portfolio-intro-text{
    margin-top:0}
  .packet-heading h2{
    font-size:clamp(1.545rem,5.562vw,2.472rem)}
}
/* Tablet: zwei About-Spalten und mehr Fläche für die Bildraster. */
/* Mobil: nur der bewusst gesetzte Zeilenwechsel vor „nature“. */
@media(max-width:1024px){
  .hero h1{
    font-size:clamp(1.75rem,8vw,2.75rem);
    letter-spacing:.04rem;
    white-space:nowrap}
}
.nav-pending{
  opacity:1;
  cursor:default}
/* Optischer Rhythmus: viel Raum für die Headline, ruhige Übergänge bei den Werken. */
.site{
  --section-gap:clamp(3.5rem,5.5vw,5.5rem)}
.hero{
  padding-top:calc(.8 * var(--section-gap));
  padding-bottom:calc(1.8 * var(--section-gap))}
.works{
  padding-top:var(--section-gap);
  padding-bottom:var(--section-gap)}
.about{
  margin-bottom:calc(.8 * var(--section-gap))}
@media(max-width:1024px){
  .site{
    --section-gap:clamp(2.5rem,8vw,3rem)}
  .hero{
    padding-top:var(--section-gap);
    padding-bottom:calc(1.8 * var(--section-gap))}
  .works{
    padding-top:var(--section-gap);
    padding-bottom:var(--section-gap)}
  .about{
    margin-bottom:calc(.8 * var(--section-gap))}
}
/* Weiße Seitenfläche auch außerhalb der maximalen Inhaltsbreite. */
body{
  background:var(--paper)}
.site{
  margin-top:0;
  margin-bottom:0}
/* Shorter contact/footer section at its original full width. */
.footer{
  width:100%;
  padding:24px 6.4% 14px;
  background:var(--ink);
  color:#fff}
.footer-bottom{
  margin-top:14px;
  padding-top:12px}
/* Extend the dark background to both viewport edges; keep text aligned to the page. */
.site{
  overflow:visible}
html{
  overflow-x:clip}
.footer{
  position:relative;
  isolation:isolate}
.footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--ink)}
@media(max-width:1024px){
  .footer{
    padding:20px 8% 14px}
  .footer-bottom{
    margin-top:14px;
    padding-top:12px}
}
/* Mandala remains a slim strip beneath the shuffled categories. */
@media(min-width:1025px){
  .works{
    grid-template-rows:repeat(2,minmax(0,calc((var(--work-width) / 2 - 9px) * .53))) clamp(115px,13vw,190px)}
  .work-card[data-category="mandala"]{
    grid-column:1/-1;
    grid-row:3;
    aspect-ratio:auto}
}
.work-card[data-category="mandala"].no-image::before{
  background:linear-gradient(120deg,#d4cfca,#b7bbb2 35%,#d7d2ca 65%,#a8aaa3)}
@media(max-width:1024px){
  .work-card[data-category="mandala"]{
    aspect-ratio:3.5/1;
    min-height:86px}
}
/* Light captions on the landing-page category images. */
.works .work-card .label{
  background:#30302e;
  color:#fff}
/* Shared body font and slightly stronger image titles. */
.about-copy p{
  font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
  font-weight:400}
.works .work-card .label,.artwork-caption{
  font-weight:450}
/* Landing-page image labels follow the link row above the grid. */
.works .work-card .label{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(9px,.78vw,12px);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:lowercase}
@media(max-width:1024px){
  .works .work-card .label{
    font-size:12px;
    letter-spacing:.04em}
}
/* Five changeable categories: a large square beside four smaller squares. */
@media(min-width:1025px){
  .works{
    --work-gap:18px;
    --work-width:calc(min(100vw,1440px) * .812);
    grid-template-rows:repeat(2,minmax(0,calc(var(--work-width) * .25 - var(--work-gap) * .75))) clamp(115px,13vw,190px)}
  .work-card:nth-child(1){
    grid-column:1/3;
    grid-row:1/3}
  .work-card:nth-child(2){
    grid-column:3;
    grid-row:1}
  .work-card:nth-child(3){
    grid-column:4;
    grid-row:1}
  .work-card:nth-child(4){
    grid-column:3;
    grid-row:2}
  .work-card:nth-child(5){
    grid-column:4;
    grid-row:2}
  .work-card[data-category="mandala"]{
    grid-column:1/-1;
    grid-row:3}
}
/* A calm, readable mobile menu and equal landscape crops for every category. */
@media(max-width:1024px){
  .category-nav{
    padding:14px 8%;
    border-block:1px solid var(--line)}
  .category-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 9px;
    padding:0;
    min-height:0;
    text-align:left}
  .category-list li{
    min-width:0;
    white-space:normal;
    font-family:'Satoshi Variable','Satoshi',Arial,sans-serif;
    font-size:11px;
    font-weight:500;
    line-height:1.3;
    letter-spacing:.01em;
    color:var(--ink)}
  .category-list a,.category-placeholders li{
    display:flex;
    align-items:center;
    min-height:40px;
    padding:9px 11px;
    background:#f2f2ef;
    border-radius:2px}
  .category-list a:hover{
    background:#e9e9e5;
    text-decoration:none}
  .category-list a:focus-visible{
    outline-offset:2px}
  .works{
    gap:32px;
    padding:48px 8% 72px}
  .works .work-card:nth-child(n){
    aspect-ratio:3/2;
    min-height:0;
    width:84%;
    align-self:flex-start}
  .works .work-card:nth-child(even){
    align-self:flex-end}
}
/* Desktop scales beyond the old 1440px canvas; the wider tier has its own limits. */
@media(min-width:1025px) and (max-width:3199px){
  .site{
    max-width:clamp(1440px,62.5vw,1800px)}
  .works{
    --work-width:calc(min(100vw,clamp(1440px,62.5vw,1800px)) * .812)}
}
@media(min-width:3200px){
  .site{
    max-width:2200px}
  .works{
    --work-width:1786.4px}
  .hero h1{
    font-size:clamp(154px,4.6vw,184px)}
  .hero .signature{
    font-size:30px}
}
/* Mobile: understated links and edge-to-edge pictures at the previous crop height. */
@media(max-width:1024px){
  .site{
    width:100%;
    max-width:none}
  .category-nav{
    padding:16px 6%}
  .category-list{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2px 0;
    text-align:center}
  .category-list li{
    display:flex;
    align-items:center;
    white-space:normal;
    font-family:'Satoshi Variable','Satoshi',Arial,sans-serif;
    font-size:11px;
    font-weight:450;
    line-height:1.35;
    letter-spacing:.02em;
    color:#92928e}
  .category-list li+li::before{
    content:'•';
    margin:0 6px;
    color:#b4b4af}
  .category-list a,.category-placeholders li{
    min-height:0;
    padding:7px 2px;
    background:transparent;
    border-radius:0}
  .category-list a:hover{
    background:transparent;
    text-decoration:underline;
    text-underline-offset:3px}
  .works{
    gap:32px;
    padding:48px 0 72px}
  .works .work-card:nth-child(n){
    width:100%;
    height:min(47vw,183px);
    aspect-ratio:auto}
}
/* Give the end of the home page room to breathe. */
.about{
  margin-bottom:clamp(90px,7vw,150px)}
.footer{
  padding:52px 6.4% 52px}
.footer-bottom{
  margin-top:46px;
  padding-top:19px}
@media(max-width:1024px){
  .about{
    margin-bottom:72px}
  .footer{
    padding:44px 8% 46px}
  .footer-bottom{
    margin-top:34px;
    padding-top:18px}
}
/* Soft light canvas; the header switch can override the system preference. */
:root{
  --paper:#f5f5f3}
.nav.is-open{
  background:var(--paper)}
.site-header{
  align-items:center;
  gap:22px}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:5px 0;
  border:0;
  background:transparent;
  color:#696a65;
  font:500 10px 'Satoshi Variable','Satoshi',Arial,sans-serif;
  letter-spacing:.03em;
  cursor:pointer}
.theme-toggle-track{
  position:relative;
  width:30px;
  height:17px;
  border:1px solid currentColor;
  border-radius:12px}
.theme-toggle-track::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:currentColor;
  transition:transform .2s}
.theme-toggle[aria-pressed="true"] .theme-toggle-track::after{
  transform:translateX(13px)}
@media(max-width:1024px){
  .site-header{
    justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .theme-toggle-track::after{
    transition:none}
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f0eee9;
  --muted:#c4c4bf;
  --line:#484945;
  --paper:#20211f;
}
html[data-theme="dark"] body,html[data-theme="dark"] .site{
  background:var(--paper);
  color:var(--ink)}
html[data-theme="dark"] a:focus-visible,html[data-theme="dark"] button:focus-visible{
  outline-color:#eeeae1}
html[data-theme="dark"] .nav,html[data-theme="dark"] .menu-toggle,html[data-theme="dark"] .category-list li,html[data-theme="dark"] .portfolio-empty,html[data-theme="dark"] .portfolio-demo-note{
  color:#c4c4bf}
html[data-theme="dark"] .nav.is-open{
  background:#30312e}
html[data-theme="dark"] .hero .signature{
  color:#f0eee9}
html[data-theme="dark"] .ticker,html[data-theme="dark"] .eyebrow{
  color:#bdbdb6}
html[data-theme="dark"] .category-list li+li::before{
  color:#a9aaa4}
html[data-theme="dark"] .theme-toggle{
  color:#d1d0c9}
html[data-theme="dark"] .work-card,html[data-theme="dark"] .packet-artwork{
  background:#343530}
html[data-theme="dark"] .about-media{
  background:#393b36}
html[data-theme="dark"] .footer,html[data-theme="dark"] .footer::before{
  background:#171816;
  color:#f4f2ed}
html[data-theme="dark"] .footer-bottom{
  border-top-color:#484945;
  color:#c4c4bf}
html[data-theme="dark"] .contact-form input:not([type=checkbox]),html[data-theme="dark"] .contact-form textarea{
  border-bottom-color:#aaa9a1;
  color:var(--ink)}
html[data-theme="dark"] .contact-form input::placeholder,html[data-theme="dark"] .contact-form textarea::placeholder{
  color:#bdbdb6}
html[data-theme="dark"] .contact-form input[type=checkbox]{
  accent-color:#e7e4dc}
html[data-theme="dark"] .contact-form button{
  color:#20211f}
html[data-theme="dark"] .contact-form button:hover{
  background:#d4d2ca}
html[data-theme="dark"] .form-status{
  background:#30312e}
/* Keep the footer on the viewport edge, even on short portfolio pages. */
.site{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column}
.site>main{
  flex:1 0 auto}
/* Portfolio images keep their own proportions; landing-page crops are separate. */
.packet-gallery{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(18px,2vw,28px)}
.packet-gallery .packet-artwork{
  display:block;
  flex:0 1 auto;
  max-width:100%;
  aspect-ratio:auto;
  grid-column:auto;
  grid-row:auto}
.packet-gallery .packet-artwork img{
  position:static;
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:clamp(260px,28vw,420px);
  object-fit:contain}
.portfolio-demo .packet-gallery{
  display:grid}
.about-media{
  margin-top:36px}
@media(max-width:1024px){
  .packet-gallery{
    flex-direction:column;
    align-items:center;
    gap:24px}
  .packet-gallery .packet-artwork{
    width:auto;
    max-width:100%;
    aspect-ratio:auto}
  .packet-gallery .packet-artwork img{
    max-height:70vh}
  .about-media{
    margin-top:24px}
}
/* Use Satoshi consistently for running text, including ordinary WordPress pages. */
body,.portfolio-page,.contact-page,.page-content{
  font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
  font-weight:400}
.page-content h1,.page-content h2{
  font-family:Arial,Helvetica,sans-serif}
/* Small labels should remain readable on large displays and on phones. */
.nav{
  font-size:12px}
.category-list li{
  font-size:13px}
.works .work-card .label{
  font-size:clamp(12px,.85vw,14px)}
.about .eyebrow{
  font-size:14px}
.footer-bottom,.footer-links{
  font-size:12px}
.theme-toggle{
  font-size:11px}
@media(max-width:1024px){
  .nav{
    font-size:12px}
  .category-list li{
    font-size:12px}
  .works .work-card .label{
    font-size:13px}
  .about .eyebrow{
    font-size:13px}
  .footer-bottom,.footer-links{
    font-size:11px}
}
/* Larger reading text and navigation, including the mobile layouts. */
.about-copy p{
  font-size:clamp(18px,1.2vw,21px);
  line-height:1.6}
.nav{
  font-size:14px}
.category-list li{
  font-size:15px}
.footer-links{
  font-size:13px}
@media(max-width:1024px){
  .about-copy p{
    font-size:17px;
    line-height:1.6}
  .nav{
    font-size:14px}
  .category-list li{
    font-size:14px}
  .footer-links{
    font-size:12px}
}
/* Explicit font on portfolio descriptions, including text inserted by WordPress. */
.site-header .nav{
  font-size:16px}
.portfolio-intro-text,.portfolio-intro-text p,.portfolio-intro-text li,
.packet-intro,.packet-intro p,.packet-intro li{
  font-family:'Satoshi Variable','Satoshi',Arial,Helvetica,sans-serif;
  font-weight:400}
@media(max-width:1024px){
  .site-header .nav{
    font-size:15px}
}
/* Equal edges on every portfolio row without cropping the individual artwork. */
.packet-gallery.is-justified{
  display:block;
  position:relative}
.packet-gallery.is-justified .packet-artwork{
  position:absolute;
  max-width:none;
  aspect-ratio:auto}
.packet-gallery.is-justified .packet-artwork img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain}
@media(max-width:1024px){
  .packet-gallery{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:28px}
  .packet-gallery .packet-artwork{
    display:block;
    flex:none;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:auto}
  .packet-gallery .packet-artwork img{
    position:static;
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
    object-fit:contain}
  .category-nav{
    padding-inline:8%}
  .category-list{
    justify-content:flex-start;
    text-align:left}
}
/* The same edge-aligned artwork rows also apply on phones. */
@media(max-width:1024px){
  .packet-gallery.is-justified{
    display:block}
  .packet-gallery.is-justified .packet-artwork{
    position:absolute;
    width:auto;
    max-width:none;
    height:auto}
  .packet-gallery.is-justified .packet-artwork img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain}
}
/* All six sections rotate through the mosaic, including the wide sixth slot. */
@media(min-width:1025px){
  .works .work-card:nth-child(1){
    grid-column:1/3;
    grid-row:1/3;
    aspect-ratio:auto}
  .works .work-card:nth-child(2){
    grid-column:3;
    grid-row:1;
    aspect-ratio:auto}
  .works .work-card:nth-child(3){
    grid-column:4;
    grid-row:1;
    aspect-ratio:auto}
  .works .work-card:nth-child(4){
    grid-column:3;
    grid-row:2;
    aspect-ratio:auto}
  .works .work-card:nth-child(5){
    grid-column:4;
    grid-row:2;
    aspect-ratio:auto}
  .works .work-card:nth-child(6){
    grid-column:1/-1;
    grid-row:3;
    aspect-ratio:auto}
}
@media(max-width:1024px){
  .works .work-card:nth-child(n){
    aspect-ratio:auto;
    min-height:0}
  .works .work-card:nth-child(6){
    height:86px;
    min-height:86px}
}
/* Mobile about portrait first; tighten wrapped category links. */
@media(max-width:1024px){
  .about-media{
    order:-1;
    margin-top:0}
  .about-copy{
    padding-top:26px}
  .category-list{
    row-gap:0}
  .category-list li{
    line-height:1.2}
  .category-list a,.category-placeholders li{
    padding-block:3px}
}
/* The about label stays directly above the smaller mobile portrait. */
.about{
  position:relative}
.about-heading{
  position:absolute;
  top:55px;
  left:9.4%;
  z-index:1}
.about-copy{
  padding-top:90px}
/* Larger icon-only theme switch with a generous tap target. */
.theme-toggle{
  min-width:44px;
  min-height:44px;
  justify-content:center;
  padding:0}
.theme-toggle-track{
  width:40px;
  height:23px;
  border-radius:15px}
.theme-toggle-track::after{
  top:3px;
  left:3px;
  width:15px;
  height:15px}
.theme-toggle[aria-pressed="true"] .theme-toggle-track::after{
  transform:translateX(18px)}
@media(max-width:1024px){
  .about-heading{
    position:static;
    order:0;
    align-self:flex-start;
    padding-top:26px}
  .about-media{
    order:1;
    align-self:flex-start;
    width:min(68%,280px);
    min-height:0;
    margin-top:14px;
    aspect-ratio:1/1.12}
  .about-copy{
    order:2;
    padding:24px 0 35px}
  .category-nav{
    padding-block:8px}
  .category-list a,.category-placeholders li{
    padding-block:1px}
  .contact h2{
    font-family:'Clash Display Variable','Clash Display',Arial,Helvetica,sans-serif;
    font-weight:600;
    letter-spacing:.05em}
  .works .work-card:nth-child(6){
    height:min(47vw,183px);
    min-height:0}
}
/* The mandala fills its tile as a close crop, whichever grid slot it occupies. */
.works .work-card[data-category="mandala"] img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.14);
}
.works .work-card[data-category="mandala"]:hover img{
  transform:scale(1.19)}
/* The landing images rest in monochrome and reveal their colors on interaction. */
.works .work-card img{
  filter:grayscale(100%) brightness(1.25) contrast(1.08);
  transition:transform .4s,filter .28s ease}
.works .work-card:focus-visible img{
  filter:none}
@media(hover:hover){
  .works .work-card:hover img{
    filter:none}
}
@media(max-width:1024px){
  .works .work-card.is-viewport-center img{
    filter:none}
}
@media(prefers-reduced-motion:reduce){
  .works .work-card img{
    transition:none}
}
/* Mobile portrait aligns right; category links use spacing instead of bullets. */
@media(max-width:1024px){
  .about-media{
    align-self:flex-end}
  .category-list{
    column-gap:12px}
  .category-list li+li::before{
    content:none}
}
@media(max-width:1024px){
  .category-nav{
    padding-inline:5%}
  .hero h1{
    font-size:clamp(1.9rem,8.7vw,3rem)}
}
.packet-heading h2[id^="packet-"]{
  scroll-margin-top:24px}
/* Preserve the exact selected accent; yellow and lime darken toward both edges. */
.hero h1{
  color:#FFF200;
  letter-spacing:-.025em;
  background-image:var(--headline-day-gradient,linear-gradient(90deg,#726d00,#FFF200,#726d00));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .hero h1{
  background-image:var(--headline-night-gradient,linear-gradient(90deg,#fff9a0,#FFF200,#fff9a0));
}
/* Keep the name close to the headline and the generous space below it. */
.hero .signature{
  margin-top:clamp(22px,2vw,32px)}
.hero{
  padding-bottom:clamp(140px,12vw,230px)}
@media(max-width:1024px){
  .hero h1{
    font-size:clamp(2.4rem,11vw,3.6rem);
    letter-spacing:-.015em}
  .hero .signature{
    margin-top:22px}
  .hero{
    padding-bottom:clamp(100px,22vw,160px)}
}
/* On phones, the image cards provide the category navigation. */
@media(max-width:1024px){
  .category-nav{
    display:none}
}
/* Mobile portrait first, then the left-aligned About label and copy. */
@media(max-width:1024px){
  .about-media{
    order:0;
    margin-top:0}
  .about-heading{
    order:1;
    align-self:flex-start;
    padding-top:24px}
  .about-copy{
    order:2;
    padding-top:12px}
}
/* Trial: Montserrat only for the artist's name beneath the landing headline. */
@font-face{
  font-family:'Montserrat';
  src:url('assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap}
.hero .signature{
  font-family:'Montserrat','Satoshi Variable','Satoshi',Arial,sans-serif;
  font-weight:400}
/* Sun and moon travel with the switch thumb. */
.theme-toggle-track{
  display:block}
.theme-toggle-track::after{
  display:none}
.theme-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:currentColor;
  transition:transform .2s ease}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{
  transform:translateX(17px)}
.theme-icon{
  grid-area:1/1;
  width:12px;
  height:12px;
  color:var(--paper);
  transition:opacity .2s ease}
.theme-icon-moon,.theme-toggle[aria-pressed="true"] .theme-icon-sun{
  opacity:0}
.theme-toggle[aria-pressed="true"] .theme-icon-moon{
  opacity:1}
@media(prefers-reduced-motion:reduce){
  .theme-toggle-thumb,.theme-icon{
    transition:none}
}
/* Category captions float slightly inside their image tiles. */
.works .work-card .label{
  left:12px;
  right:12px;
  bottom:12px;
  background:rgba(48,48,46,.7)}
@media(max-width:1024px){
  .works .work-card .label{
    left:10px;
    right:10px;
    bottom:10px}
}
/* Montserrat for reading text throughout the theme, including work packets. */
body,.portfolio-page,.contact-page,.page-content,
.about-copy p,.portfolio-intro-text,.portfolio-intro-text p,.portfolio-intro-text li,
.packet-intro,.packet-intro p,.packet-intro li,.contact-aside,
.portfolio-demo-note{
  font-family:'Montserrat','Satoshi Variable','Satoshi',Arial,sans-serif;
  font-weight:400}
/* Keep the caption bar full width while lifting it from the bottom edge. */
.works .work-card .label{
  left:0;
  right:0}
/* Match the space below the grid to the space below the artist name. */
.works{
  padding-bottom:clamp(140px,12vw,230px)}
@media(max-width:1024px){
  .works{
    padding-bottom:clamp(100px,22vw,160px)}
}
/* The short concluding thought in the About copy stands out. */
.about-copy p:nth-child(2){
  font-weight:700}
/* Resting tiles use one strong related color for each headline color. */
.works .work-card .label{
  background:var(--tile-label-color,rgba(48,48,46,.7));
  color:var(--tile-label-ink,#fff);
  transition:background-color .28s ease,color .28s ease}
.works .work-card:focus-visible .label{
  background:rgba(48,48,46,.7);
  color:#fff}
@media(hover:hover){
  .works .work-card:hover .label{
    background:rgba(48,48,46,.7);
    color:#fff}
}
@media(max-width:1024px){
  .works .work-card.is-viewport-center .label{
    background:rgba(48,48,46,.7);
    color:#fff}
}
@media(prefers-reduced-motion:reduce){
  .works .work-card .label{
    transition:none}
}
/* A slimmer caption, while its colored resting state stays more opaque. */
.works .work-card .label{
  padding-top:5px;
  padding-bottom:5px}
@media(max-width:1024px){
  .works .work-card .label{
    padding-top:5px;
    padding-bottom:5px}
}
/* More breathing room between the headline words without changing its weight. */
.hero h1{
  word-spacing:.08em}
/* Every strip shares one vivid related color; only the desktop bottom fades out. */
.works .work-card .label{
  background-color:rgba(var(--tile-label-rgb,48,48,46),.85);
  background-image:none;
  color:#fff;
  transition:background-color .28s ease,color .28s ease}
@media(min-width:1025px){
  .works .work-card[data-category="photography"] .label{
    background-color:transparent;
    background-image:linear-gradient(90deg,rgba(var(--tile-label-rgb,48,48,46),.85),rgba(var(--tile-label-rgb,48,48,46),0));
  }
}
.works .work-card:focus-visible .label,
.works .work-card[data-category="photography"]:focus-visible .label{
  background-color:rgba(48,48,46,.7);
  background-image:none;
  color:#fff}
@media(hover:hover){
  .works .work-card:hover .label,
  .works .work-card[data-category="photography"]:hover .label{
    background-color:rgba(48,48,46,.7);
    background-image:none;
    color:#fff}
}
@media(max-width:1024px){
  .works .work-card.is-viewport-center .label,
  .works .work-card[data-category="photography"].is-viewport-center .label{
    background-color:rgba(48,48,46,.7);
    background-image:none;
    color:#fff}
}
/* All tile captions use black for a clear contrast with the images. */
@media(min-width:1025px){
  .works .work-card .label,
  .works .work-card[data-category="photography"] .label,
  .works .work-card.is-viewport-center .label,
  .works .work-card[data-category="photography"].is-viewport-center .label,
  .works .work-card:hover .label,
  .works .work-card:focus-visible .label{
    background:rgba(0,0,0,.85);
    color:#fff;
  }
}
/* Black captions on phones, including the bottom tile. */
@media(max-width:1024px){
  .works .work-card .label,
  .works .work-card[data-category="photography"] .label,
  .works .work-card.is-viewport-center .label,
  .works .work-card[data-category="photography"].is-viewport-center .label,
  .works .work-card:hover .label,
  .works .work-card:focus-visible .label{
    background:rgba(0,0,0,.85);
    color:#fff;
  }
}
/* Activated tiles soften their black strips to translucent charcoal. */
.works .work-card:focus-visible .label,
.works .work-card[data-category="photography"]:focus-visible .label{
  background:rgba(48,48,46,.7);
  color:#fff;
}
@media(hover:hover){
  .works .work-card:hover .label,
  .works .work-card[data-category="photography"]:hover .label{
    background:rgba(48,48,46,.7);
    color:#fff;
  }
}
@media(max-width:1024px){
  .works .work-card.is-viewport-center .label,
  .works .work-card[data-category="photography"].is-viewport-center .label{
    background:rgba(48,48,46,.7);
    color:#fff;
  }
}
/* An approximately 8:1 hierarchy on wide screens; mobile keeps the name legible. */
.hero .signature{
  font-size:clamp(16px,1.25vw,22px)}
@media(min-width:1025px){
  .hero h1{
    line-height:.88}
}
@media(max-width:1024px){
  .hero .signature{
    font-size:14px}
}
/* The dark canvas gets white strips; activated strips retain their charcoal effect. */
html[data-theme="dark"] .works .work-card .label,
html[data-theme="dark"] .works .work-card[data-category="photography"] .label{
  background:#fff;
  color:#111;
}
html[data-theme="dark"] .works .work-card:focus-visible .label,
html[data-theme="dark"] .works .work-card[data-category="photography"]:focus-visible .label{
  background:rgba(48,48,46,.7);
  color:#fff;
}
@media(hover:hover){
  html[data-theme="dark"] .works .work-card:hover .label,
  html[data-theme="dark"] .works .work-card[data-category="photography"]:hover .label{
    background:rgba(48,48,46,.7);
    color:#fff;
  }
}
@media(max-width:1024px){
  html[data-theme="dark"] .works .work-card.is-viewport-center .label,
  html[data-theme="dark"] .works .work-card[data-category="photography"].is-viewport-center .label{
    background:rgba(48,48,46,.7);
    color:#fff;
  }
}
/* Strong soft focus lets the images share a calm visual language. */
.works .work-card img{
  filter:blur(14px);
  transform:scale(1.14);
  transition:filter 1.2s ease,transform 1.2s ease;
}
.works .work-card[data-category="mandala"] img{
  transform:scale(1.25)}
.works .work-card:focus-visible img{
  filter:none;
  transform:scale(1.035)}
@media(hover:hover){
  .works .work-card:hover img{
    filter:none;
    transform:scale(1.035)}
  .works .work-card[data-category="mandala"]:hover img{
    transform:scale(1.19)}
}
@media(max-width:1024px){
  .works .work-card.is-viewport-center img{
    filter:none;
    transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){
  .works .work-card img{
    transition:none}
}
/* Keyboard access: focus remains visible against images and both color modes. */
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:5px}
.works .work-card:focus-visible,.packet-gallery .packet-artwork:focus-visible{
  z-index:2;
  outline:3px solid #fff;
  outline-offset:-6px;
  box-shadow:inset 0 0 0 9px #151515}
.packet-gallery .packet-artwork:focus-visible::after,.works .work-card:focus-visible::after{
  content:"";
  position:absolute;
  inset:3px;
  border:3px solid #fff;
  box-shadow:0 0 0 3px #151515;
  pointer-events:none;
  z-index:5}
.gallery-keyboard-help{
  font-size:.85rem;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 2rem}
.artwork-lightbox-prev,.artwork-lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:1px solid #fff7;
  border-radius:50%;
  width:48px;
  height:48px;
  background:#151515c9;
  color:#fff;
  font-size:2.4rem;
  line-height:1;
  cursor:pointer}
.artwork-lightbox-prev{
  left:1rem}
.artwork-lightbox-next{
  right:1rem}
.artwork-lightbox button:focus-visible{
  outline:3px solid #fff;
  outline-offset:4px}
.artwork-lightbox button:disabled{
  opacity:.35;
  cursor:default}
.artwork-lightbox-status{
  position:absolute;
  bottom:.3rem;
  left:4rem;
  right:4rem;
  margin:0;
  text-align:center;
  font-size:.85rem;
  line-height:1.4}
.artwork-lightbox figure{
  padding-bottom:1.5rem}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important}
}
/* Persistent vertical theme switch at the outer viewport edge. */
.theme-toggle{
  position:fixed;
  right:12px;
  top:24px;
  transform:none;
  z-index:1000;
  width:44px;
  min-height:64px;
  background:var(--paper);
  color:var(--ink);
  border-radius:24px;
  box-shadow:0 2px 12px #0002}
.theme-toggle-track{
  width:26px;
  height:48px;
  border-radius:16px}
.theme-toggle-thumb{
  top:2px;
  left:2px;
  width:20px;
  height:20px}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{
  transform:translateY(22px)}
.theme-icon{
  width:14px;
  height:14px}
@media(max-width:1024px){
  .theme-toggle{
    right:6px}
}
body.admin-bar .theme-toggle{
  top:56px}
@media(max-width:782px){
  body.admin-bar .theme-toggle{
    top:70px}
}
/* MV galleries use normal document flow so lazy images retain visible space. */
@media(max-width:1024px){
  .packet-gallery,.packet-gallery.is-justified{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:20px;
    height:auto!important;
    align-items:start}
  .packet-gallery .packet-artwork:nth-child(n),.packet-gallery.is-justified .packet-artwork:nth-child(n){
    position:relative;
    left:auto!important;
    top:auto!important;
    grid-column:auto;
    grid-row:auto;
    width:100%!important;
    height:auto!important;
    max-width:100%;
    aspect-ratio:auto}
  .packet-gallery .packet-artwork img,.packet-gallery.is-justified .packet-artwork img{
    position:static;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
    object-fit:contain}
}
/* Touch devices reveal cards only through the scroll state, without sticky hover. */
@media(max-width:1024px) and (hover:none){
  .works .work-card:not(.is-viewport-center):not(:focus-visible) img{
    filter:blur(14px);
    transform:scale(1.14)}
  .works .work-card[data-category="mandala"]:not(.is-viewport-center):not(:focus-visible) img{
    transform:scale(1.25)}
  .works .work-card.is-viewport-center img{
    filter:none;
    transform:scale(1.035)}
}
/* Compact, left-aligned packet links on MV. */
@media(max-width:1024px){
  .category-nav{
    display:block;
    border:0;
    background:transparent;
    padding:0 12px 28px}
  .category-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:flex-start;
    gap:0 8px;
    margin:0;
    padding:0;
    min-height:0;
    list-style:none;
    text-align:left}
  .category-list li{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:13px;
    line-height:1.4;
    background:none;
    white-space:normal;
    max-width:100%;
    min-width:0}
  .category-list li+li::before{
    content:"|";
    position:static;
    display:block;
    flex:none;
    margin:0;
    padding:0;
    color:var(--muted);
    font-weight:400}
  .category-list a{
    display:block;
    padding:4px 0;
    background:none;
    color:var(--muted);
    font-family:"Montserrat",sans-serif;
    overflow-wrap:anywhere}
}
/* Matching packet-link separators on tablet and desktop. */
@media(min-width:1025px){
  .category-list li{
    display:flex;
    align-items:baseline;
    gap:12px}
  .category-list li+li::before{
    content:"|";
    position:static;
    display:block;
    flex:none;
    margin:0;
    padding:0;
    color:var(--muted);
    font-weight:400}
}
/* Centered links and taller mobile cards. */
.category-list{
  --link-gap:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 var(--link-gap);
  text-align:center}
.category-list li{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap}
.category-list a{
  padding-inline:0}
.category-list li+li::before{
  content:"";
  position:absolute;
  display:block;
  width:1px;
  height:1.65em;
  background:var(--muted);
  left:calc(var(--link-gap) / -2 - .5px);
  top:50%;
  transform:translateY(-50%);
  margin:0;
  padding:0}
.category-list li.is-row-start::before{
  display:none}
@media(max-width:1024px){
  .category-list{
    --link-gap:8px;
    justify-content:center;
    text-align:center}
  .works .work-card:nth-child(n){
    height:min(70.5vw,274.5px);
    min-height:0;
    aspect-ratio:auto}
}
/* Fill each row evenly while keeping its separators centered. */
.category-nav .category-list{
  justify-content:space-evenly}
.category-list li+li::before{
  left:var(--separator-x,calc(var(--link-gap) / -2 - .5px))}
:root{
  --skn-display-tracking:.015em}
.hero h1{
  letter-spacing:var(--skn-display-tracking)}
/* Slightly darker links on the light canvas. */
html:not([data-theme="dark"]) .category-list a,html:not([data-theme="dark"]) .nav a,html:not([data-theme="dark"]) .nav>span{
  color:#6d6d68}