/*
Theme Name: Hollenbeck & Co.
Theme URI: https://hollenbeckandco.com
Author: Hollenbeck & Co.
Description: An elegant, minimal WordPress theme for an independent illustration studio selling fine-art prints and original ACEO miniatures. Built around the "Seal" monogram identity.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hollenbeck
Tags: portfolio, e-commerce, one-column, custom-logo, custom-menu, featured-images, editor-style
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --hb-cream:      #F4EDE1;
  --hb-cream-lt:   #FBF7EF;
  --hb-sand:       #EBE1CF;
  --hb-ink:        #2A2521;
  --hb-ink-deep:   #211D1A;
  --hb-body:       #5A5249;
  --hb-taupe:      #9C8B74;
  --hb-rule:       #E2D7C2;
  --hb-rule-soft:  #E7DCC8;
  --hb-accent:     #BC6B4A;

  --hb-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hb-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --hb-max: 1240px;
  --hb-pad: 40px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--hb-cream);
  color:var(--hb-ink);
  font-family:var(--hb-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--hb-accent); }
button, input, textarea, select{ font:inherit; color:inherit; }
::selection{ background:var(--hb-accent); color:var(--hb-cream); }

h1,h2,h3,h4{ font-family:var(--hb-serif); font-weight:500; line-height:1.08; margin:0; letter-spacing:.3px; }

.hb-wrap{ max-width:var(--hb-max); margin:0 auto; padding-inline:var(--hb-pad); }
.hb-narrow{ max-width:1000px; margin:0 auto; padding-inline:var(--hb-pad); }
.hb-eyebrow{
  font-family:var(--hb-sans); font-size:11px; font-weight:400;
  letter-spacing:4px; text-transform:uppercase; color:var(--hb-accent);
}
.hb-meta{
  font-family:var(--hb-sans); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--hb-taupe);
}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.hb-btn{
  display:inline-block; font-family:var(--hb-sans); font-size:12px; font-weight:400;
  letter-spacing:2.5px; text-transform:uppercase; padding:16px 32px; border-radius:1px;
  border:1px solid transparent; cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.hb-btn--dark{ background:var(--hb-ink); color:var(--hb-cream); }
.hb-btn--dark:hover{ background:var(--hb-accent); color:var(--hb-cream); }
.hb-btn--accent{ background:var(--hb-accent); color:var(--hb-cream); }
.hb-btn--accent:hover{ background:var(--hb-ink); color:var(--hb-cream); }
.hb-btn--ghost{ border-color:var(--hb-ink); color:var(--hb-ink); }
.hb-btn--ghost:hover{ background:var(--hb-ink); color:var(--hb-cream); }
.hb-btn--sm{ padding:11px 22px; letter-spacing:2px; }

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
.hb-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,237,225,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hb-rule);
}
.admin-bar .hb-header{ top:32px; }
.hb-header__inner{
  max-width:var(--hb-max); margin:0 auto; padding:18px var(--hb-pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hb-brand{ display:flex; align-items:center; gap:14px; }
.hb-brand__name{ font-family:var(--hb-serif); font-weight:500; font-size:19px; letter-spacing:3px; line-height:1; }
.hb-brand__sub{ font-family:var(--hb-sans); font-size:8.5px; letter-spacing:4px; color:var(--hb-taupe); margin-top:3px; line-height:1; }

.hb-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:38px; }
.hb-nav a{
  position:relative; font-family:var(--hb-sans); font-size:12px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:#4A443C;
}
.hb-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background:var(--hb-accent); transition:width .35s ease;
}
.hb-nav a:hover::after,
.hb-nav .current-menu-item > a::after{ width:100%; }
.hb-nav__cta a{ color:var(--hb-cream)!important; }
.hb-nav__cta a::after{ display:none; }

.hb-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.hb-burger span{ display:block; width:22px; height:1px; background:var(--hb-ink); margin:5px 0; transition:.3s; }

/* ============================================================
   5. SEAL MARK
   ============================================================ */
