/* =====================================================================
   CrochetOasis editorial layer
   Author profiles, About page, bylines and the article author panel.
   ===================================================================== */

/* ---------- portraits ---------- */
.co-portrait{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;
  background:var(--co-sand);border:1px solid var(--co-line);border-radius:var(--co-r-md)}
.co-portrait__svg,.co-portrait__img{display:block;width:100%;height:100%;object-fit:cover}
.co-portrait__img{border-radius:0}

/* ---------- author cards ---------- */
.co-author-card{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-r-md);
  overflow:hidden;transition:transform var(--co-t) var(--co-ease),box-shadow var(--co-t) var(--co-ease),border-color var(--co-t) var(--co-ease)}
.co-author-card:hover{transform:translateY(-3px);box-shadow:var(--co-e2);border-color:var(--co-line-strong)}
.co-author-card__media{position:relative;border-bottom:1px solid var(--co-line);background:var(--co-sand)}
.co-author-card__media .co-portrait{aspect-ratio:4/3;border:0;border-radius:0}
.co-author-card__body{display:flex;flex-direction:column;gap:var(--co-s3);padding:var(--co-s6);min-width:0}
.co-author-card__role{margin:0;font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--co-cat,var(--co-rose))}
.co-author-card__name{margin:0;font-size:var(--co-fs-2xl);line-height:1.15}
.co-author-card__name a{color:inherit;text-decoration:none}
.co-author-card__name a:hover{color:var(--co-cat,var(--co-rose));text-decoration:underline;text-underline-offset:.15em}
.co-author-card__bio{margin:0;font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-author-card__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--co-s3);
  align-items:center;justify-content:space-between;padding-top:var(--co-s4);border-top:1px solid var(--co-line)}
.co-author-card__more{display:inline-flex;align-items:center;gap:var(--co-s2);
  font-size:var(--co-fs-xs);font-weight:700;color:var(--co-cat,var(--co-rose))}
.co-author-card__more .co-ic{transition:transform var(--co-t-fast) var(--co-ease)}
.co-author-card:hover .co-author-card__more .co-ic{transform:translateX(3px)}

/* Two wide cards on About: portrait beside the copy from 640 px up. */
@media (min-width:640px){
  .co-about-desks__card{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch}
  .co-about-desks__card .co-author-card__media{border-bottom:0;border-right:1px solid var(--co-line)}
  .co-about-desks__card .co-author-card__media .co-portrait{height:100%;aspect-ratio:auto;min-height:100%}
  .co-about-desks__card .co-author-card__body{padding:var(--co-s6) var(--co-s7)}
}

/* ---------- article byline ---------- */
.co-byline{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--co-s2);min-width:0}
.co-byline__prefix{font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--co-ink-3)}
.co-byline__link{font-weight:700;color:var(--co-ink);text-decoration:none}
.co-byline__link:hover{color:var(--co-link);text-decoration:underline;text-underline-offset:.18em}
.co-byline__role{font-size:var(--co-fs-xs);color:var(--co-ink-3)}
.co-byline__role::before{content:"·";margin-right:var(--co-s2);color:var(--co-line-strong)}

/* ---------- author panel at the foot of an article ---------- */
.co-author-box{display:grid;gap:var(--co-s5);grid-template-columns:96px minmax(0,1fr);
  align-items:start;margin-top:var(--co-s8);padding:var(--co-s6);
  background:var(--co-sand);border:1px solid var(--co-line);
  border-top:3px solid var(--co-cat,var(--co-rose));border-radius:var(--co-r-md)}
