/* Aloe Vera Juice Recipes - recipe-card-blog restoration
   palette recovered from the site's own 2012 theme options (#ff555d) */
:root{
 --canvas:#f2e9d9; --card:#fffcf5; --ink:#2c2823; --muted:#6b6357;
 --coral:#ff555d; --link:#c62f37; --herb:#4b6b3c; --rule:#d9cbb2;
 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
 --serif:Georgia,"Times New Roman",serif;
 --sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.68 var(--serif)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--link);
 padding:var(--s3) var(--s4);border:1px solid var(--rule);z-index:9}
.skip:focus{left:var(--s4);top:var(--s2)}
.shell{max-width:1120px;margin:0 auto;padding:0 var(--s5)}

/* ---- masthead ---- */
.masthead{background:var(--card);border-bottom:1px solid var(--rule)}
.masthead__in{display:flex;align-items:center;gap:var(--s5);padding-top:var(--s5);padding-bottom:var(--s5)}
.masthead__mark{flex:0 0 auto;display:block;width:88px;border:1px solid var(--rule);
 padding:var(--s1);background:var(--canvas)}
.mark__img{width:100%;height:104px;object-fit:cover}
.masthead__id{flex:1 1 auto;min-width:0}
.masthead__name{margin:0;font:400 40px/1.12 var(--serif);letter-spacing:-.01em}
.masthead__name a{color:var(--ink);text-decoration:none}
.masthead__tagline{margin:var(--s2) 0 0;font:italic 18px/1.4 var(--serif);color:var(--coral)}
.masthead__desc{margin:var(--s1) 0 0;font:13px/1.5 var(--sans);color:var(--muted)}
.masthead__by{flex:0 0 auto;margin:0;text-align:right;font:12px/1.7 var(--sans);
 color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.masthead__by span{display:block;text-transform:none;letter-spacing:0}
.leafrule{height:6px;background:repeating-linear-gradient(135deg,var(--herb) 0 6px,transparent 6px 12px)}

/* ---- category tabs ---- */
.tabstrip{background:var(--canvas);border-bottom:1px solid var(--rule)}
.tabstrip__in{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding-top:0;padding-bottom:0}
.tab{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) var(--s4);
 font:12px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
 text-decoration:none;border-right:1px solid var(--rule);min-height:44px}
.tabstrip__in li:first-child .tab{border-left:1px solid var(--rule)}
.tab:hover,.tab.is-active{background:var(--card);color:var(--link)}
.tab.is-active{box-shadow:inset 0 -3px 0 var(--coral)}
.tab__n{font-size:11px;color:var(--muted)}

/* ---- layout ----
   Two independent stacking columns, so a tall rail never stretches the rows of
   the reading column. Module DOM order stays featured > facts > stream > rail >
   author > older. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px;
 align-items:start;padding-top:var(--s6);padding-bottom:var(--s7)}
.col-main{grid-column:1;grid-row:1;min-width:0}
.col-side{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:var(--s5)}
.older{grid-column:1/-1;grid-row:2}
.layout--inner>.col-main{grid-column:1;grid-row:1}
.layout--inner>.col-side{grid-column:2;grid-row:1}

.kicker,.recipecard__kicker{margin:0 0 var(--s2);font:12px/1.2 var(--sans);
 text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.section__h{margin:0 0 var(--s4);font:400 22px/1.3 var(--serif);
 padding-bottom:var(--s2);border-bottom:2px solid var(--rule)}

/* ---- featured ---- */
.featured{background:var(--card);border:1px solid var(--rule);padding:var(--s5);margin-bottom:var(--s5)}
.featured__fig{display:block;margin:0 0 var(--s4);border:1px solid var(--rule)}
.featured__fig--card{border:0;padding:0}
.featured__title{margin:0;font:400 40px/1.14 var(--serif)}
.featured__title a{color:var(--ink);text-decoration:none}
.featured__title a:hover{color:var(--link)}
.featured__lede{margin:var(--s3) 0 0;max-width:66ch}
.meta{margin:var(--s2) 0 0;font:12px/1.6 var(--sans);color:var(--muted);
 text-transform:uppercase;letter-spacing:.07em}