.hb-seal{ position:relative; display:flex; align-items:center; justify-content:center; }
.hb-seal__ring{ position:absolute; inset:0; animation:hb-spin 80s linear infinite; transform-origin:center; }
.hb-seal__core{ position:relative; text-align:center; line-height:1; }
.hb-seal__mono{ font-family:var(--hb-serif); font-weight:500; color:var(--hb-ink); letter-spacing:1px; }
.hb-seal__amp{ color:var(--hb-accent); font-weight:400; }
.hb-seal__est{ font-family:var(--hb-sans); font-size:11px; letter-spacing:5px; color:var(--hb-taupe); margin-top:12px; }
@keyframes hb-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .hb-seal__ring{ animation:none; } }

/* ============================================================
   6. HERO
   ============================================================ */
.hb-hero{
  max-width:var(--hb-max); margin:0 auto; padding:96px var(--hb-pad) 84px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hb-hero__tag{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.hb-hero__tag span:first-child{ width:40px; height:1px; background:var(--hb-accent); }
.hb-hero__tag span:last-child{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--hb-taupe); }
.hb-hero h1{ font-size:74px; line-height:1.02; font-weight:500; }
.hb-hero h1 em{ font-style:italic; color:var(--hb-accent); }
.hb-hero p{ font-size:16px; line-height:1.8; color:var(--hb-body); max-width:440px; margin:28px 0 38px; text-wrap:pretty; }
.hb-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   7. MARQUEE STRIP
   ============================================================ */
.hb-strip{ background:var(--hb-ink); color:var(--hb-cream); overflow:hidden; padding:16px 0; }
.hb-strip__inner{
  display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap;
  font-family:var(--hb-serif); font-style:italic; font-size:22px; padding-inline:var(--hb-pad);
}
.hb-strip__inner i{ color:var(--hb-accent); font-style:normal; }

/* ============================================================
   8. SECTION HEADS
   ============================================================ */
.hb-section{ padding-block:104px; }
.hb-section--tight{ padding-block:96px; }
.hb-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.hb-sechead h2{ font-size:46px; margin-top:14px; }
.hb-sechead__link{ font-family:var(--hb-sans); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--hb-body); position:relative; }
.hb-sechead__link::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--hb-accent); transition:width .35s ease; }
.hb-sechead__link:hover::after{ width:100%; }

/* ============================================================
   9. PRINT GRID
   ============================================================ */
.hb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.hb-card{ display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.hb-card:hover{ transform:translateY(-6px); }
.hb-card__frame{ background:var(--hb-cream-lt); border:1px solid var(--hb-rule-soft); padding:18px; }
.hb-card__img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:filter .5s ease; }
.hb-card:hover .hb-card__img{ filter:saturate(1.05); }
.hb-card__ph{
  width:100%; aspect-ratio:4/5; background:var(--hb-sand);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hb-serif); font-style:italic; font-size:17px; color:var(--hb-taupe);
}
.hb-card__foot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:18px; }
.hb-card__title{ font-family:var(--hb-serif); font-size:23px; font-weight:500; color:var(--hb-ink); }
.hb-card__price{ font-family:var(--hb-sans); font-size:15px; color:var(--hb-accent); white-space:nowrap; }
.hb-card__meta{ margin-top:3px; }

/* ============================================================
   10. ACEO FEATURE
   ============================================================ */