.co-author-box__media .co-portrait{aspect-ratio:4/5}
.co-author-box__body{min-width:0}
.co-author-box__body .co-kicker{margin:0 0 var(--co-s2)}
.co-author-box__name{margin:0 0 var(--co-s1);font-size:var(--co-fs-xl);line-height:1.2}
.co-author-box__name a{color:inherit;text-decoration:none}
.co-author-box__name a:hover{color:var(--co-cat,var(--co-rose));text-decoration:underline;text-underline-offset:.15em}
.co-author-box__role{margin:0 0 var(--co-s3);font-size:var(--co-fs-xs);font-weight:700;color:var(--co-cat,var(--co-rose))}
.co-author-box__bio{margin:0 0 var(--co-s4);font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-author-box__actions{display:flex;flex-wrap:wrap;gap:var(--co-s3) var(--co-s4);align-items:center;margin:0}
.co-author-box__about{font-size:var(--co-fs-xs);font-weight:700;color:var(--co-ink-2);text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:var(--co-line-strong)}
.co-author-box__about:hover{color:var(--co-link)}
@media (min-width:560px){.co-author-box{grid-template-columns:128px minmax(0,1fr);padding:var(--co-s7)}}

/* ---------- editorial disclosure ---------- */
.co-ed-disclosure{margin:0;padding:var(--co-s4) var(--co-s5);max-width:78ch;
  background:var(--co-surface);border:1px dashed var(--co-line-strong);
  border-radius:var(--co-r-sm);font-size:var(--co-fs-xs);line-height:1.6;color:var(--co-ink-2)}
.co-ed-disclosure strong{color:var(--co-ink)}
.co-about-close .co-ed-disclosure{margin-top:var(--co-s7)}

/* ---------- About page ---------- */
.co-about-hero__split{align-items:center}
.co-about-hero__copy h1{margin:var(--co-s2) 0 0;max-width:16ch}
.co-about-hero__photo{margin:0}
.co-about-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;border-radius:var(--co-r-md);border:1px solid var(--co-line);box-shadow:var(--co-e3)}
.co-about-hero__photo .co-photo__cap{margin:var(--co-s3) 0 0;font-size:var(--co-fs-2xs);
  line-height:1.5;color:var(--co-ink-3)}
.co-about-hero__photo .co-photo__cap a{color:inherit;text-decoration-color:var(--co-line-strong)}
.co-about-hero__note{margin:var(--co-s5) 0 0;font-size:var(--co-fs-2xs);color:var(--co-ink-3);letter-spacing:.03em}
.co-about-hero__actions,.co-author-hero__actions{display:flex;flex-wrap:wrap;gap:var(--co-s3);
  align-items:center;margin:var(--co-s6) 0 0}
.co-about-hero__actions .co-btn,.co-author-hero__actions .co-btn{flex:0 1 auto}

/* What you will find: a quiet four-up strip under the hero. */
.co-about-benefits{background:var(--co-surface);border-top:1px solid var(--co-line);border-bottom:1px solid var(--co-line)}
.co-about-benefits__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 auto;padding-top:0;padding-bottom:0;list-style:none}
.co-about-benefits__item{display:flex;gap:var(--co-s3);align-items:flex-start;
  padding:var(--co-s5) var(--co-s4);border-top:1px solid var(--co-line)}
.co-about-benefits__item:nth-child(-n+2){border-top:0}
.co-about-benefits__icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--co-sand);color:var(--co-ink)}
.co-about-benefits__text{display:grid;gap:var(--co-s1);min-width:0}
.co-about-benefits__text strong{font-family:var(--co-font-display);font-size:var(--co-fs-base);
  font-weight:600;line-height:var(--co-lh-ui)}
.co-about-benefits__text small{font-size:var(--co-fs-xs);line-height:1.5;color:var(--co-ink-3)}
@media (max-width:479px){
  .co-about-benefits__item{display:grid;gap:var(--co-s2);padding:var(--co-s4) var(--co-s3)}
  .co-about-benefits__icon{width:36px;height:36px}
}

/* Mission: copy beside an overlapping collage. */
.co-about-mission__split{align-items:start}
@media (max-width:899px){.co-about-mission__split{grid-template-columns:minmax(0,1fr)}}
.co-about-mission__copy{min-width:0}
.co-about-mission__copy h2{margin-top:var(--co-s3);max-width:20ch}
.co-about-mission__aside{margin-top:var(--co-s5) !important;padding-left:var(--co-s4);
  border-left:3px solid var(--co-rose);font-family:var(--co-font-display);
  font-size:var(--co-fs-lg);line-height:1.45;color:var(--co-ink)}
.co-about-collage{display:grid;gap:var(--co-s4);align-content:start}
.co-about-collage__stack{position:relative;display:grid;
  grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);
  aspect-ratio:1/1.05;min-height:340px}
.co-about-collage__main,.co-about-collage__small{margin:0;overflow:hidden;
  border-radius:var(--co-r-md);box-shadow:var(--co-e2)}
.co-about-collage__main{grid-area:1/1/11/9;border:1px solid var(--co-line)}
.co-about-collage__small{grid-area:6/8/12/13;border:6px solid var(--co-paper);z-index:1}
.co-about-collage__img{display:block;width:100%;height:100%;object-fit:cover}
.co-about-collage__note{grid-area:9/2/12/8;z-index:2;position:relative;margin:0;
  align-self:end;display:grid;gap:var(--co-s1);padding:var(--co-s4) var(--co-s5);
  padding-right:var(--co-s8);background:var(--co-surface);border:1px solid var(--co-line);
  border-radius:var(--co-r-sm);box-shadow:var(--co-e2)}