.meta a{color:var(--muted)}
.meta__sep{margin:0 var(--s2)}
.entry__more{margin:var(--s3) 0 0;font:12px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em}

/* ---- facts strip ---- */
.facts{position:relative;background:var(--card);border:1px solid var(--rule);
 padding:var(--s4) var(--s5);margin-bottom:var(--s5);
 clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px)}
.facts__notch{position:absolute;left:0;top:0;width:18px;height:18px;
 background:linear-gradient(45deg,transparent 49%,var(--coral) 50%)}
.facts__h{margin:0 0 var(--s3);font:12px/1.2 var(--sans);text-transform:uppercase;
 letter-spacing:.1em;color:var(--muted)}
.facts__grid{display:flex;flex-wrap:wrap;gap:var(--s5);margin:0}
.fact{min-width:110px}
.fact dt{font:11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fact dd{margin:2px 0 0;font:400 17px/1.3 var(--serif)}
.facts__note{margin:var(--s3) 0 0;font:11px/1.5 var(--sans);color:var(--muted)}

/* ---- stream ---- */
.entry{background:var(--card);border:1px solid var(--rule);padding:var(--s5);margin-bottom:var(--s5)}
.entry__title{margin:0;font:400 25px/1.25 var(--serif)}
.entry__title a{color:var(--ink);text-decoration:none}
.entry__title a:hover{color:var(--link)}
.entry__excerpt{margin:var(--s3) 0 0;max-width:68ch}
.entry__fig{display:block;border:1px solid var(--rule)}
.entry--above .entry__fig{margin:0 0 var(--s4)}
.entry--above .entry__fig img{width:100%;height:280px;object-fit:cover}
.entry--left{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s5);align-items:start}
.entry--left .entry__fig img{width:100%;height:180px;object-fit:cover}
.entry__tags{margin:var(--s3) 0 0;font:11px/1.9 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.entry__tags a{display:inline-block;margin-right:var(--s2);color:var(--muted);
 border-bottom:1px solid var(--rule);text-decoration:none}

/* ---- rail ---- */
.rail{display:flex;flex-direction:column;gap:var(--s5)}
.rail__box{background:var(--card);border:1px solid var(--rule);padding:var(--s4)}
.rail__h{margin:0 0 var(--s3);font:12px/1.2 var(--sans);text-transform:uppercase;
 letter-spacing:.1em;color:var(--muted);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.rail__list{list-style:none;margin:0;padding:0}
.rail__list li{display:flex;justify-content:space-between;gap:var(--s3);
 padding:var(--s2) 0;border-bottom:1px dotted var(--rule);font:15px/1.4 var(--serif)}
.rail__list li:last-child{border-bottom:0}
.rail__list a{text-decoration:none}
.rail__list a:hover{text-decoration:underline}
.rail__list .n{font:11px/1.6 var(--sans);color:var(--muted)}
.rail__foot{margin:var(--s3) 0 0;font:12px/1.4 var(--sans)}
.rail__list--recipes li{display:block}
.rail__recipe a{display:block;font:400 15px/1.4 var(--serif)}
.rail__recipe time{display:block;margin-top:2px;font:11px/1.5 var(--sans);color:var(--muted);
 text-transform:uppercase;letter-spacing:.06em}

/* ---- author box ---- */
.authorbox{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--coral);padding:var(--s4)}
.authorbox__h{margin:0 0 var(--s3);font:400 19px/1.3 var(--serif)}
.authorbox__lede{margin:0;font-size:15px}
.authorbox__meta{margin:var(--s3) 0 0;font:11px/1.6 var(--sans);color:var(--muted);
 text-transform:uppercase;letter-spacing:.06em}
.authorbox__links{margin:var(--s3) 0 0;font:12px/1.9 var(--sans)}
.authorbox__links a{display:block}

/* ---- index rows / older ---- */
.older{margin-top:var(--s6);border-top:2px solid var(--rule);padding-top:var(--s5)}
.indexlist{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.indexrow{break-inside:avoid;display:flex;justify-content:space-between;align-items:baseline;
 gap:var(--s4);padding:var(--s2) 0;border-bottom:1px dotted var(--rule)}
.indexrow__t{text-decoration:none;font:400 16px/1.4 var(--serif)}
.indexrow__t:hover{text-decoration:underline}
.indexrow__d{flex:0 0 auto;font:11px/1.6 var(--sans);color:var(--muted);
 text-transform:uppercase;letter-spacing:.06em}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s5);
 padding-top:var(--s4);border-top:1px solid var(--rule);
 font:12px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em}
