/* =====================================================================
   CrochetOasis components + layout primitives
   ===================================================================== */
/* ---------- layout primitives ---------- */
.co-wrap{width:100%;max-width:var(--co-w);margin-inline:auto;padding-inline:var(--co-gutter)}
.co-wrap--wide{max-width:var(--co-w-wide)}
.co-wrap--narrow{max-width:var(--co-w-narrow)}
.co-band{padding-block:var(--co-band)}
.co-band--slim{padding-block:var(--co-s7)}
.co-band--sand{background:var(--co-sand)}
.co-band--surface{background:var(--co-surface)}
.co-band--texture{background-image:var(--co-tex-yarn);background-size:24px 16px;background-color:var(--co-sand)}
.co-band--ink{background:var(--co-ink);color:#EFE7DC}
.co-band--ink h1,.co-band--ink h2,.co-band--ink h3{color:#fff}
.co-band--ink .co-kicker{color:#D8C6B0}
.co-band--ink a{color:#F3D9C4}
.co-flow>*+*{margin-top:var(--co-s4)}
.co-split{display:grid;gap:clamp(var(--co-s6),3vw,var(--co-s9));align-items:center}
@media (min-width:900px){.co-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .co-split--rev>*:first-child{order:2}}
.co-grid{display:grid;gap:clamp(var(--co-s4),2vw,var(--co-s6))}
.co-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.co-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.co-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.co-shead{display:flex;flex-wrap:wrap;gap:var(--co-s3) var(--co-s6);align-items:end;justify-content:space-between;margin-bottom:var(--co-s7)}
.co-shead h2,.co-shead h1{margin-bottom:var(--co-s2)}
.co-shead__aside{font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-shead__aside .co-arrow::after{margin-left:.4em}
.co-shead+.co-rule--stitch{margin-top:calc(-1 * var(--co-s6))}

/* ---------- buttons ---------- */
.co-btn{display:inline-flex;align-items:center;gap:var(--co-s2);justify-content:center;
  min-height:44px;padding:var(--co-s3) var(--co-s6);border:1px solid var(--co-ink);
  background:var(--co-ink);color:#fff;border-radius:var(--co-r-sm);
  font-family:var(--co-font-body);font-size:var(--co-fs-sm);font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:background var(--co-t-fast) var(--co-ease),color var(--co-t-fast) var(--co-ease),transform var(--co-t-fast) var(--co-ease)}
.co-btn:hover{background:#3A342D;color:#fff;transform:translateY(-1px)}
.co-btn:active{transform:translateY(0)}
.co-btn--outline{background:transparent;color:var(--co-ink)}
.co-btn--outline:hover{background:rgba(35,32,28,.06);color:var(--co-ink)}
.co-btn--cat{background:var(--co-cat,var(--co-rose));border-color:var(--co-cat,var(--co-rose))}
.co-btn--quiet{border-color:transparent;background:transparent;color:var(--co-ink);min-height:0;padding:var(--co-s2) 0}
.co-btn--quiet:hover{background:transparent;color:var(--co-link);text-decoration:underline;text-underline-offset:.2em}
.co-btn--sm{min-height:36px;padding:var(--co-s2) var(--co-s4);font-size:var(--co-fs-xs)}
.co-arrow::after{content:"\2192";font-family:var(--co-font-body);transition:transform var(--co-t-fast) var(--co-ease)}
.co-arrow:hover::after{transform:translateX(3px)}

/* ---------- chips, difficulty, status ---------- */
.co-chip{display:inline-flex;align-items:center;gap:var(--co-s2);padding:.3em .75em;
  border:1px solid var(--co-line-strong);border-radius:var(--co-r-pill);
  font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--co-ink-2);background:var(--co-surface)}
.co-chip--cat{border-color:transparent;background:color-mix(in srgb,var(--co-cat,var(--co-rose)) 12%,#fff);color:var(--co-cat,var(--co-rose))}
.co-chip--ink{border-color:transparent;background:var(--co-ink);color:#fff}
.co-diff{display:inline-flex;align-items:center;gap:var(--co-s2);font-size:var(--co-fs-2xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--co-ink-2)}
.co-diff__dots{display:inline-flex;gap:2px}
.co-diff__dots i{width:7px;height:7px;border-radius:50%;background:var(--co-line-strong)}
.co-diff--beginner .co-diff__dots i:nth-child(1),
.co-diff--intermediate .co-diff__dots i:nth-child(-n+2),
.co-diff--advanced .co-diff__dots i{background:var(--co-cat,var(--co-rose))}
.co-status{display:inline-flex;align-items:center;gap:var(--co-s2);font-size:var(--co-fs-2xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;border-radius:var(--co-r-pill)}
.co-status--verified{background:color-mix(in srgb,var(--co-sage) 12%,#fff);color:var(--co-sage);border:1px solid color-mix(in srgb,var(--co-sage) 30%,#fff)}
.co-status--unverified{background:color-mix(in srgb,var(--co-ochre) 12%,#fff);color:var(--co-ochre);border:1px dashed color-mix(in srgb,var(--co-ochre) 45%,#fff)}
.co-status__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.co-terms{display:flex;flex-wrap:wrap;gap:var(--co-s2)}
.co-terms__pill{display:inline-flex;gap:.4em;align-items:baseline;padding:.3em .7em;border-radius:var(--co-r-pill);
  background:var(--co-sand);border:1px solid var(--co-line);font-size:var(--co-fs-xs)}
.co-terms__pill b{font-family:var(--co-font-body);font-weight:700;letter-spacing:.04em;font-size:var(--co-fs-2xs);text-transform:uppercase;color:var(--co-ink-3)}

/* ---------- cards ---------- */
.co-card{position:relative;display:flex;flex-direction:column;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-card:hover{transform:translateY(-3px);box-shadow:var(--co-e2);border-color:var(--co-line-strong)}
.co-card__swatch{position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background-color:var(--co-sand);background-image:var(--co-tex-granny);background-size:40px 40px;
  border-bottom:1px solid var(--co-line)}
.co-card__swatch svg{width:min(46%,120px);height:auto;color:var(--co-cat,var(--co-rose))}
.co-card__swatch--square{aspect-ratio:1/1}
.co-card__body{display:flex;flex-direction:column;gap:var(--co-s3);padding:var(--co-s6)}
.co-card__title{margin:0;font-size:var(--co-fs-xl);line-height:1.2}
.co-card__excerpt{margin:0;font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-card__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--co-s3);align-items:center;
  padding-top:var(--co-s4);border-top:1px solid var(--co-line)}
.co-card__link{color:inherit;text-decoration:none}
.co-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.co-card:hover .co-card__link{color:var(--co-cat,var(--co-rose))}
.co-card--row{flex-direction:row;align-items:stretch}
.co-card--row .co-card__swatch{aspect-ratio:auto;width:88px;flex:0 0 88px;border-bottom:0;border-right:1px solid var(--co-line)}
.co-card--row .co-card__body{padding:var(--co-s5) var(--co-s6)}
.co-card--row .co-card__foot{border-top:0;padding-top:0}
.co-card--flag{border-color:var(--co-line-strong);border-style:dashed;background:transparent}
.co-card--flag .co-card__swatch{background-image:none;background-color:transparent}

/* ---------- photography (licensed files, always credited) ---------- */
.co-photo{margin:0;display:flex;flex-direction:column}
.co-photo img{display:block;width:100%;height:auto;border-radius:var(--co-r-md);
  border:1px solid var(--co-line);background:var(--co-sand);object-fit:cover}
.co-photo__cap{display:flex;flex-direction:column;gap:var(--co-s2);margin-top:var(--co-s3)}
.co-photo__text{font-size:var(--co-fs-xs);color:var(--co-ink-2);line-height:1.5}
.co-photo__credit{font-size:var(--co-fs-2xs);color:var(--co-ink-3);line-height:1.45}
.co-photo__credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.co-photo__credit a:hover{color:var(--co-link)}
.co-photo--flat img{border:0;border-radius:0;background:none}
.co-photo--cover img{aspect-ratio:4/3;height:100%}
.co-photo--square img{aspect-ratio:1/1}
.co-photo--tall img{aspect-ratio:3/4}
.co-photo--hero img{border-radius:var(--co-r-md);box-shadow:var(--co-e3)}

.co-photogrid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(var(--co-s5),2.5vw,var(--co-s7))}
.co-photogrid>li{margin:0;display:flex}
.co-photogrid>li>.co-photo{width:100%}
@media (min-width:640px){
  .co-photogrid--2,.co-photogrid--3,.co-photogrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .co-photogrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co-photogrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* tiles in one band share a shape, so their captions line up across the row */
.co-photogrid img{aspect-ratio:4/3}
.co-photogrid .co-photo--square img{aspect-ratio:1/1}
.co-photogrid .co-photo--tall img{aspect-ratio:3/4}
.co-photogrid .co-photo--flat img{aspect-ratio:auto}

/* card media: replaces the SVG swatch where a real photograph carries the idea */
.co-card__media{position:relative;display:block;overflow:hidden;background:var(--co-sand);border-bottom:1px solid var(--co-line)}
.co-card__media img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform var(--co-t) var(--co-ease)}
.co-card:hover .co-card__media img{transform:scale(1.03)}
.co-card__media--square img{aspect-ratio:1/1}
.co-card__media--tall img{aspect-ratio:4/5}
.co-card--row .co-card__media{width:96px;flex:0 0 96px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--co-line)}
.co-card--row .co-card__media img{aspect-ratio:1/1}

/* credits table (footer + credits page) */
.co-credits th[scope=row]{padding:var(--co-s2) var(--co-s4)}
.co-credits__cell a{display:flex;align-items:center;gap:var(--co-s4);color:var(--co-ink);text-decoration:none;min-width:220px}
.co-credits__cell a:hover .co-credits__title{color:var(--co-link)}
.co-credits__thumb{flex:0 0 72px;width:72px;height:56px;object-fit:cover;border-radius:var(--co-r-xs);
  border:1px solid var(--co-line);background:var(--co-sand)}
.co-credits__title{font-size:var(--co-fs-sm);font-weight:700;line-height:1.3}

/* article and page photographs: the lead picture sits between the facts and the prose */
.co-article__photo{margin:var(--co-s7) 0 0}
.co-article__photo img{border-radius:var(--co-r-md);box-shadow:var(--co-e2)}
.co-page__photo{margin:var(--co-s6) 0 var(--co-s7)}
.co-page__photo img{border-radius:var(--co-r-md);box-shadow:var(--co-e2)}

/* the footer credit table lives in a disclosure; the credits page shows it open */
.co-credits{margin:0}
.co-credits caption{text-align:left}
.co-credits__disclosure{margin:0;padding:var(--co-s4) var(--co-s5);border:1px solid var(--co-line);
  border-radius:var(--co-r-md);background:var(--co-surface)}
.co-credits__disclosure>summary{cursor:pointer;list-style:none;font-size:var(--co-fs-sm);font-weight:700;color:var(--co-ink)}
.co-credits__disclosure>summary::-webkit-details-marker{display:none}
.co-credits__disclosure>summary::before{content:'+';display:inline-block;width:1.2em;color:var(--co-link)}
.co-credits__disclosure[open]>summary::before{content:'\2013'}
.co-credits__disclosure[open]>summary{margin-bottom:var(--co-s4)}
.co-footer__strip--credits{align-items:start}

/* ---------- spec list (hook / yarn / size / time ...) ---------- */
.co-specs{display:grid;gap:0;margin:0;border-top:1px solid var(--co-line)}
@media (min-width:600px){.co-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-specs--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.co-specs__row{display:flex;gap:var(--co-s4);align-items:baseline;padding:var(--co-s3) var(--co-s4);
  border-bottom:1px solid var(--co-line);margin:0}
.co-specs__label{flex:0 0 40%;font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--co-ink-3)}
.co-specs__value{margin:0;font-size:var(--co-fs-sm);color:var(--co-ink)}
.co-specs__value strong{font-family:var(--co-font-display);font-weight:600}

/* ---------- callouts ---------- */
.co-note{margin:var(--co-s7) 0;padding:var(--co-s5) var(--co-s6);background:var(--co-sand);
  border-left:3px solid var(--co-cat,var(--co-rose));border-radius:0 var(--co-r-sm) var(--co-r-sm) 0}
.co-note h3,.co-note h4{margin-top:0;font-size:var(--co-fs-lg)}
.co-note p:last-child{margin-bottom:0}
.co-note--warn{border-left-color:var(--co-ochre);background:color-mix(in srgb,var(--co-ochre) 8%,#fff)}
.co-note--verify{border-left-color:var(--co-ochre);border-left-style:dashed;background:color-mix(in srgb,var(--co-ochre) 6%,#fff)}
.co-note__tag{display:block;font-size:var(--co-fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--co-ink-3);margin-bottom:var(--co-s2)}

/* ---------- breadcrumbs ---------- */
.co-crumbs{margin:0 0 var(--co-s6)}
.co-crumbs ol{display:flex;flex-wrap:wrap;gap:var(--co-s2);list-style:none;margin:0;padding:0;
  font-size:var(--co-fs-xs);letter-spacing:.02em;color:var(--co-ink-3)}
.co-crumbs li+li::before{content:"\2192";margin-right:var(--co-s2);color:var(--co-line-strong)}
.co-crumbs a{color:var(--co-ink-3);text-decoration:none}
.co-crumbs a:hover{color:var(--co-ink);text-decoration:underline}
.co-crumbs [aria-current=page]{color:var(--co-ink-2)}

/* ---------- reference tables ---------- */
.co-table{width:100%;border-collapse:collapse;font-size:var(--co-fs-sm);background:var(--co-surface);
  border:1px solid var(--co-line);border-radius:var(--co-r-sm);overflow:hidden}
.co-table caption{text-align:left;padding:var(--co-s3) var(--co-s4);font-size:var(--co-fs-xs);color:var(--co-ink-2);border-bottom:1px solid var(--co-line);background:var(--co-sand)}
.co-table th,.co-table td{padding:var(--co-s3) var(--co-s4);text-align:left;border-bottom:1px solid var(--co-line);vertical-align:top}
.co-table thead th{background:var(--co-sand);font-size:var(--co-fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--co-ink-2)}
.co-table tbody tr:last-child td{border-bottom:0}
.co-table tbody tr:nth-child(even){background:rgba(243,234,220,.4)}
.co-table__nowrap{white-space:nowrap}
.co-table-wrap{overflow-x:auto}

/* Stack the credits table on narrow screens so provenance and licence stay legible. */
@media (max-width:640px){
  .co-credits thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .co-credits,.co-credits tbody,.co-credits tr,.co-credits th,.co-credits td{display:block;width:100%}
  .co-credits caption{display:block;width:100%;box-sizing:border-box;caption-side:top}
  .co-credits tr{padding:var(--co-s3) var(--co-s4);border-bottom:1px solid var(--co-line)}
  .co-credits tbody tr:last-child{border-bottom:0}
  .co-credits tbody tr:nth-child(even){background:rgba(243,234,220,.4)}
  .co-credits th[scope=row]{display:flex;align-items:center;gap:var(--co-s3);min-width:0;padding:0 0 var(--co-s2)}
  .co-credits__cell a{display:flex;align-items:center;gap:var(--co-s3);width:100%;min-width:0}
  .co-credits__thumb{flex:0 0 56px;width:56px;height:44px}
  .co-credits td{padding:0 0 2px;border:0;font-size:var(--co-fs-2xs);color:var(--co-ink-3)}
  .co-credits td:nth-of-type(1)::before{content:"Provenance: ";font-weight:700;color:var(--co-ink-2)}
  .co-credits td:nth-of-type(2)::before{content:"Licence: ";font-weight:700;color:var(--co-ink-2)}
  .co-credits td.co-table__nowrap{white-space:normal}
}

/* ---------- symbols, swatches, pagination, empty states ---------- */
.co-symbol{display:grid;gap:var(--co-s2);justify-items:center;text-align:center;padding:var(--co-s4) var(--co-s3);
  background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-r-sm)}
.co-symbol svg{width:34px;height:34px;color:var(--co-cat,var(--co-rose))}
.co-symbol__name{font-size:var(--co-fs-xs);font-weight:700}
.co-symbol__uk{font-size:var(--co-fs-2xs);color:var(--co-ink-3)}
.co-swatch{display:flex;gap:var(--co-s2)}
.co-swatch span{width:26px;height:26px;border-radius:var(--co-r-xs);border:1px solid rgba(35,32,28,.15)}
.co-toc{position:static;background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-r-md);padding:var(--co-s5) var(--co-s6)}
.co-toc h2,.co-toc h3{margin:0 0 var(--co-s3);font-size:var(--co-fs-base);font-family:var(--co-font-body);font-weight:700;letter-spacing:.02em}
.co-toc ol{margin:0;padding-left:1.1em;font-size:var(--co-fs-sm)}
.co-toc li{margin-bottom:var(--co-s2)}
.co-pager{display:flex;justify-content:space-between;gap:var(--co-s4);flex-wrap:wrap;margin-top:var(--co-s8);padding-top:var(--co-s6);border-top:1px solid var(--co-line)}
.co-empty{max-width:var(--co-w-narrow);padding:var(--co-s8) 0}
.co-search{display:flex;gap:var(--co-s2);flex-wrap:wrap}
.co-search input[type=search]{flex:1 1 220px;min-height:44px;padding:var(--co-s3) var(--co-s4);
  border:1px solid var(--co-line-strong);border-radius:var(--co-r-sm);background:var(--co-surface);color:var(--co-ink);font-family:inherit;font-size:var(--co-fs-sm)}
.co-search input[type=search]:focus{border-color:var(--co-ink)}
.co-search button{flex:0 0 auto}
.co-flag-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--co-s3)}
.co-flag-list li{display:flex;gap:var(--co-s3);align-items:flex-start;font-size:var(--co-fs-sm);color:var(--co-ink-2)}
.co-flag-list li::before{content:"\25CB";color:var(--co-ochre);font-size:.9em;line-height:1.5}