/* ============================================================
   shop by concern — typographic list + live preview
   ============================================================ */
.concern{background:var(--ivory)}   /* rhythm comes from the band tokens */
.concern__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px)}
/* the head owns the left column: the line sits on one line on wide screens,
   and there is real air before the list starts */
.concern__head{grid-column:1/8;grid-row:1;margin-bottom:var(--space-head)}
.concern__head .sec-sub{max-width:min(100%,880px);margin-top:var(--space-sub)}
.concern__list{grid-column:1/8;grid-row:2;align-self:start}
.cn{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  width:100%;text-align:left;padding:clamp(13px,1.5vw,20px) 0;
  border-bottom:1px solid var(--line-soft);position:relative;color:inherit;
}
.cn__t{color:var(--ink-45);transition:color .35s var(--ease),transform .55s var(--slow)}
.cn.on .cn__t,.cn:hover .cn__t{color:var(--ink)}
.concern__list .cn:first-child{border-top:1px solid var(--line-soft)}
.cn__i{font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-25);font-variant-numeric:tabular-nums;width:26px;flex:none;transition:color .35s}
.cn__t{
  font-family:var(--display);font-weight:300;font-size:var(--d3);line-height:1.04;
  letter-spacing:-.015em;transition:transform .55s var(--slow),color .35s var(--ease);flex:1;
}
/* the count and the arrow are wrapped so a phone can put them on one line of
   their own; display:contents hands them straight back to the flex row here,
   so the desktop layout is untouched */
.cn__m{display:contents}
.cn__d{display:none}
.cn__n{font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-25);transition:color .35s}
.cn__arrow{width:14px;height:14px;opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease),transform .5s var(--slow)}
.cn.on .cn__t,.cn:hover .cn__t{transform:translateX(clamp(6px,1vw,16px))}
.cn.on .cn__i,.cn.on .cn__n{color:var(--accent)}
.cn.on .cn__arrow,.cn:hover .cn__arrow{opacity:1;transform:none}
.cn::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--slow);
}
.cn.on::after{transform:scaleX(1)}

.concern__view{grid-column:8/13;grid-row:1/3;position:sticky;top:calc(var(--bar-h-stuck) + 28px);align-self:start}
/* it is a link, so it needs a box of its own — as an inline element it collapsed */
.concern__pic{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory);border-radius:var(--radius-md);}
.concern__pic .pic{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity .7s var(--ease),transform 1.2s var(--slow);
}
.concern__pic .pic.on{opacity:1;transform:none}
.concern__pic:hover .pic.on{transform:scale(1.015)}
.concern__cap{display:flex;justify-content:space-between;gap:16px;padding-top:14px;align-items:baseline}
.concern__cap b{font-weight:500;font-size:var(--t-meta)}
.concern__cap span{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}

@media (max-width:1024px){
  /* stacked, the grid's own row gap and the head's margin-bottom both land
     between the heading block and the picture — 20 + 40 for one gap. The grid
     owns it here, at the same step every other section gives its content. */
  .concern__grid{row-gap:var(--space-head)}
  .concern__head{grid-column:1/13;margin-bottom:0}
  .concern__view{grid-column:1/13;grid-row:2;position:static}
  .concern__pic{aspect-ratio:16/9}
  .concern__list{grid-column:1/13;grid-row:3}
}
@media (max-width:560px){
  .cn__n{display:none}
  .concern__pic{aspect-ratio:4/3.4}
}

/* ---------- phone: no hover, so every row states its own case ----------
   On a pointer device a row reveals its description and arrow on hover and the
   preview above follows along. A phone has neither, and the leading row's "on"
   styling read as a selected tab over a picture that never changed by itself.
   Here each row carries its number, name, one line of description and its
   count, the whole row is the link, and nothing looks selected. */
@media (max-width:700px){
  /* the picture stays as an editorial visual, but its caption duplicated the
     first row of the list underneath it */
  .concern__cap{display:none}

  .cn{
    display:grid;grid-template-columns:26px minmax(0,1fr);
    align-items:start;column-gap:14px;row-gap:6px;
    padding:clamp(16px,4vw,20px) 0;
  }
  .cn__i{grid-column:1;grid-row:1;align-self:center;color:var(--ink-25)}
  .cn__t{grid-column:2;grid-row:1}
  .cn__d{grid-column:2;grid-row:2;display:block}
  .cn__m{grid-column:2;grid-row:3;display:flex;align-items:center;gap:9px}

  /* nothing is "current" here: full ink, no travel, no accent, no underline */
  .cn__t,.cn.on .cn__t,.cn:hover .cn__t{
    color:var(--ink);transform:none;font-size:var(--d4);line-height:1.1;
  }
  .cn__d{
    font-size:var(--t-meta);line-height:1.45;color:var(--ink-70);
    text-wrap:pretty;margin-top:2px;
  }
  .cn__n,.cn.on .cn__n,.cn.on .cn__i{color:var(--ink-45)}
  .cn__n{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;display:inline}
  .cn__n::after{content:" products"}
  .cn.on::after,.cn::after{display:none}

  /* the arrow is part of the row, not a hover reward. Its inherited .5s travel
     is slower than the navigation it announces, so the press has its own pace. */
  .cn__arrow{opacity:1;transform:none;color:var(--ink-45);flex:none;
    transition:transform .16s var(--ease)}

  /* tap: the row dips, the arrow steps forward, and the link follows at once */
  .cn{transition:background .18s var(--ease)}
  .cn:active{background:rgba(26,18,10,.045)}
  .cn:active .cn__arrow{transform:translateX(4px)}
  .cn:active .cn__t{color:var(--ink)}
}