@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@400;500;600;700&display=swap");

/* Hannaland 2026 editorial system: shared tokens, typography, navigation, spacing and page components.
   This stylesheet loads last on every public page, to keep one consistent visual language. */
:root {
 --paper:#f5f1e8; --cream:#fcfaf6; --ink:#282524; --plum:#613547;
 --wine:#793b4c; --muted:#554c49; --line:#cfc5b8;
 /* Canonical typography: collection styles inherit these two families. */
 --font-display:"EB Garamond",Georgia,serif;
 --font-body:"Jost","Helvetica Neue",Arial,sans-serif;
 --serif:var(--font-display);
 --sans:var(--font-body);
 --type-label-tracking:.065em;
 --space-section:clamp(48px,7vw,86px);
 --card-image-ratio:4/5;
}
html { scroll-behavior:smooth; scroll-padding-top:22px; }
body { background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65; }
body p { color:var(--muted); }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--wine);outline-offset:4px; }
.shell { width:min(1200px,calc(100% - 72px));margin-inline:auto; }
.new-header { background:var(--paper);border-color:var(--line); }
.header-inner { min-height:76px; }
.brand-name { font-size:39px; }
.brand-sub { font-size:10px;letter-spacing:.12em;font-weight:600; }
.new-nav a { font-size:14px;letter-spacing:.015em;text-transform:none;font-weight:500; }
.studio-tag { font-size:11px; }
.eyebrow,.product-overline,.hb-product__meta,.concept-tile__meta {font-size:12px;letter-spacing:var(--type-label-tracking);line-height:1.5;}
.new-footer {padding:52px 0 26px;}
.new-footer p,.new-footer a,.new-footer .footer-top p { font-size:14px;line-height:1.7; }
.new-footer .footer-bottom {margin-top:36px;}
.studio-announcement {padding:10px 22px;background:var(--plum);color:#fff9f2;text-align:center;font-size:14px;line-height:1.5;}
.studio-announcement a,.studio-announcement span {color:inherit;}
.studio-announcement a:hover strong {text-decoration:underline;text-underline-offset:4px;}
.studio-announcement strong {font-weight:700;}
/* Harmonize commonly reused text sizes. */
.hero-desc,.section-intro,.concepts-hero__intro,.concept-tile__text,
.hb-hero__intro,.hb-specimen__note,.hb-product__description,.hb-section-heading>p,
.product-description,.product-material,.products-foot p,.modal-copy>p:not(.eyebrow,.modal-price,.modal-status),
.panel-copy,.hero__lead,.pouch-catalog__head>p {font-size:15px;line-height:1.7;letter-spacing:0;}
.product-price,.hb-product__price,.modal-price {font-size:16px;}
.product-tag,.product-status,.hb-product__status,.catalog-filter {font-size:12px;}
.modal-specs dt,.modal-specs dd {font-size:13px;line-height:1.6;}
.product-name {font-size:clamp(28px,2.7vw,36px);}
.button-solid,.button-link,.interest-add,.concept-tile__link {font-size:13px;line-height:1.5;}
/* Editorial layouts: sections separated without forced 100vh blocks or snap trapping.
   Tall galleries grow naturally; short sections have no artificial extra screens. */
.editorial-section {padding-block:var(--space-section);border-bottom:1px solid var(--line);}
.editorial-section--soft {background:var(--cream);}
.editorial-section--warm {background:#eee7dc;}
.editorial-section__heading {display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:30px;}
.editorial-section__heading h2 {margin:5px 0 0;font:400 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:-.022em;}
.editorial-section__heading p {max-width:400px;font-size:15px;line-height:1.7;}
.editorial-hero {min-height:min(690px,calc(100svh - 90px));display:flex;align-items:center;padding-block:clamp(46px,7vw,88px);}
.editorial-hero__grid {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,80px);align-items:center;}
.editorial-hero__text {max-width:600px;}
.editorial-hero h1 {margin:15px 0 23px;font:400 clamp(58px,7vw,98px)/.91 var(--serif);letter-spacing:-.03em;}
.editorial-hero__lead {max-width:500px;font-size:17px;line-height:1.75;}
.editorial-hero__actions {margin-top:25px;display:flex;align-items:center;gap:25px;flex-wrap:wrap;}
.editorial-hero__image {position:relative;max-width:390px;width:100%;margin:0 auto;padding:12px;background:#fff9ef;box-shadow:0 16px 45px #33212b16;}
.editorial-hero__image img {width:100%;aspect-ratio:4/5;object-fit:cover;}
.editorial-hero__image figcaption {padding:10px 3px 0;font-size:12px;color:var(--muted);}
.editorial-hero__image--secondary {max-width:270px;}
.editorial-split {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,7vw,96px);}
.editorial-split__text {max-width:560px;}
.editorial-split h2 {font:400 clamp(40px,5vw,62px)/1 var(--serif);margin:0 0 24px;}
.editorial-split p {font-size:16px;line-height:1.8;}
.editorial-split a {display:inline-block;margin-top:26px;}
.editorial-split img {width:100%;max-width:360px;aspect-ratio:4/5;object-fit:cover;margin-inline:auto;}
.collection-cards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:24px;}
.collection-card {min-width:0;display:block;color:inherit;}
.collection-card__media {display:block;aspect-ratio:4/5;overflow:hidden;max-width:350px;background:#e8ddd2;}
.collection-card__media img {width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.collection-card:hover img {transform:scale(1.025);}
.collection-card__meta {display:block;margin:17px 0 6px;color:var(--plum);font-size:12px;letter-spacing:.075em;}
.collection-card__title {display:block;font:400 clamp(28px,3vw,39px)/1.1 var(--serif);}
.collection-card__description {display:block;font-size:15px;line-height:1.6;margin:10px 0;color:var(--muted);}
.collection-card__link {font-size:14px;color:var(--plum);font-weight:600;}
.collections-empty {padding:22px 0;font-size:16px;color:var(--muted);}
.collection-info {max-width:670px;}
.collection-info h1 {font:400 clamp(58px,7vw,92px)/.95 var(--serif);margin:8px 0 15px;}
.collection-info p {font-size:17px;line-height:1.75;}
.collection-info__cover {width:min(100%,360px);max-height:410px;aspect-ratio:4/5;object-fit:cover;margin:0 auto;}
.about-detail-image {width:min(100%,320px);max-height:390px;aspect-ratio:4/5;object-fit:cover;margin-inline:auto;}
/* Catalog, collection and specimen images share the thumbnail grid. */
.media-grid,.products.media-grid,.hb-products.media-grid,.hb-specimens.media-grid {width:100%;max-width:1200px;margin-inline:auto;}
.hb-products .hb-product__image {aspect-ratio:4/5;}
.hb-specimens .hb-specimen__picture{aspect-ratio:4/5;}
.product-card,.hb-product,.hb-specimen {min-width:0;}
.product-image img,.hb-product__image img,.concept-tile__image img {object-fit:cover;}
.product-image,.hb-product__image,.concept-tile__image {cursor:pointer;}
/* Reduce oversized editorial covers while keeping their visual personality. */
.hb-hero__visual {width:min(100%,460px);min-height:400px;}
.hb-hero__grid {min-height:0;padding-block:clamp(38px,6vw,70px);}
.concepts-hero__notebook {min-height:390px;}
.concepts-hero__photo--one {max-width:410px;max-height:320px;}
.concepts-hero__photo--two {max-width:175px;max-height:170px;}
.concepts-list {padding-block:var(--space-section);}
.concept-tile__body {padding:22px;}
.concept-tile h2 {font-size:clamp(31px,3vw,42px);}
.hb-section {padding-block:var(--space-section);}
.hb-atelier__copy p:not(.eyebrow) {font-size:15px;line-height:1.75;}
@media (max-width:900px) {
 .editorial-hero {min-height:0;}
 .editorial-hero__grid,.editorial-split {grid-template-columns:1fr;gap:30px;}
 .editorial-hero__image {max-width:320px;}
 .collection-cards {grid-template-columns:repeat(2,minmax(0,1fr));}
 .new-nav a {font-size:15px;}
}
@media (max-width:640px) {
 .shell {width:calc(100% - 36px);}
 .header-inner {min-height:67px;}
 .editorial-section__heading {display:block;}
 .editorial-section__heading p {margin-top:12px;}
 .editorial-hero h1 {font-size:clamp(47px,13vw,71px);}
 .editorial-hero__lead {font-size:16px;}
 .collection-cards {grid-template-columns:1fr;gap:32px;width:min(100%,350px);margin-inline:auto;}
 .editorial-hero__image {max-width:290px;}
 .editorial-split img {max-width:280px;}
 .studio-announcement {padding:10px 18px;font-size:13px;}
 .brand-sub {font-size:9px;}
 .modal-panel{max-height:calc(100svh - 35px);}
}
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto;} .collection-card img{transition:none;}}