.hb-aceo{ background:var(--hb-sand); }
.hb-aceo__inner{
  max-width:var(--hb-max); margin:0 auto; padding:96px var(--hb-pad);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.hb-aceo__media{ position:relative; }
.hb-aceo__card{
  background:var(--hb-cream-lt); border:1px solid #DDD1BA; padding:22px;
  box-shadow:0 18px 48px rgba(42,37,33,.12); max-width:360px;
}
.hb-aceo__card img,
.hb-aceo__card .hb-aceo__ph{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.hb-aceo__ph{ background:var(--hb-sand); display:flex; align-items:center; justify-content:center;
  font-family:var(--hb-serif); font-style:italic; font-size:17px; color:var(--hb-taupe); }
.hb-aceo__specs{ display:flex; justify-content:space-between; align-items:center; margin-top:16px;
  font-family:var(--hb-sans); font-size:10px; letter-spacing:2px; color:var(--hb-taupe); }
.hb-aceo__badge{
  position:absolute; bottom:-26px; right:-10px; width:92px; height:92px; border-radius:50%;
  background:var(--hb-accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(188,107,74,.4);
  font-family:var(--hb-serif); font-weight:500; font-size:30px; color:var(--hb-cream);
}
.hb-aceo__badge b{ font-weight:400; opacity:.85; }
.hb-aceo h2{ font-size:50px; line-height:1.04; margin:18px 0 22px; }
.hb-aceo h2 em{ font-style:italic; }
.hb-aceo p{ font-size:16px; line-height:1.8; color:var(--hb-body); max-width:480px; margin:0 0 32px; text-wrap:pretty; }
.hb-stats{ display:flex; gap:40px; margin-bottom:38px; flex-wrap:wrap; }
.hb-stats__n{ font-family:var(--hb-serif); font-size:38px; font-weight:500; color:var(--hb-accent); line-height:1; }
.hb-stats__l{ font-family:var(--hb-sans); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--hb-taupe); margin-top:6px; }

/* ============================================================
   11. STUDIO STATEMENT
   ============================================================ */
.hb-studio{ text-align:center; padding-block:108px; }
.hb-studio__mark{ margin:0 auto 30px; }
.hb-studio p{
  font-family:var(--hb-serif); font-weight:500; font-size:34px; line-height:1.5;
  letter-spacing:.3px; color:var(--hb-ink); margin:0; text-wrap:pretty;
}
.hb-rule-sig{ display:flex; align-items:center; gap:16px; justify-content:center; margin-top:40px; }
.hb-rule-sig span{ width:40px; height:1px; background:#CDBFA6; }
.hb-rule-sig em{ font-family:var(--hb-serif); font-style:italic; font-size:22px; color:var(--hb-taupe); }

/* ============================================================
   12. NEWSLETTER
   ============================================================ */
.hb-news{ background:var(--hb-ink); color:var(--hb-cream); }
.hb-news__inner{ max-width:760px; margin:0 auto; padding:84px var(--hb-pad); text-align:center; }
.hb-news h2{ font-size:42px; line-height:1.1; margin:18px 0 16px; }
.hb-news p{ font-size:15px; line-height:1.7; color:#C8BDA9; max-width:420px; margin:0 auto 36px; }
.hb-news__form{ display:flex; max-width:440px; margin:0 auto; border:1px solid #5A5249; }
.hb-news__form input{
  flex:1; background:transparent; border:0; outline:0; padding:16px 20px;
  font-family:var(--hb-sans); font-size:14px; color:var(--hb-cream); letter-spacing:.5px;
}
.hb-news__form input::placeholder{ color:#8C8073; }
.hb-news__form button{
  background:var(--hb-accent); color:var(--hb-cream); border:0; cursor:pointer;
  font-family:var(--hb-sans); font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:0 28px;
  transition:background .35s ease;
}
.hb-news__form button:hover{ background:var(--hb-cream); color:var(--hb-ink); }

/* ============================================================
   13. FOOTER
   ============================================================ */
.hb-footer{ background:var(--hb-ink-deep); color:var(--hb-taupe); }
.hb-footer__inner{
  max-width:var(--hb-max); margin:0 auto; padding:54px var(--hb-pad);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.hb-footer__brand{ display:flex; align-items:center; gap:14px; }
.hb-footer__brand span{ font-family:var(--hb-serif); font-size:18px; letter-spacing:3px; color:var(--hb-cream); }
.hb-footer nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:30px; flex-wrap:wrap; }
.hb-footer nav a{ font-family:var(--hb-sans); font-size:11px; letter-spacing:2px; text-transform:uppercase; position:relative; }
.hb-footer nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--hb-accent); transition:width .35s ease; }
.hb-footer nav a:hover::after{ width:100%; }
.hb-footer__legal{ font-family:var(--hb-sans); font-size:11px; letter-spacing:1px; color:#6F665B; }

/* ============================================================
   14. BLOG / SINGLE / PAGE
   ============================================================ */
.hb-page{ padding-block:80px; }
.hb-page__head{ text-align:center; margin-bottom:56px; }
.hb-page__head h1{ font-size:52px; }
.hb-page__head .hb-eyebrow{ margin-bottom:14px; display:block; }
.hb-entry{ max-width:720px; margin:0 auto; font-size:16px; line-height:1.85; color:var(--hb-body); }
.hb-entry h2{ font-size:34px; margin:48px 0 16px; color:var(--hb-ink); }
.hb-entry h3{ font-size:26px; margin:36px 0 12px; color:var(--hb-ink); }
.hb-entry p{ margin:0 0 22px; text-wrap:pretty; }
.hb-entry a{ color:var(--hb-accent); border-bottom:1px solid rgba(188,107,74,.35); }
.hb-entry blockquote{
  margin:36px 0; padding-left:28px; border-left:2px solid var(--hb-accent);
  font-family:var(--hb-serif); font-style:italic; font-size:24px; line-height:1.5; color:var(--hb-ink);
}
.hb-entry img{ margin:32px 0; }
.hb-entry ul, .hb-entry ol{ margin:0 0 22px; padding-left:22px; }
.hb-entry li{ margin-bottom:8px; }

.hb-postlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.hb-post__thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.hb-post h2{ font-size:26px; margin:18px 0 8px; }
.hb-post p{ font-size:14px; color:var(--hb-body); margin:0; }

.hb-pagination{ display:flex; gap:12px; justify-content:center; margin-top:64px; }
.hb-pagination .page-numbers{
  font-family:var(--hb-sans); font-size:13px; padding:10px 16px;
  border:1px solid var(--hb-rule); color:var(--hb-body);
}
.hb-pagination .current{ background:var(--hb-ink); color:var(--hb-cream); border-color:var(--hb-ink); }

/* ============================================================
   15. SINGLE PRINT (CPT)
   ============================================================ */
.hb-product{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding-block:80px; }
.hb-product__frame{ background:var(--hb-cream-lt); border:1px solid var(--hb-rule-soft); padding:24px; }
.hb-product h1{ font-size:48px; margin:14px 0 18px; }
.hb-product__price{ font-family:var(--hb-serif); font-size:34px; color:var(--hb-accent); margin-bottom:24px; }
.hb-product__specs{ list-style:none; margin:32px 0; padding:24px 0; border-block:1px solid var(--hb-rule); }
.hb-product__specs li{ display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--hb-body); }
.hb-product__specs strong{ font-weight:400; color:var(--hb-ink); }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hb-hero{ grid-template-columns:1fr; text-align:center; padding-top:64px; gap:48px; }
  .hb-hero__tag{ justify-content:center; }
  .hb-hero p{ margin-inline:auto; }
  .hb-hero__actions{ justify-content:center; }
  .hb-hero h1{ font-size:58px; }
  .hb-aceo__inner{ grid-template-columns:1fr; gap:72px; }
  .hb-aceo__card{ margin-inline:auto; }
  .hb-product{ grid-template-columns:1fr; gap:40px; }
  .hb-grid, .hb-postlist{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  :root{ --hb-pad:24px; }
  .hb-burger{ display:block; }
  .hb-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--hb-cream);
    border-bottom:1px solid var(--hb-rule); display:none;
  }
  .hb-nav.is-open{ display:block; }
  .hb-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:12px var(--hb-pad) 24px; }
  .hb-nav li{ padding:14px 0; border-bottom:1px solid var(--hb-rule); }
  .hb-nav__cta{ border-bottom:0!important; padding-top:20px!important; }
  .hb-nav__cta a{ display:inline-block; background:var(--hb-accent); padding:12px 22px; }
  .hb-hero h1{ font-size:44px; }
  .hb-section{ padding-block:72px; }
  .hb-sechead h2, .hb-aceo h2, .hb-news h2{ font-size:34px; }
  .hb-studio p{ font-size:24px; }
  .hb-grid, .hb-postlist{ grid-template-columns:1fr; }
  .hb-strip__inner{ font-size:17px; gap:18px; }
  .hb-footer__inner{ flex-direction:column; text-align:center; }
}