/* Awla theme. Source of truth for the look: Concept Site/index.html. */
:root{
  --white:#ffffff;
  --paper:#f7f6f5;
  --grey-1:#e6e4e2;
  --grey-2:#b8b4b0;
  --grey-3:#6e6a66;
  --black:#111111;
  --pink:#e8a2b4;
  --pink-deep:#c9738d;
  --pink-pale:#f6dfe5;
  --serif:var(--gh-font-heading,"Fraunces"),"Iowan Old Style",Georgia,serif;
  --sans:var(--gh-font-body,"Inter"),system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  background:var(--white);color:var(--black);
  font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.5;
  font-variation-settings:"opsz" 14;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1040px;margin:0 auto}
.wrap.narrow{max-width:680px}

/* brand mark */
.wordmark{
  font-family:var(--serif);font-variant-caps:small-caps;font-weight:400;
  letter-spacing:.08em;font-variation-settings:"opsz" 144;
}

/* header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--grey-1);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
}
.site-header .wordmark{font-size:26px}
.site-header .wordmark span{color:var(--pink-deep)}
.site-nav{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em}
.site-nav ul{list-style:none;display:flex;gap:18px}
.site-nav .nav-signin{color:var(--pink-deep)}

/* photo treatment */
.photo{position:relative;overflow:hidden;background:var(--grey-1)}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.photo::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:multiply;opacity:.55}
.photo.plain::after{opacity:0}

/* hero */
.hero{padding:56px 20px 40px}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-3);margin-bottom:18px;
}
.hero h1{font-weight:300;font-size:44px;line-height:1.05;letter-spacing:-.01em;font-variation-settings:"opsz" 144;margin-bottom:22px}
.hero h1 em{font-style:italic;font-weight:300;color:var(--pink-deep)}
.hero p{color:var(--grey-3);max-width:32ch;margin-bottom:28px}
.btn{
  display:inline-block;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;
  padding:14px 22px;border:1px solid var(--black);border-radius:999px;background:transparent;color:var(--black);cursor:pointer;
}
.btn.solid{background:var(--black);color:var(--white)}
.btn + .btn{margin-left:8px}
.hero-photo{height:300px;margin:36px -20px 0}

/* sections */
section{padding:56px 20px}
h2{font-weight:300;font-size:30px;line-height:1.15;letter-spacing:-.01em;font-variation-settings:"opsz" 96;margin-bottom:14px}
.lede{color:var(--grey-3);margin-bottom:28px;max-width:34ch}

/* proof table */
.proof{background:var(--paper);padding:56px 20px}
.table{background:var(--white);border:1px solid var(--grey-1);font-family:var(--sans);font-size:13px}
.table .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px;border-top:1px solid var(--grey-1)}
.table .row:first-child{border-top:0;background:var(--paper);color:var(--grey-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.table .row b{font-weight:500}
.table .num{font-variant-numeric:tabular-nums;text-align:right}
.tag{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--pink-pale);color:var(--pink-deep);margin-left:8px;vertical-align:middle}
.tag.grey{background:var(--grey-1);color:var(--grey-3)}
.caption{font-family:var(--sans);font-size:12px;color:var(--grey-3);margin-top:12px}

/* products */
.products{display:grid;gap:36px}
.product .photo{height:200px;margin-bottom:18px}
.product h3{font-weight:400;font-size:24px;margin-bottom:8px;font-variation-settings:"opsz" 72}
.product p{color:var(--grey-3);font-size:17px}
.product .k{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:10px}

/* pull quote */
.quote{background:var(--black);color:var(--white);padding:64px 20px}
.quote blockquote{font-size:28px;line-height:1.2;font-weight:300;font-style:italic;font-variation-settings:"opsz" 120}
.quote blockquote strong{font-style:normal;font-weight:300;color:var(--pink)}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);margin-top:22px}

/* post list */
.post-list{display:grid;gap:28px}
.post-card{border-top:1px solid var(--grey-1);padding-top:20px}
.post-card h3{font-weight:400;font-size:24px;margin-bottom:8px;font-variation-settings:"opsz" 72}
.post-card p{color:var(--grey-3);font-size:17px}
.post-card .eyebrow{margin-bottom:10px}
.more{margin-top:32px}
.pagination{display:flex;justify-content:space-between;margin-top:36px;font-family:var(--sans);font-size:13px;color:var(--grey-3)}

/* pricing */
.plans{display:grid;gap:14px}
.plan{border:1px solid var(--grey-1);padding:24px 20px}
.plan.feature{border-color:var(--black)}
.plan .k{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-3);margin-bottom:8px}
.plan .price{font-size:38px;font-weight:300;line-height:1;font-variation-settings:"opsz" 144}
.plan .price small{font-family:var(--sans);font-size:12px;color:var(--grey-3);margin-left:6px}
.plan ul{list-style:none;margin:16px 0 20px;font-size:16px;color:var(--grey-3)}
.plan li{padding:6px 0;border-top:1px solid var(--grey-1)}
.plan li::before{content:"\2014  ";color:var(--pink-deep)}

