/*
Theme Name: Konsume Editorial Approved
Theme URI: https://konsume.in/
Author: Konsume
Description: Approved Konsume editorial collage theme with hero, recent slider, category sliders, and social/search icons.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: konsume-editorial-approved
Tags: blog, magazine, editorial, custom-logo, featured-images
*/

:root{
  --cream:#f7ecd9;
  --paper:#fff8eb;
  --paper2:#fbf0dd;
  --brown:#2b160d;
  --brown-soft:#5b3829;
  --rust:#bd5633;
  --rust-dark:#8f3f27;
  --blue:#4d6f98;
  --blue-soft:#9db5d1;
  --blue-pale:#d9e5ee;
  --blush:#f7d9cd;
  --tan:#efd6b1;
  --line:#ead8bd;
  --shadow:0 18px 45px rgba(43,22,13,.13);
  --shadow-small:0 9px 24px rgba(43,22,13,.12);
  --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--brown);
  background:
    radial-gradient(circle at 13% 6%, rgba(189,86,51,.08), transparent 28%),
    radial-gradient(circle at 83% 8%, rgba(77,111,152,.12), transparent 31%),
    linear-gradient(180deg,var(--cream),#fff4e4 62%,var(--cream));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(43,22,13,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,22,13,.03) 1px, transparent 1px);
  background-size:44px 44px;
  mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input{font:inherit}
.screen-reader-text,.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.site-shell{
  max-width:1440px;
  margin:0 auto;
  min-height:100vh;
  background:rgba(255,248,235,.44);
  border-inline:1px solid rgba(43,22,13,.10);
  overflow:hidden;
  position:relative;
}

/* HEADER */
.site-header{
  min-height:142px;
  display:grid;
  grid-template-columns:minmax(300px, 440px) minmax(0,1fr) auto;
  align-items:center;
  gap:34px;
  padding:22px clamp(24px,5vw,72px) 18px;
  background:rgba(255,248,235,.78);
  border-bottom:1px solid rgba(43,22,13,.10);
  position:relative;
  z-index:10;
}
.brand{
  display:flex;
  align-items:center;
  justify-self:start;
}
.brand img{
  display:block;
  width:min(390px, 30vw);
  max-height:92px;
  object-fit:contain;
}
.brand-word{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:900;
  font-size:clamp(72px,8vw,124px);
  letter-spacing:-.115em;
  line-height:.72;
  color:#050505;
  text-transform:lowercase;
}
.primary-nav{
  justify-self:end;
}
.primary-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(22px,3.1vw,42px);
  margin:0;
  padding:0;
  white-space:nowrap;
}
.primary-nav li{position:relative}
.primary-nav .sub-menu,
.primary-nav .children{display:none!important}
.primary-nav a{
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:-.02em;
  font-size:clamp(15px,1.3vw,23px);
  line-height:1;
}
.nav-chevron{
  font-size:.7em;
  margin-left:.22em;
  transform:translateY(-.08em);
  display:inline-block;
}
.header-icons{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:18px;
  color:#2c2c2c;
}
.icon-link{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  color:#2c2c2c;
  transition:transform .18s ease,color .18s ease;
}
.icon-link:hover{transform:translateY(-2px);color:var(--rust)}
.icon-link svg{width:22px;height:22px;display:block;fill:currentColor}
.search-icon svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.menu-toggle{display:none}

.checker-tape{
  height:20px;
  background-image:
    linear-gradient(45deg, rgba(77,111,152,.84) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(77,111,152,.84) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(77,111,152,.84) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(77,111,152,.84) 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
  opacity:.78;
}

/* MAIN */
.section-pad{padding-inline:clamp(24px,5vw,72px)}
.hero{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(34px,5vw,80px);
  align-items:center;
  padding-top:72px;
  padding-bottom:58px;
}
.eyebrow{
  display:inline-flex;
  margin:0 0 22px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
  font-weight:950;
  background:var(--blush);
  padding:10px 20px;
  border-radius:999px;
  transform:rotate(-2deg);
  position:relative;
}
.eyebrow:after{
  content:"✱";
  position:absolute;
  right:-34px;
  top:0;
  color:var(--rust);
  font-size:30px;
}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;color:var(--brown)}
.hero h1{
  font-size:clamp(54px,7.3vw,102px);
  line-height:.87;
  letter-spacing:-.075em;
  margin:0;
  max-width:650px;
}
.hero h1 .circled,
.newsletter-card h2 .circled{
  position:relative;
  display:inline-block;
}
.hero h1 .circled:after,
.newsletter-card h2 .circled:after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:4%;
  height:.38em;
  border:4px solid var(--rust);
  border-top:0;
  border-radius:50%;
  transform:rotate(-3deg);
}
.hero-lede{
  margin:28px 0 0;
  color:var(--brown-soft);
  max-width:500px;
  font-size:19px;
  line-height:1.55;
  font-weight:650;
}
.hero-lede em{
  font-style:normal;
  border-bottom:3px solid var(--rust);
}
.hero-actions{
  display:flex;
  gap:32px;
  align-items:center;
  margin-top:28px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  gap:16px;
  padding:0 24px;
  border-radius:12px;
  background:var(--rust);
  color:#fff8eb;
  font-weight:950;
  border:0;
  cursor:pointer;
  box-shadow:var(--shadow-small);
}
.button-blue{background:var(--blue)}
.button:hover{transform:translateY(-2px)}
.round-stamp{
  width:104px;
  height:104px;
  border:2px solid var(--blue);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:10px;
  line-height:1.16;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--blue);
  font-weight:950;
  transform:rotate(-13deg);
}

