/* ============================================================
   Karlsruher Honig — editorial sections
   ============================================================ */

/* ---------- masthead strip (printed credo line) ---------- */
.strip {
  position: relative; z-index: 1;
  border-block: 1px solid var(--rule);
  background: var(--paper-deep);
}
.strip__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 12px 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.strip__row span { display: inline-flex; align-items: center; gap: 28px; }
.strip__row span::after { content: "·"; color: var(--amber-deep); }
.strip__row span:last-child::after { content: ""; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: clamp(28px,5vw,64px) 0 0; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.hero__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); text-align: right; line-height: 1.9; }
.hero__title { margin: clamp(18px,3vw,30px) 0 0; }
.hero__title .display { display: block; }
.hero__rule { margin: clamp(20px,3vw,32px) 0; }
.hero__bottom { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,5vw,72px); align-items: end; padding-bottom: clamp(40px,6vw,90px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__seal { justify-self: end; }
.seal { width: clamp(116px,15vw,168px); height: auto; color: var(--amber-deep); animation: seal-spin 32s linear infinite; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .seal { animation: none; } }
@media (max-width: 800px){
  .hero__bottom { grid-template-columns: 1fr; }
  .hero__seal { justify-self: start; }
}

/* product shot panel under hero */
.shot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
}
.shot__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.shot__cell { position: relative; aspect-ratio: 1/1; border-right: 1px solid var(--rule); overflow: hidden; }
.shot__cell:last-child { border-right: none; }
.shot__cell image-slot { width: 100%; height: 100%; }
.shot__tag { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb,var(--paper) 80%, transparent); padding: 4px 8px; }
@media (max-width: 700px){ .shot__grid { grid-template-columns: 1fr; } .shot__cell { border-right: none; border-bottom: 1px solid var(--rule); aspect-ratio: 16/10; } }

/* ---------- section head ---------- */
.shead { display: grid; grid-template-columns: auto 1fr; gap: 18px 28px; align-items: baseline; margin-bottom: clamp(30px,4vw,52px); }
.shead__no { font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--amber-deep); padding-top: .5em; }
.shead__main { max-width: 760px; }
.shead__main .lead { margin-top: 1rem; }
@media (max-width: 620px){ .shead { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- CREDO (manifesto) ---------- */
.credo { display: grid; gap: 0; }
.credo__item {
  display: grid; grid-template-columns: 92px 1fr; gap: clamp(16px,4vw,48px);
  padding: clamp(26px,3.4vw,44px) 0; border-top: 1px solid var(--rule); align-items: start;
}
.credo__item:last-child { border-bottom: 1px solid var(--rule); }
.credo__no { font-family: var(--serif); font-size: clamp(2.4rem,5vw,4rem); line-height: .8; color: var(--amber-deep); }
.credo__body { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(12px,3vw,40px); align-items: baseline; }
.credo__h { font-family: var(--serif); font-size: clamp(1.7rem,3vw,2.6rem); line-height: 1; margin: 0; }
.credo__p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 760px){ .credo__body { grid-template-columns: 1fr; gap: 10px; } .credo__item { grid-template-columns: 56px 1fr; } }

/* ---------- STATS ledger ---------- */
.ledger { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--rule-strong); }
.ledger__cell { padding: clamp(26px,3vw,44px); border-right: 1px solid var(--rule); }
.ledger__cell:last-child { border-right: none; }
.ledger__num { font-family: var(--serif); font-size: clamp(2.8rem,6vw,5.2rem); line-height: .9; letter-spacing: -.01em; }
.ledger__num small { font-size: .34em; color: var(--amber-deep); margin-left: .2em; font-family: var(--mono); letter-spacing: 0; }
.ledger__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1em; }
.ledger__foot { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); margin-top: 16px; }
@media (max-width: 720px){ .ledger { grid-template-columns: 1fr; } .ledger__cell { border-right: none; border-bottom: 1px solid var(--rule); } .ledger__cell:last-child { border-bottom: none; } }

/* ---------- PRODUCTS catalog ---------- */
.catalog { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cat-item {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px,4vw,56px);
  padding: clamp(26px,3.5vw,52px) 0; border-bottom: 1px solid var(--rule); align-items: center;
}
.cat-item__media { position: relative; aspect-ratio: 5/4; background: var(--paper-deep); border: 1px solid var(--rule); overflow: hidden; }
.cat-item__media image-slot { width: 100%; height: 100%; }
.cat-item:nth-child(even) .cat-item__media { order: 2; }
.cat-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 16px; }
.cat-item__name { font-family: var(--serif); font-size: clamp(2rem,4vw,3.2rem); line-height: .95; margin: 0; }
.cat-item__no { font-family: var(--mono); font-size: .8rem; color: var(--amber-deep); }
.cat-item__p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 18px; max-width: 46ch; }
.cat-item__meta { display: flex; gap: 22px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; }
.cat-item__meta b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px){ .cat-item { grid-template-columns: 1fr; } .cat-item:nth-child(even) .cat-item__media { order: 0; } }