/* newsletter */
.signup{background:var(--pink-pale);padding:56px 20px}
.signup form{display:grid;gap:10px;margin-top:20px}
.signup input{font-family:var(--sans);font-size:15px;padding:14px 16px;border:1px solid var(--grey-2);background:var(--white);border-radius:0;width:100%}
.signup .btn{text-align:center}
.form-note{display:none;font-family:var(--sans);font-size:13px;color:var(--grey-3);grid-column:1/-1}
.success .form-note[data-members-success]{display:block}
.error .form-note[data-members-error]{display:block}

/* single post / page */
.post{padding:56px 20px}
.post-title{font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-.01em;font-variation-settings:"opsz" 144;margin-bottom:18px}
.post-photo{height:320px;margin:28px 0}
.gh-content{font-size:19px;line-height:1.6}
.gh-content > *{margin-bottom:1.2em}
.gh-content h2{font-size:28px;margin-top:1.6em}
.gh-content h3{font-weight:400;font-size:22px;margin-top:1.4em;font-variation-settings:"opsz" 72}
.gh-content a{border-bottom:1px solid var(--pink);padding-bottom:1px}
.gh-content blockquote{border-left:2px solid var(--pink-deep);padding-left:18px;color:var(--grey-3);font-style:italic}
.gh-content ul,.gh-content ol{padding-left:1.3em}
.gh-content table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px}
.gh-content th,.gh-content td{border-top:1px solid var(--grey-1);padding:10px 8px;text-align:left;vertical-align:top}
.gh-content th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);font-weight:500}
.gh-content hr{border:0;border-top:1px solid var(--grey-1);margin:2em 0}
.gh-content pre{font-size:14px;background:var(--paper);padding:16px;overflow-x:auto}
.gh-content code{font-size:.9em;background:var(--paper);padding:1px 4px}
.gh-content img{width:100%}
.kg-width-wide{position:relative;width:min(1040px,92vw);left:50%;transform:translateX(-50%)}
.kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img{width:100%}
.post-meta{margin-top:40px;border-top:1px solid var(--grey-1);padding-top:16px}

/* members-only fade */
.gh-post-upgrade-cta{background:var(--pink-pale);padding:32px 24px;text-align:center;font-family:var(--sans);font-size:15px}

/* footer */
.site-footer{padding:40px 20px 48px;border-top:1px solid var(--grey-1);font-family:var(--sans);font-size:12px;color:var(--grey-3)}
.site-footer .wordmark{font-size:30px;color:var(--black);margin-bottom:14px}
.site-footer p{margin-bottom:8px;max-width:40ch}
.site-footer nav{margin:18px 0}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px}

/* larger screens */
@media (min-width:720px){
  body{font-size:19px}
  .hero{padding:96px 40px 56px;max-width:1040px;margin:0 auto}
  .hero h1{font-size:72px;max-width:14ch}
  .hero-photo{height:460px;margin:56px -40px 0}
  section,.proof,.signup,.quote,.post,.site-footer{padding-left:40px;padding-right:40px}
  .products{grid-template-columns:repeat(3,1fr);gap:28px}
  .plans{grid-template-columns:repeat(2,1fr)}
  .quote blockquote{font-size:40px;max-width:24ch}
  .signup form{grid-template-columns:1fr auto}
  .post-title{font-size:56px}
  .post-photo{height:420px}
}

/* ---- v0.2: feed front page, sections nav ---- */
.site-header{display:block;padding:0}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.sections{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:0 20px 12px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3);scrollbar-width:none}
.sections::-webkit-scrollbar{display:none}
.sections a{padding-bottom:4px;border-bottom:1px solid transparent}
.sections a.current,.sections a:hover{color:var(--black);border-bottom-color:var(--pink-deep)}
.strap{padding:40px 20px 8px}
.strap-line{font-size:30px;line-height:1.1;font-weight:300;letter-spacing:-.01em;font-variation-settings:"opsz" 120;margin-bottom:10px}
.strap-line em{font-style:italic;color:var(--pink-deep)}
.strap-sub{color:var(--grey-3);font-size:17px}
.strap-sub a{color:var(--pink-deep)}
.feed{padding-top:32px}
.post-list.grid{gap:0}
.post-card.is-lead{border-top:0;padding-top:0;margin-bottom:36px}
.post-card.is-lead h3{font-size:34px;line-height:1.1;font-variation-settings:"opsz" 120}
.post-card.is-lead p{font-size:18px}
.card-photo{height:220px;margin-bottom:16px}
.post-card.is-lead .card-photo{height:320px}
.section-chip{color:var(--pink-deep)}
.section-index{background:var(--paper)}
.section-grid{display:grid;gap:12px}
.section-card{display:block;background:var(--white);border:1px solid var(--grey-1);padding:18px 18px 16px}
.section-card .k{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:8px}
.section-card p{color:var(--grey-3);font-size:16px;margin-bottom:10px}
.section-card .count{font-family:var(--sans);font-size:12px;color:var(--grey-2)}
@media (min-width:720px){
  .masthead{padding:14px 40px}
  .sections{padding:0 40px 12px;gap:26px}
  .strap{padding:64px 40px 8px;max-width:1040px;margin:0 auto}
  .strap-line{font-size:44px;max-width:22ch}
  .post-list.grid{grid-template-columns:repeat(3,1fr);gap:0 28px}
  .post-card.is-lead h3{font-size:48px}
  .section-grid{grid-template-columns:repeat(3,1fr)}
}