/* Hero collage: girl + laptop */
.hero-collage{
  min-height:570px;
  position:relative;
}
.hero-collage .rust-circle{
  position:absolute;
  width:430px;height:430px;border-radius:50%;
  background:var(--rust);
  right:110px;top:38px;
}
.paper-shape{position:absolute;box-shadow:0 15px 38px rgba(43,22,13,.13)}
.blue-paper{
  width:238px;height:318px;right:400px;top:126px;
  background:linear-gradient(135deg,rgba(255,255,255,.25),transparent),var(--blue-soft);
  transform:rotate(-9deg);
  clip-path:polygon(6% 0,100% 5%,94% 95%,4% 100%);
}
.grid-paper{
  width:260px;height:288px;right:10px;top:92px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    #fff9ee;
  background-size:28px 28px;
  transform:rotate(3deg);
  clip-path:polygon(8% 4%,98% 0,100% 96%,4% 100%);
}
.checker-paper{
  width:205px;height:156px;right:32px;bottom:124px;
  background-color:#fff8eb;
  background-image:
    linear-gradient(45deg,var(--rust) 25%,transparent 25%),
    linear-gradient(-45deg,var(--rust) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--rust) 75%),
    linear-gradient(-45deg,transparent 75%,var(--rust) 75%);
  background-size:42px 42px;
  background-position:0 0,0 21px,21px -21px,-21px 0;
  transform:rotate(4deg);
  clip-path:polygon(4% 0,100% 8%,94% 100%,0 90%);
}
.tape{
  position:absolute;
  width:54px;height:34px;
  background:rgba(77,111,152,.54);
  top:20px;right:410px;
  transform:rotate(12deg);
}
.girl{
  position:absolute;
  width:410px;height:430px;
  right:175px;top:52px;
  filter:drop-shadow(0 18px 18px rgba(43,22,13,.22));
}
.girl .hair-bun{
  position:absolute;
  left:150px;top:0;width:118px;height:108px;background:#1b100b;border-radius:50%;
}
.girl .hair{
  position:absolute;
  left:120px;top:48px;width:170px;height:190px;background:#1b100b;border-radius:48% 52% 44% 45%;
}
.girl .hair:before,
.girl .hair:after{
  content:"";
  position:absolute;
  background:#1b100b;
  border-radius:50%;
}
.girl .hair:before{width:70px;height:120px;left:-22px;top:40px;transform:rotate(15deg)}
.girl .hair:after{width:76px;height:126px;right:-18px;top:38px;transform:rotate(-14deg)}
.girl .face{
  position:absolute;
  left:154px;top:94px;width:108px;height:142px;
  background:linear-gradient(90deg,#d4b79c,#e2c8ad);
  border:3px solid rgba(43,22,13,.38);
  border-radius:52% 48% 45% 45%;
  z-index:2;
}
.girl .face:before{
  content:"";
  position:absolute;
  width:74px;height:18px;
  left:16px;top:66px;
  border-bottom:4px solid #1b100b;
  border-radius:50%;
  opacity:.85;
}
.girl .neck{
  position:absolute;
  left:188px;top:222px;width:48px;height:72px;
  background:#d0b293;
  z-index:1;
}
.girl .body{
  position:absolute;
  left:92px;top:274px;width:235px;height:115px;
  background:#d8c6b5;
  border-radius:95px 95px 10px 10px;
  opacity:.88;
}
.laptop{
  position:absolute;
  left:34px;top:222px;width:345px;height:205px;
  background:linear-gradient(140deg,#ded5c8,#b9aa9a);
  border-radius:12px;
  border:3px solid rgba(43,22,13,.36);
  z-index:4;
  box-shadow:0 22px 45px rgba(43,22,13,.2);
}
.laptop:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:38px;height:38px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,248,235,.38);
}
.idea-bubble{
  position:absolute;
  right:52px;top:62px;
  background:var(--blue);
  color:white;
  padding:18px 24px;
  border-radius:18px 18px 18px 4px;
  font-size:25px;
  line-height:.92;
  font-weight:950;
  transform:rotate(-7deg);
  box-shadow:var(--shadow-small);
}
.torn-note{
  position:absolute;
  right:12px;
  bottom:64px;
  background:#fff3df;
  padding:22px 26px;
  font-size:26px;
  line-height:1;
  transform:rotate(-2deg);
  box-shadow:var(--shadow-small);
  clip-path:polygon(5% 0,95% 5%,100% 92%,8% 100%,0 10%);
}
.torn-note span{color:var(--rust);font-weight:950;border-bottom:3px solid var(--rust)}
.doodle-star{
  position:absolute;
  left:92px;top:320px;
  font-size:44px;
  color:var(--brown);
  transform:rotate(12deg);
}
.tiny-spark{
  position:absolute;
  right:330px;top:120px;
  color:var(--rust);
  font-size:20px;
}