.co-about-collage__note span{font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--co-ink-3)}
.co-about-collage__note strong{font-family:var(--co-font-display);font-size:var(--co-fs-2xl);
  font-weight:600;line-height:1.1;color:var(--co-ink)}
.co-about-collage__note .co-ic{position:absolute;right:var(--co-s4);bottom:var(--co-s4);color:var(--co-rose)}
.co-about-collage__credit{margin:0;font-size:var(--co-fs-2xs);line-height:1.5;color:var(--co-ink-3)}
.co-about-collage__credit a{color:inherit;text-decoration-color:var(--co-line-strong)}
.co-about-collage__credit a:hover{color:var(--co-link)}

/* Four hub cards. */
.co-about-hubs__grid{display:grid;gap:var(--co-s5);grid-template-columns:minmax(0,1fr)}
.co-about-hub{display:flex;flex-direction:column;min-width:0;background:var(--co-surface);
  border:1px solid var(--co-line);border-radius:var(--co-r-md);overflow:hidden;
  transition:transform var(--co-t) var(--co-ease),box-shadow var(--co-t) var(--co-ease),border-color var(--co-t) var(--co-ease)}
.co-about-hub:hover{transform:translateY(-3px);box-shadow:var(--co-e2);border-color:var(--co-line-strong)}
.co-about-hub__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--co-sand);
  border-bottom:1px solid var(--co-line)}
.co-about-hub__media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--co-t) var(--co-ease)}
.co-about-hub:hover .co-about-hub__media img{transform:scale(1.035)}
.co-about-hub__body{display:flex;flex-direction:column;gap:var(--co-s2);padding:var(--co-s5);flex:1}
.co-about-hub__body h3{margin:0;font-size:var(--co-fs-xl);line-height:1.25}
.co-about-hub__body h3 a{color:inherit;text-decoration:none}
.co-about-hub__body h3 a:hover{color:var(--co-cat,var(--co-rose))}
.co-about-hub__body p{margin:0;flex:1;font-size:var(--co-fs-xs);line-height:1.6;color:var(--co-ink-2)}
.co-about-hub__cta{display:inline-flex;align-items:center;gap:var(--co-s2);margin-top:var(--co-s2);
  font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--co-cat,var(--co-rose));text-decoration:none}
.co-about-hub__cta:hover{text-decoration:underline;text-underline-offset:.18em}
.co-about-hub__cta .co-ic{transition:transform var(--co-t-fast) var(--co-ease)}
.co-about-hub:hover .co-about-hub__cta .co-ic{transform:translateX(3px)}

/* Editorial standards: four icon-led cards. */
.co-about-values__grid{display:grid;gap:var(--co-s5);grid-template-columns:minmax(0,1fr)}
.co-about-values__item{min-width:0;padding-top:var(--co-s5);border-top:1px solid var(--co-line)}
.co-about-values__item .co-method__art{display:grid;place-items:center;width:56px;height:56px;
  margin:0 0 var(--co-s4);border-radius:50%;background:var(--co-sand);color:var(--co-ink)}
.co-about-values__item .co-method__art svg{width:26px;height:26px;max-height:none}
.co-about-values__item h3{margin:0 0 var(--co-s2);font-size:var(--co-fs-lg);line-height:1.3}
.co-about-values__item p{margin:0;font-size:var(--co-fs-sm);line-height:1.65;color:var(--co-ink-2)}

/* Author grid on About. */
.co-about-team__intro{max-width:72ch;margin:0 0 var(--co-s7);color:var(--co-ink-2)}
.co-about-team__grid{grid-template-columns:minmax(0,1fr)}
.co-about-team__card .co-author-card__body{gap:var(--co-s2);padding:var(--co-s5)}
.co-about-team__card .co-author-card__name{font-size:var(--co-fs-xl)}
.co-about-team__card .co-author-card__bio{font-size:var(--co-fs-xs);line-height:1.6}
.co-about-team__card .co-author-card__foot{padding-top:var(--co-s3)}
.co-about-team__note{max-width:72ch;margin:var(--co-s6) 0 0}
.co-about-team__note a{color:inherit;text-decoration-color:var(--co-line-strong)}
.co-about-team__note a:hover{color:var(--co-link)}

