@charset "UTF-8";

/* The new journal proposal uses the existing design URL and unchanged page grids. */
:root[data-design="kraft"] {
  --paper: #f7f6f0;
  --white: #fffefb;
  --cream: #edece2;
  --ink: #242b26;
  --forest: #29382c;
  --muted: #5d6557;
  --line: #cbd3bd;
  --amber: #906335;
  --gold: #b79560;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --radius: 4px;
  --shadow: 0 10px 28px #30392a07;
  color-scheme: light;
}

html[data-design="kraft"] body {
  background: radial-gradient(ellipse at 90% 5%, #e7dfc733, transparent 38rem), var(--paper);
}
html[data-design="kraft"] h1,
html[data-design="kraft"] h2,
html[data-design="kraft"] h3 { letter-spacing: -.035em; }
html[data-design="kraft"] ::selection { background: #dcc59a; color: #242b26; }

/* Quiet masthead: fine rules and an underline make the navigation unmistakable. */
html[data-design="kraft"] .site-header {
  border-top-color: #a68655;
  border-bottom-color: #b9c5a9;
  background-color: #e0e6d5;
  background-image: var(--beer-motif), linear-gradient(110deg, #dce3d0, #ecede2 60%, #e0e5d5);
  box-shadow: 0 4px 18px #242b2604;
}
html[data-design="kraft"] .header-inner { gap: 28px; }
html[data-design="kraft"] .brand strong { font-size: 30px; letter-spacing: -1.2px; }
html[data-design="kraft"] .brand small { color: #4b5845; letter-spacing: .7px; }
html[data-design="kraft"] .site-header nav { gap: 3px; }
html[data-design="kraft"] .site-header nav a { padding-inline: 14px; border-color: #67775a40; border-radius: 0; font-size: 14px; font-weight: 500; }
html[data-design="kraft"] .site-header nav a.fun-menu { padding: 2px 10px; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .site-header nav a:hover { background: #ffffff55; }
}
html[data-design="kraft"] .site-header nav a[aria-current="page"] { border-color: #a68655; color: var(--ink); background: transparent; box-shadow: inset 0 -2px var(--amber); font-weight: 700; }
html[data-design="kraft"] .eyebrow { color: #806037; letter-spacing: 2px; font-size: 10px; }
html[data-design="kraft"] .eyebrow::before { height: 1px; flex-basis: 24px; }

/* Same five photographs, presented like a restrained photographic journal. */
html[data-design="kraft"] .hero { column-gap: 64px; padding-block: 64px 44px; }
html[data-design="kraft"] .hero h1 { color: var(--ink); font-size: clamp(84px, 8.4vw, 118px); font-style: italic; line-height: 1.05; letter-spacing: -.06em; text-shadow: none; }
html[data-design="kraft"] .hero-intro { color: #4e554c; line-height: 1.85; }
html[data-design="kraft"] .hero-aside { padding: 10px 16px; border-left: 2px solid #b7956080; background: #efede44d; color: #66695f; font-size: 14px; line-height: 1.8; }
html[data-design="kraft"] .collection-period { letter-spacing: .2px; }
html[data-design="kraft"] .hero-circle { top: 7%; width: 80%; border: 1px solid #cbcdbb; border-radius: 50%; background: #e9e9dd var(--hop-art) center / 80% no-repeat; box-shadow: 0 0 0 15px #e7e5d74d; }
html[data-design="kraft"] .hero-art::before { left: 0; bottom: 6%; width: 91%; height: 80%; border: 1px solid #b7956040; border-radius: 50%; background: none; transform: rotate(-27deg); }
html[data-design="kraft"] .hero-art::after { right: -2%; bottom: 0; width: 29%; opacity: .3; }
html[data-design="kraft"] .hero-photo { width: 32%; padding: 6px; border-color: #dedfd4; border-radius: 2px; background: #fffefb; box-shadow: 0 3px 6px #272c2010, 0 16px 30px #272c2014; }
html[data-design="kraft"] .hero-photo img { border-radius: 0; background: #efede5; }
html[data-design="kraft"] .hero-photo-label { background: #242b26f2; border-radius: 1px; }
html[data-design="kraft"] .hero-photo.photo-one { left: 2%; top: 12%; transform: rotate(-8deg); }
html[data-design="kraft"] .hero-photo.photo-two { left: 35%; top: 3%; transform: rotate(3deg); }
html[data-design="kraft"] .hero-photo.photo-three { right: 0; top: 17%; transform: rotate(9deg); }
html[data-design="kraft"] .hero-photo.photo-four { left: 16%; top: 54%; transform: rotate(-5deg); }
html[data-design="kraft"] .hero-photo.photo-five { right: 12%; top: 58%; transform: rotate(6deg); }
html[data-design="kraft"] .hero-stats { padding: 28px 0; color: #26392b; background: #e7ecdf; border-block: 1px solid #b5c1a5; border-inline: 0; border-radius: 0; box-shadow: none; }
html[data-design="kraft"] .hero-stats > div { padding-inline: 24px; border-right-color: #c4ceb6; }
html[data-design="kraft"] .hero-stats > div:first-child { padding-left: 24px; }
html[data-design="kraft"] .hero-stats strong { font-size: 42px; font-weight: 400; line-height: 1.15; letter-spacing: -1.5px; }
html[data-design="kraft"] .hero-stats span { color: #58634d; font-size: 11px; margin-top: 6px; letter-spacing: .4px; }

/* Functional controls stay in their existing places, with one consistent style. */
html[data-design="kraft"] .button { border-radius: 3px; font-weight: 500; letter-spacing: .1px; }
html[data-design="kraft"] .button-dark { background: #29382c; border-color: #29382c; box-shadow: none; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .button-dark:hover { background: #40503d; border-color: #40503d; }
}
html[data-design="kraft"] .button-outline { border-color: #a5ad96; }
html[data-design="kraft"] .text-link { font-weight: 500; border-bottom-color: #bda782; }
html[data-design="kraft"] .collection-section { padding-block: 56px 60px; }
html[data-design="kraft"] .section-description { color: #666960; }
html[data-design="kraft"] .filter-panel { padding: 25px; border: 1px solid #b8c5a8; border-top: 2px solid #7d8d6c; border-radius: 4px; background: #fffefb; box-shadow: 0 5px 20px #26392b08; }
html[data-design="kraft"] .filter-panel label { color: #515c49; font-weight: 600; font-size: 11px; letter-spacing: .3px; }
html[data-design="kraft"] .filter-panel input,
html[data-design="kraft"] .filter-panel select { border-color: #cbd2be; border-radius: 3px; background: #f7f8f2; }
html[data-design="kraft"] .filter-panel input:focus,
html[data-design="kraft"] .filter-panel select:focus { border-color: #906335; background: #fffefb; }
html[data-design="kraft"] .beer-card { border-color: #bcc8ab; border-radius: 4px; background: #fffefb; box-shadow: 0 3px 12px #29382c08; }
html[data-design="kraft"] .card-image { padding: 14px; background: #e4e9dc; border-bottom-color: #c7d1b8; }
html[data-design="kraft"] .card-image img { border-radius: 1px; }
html[data-design="kraft"] .photo-count { border-color: #d5d9cc; background: #fffefbf2; border-radius: 2px; }
html[data-design="kraft"] .card-copy { padding: 20px 18px 16px; }
html[data-design="kraft"] .card-kicker { font-size: 9px; color: #67705e; letter-spacing: 1px; }
html[data-design="kraft"] .card-copy h3 { font-size: 24px; letter-spacing: -.5px; }
html[data-design="kraft"] .card-product { color: #4f5a47; font-size: 18px; }
html[data-design="kraft"] .card-bottom { border-color: #dce0d4; }
html[data-design="kraft"] .card-arrow { width: 30px; height: 30px; background: #edf0e5; color: #516044; }
html[data-design="kraft"] .empty-state { border-color: #b8c1a7; background: #fffefb80; }

/* The list and the detail view share the same typographic hierarchy. */
html[data-design="kraft"] .page-heading { margin-bottom: 38px; }
html[data-design="kraft"] .page-heading h1 { line-height: 1.13; }
html[data-design="kraft"] .page-heading::after { height: 1px; width: 80px; background: #a68655; }
html[data-design="kraft"] .alphabet { background: #f7f6f0f5; border-color: #c8cebb; }
html[data-design="kraft"] .alphabet a { background: transparent; color: #3d4d34; border-radius: 50%; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .alphabet a:hover { background: #29382c; color: #fffefb; }
}
html[data-design="kraft"] .az-letter { border-color: #c5ccb6; border-radius: 50%; background: transparent; color: #906335; }
html[data-design="kraft"] .az-row { border-radius: 2px; border-bottom-color: #dee2d6; }
html[data-design="kraft"] .az-row:nth-child(even) { background: #eef1e7; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .az-row:hover { background: #e1e8d6; }
}
html[data-design="kraft"] .az-row img { border-color: #d6ddc8; border-radius: 2px; background: #edf0e7; }
html[data-design="kraft"] .az-name > strong { font-size: 23px; letter-spacing: -.5px; }
html[data-design="kraft"] .az-product { color: #555f4e; }
html[data-design="kraft"] .az-average { padding: 2px 7px; border-radius: 2px; background: #e0d7c4; color: #64441f; }
html[data-design="kraft"] .az-arrow { color: #8e7149; }
html[data-design="kraft"] .gallery-stage { border-color: #cbd2be; border-radius: 4px; background: #eeefe6; box-shadow: none; }
html[data-design="kraft"] .gallery-arrow { border-color: #bac5aa; color: #34462c; }
html[data-design="kraft"] .gallery-thumbnails button, html[data-design="kraft"] .gallery-thumbnails a { border-color: #ccd3bf; border-radius: 3px; background: #f0f2e9; }
html[data-design="kraft"] .detail-product { color: #806037; }
html[data-design="kraft"] .beer-facts, html[data-design="kraft"] .region-info { padding: 22px 20px; border-inline: 0; border-radius: 0; border-color: #bec9af; background: #e9eee1; }
html[data-design="kraft"] .beer-facts dt, html[data-design="kraft"] .region-info h2 { color: #64705b; letter-spacing: 1px; }
html[data-design="kraft"] .tasting-history { background: #fffefb; border-color: #d1d7c5; border-radius: 4px; box-shadow: none; }
html[data-design="kraft"] .tasting-table thead { background: #edf1e7; }
html[data-design="kraft"] .tasting-table th { border-bottom-color: #bac5aa; color: #526349; }
html[data-design="kraft"] .tasting-table td { border-bottom-color: #dfe4d4; }
html[data-design="kraft"] .tasting-table tbody tr:nth-child(even) { background: #f3f5ed80; }
html[data-design="kraft"] .beer-pagination a { background: transparent; border-color: #cbd2be; border-radius: 3px; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .beer-pagination a:hover { background: #edf0e7; border-color: #97a584; }
}
html[data-design="kraft"] .photo-dialog { background: #fffefb; border-color: #cbd2be; border-radius: 4px; }
html[data-design="kraft"] .photo-dialog::backdrop { background: #1c271ee8; }

/* The supplied portrait and every biography/legal paragraph stay intact. */
html[data-design="kraft"] .author-story p { color: #4e5847; }
html[data-design="kraft"] .author-story p:first-child { color: #29382c; font-size: 24px; }
html[data-design="kraft"] .author-story .story-exclamation { border-left-width: 1px; font-style: italic; font-weight: 400; }
html[data-design="kraft"] .author-portrait::before { border-color: #c0c9b2; background: #e9ecdf80; box-shadow: 0 0 0 15px #e9ecdf30; }
html[data-design="kraft"] .author-portrait::after { opacity: .4; }
html[data-design="kraft"] .legal-nav a { border-color: #cbd2be; border-radius: 2px; background: transparent; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .legal-nav a:hover { background: #29382c; }
}
html[data-design="kraft"] .legal-page section p,
html[data-design="kraft"] .legal-page address,
html[data-design="kraft"] .legal-page section li { color: #4e5847; }
html[data-design="kraft"] .site-footer { border-color: #c8cebb; }
html[data-design="kraft"] .footer-copyright { color: #69735f; }

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html[data-design="kraft"] .button:hover { transform: translateY(-1px); }
  html[data-design="kraft"] .hero-photo:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 10px 24px #272c2024; }
  html[data-design="kraft"] .beer-card:hover { transform: translateY(-3px); border-color: #a7b295; box-shadow: 0 10px 24px #29382c0c; }
  html[data-design="kraft"] .beer-card:hover .card-arrow { background: #29382c; color: #fffefb; }
}
@media (max-width: 1280px) {
  html[data-design="kraft"] .header-inner { gap: 12px; }
  html[data-design="kraft"] .brand strong { font-size: 28px; }
  html[data-design="kraft"] .hero { column-gap: 32px; padding-block: 44px 36px; }
  html[data-design="kraft"] .hero h1 { font-size: 92px; }
  html[data-design="kraft"] .hero-stats > div { padding-inline: 16px; }
  html[data-design="kraft"] .hero-stats strong { font-size: 36px; }
  html[data-design="kraft"] .eyebrow { letter-spacing: 1.5px; }
}
@media (max-width: 760px) {
  html[data-design="kraft"] .header-inner { gap: 8px; }
  html[data-design="kraft"] .brand strong { font-size: 27px; }
  html[data-design="kraft"] .brand small { letter-spacing: .5px; }
  html[data-design="kraft"] .site-header nav { gap: 6px; }
  html[data-design="kraft"] .site-header nav a { padding-inline: 2px; font-size: 13px; }
  html[data-design="kraft"] .site-header nav a.fun-menu { padding: 4px 0; }
  html[data-design="kraft"] .hero { padding-block: 32px; }
  html[data-design="kraft"] .hero h1 { font-size: clamp(74px, 19vw, 100px); }
  html[data-design="kraft"] .hero .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
  html[data-design="kraft"] .hero-aside { padding-inline: 12px; }
  html[data-design="kraft"] .hero-circle { box-shadow: 0 0 0 10px #e7e5d74d; }
  html[data-design="kraft"] .hero-photo { padding: 5px; }
  html[data-design="kraft"] .hero-stats { padding: 22px 0; }
  html[data-design="kraft"] .hero-stats > div { padding-inline: 12px; }
  html[data-design="kraft"] .hero-stats > div:first-child { padding-left: 12px; }
  html[data-design="kraft"] .hero-stats strong { font-size: 32px; }
  html[data-design="kraft"] .hero-stats span { font-size: 10px; letter-spacing: 0; }
  html[data-design="kraft"] .collection-section { padding-block: 36px 40px; }
  html[data-design="kraft"] .filter-panel { padding: 18px; }
  html[data-design="kraft"] .filter-panel label { font-size: 12px; }
  html[data-design="kraft"] .card-copy { padding: 18px 16px 14px; }
  html[data-design="kraft"] .card-kicker { font-size: 10px; letter-spacing: .3px; }
  html[data-design="kraft"] .page-heading { margin-bottom: 28px; }
  html[data-design="kraft"] .az-name > strong { font-size: 21px; }
  html[data-design="kraft"] .beer-facts, html[data-design="kraft"] .region-info { padding-block: 18px; }
  html[data-design="kraft"] .tasting-table tbody tr:nth-child(even) { background: transparent; }
  html[data-design="kraft"] .author-story p:first-child { font-size: 22px; }
}
@media (max-width: 360px) {
  html[data-design="kraft"] .brand strong { font-size: 25px; }
  html[data-design="kraft"] .site-header nav a { font-size: 12px; padding-inline: 3px; }
  html[data-design="kraft"] .hero h1 { font-size: 68px; }
  html[data-design="kraft"] .hero-stats strong { font-size: 28px; }
  html[data-design="kraft"] .hero-stats span { font-size: 9px; }
}