/* Article rails */
.article-section{
  padding-top:42px;
  padding-bottom:18px;
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:22px;
}
.section-heading h2{
  margin:0;
  font-size:clamp(30px,3.3vw,46px);
  line-height:1;
  letter-spacing:-.045em;
  position:relative;
}
.section-heading h2:after{
  content:"";
  position:absolute;
  left:0;right:-88px;bottom:-9px;
  height:2px;background:rgba(189,86,51,.42);
}
.section-heading a{
  color:var(--rust);
  font-weight:850;
}
.rail-wrap{
  position:relative;
}
.article-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px, 270px);
  gap:28px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 0 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.article-rail::-webkit-scrollbar{display:none}
.rail-card{
  scroll-snap-align:start;
  background:rgba(255,248,235,.92);
  border:1px solid rgba(43,22,13,.12);
  border-radius:14px;
  overflow:hidden;
  min-height:325px;
  box-shadow:var(--shadow-small);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rail-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.card-image{
  height:168px;
  background:var(--blush);
  position:relative;
  overflow:hidden;
}
.card-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.03);
}
.card-image.no-thumb{
  background:
    radial-gradient(circle at 70% 30%, rgba(189,86,51,.25), transparent 28%),
    linear-gradient(135deg,var(--blush),var(--blue-pale));
}
.card-image.no-thumb:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(43,22,13,.16) 1px, transparent 1px);
  background-size:6px 6px;
  opacity:.25;
}
.card-image.no-thumb:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:110px;height:110px;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:rgba(255,248,235,.64);
  border:2px solid rgba(255,255,255,.6);
  clip-path:polygon(10% 0,100% 8%,92% 100%,0 90%);
}
.card-body{
  padding:18px 18px 16px;
}
.card-cat{
  display:block;
  color:var(--rust);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11px;
  font-weight:950;
  margin-bottom:12px;
}
.card-body h3{
  margin:0;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.card-body p{
  margin:14px 0 0;
  color:var(--brown-soft);
  font-weight:650;
  line-height:1.42;
  font-size:14px;
}
.card-meta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--brown-soft);
  font-size:12px;
  font-weight:800;
}
.rail-arrow{
  position:absolute;
  z-index:5;
  top:42%;
  transform:translateY(-50%);
  width:50px;height:50px;
  border-radius:50%;
  border:1px solid rgba(43,22,13,.12);
  background:rgba(255,248,235,.92);
  color:var(--brown);
  box-shadow:var(--shadow-small);
  display:grid;
  place-items:center;
  font-size:28px;
  cursor:pointer;
}
.rail-arrow:hover{background:white}
.rail-prev{left:-25px}
.rail-next{right:-25px}
.rail-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:5px;
}
.rail-dots span{
  width:28px;height:8px;border-radius:99px;
  background:rgba(43,22,13,.16);
}
.rail-dots span:first-child{background:var(--rust)}
.category-culture .card-image.no-thumb{background:linear-gradient(135deg,var(--blush),#f5dfcc)}
.category-politics .card-image.no-thumb{background:linear-gradient(135deg,var(--blue-pale),#eadfcf)}
.category-hodgepodge .card-image.no-thumb{background:linear-gradient(135deg,var(--tan),#f6e2bd)}

/* FOOTER */
.konsume-footer{
  margin-top:46px;
  padding:68px clamp(24px,5vw,72px) 34px;
  background:
    radial-gradient(circle at 90% 8%, rgba(77,111,152,.14), transparent 24%),
    linear-gradient(180deg,rgba(255,248,235,.86),rgba(247,236,217,.98));
  border-top:2px dashed rgba(189,86,51,.35);
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.28fr .7fr .85fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.footer-logo-img{
  width:min(310px, 80vw);
  display:block;
  margin-bottom:18px;
}
.footer-fallback-logo{
  font-family:Georgia,"Times New Roman",serif;
  font-size:82px;
  font-weight:900;
  letter-spacing:-.115em;
  line-height:.72;
  text-transform:lowercase;
  margin:0 0 18px;
}
.footer-tagline{
  color:var(--brown-soft);
  font-weight:800;
  max-width:330px;
  line-height:1.5;
}
.footer-note{
  display:inline-block;
  background:var(--blush);
  padding:9px 14px;
  border-radius:999px;
  transform:rotate(-2deg);
  font-weight:950;
  margin-top:10px;
}
.footer-column h3{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:var(--rust);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 18px;
}
.footer-column a,
.footer-column span{
  display:block;
  color:var(--brown);
  font-weight:850;
  margin-bottom:12px;
}
.footer-socials{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:18px;
}
.footer-socials .icon-link{
  width:28px;height:28px;
}
.footer-socials .icon-link svg{
  width:24px;height:24px;
}
.footer-search{
  margin-top:24px;
  display:flex;
  min-height:50px;
  border:1px solid rgba(43,22,13,.14);
  background:white;
  border-radius:10px;
  overflow:hidden;
  max-width:360px;
}
.footer-search input{
  flex:1;
  min-width:0;
  border:0;
  padding:0 16px;
  outline:0;
  background:white;
}
.footer-search button{
  border:0;
  width:58px;
  background:var(--rust);
  color:#fff;
  cursor:pointer;
}
.footer-bottom{
  border-top:1px solid rgba(43,22,13,.12);
  margin-top:42px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  color:var(--brown-soft);
  font-size:13px;
  font-weight:750;
}

/* Content templates */
.archive-wrap,.content-wrap{
  padding:64px clamp(24px,5vw,72px);
  max-width:1120px;
  margin:0 auto;
}
.archive-title,.single-article h1,.page-article h1{
  font-size:clamp(48px,7vw,92px);
  line-height:.9;
  letter-spacing:-.07em;
  margin:0 0 30px;
}
.post-list{display:grid;gap:26px}
.post-list article,.single-article,.page-article{
  background:rgba(255,248,235,.88);
  border:1px solid rgba(43,22,13,.12);
  border-radius:22px;
  box-shadow:var(--shadow-small);
  padding:clamp(24px,4vw,46px);
}
.post-list h2{font-size:clamp(30px,4vw,50px);line-height:1;margin:0 0 12px}
.entry-content{color:var(--brown-soft);font-size:18px;line-height:1.75;font-weight:520}
.entry-content a{color:var(--rust);border-bottom:2px solid rgba(189,86,51,.35)}
.entry-content img{border-radius:18px;box-shadow:var(--shadow-small)}
.wp-block-button__link{background:var(--rust);border-radius:999px;color:white;font-weight:900}

/* Responsive */
@media (max-width:1180px){
  .site-header{
    grid-template-columns:1fr auto;
  }
  .brand img{width:min(320px, 50vw)}
  .primary-nav{
    grid-column:1 / -1;
    justify-self:start;
  }
  .primary-nav ul{
    justify-content:flex-start;
    gap:18px 32px;
    flex-wrap:wrap;
  }
  .header-icons{
    grid-row:1;
    grid-column:2;
  }
}
@media (max-width:980px){
  .site-header{
    grid-template-columns:1fr auto;
    min-height:auto;
  }
  .brand img{width:min(260px, 62vw)}
  .menu-toggle{
    display:inline-grid;
    gap:5px;
    border:0;
    background:transparent;
    padding:10px;
    cursor:pointer;
    justify-self:end;
  }
  .menu-toggle span:not(.sr-only){
    width:30px;height:3px;background:var(--brown);border-radius:99px;
  }
  .primary-nav,
  .header-icons{
    grid-column:1 / -1;
    justify-self:stretch;
    display:none;
  }
  .primary-nav.is-open,
  .header-icons.is-open{
    display:flex;
  }
  .primary-nav{
    background:var(--paper);
    border:1px solid rgba(43,22,13,.12);
    border-radius:16px;
    padding:18px;
  }
  .primary-nav ul{
    display:grid;
    gap:18px;
  }
  .primary-nav a{font-size:18px}
  .header-icons{
    padding:0 18px 14px;
    justify-content:flex-start;
  }
  .hero{
    grid-template-columns:1fr;
    padding-top:44px;
  }
  .hero-collage{min-height:530px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hero h1{
    font-size:clamp(50px,15vw,74px);
  }
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-collage{
    transform:scale(.78);
    transform-origin:top center;
    margin-bottom:-105px;
  }
  .article-rail{
    grid-auto-columns:minmax(230px, 82vw);
  }
  .rail-arrow{display:none}
  .section-heading{align-items:flex-start;flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:block}
}