/* Closing invitation. */
.co-about-journey{position:relative;overflow:hidden;padding:clamp(var(--co-s7),5vw,var(--co-s9));
  background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-r-md);
  box-shadow:var(--co-e2);text-align:center}
.co-about-journey::before{content:"";position:absolute;inset:0;background-image:var(--co-tex-yarn);
  opacity:.35;pointer-events:none}
.co-about-journey>*{position:relative;z-index:1}
.co-about-close h2{margin:var(--co-s3) auto 0;max-width:22ch}
.co-about-close .co-lead{margin-left:auto;margin-right:auto;max-width:62ch}
.co-about-close__actions{display:flex;flex-wrap:wrap;gap:var(--co-s3);align-items:center;
  justify-content:center;margin:var(--co-s6) 0 0}
.co-about-close__links{display:flex;flex-wrap:wrap;gap:var(--co-s3) var(--co-s6);justify-content:center;
  margin:var(--co-s6) 0 0;font-size:var(--co-fs-xs)}
.co-about-close__links a{color:var(--co-ink-2);text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:var(--co-line-strong)}
.co-about-close__links a:hover{color:var(--co-link)}
#co-disclosure{max-width:78ch;margin:var(--co-s7) auto 0}
#co-team,#co-author-articles{scroll-margin-top:90px}

/* Responsive grids for the About sections. */
@media (min-width:620px){
  .co-about-hubs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-about-values__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-about-team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .co-about-benefits__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .co-about-benefits__item{border-top:0;border-left:1px solid var(--co-line)}
  .co-about-benefits__item:first-child{border-left:0}
  .co-about-values__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1050px){
  .co-about-hubs__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .co-about-team__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}




/* ---------- author archives ---------- */
.co-author-hero__role{margin:var(--co-s2) 0 0;font-size:var(--co-fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--co-cat,var(--co-rose))}
.co-author-hero .co-kicker--cat{color:var(--co-cat,var(--co-rose))}
.co-author-hero__media{display:grid;gap:var(--co-s3);align-content:start;justify-items:stretch}
.co-author-hero__media .co-portrait{aspect-ratio:4/5;background:var(--co-paper);
  border-color:var(--co-line-strong);box-shadow:var(--co-e2)}
.co-author-hero__media .co-meta{margin:0;font-size:var(--co-fs-2xs);color:var(--co-ink-3);
  line-height:1.5;text-align:center}

.co-author-bio{align-items:start}
.co-author-bio .co-prose h2{margin-top:var(--co-s3)}
.co-author-bio__aside{align-self:start;padding:var(--co-s6);
  background:var(--co-surface);border:1px solid var(--co-line);
  border-top:3px solid var(--co-cat,var(--co-rose));border-radius:var(--co-r-md)}
.co-author-bio__aside h3{margin:0 0 var(--co-s4);font-size:var(--co-fs-base);
  font-family:var(--co-font-body);font-weight:700;letter-spacing:.02em}
.co-author-bio__list{list-style:none;margin:0 0 var(--co-s5);padding:0;
  display:grid;gap:var(--co-s3);font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-author-bio__list li{display:flex;gap:var(--co-s3);align-items:flex-start}
.co-author-bio__list li::before{content:"\2192";flex:0 0 auto;
  color:var(--co-cat,var(--co-rose));line-height:1.5}
.co-author-bio__aside .co-meta{margin:0;padding-top:var(--co-s4);
  border-top:1px solid var(--co-line);display:block;color:var(--co-ink-3)}
.co-author-page .co-empty h2{margin-top:var(--co-s3)}
.co-author-page .co-meta{font-size:var(--co-fs-xs);color:var(--co-ink-3)}

/* ---------- author archive profile ---------- */
@media (min-width:900px){
  /* Portrait left, profile copy right. */
  .co-author-hero__split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}
.co-author-hero__copy h1{margin:var(--co-s2) 0 0}
.co-author-hero__copy .co-lead{margin:var(--co-s4) 0 0}
.co-author-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;
  margin:var(--co-s6) 0 0;padding:var(--co-s5) 0;
  border-top:1px solid var(--co-line);border-bottom:1px solid var(--co-line)}
.co-author-stats li{min-width:0;padding:0 var(--co-s4);border-left:1px solid var(--co-line)}
.co-author-stats li:first-child{padding-left:0;border-left:0}
.co-author-stats b{display:block;font-family:var(--co-font-display);font-weight:600;
  font-size:var(--co-fs-lg);line-height:1.25;color:var(--co-ink);overflow-wrap:anywhere}