/* Empty Spotlight does not leave half an unused hero. */
.no-spotlight-hero .editorial-hero__grid{grid-template-columns:minmax(0,1fr)}
.no-spotlight-hero .editorial-hero__text{max-width:720px;margin-inline:auto;text-align:center}
.no-spotlight-hero .editorial-hero__actions{justify-content:center}

.collections-page__title{font:400 clamp(54px,7vw,92px)/1 var(--serif);margin:5px 0 0;letter-spacing:-.025em}

/* The Spotlight cover is an actionable real product, not a static decorative image. */
.editorial-hero__product-trigger {
  display:block;width:100%;padding:0;border:0;background:transparent;
  cursor:zoom-in;
}
.editorial-hero__product-trigger img {
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:filter .25s ease;
}
.editorial-hero__product-trigger:hover img {filter:saturate(1.06);}
.editorial-hero__product-trigger:focus-visible {outline:3px solid var(--wine);outline-offset:4px;}
.editorial-hero__image figcaption {color:#514744;font-size:13px;line-height:1.45;}
/* Keep touch targets and reading order clear without artificially tall sections. */
.new-nav a {min-height:42px;display:inline-flex;align-items:center;}
.collection-card__link {display:inline-block;margin-top:4px;}
@media(max-width:780px) {
 .new-nav a {width:100%;min-height:44px;}
}

/* Catalog, Spotlight, THOUGHTS and collections share the same product title action. */
.product-name .product-title-button {
  display:inline;max-width:100%;padding:0;border:0;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.product-name .product-title-button:hover,
.product-name .product-title-button:focus-visible {
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
/* Avoid repeating the studio identity in the header next to the brand subtitle. */
.new-header .studio-tag {display:none;}

/* A quieter typographic rhythm: legible labels, generous reading copy and
   distinctive bookish headings instead of heavily tracked UI text. */
.product-modal .modal-copy [data-modal-description] {
  font-family: var(--font-body);
  line-height: 1.8;
  max-width: 68ch;
  text-wrap: pretty;
}
.product-modal .modal-copy h2,
.product-modal .skin-product-facts h3 {
  font-family: var(--font-display);
  font-kerning: normal;
  letter-spacing: -.025em;
}
.product-name, .collection-card__title {letter-spacing: -.02em;}

/* Labels read like captions in a maker's notebook, not dashboard metadata.
   Scope to the product UI so bespoke art/project pages retain their identities. */
.brand-sub, .studio-tag {
  font-weight: 500;
  letter-spacing: .055em;
  text-transform: none;
}
.product-card .product-overline,
.product-card .product-material,
.catalog-toolbar .catalog-filter {
  letter-spacing: .045em;
  text-transform: none;
}
.product-modal .modal-specs dt,
.product-modal .skin-product-facts__row dt {
  letter-spacing: .04em;
  text-transform: none;
}