/* ---------- AKTUELLES list ---------- */
.posts { border-top: 1px solid var(--rule); }
.post {
  display: grid; grid-template-columns: 150px 1fr auto; gap: clamp(14px,3vw,40px);
  padding: clamp(20px,2.6vw,32px) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
  transition: background .2s;
}
.post:hover { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.post__date { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); }
.post__title { font-family: var(--serif); font-size: clamp(1.5rem,2.6vw,2.1rem); line-height: 1; margin: 0; }
.post__excerpt { color: var(--ink-soft); margin: .5em 0 0; line-height: 1.5; max-width: 60ch; }
.post__arrow { font-size: 1.4rem; color: var(--amber-deep); transition: transform .25s var(--ease); }
.post:hover .post__arrow { transform: translateX(5px); }
@media (max-width: 700px){ .post { grid-template-columns: 1fr; gap: 6px; } .post__arrow { display: none; } }

/* feature post (large) */
.feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,56px); align-items: center; }
.feature__media { aspect-ratio: 4/3; border: 1px solid var(--rule); overflow: hidden; background: var(--paper-deep); }
.feature__media image-slot { width: 100%; height: 100%; }
@media (max-width: 820px){ .feature { grid-template-columns: 1fr; } }

/* ---------- INSTAGRAM ---------- */
.insta { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; border: 1.5px solid var(--ink); padding: clamp(26px,4vw,48px); }
.insta__h { font-family: var(--serif); font-size: clamp(1.8rem,3.4vw,2.8rem); line-height: 1; margin: .2em 0 0; }
.insta__handle { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--amber-deep); }
@media (max-width: 640px){ .insta { grid-template-columns: 1fr; } }

/* ---------- ABOUT ---------- */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px,5vw,72px); align-items: center; }
.about__photo { aspect-ratio: 4/5; border: 1px solid var(--rule); overflow: hidden; background: var(--paper-deep); }
.about__photo image-slot { width: 100%; height: 100%; }
.about__quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem,3.2vw,2.6rem); line-height: 1.12; margin: 0 0 1.2rem; }
@media (max-width: 820px){ .about { grid-template-columns: 1fr; } .about__photo { max-width: 340px; } }

/* ---------- STOCKISTS directory ---------- */
.stockists { border-top: 1px solid var(--rule); }
.stockist {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: clamp(12px,3vw,36px);
  padding: clamp(20px,2.6vw,30px) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.stockist__name { font-family: var(--serif); font-size: clamp(1.4rem,2.4vw,1.9rem); line-height: 1; margin: 0; }
.stockist__addr, .stockist__hours { font-family: var(--mono); font-size: .76rem; line-height: 1.6; color: var(--ink-soft); letter-spacing: .02em; }
.stockist__hours b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px){ .stockist { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px,5vw,64px); align-items: start; }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea {
  font-family: var(--grotesk); font-size: 1rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1.5px solid var(--rule-strong);
  padding: .6em 0; transition: border-color .2s;
}
.field textarea { min-height: 110px; resize: vertical; border: 1.5px solid var(--rule-strong); border-radius: 3px; padding: .7em .8em; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--amber-deep); }
.form__note { font-size: .85rem; color: var(--ink-faint); }
.form__ok { display: none; border: 1.5px solid var(--pine); color: var(--pine); padding: 1em 1.2em; border-radius: 3px; font-weight: 600; }
.form__ok.is-show { display: block; }
@media (max-width: 820px){ .contact { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* ---------- page hero (subpages) ---------- */
.page-hero { padding: clamp(40px,6vw,88px) 0 clamp(20px,3vw,36px); }
.page-hero .display { margin-top: .2em; }
.page-hero .lead { margin-top: 1.2rem; }

/* ---------- prose ---------- */
.prose { max-width: 60ch; }
.prose p { font-size: 1.12rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.3em; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose .display { margin: 1.4em 0 .4em; }
.prose .dropcap::first-letter { font-family: var(--serif); font-size: 3.4em; line-height: .7; float: left; padding: .08em .12em 0 0; color: var(--amber-deep); }