.co-author-stats span{display:block;margin-top:var(--co-s2);font-size:var(--co-fs-2xs);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--co-ink-3)}
.co-author-bio__split{align-items:start}

/* Tab-style navigation: latest is current, the hub and full index are real links. */
.co-author-tabs{display:flex;flex-wrap:wrap;gap:var(--co-s1);margin:var(--co-s5) 0 var(--co-s6);
  border-bottom:1px solid var(--co-line)}
.co-author-tabs__tab{display:inline-block;margin-bottom:-1px;padding:var(--co-s3) var(--co-s4);
  border-bottom:2px solid transparent;font-size:var(--co-fs-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--co-ink-3);text-decoration:none}
a.co-author-tabs__tab:hover{color:var(--co-ink)}
.co-author-tabs__tab.is-active{color:var(--co-cat,var(--co-rose));border-color:var(--co-cat,var(--co-rose))}

/* Real-content promo tiles keep a one- or two-guide grid from looking empty. */
.co-author-articles__grid{align-items:stretch}
.co-author-promo{display:flex;flex-direction:column;justify-content:center;gap:var(--co-s3);
  min-width:0;padding:var(--co-s6);background:var(--co-sand);
  border:1px dashed var(--co-line-strong);border-top:3px solid var(--co-cat,var(--co-rose));
  border-radius:var(--co-r-md)}
.co-author-promo__mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;border:1px solid var(--co-line);border-radius:50%;
  background:var(--co-surface);color:var(--co-cat,var(--co-rose))}
.co-author-promo .co-kicker{flex:0 0 auto;margin:0}
.co-author-promo h3{margin:0;font-size:var(--co-fs-xl);line-height:1.25}
.co-author-promo p{flex:0 0 auto;margin:0;font-size:var(--co-fs-sm);line-height:1.65;color:var(--co-ink-2)}
.co-author-promo__cta{display:inline-flex;align-items:center;gap:var(--co-s2);margin-top:var(--co-s2);
  font-size:var(--co-fs-xs);font-weight:700;color:var(--co-cat,var(--co-rose));text-decoration:none}
.co-author-promo__cta:hover{text-decoration:underline;text-underline-offset:.18em}
.co-author-promo__cta .co-ic{transition:transform var(--co-t-fast) var(--co-ease)}
.co-author-promo__cta:hover .co-ic{transform:translateX(3px)}
.co-author-page__back{margin:0 0 var(--co-s5)}

/* ---------- small screens ---------- */
@media (max-width:559px){
  .co-author-box{grid-template-columns:80px minmax(0,1fr);gap:var(--co-s4);padding:var(--co-s5)}
  .co-author-card__body{padding:var(--co-s5)}
  .co-about-hero__photo img{aspect-ratio:4/3}
  .co-about-collage__stack{min-height:300px}
  .co-about-collage__note{padding:var(--co-s3) var(--co-s4);padding-right:var(--co-s8)}
  .co-about-benefits__item{padding:var(--co-s4) var(--co-s2)}
  .co-author-stats{grid-template-columns:minmax(0,1fr);gap:var(--co-s3);padding:var(--co-s5) 0}
  .co-author-stats li{padding:0;border-left:0}
  .co-author-stats li+li{padding-top:var(--co-s3);border-top:1px solid var(--co-line)}
  .co-author-tabs{gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .co-author-tabs::-webkit-scrollbar{display:none}
  .co-author-tabs__tab{padding:var(--co-s3) var(--co-s2);font-size:var(--co-fs-2xs);
    letter-spacing:.04em;white-space:nowrap}
}

/* Very narrow phones: let the author bio use the full card width so the
   profile button label and the team link each stay on one line. */
@media (max-width:479px){
  .co-author-box{grid-template-columns:minmax(0,1fr)}
  .co-author-box__media{width:96px}
  .co-author-box__actions .co-btn{padding-inline:var(--co-s4)}
}

/* ---------- print ---------- */
@media print{
  .co-about-hero__actions,.co-author-hero__actions,.co-about-close__actions,
  .co-author-card__foot,.co-ed-disclosure,.co-author-tabs,.co-author-stats,
  .co-author-promo,.co-about-close__links{display:none}
  .co-author-box,.co-author-bio__aside{border-color:#999;background:none}
}