.pager__cur{color:var(--muted)}
.pager a{min-height:44px;display:inline-flex;align-items:center}

/* ---- recipe card (distinctive device) ---- */
.recipecard{position:relative;display:flex;background:var(--card);border:1px solid var(--rule);
 margin:var(--s5) 0;clip-path:polygon(20px 0,100% 0,100% 100%,0 100%,0 20px)}
.recipecard__edge{flex:0 0 10px}
.leafrule--v{height:auto;width:10px;
 background:repeating-linear-gradient(45deg,var(--herb) 0 6px,transparent 6px 12px)}
.recipecard__body{flex:1 1 auto;min-width:0;padding:var(--s5)}
.recipecard__h{margin:var(--s4) 0 var(--s3);font:400 19px/1.3 var(--sans);
 text-transform:uppercase;letter-spacing:.06em;color:var(--ink);
 padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.recipecard__body>.recipecard__h:first-of-type{margin-top:0}
.ings,.steps{margin:0;padding-left:var(--s5)}
.ings li,.steps li{padding:var(--s1) 0;line-height:1.6}
.ings{list-style:square}

/* ---- detail ---- */
.crumbs{margin:0 0 var(--s4);font:11px/1.6 var(--sans);text-transform:uppercase;
 letter-spacing:.07em;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs__sep{margin:0 var(--s2)}
.detail,.archive{background:var(--card);border:1px solid var(--rule);padding:var(--s6) var(--s6) var(--s7)}
.detail__title,.archive__title{margin:0;font:400 34px/1.2 var(--serif)}
.detail__fig{margin:var(--s5) 0;border:1px solid var(--rule)}
.detail__fig img{width:100%}
.detail__body{margin-top:var(--s5);max-width:66ch}
.detail__body p{margin:0 0 var(--s4)}
.detail__body h2{margin:var(--s6) 0 var(--s3);font:400 22px/1.3 var(--serif);
 padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.detail__body h3{margin:var(--s5) 0 var(--s3);font:400 19px/1.35 var(--serif)}
.detail__body ul,.detail__body ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.detail__body li{margin-bottom:var(--s1)}
.detail__body blockquote{margin:var(--s5) 0;padding:var(--s3) var(--s5);
 border-left:3px solid var(--coral);background:var(--canvas);font-style:italic}
.detail__body blockquote p:last-child{margin-bottom:0}
.detail__body figure{margin:var(--s5) 0}
.detail__body figure img{border:1px solid var(--rule)}
.detail__body figcaption{margin-top:var(--s2);font:12px/1.5 var(--sans);color:var(--muted)}
.detail__tags,.detail__back{margin:var(--s4) 0 0;font:12px/1.9 var(--sans);
 text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.detail__tags a{margin-right:var(--s2);color:var(--muted);border-bottom:1px solid var(--rule);
 text-decoration:none;display:inline-block}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s6);
 padding-top:var(--s4);border-top:2px solid var(--rule)}
.pn{text-decoration:none;font:400 16px/1.4 var(--serif);color:var(--ink)}
.pn:hover{color:var(--link)}
.pn span{display:block;font:11px/1.6 var(--sans);text-transform:uppercase;
 letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.pn--next{text-align:right}
.related{margin-top:var(--s6)}
.archive__count{margin:var(--s3) 0 var(--s5);font:12px/1.6 var(--sans);color:var(--muted);
 text-transform:uppercase;letter-spacing:.07em}
.archive .stream{margin-top:var(--s5)}
.yearblock{margin-bottom:var(--s6)}
.yearblock h2{margin:0 0 var(--s3);font:400 25px/1.2 var(--serif);
 padding-bottom:var(--s2);border-bottom:2px solid var(--rule)}
.monthlist{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.monthlist li{break-inside:avoid;display:flex;justify-content:space-between;gap:var(--s4);
 padding:var(--s2) 0;border-bottom:1px dotted var(--rule);font:16px/1.5 var(--serif)}
.monthlist .n{font:11px/1.7 var(--sans);color:var(--muted)}
.taglist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.taglist a{font:13px/1.4 var(--sans);text-decoration:none;border:1px solid var(--rule);
 padding:6px var(--s3);background:var(--canvas);display:inline-block}

/* ---- footer ---- */
.colophon{background:var(--card);border-top:1px solid var(--rule);margin-top:var(--s7)}
.colophon__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;
 padding-top:var(--s6);padding-bottom:var(--s6)}
.colophon__h{margin:0 0 var(--s3);font:12px/1.2 var(--sans);text-transform:uppercase;
 letter-spacing:.1em;color:var(--muted);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.colophon__list{list-style:none;margin:0 0 var(--s3);padding:0;font:14px/1.9 var(--serif)}
.colophon__list a{text-decoration:none}
.colophon__list a:hover{text-decoration:underline}
.colophon__col--note p{margin:0 0 var(--s2);font-size:15px}
.colophon__small{font:11px/1.7 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---- 404 ---- */
.notfound{background:var(--card);border:1px solid var(--rule);padding:var(--s7) var(--s6)}
.notfound h1{margin:0 0 var(--s4);font:400 34px/1.2 var(--serif)}

/* ================= responsive ================= */
@media (max-width:980px){
 /* the wrappers dissolve so the rail can be lifted above the stream by order */
 .layout{display:flex;flex-direction:column;gap:var(--s5)}
 .col-main,.col-side{display:contents}
 .featured{order:1;margin-bottom:0}
 .facts{order:2;margin-bottom:0}
 .rail{order:3;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s5)}
 .rail__box{flex:1 1 260px}
 .stream{order:4}
 .authorbox{order:5}
 .older{order:6;margin-top:0}
 .colophon__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
}
@media (max-width:760px){
 .shell{padding:0 var(--s4)}
 .masthead__in{flex-direction:column;text-align:center;gap:var(--s3)}
 .masthead__mark{width:56px}
 .mark__img{height:66px}
 .masthead__name{font-size:30px}
 .masthead__by{text-align:center}
 .tabstrip__in{gap:0}
 .tab{flex:1 1 auto;justify-content:center;border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:-1px 0 0 -1px}
 .featured,.entry,.detail,.archive,.notfound{padding:var(--s5) var(--s4)}
 .featured__title{font-size:28px}
 .detail__title,.archive__title{font-size:27px}
 .entry__title{font-size:22px}
 .entry--left{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
 .entry--left .entry__fig img,.entry--above .entry__fig img{height:auto;max-height:none}
 .facts__grid{gap:var(--s4)}
 .fact{flex:1 1 44%}
 .indexlist,.monthlist{columns:1}
 .prevnext{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
 .pn--next{text-align:left}
 .colophon__in{grid-template-columns:minmax(0,1fr)}
 .recipecard__body{padding:var(--s4)}
 .detail__body{max-width:none}
}
@media (max-width:430px){
 .shell{padding:0 var(--s3)}
 .rail{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
 *{transition-duration:0s!important;animation-duration:0s!important}
}
