/* ============================================================
   HOW I WORK
   Desktop: a grid of two columns. The statement fills the top left and the
   way on to the projects sits in the bottom left corner; the stack of three
   cards runs down the right, and stretches so its last card ends level with
   that link. Below 840px: statement, cards, link, in one column.
   ============================================================ */


.practices-layout{display:grid;gap:clamp(28px,4vw,44px);}
.practices-band .thesis{margin:0;max-width:none;}
/* the same two columns as the projects grid below (css/cards-b.css: 1fr 1fr,
   the same gap, from 840px), so the section edges line up; the statement
   keeps some air before the cards inside its own column */
@media (min-width:840px){
  .practices-layout{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"thesis cards" "next cards";
    column-gap:calc(2 * var(--cell-pad));row-gap:clamp(32px,3vw,48px);   /* the projects grid's gap (css/cards-b.css) */
  }
  .practices-band .thesis{padding-right:clamp(16px,3vw,56px);}
  .practices-band .thesis{grid-area:thesis;}
  .practices{grid-area:cards;}
  .next-down{grid-area:next;align-self:end;}
}

/* equal rows: when one card's line wraps the others keep its height, and on
   desktop the three share the column's full height */
.practices{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1vw,12px);grid-auto-rows:1fr;}
.practices > li{display:flex;}

/* ---------- a card ----------
   The icon leads; the title is set in the body sans at a small size, so the
   serif statement stays the one display moment and the cards read as a list
   to choose from. */
.practice{
  flex:1;display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);
  padding:clamp(10px,1vw,14px) clamp(14px,1.4vw,18px);
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  color:inherit;text-decoration:none;
  transition:border-color var(--hover-t) ease;
}
.practice-text{flex:1;min-width:0;}
.practice h3{
  font-family:var(--body);font-weight:600;
  font-size:clamp(0.9375rem,0.9rem + 0.15vw,1.0625rem);   /* 15 -> 17 */
  line-height:1.3;letter-spacing:-0.006em;color:var(--ink);
  margin:0 0 3px;transition:color var(--hover-t) ease;
}
.practice p{
  font-family:var(--body);font-size:var(--t-sm-size);line-height:1.45;color:var(--ink-2);
  margin:0;text-wrap:pretty;   /* no one-word last line, without narrowing the lines */
}
/* the icon: a geometric mark with no tile behind it, drawn and animated in
   css/icons.css (tools/icons.py) */
.practice-icon{
  flex:none;width:52px;height:52px;display:block;color:var(--ink);
  transition:color var(--hover-t) ease;
}

/* the arrow after the title says the card is a link: always there on touch,
   drawn in on hover where a pointer can hover */
.practice-arrow{display:inline-block;margin-left:.3em;color:var(--accent-text);transition:transform .14s ease,opacity .14s ease;}
@media (hover:hover) and (pointer:fine){
  .practice-arrow{opacity:0;transform:translateX(-4px);}
  a.practice:hover .practice-arrow,a.practice:focus-visible .practice-arrow{opacity:1;transform:none;}
}

/* hover: no lift, no shadow; the stroke, title and icon turn blue */
a.practice:focus-visible{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
@media (hover:hover){a.practice:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}}   /* 2px hover stroke; the smooth-corner version is in css/shape.css */
a.practice:focus-visible h3{color:var(--accent-text);}
@media (hover:hover){a.practice:hover h3{color:var(--accent-text);}}
a.practice:focus-visible .practice-icon{color:var(--accent-text);}
@media (hover:hover){a.practice:hover .practice-icon{color:var(--accent-text);}}
a.practice:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------- the way on ----------
   Bottom left of the section on desktop, after the cards on phones: a scroll
   cue and the label, both in the lighter ink until hovered. With a mouse or trackpad the cue is
   a mouse whose wheel rolls down; on touch screens, where a mouse would be
   the wrong picture, a round chevron that drops now and then. Hover turns
   the label and the cue blue. */
.next-down{
  display:flex;align-items:center;gap:14px;justify-self:start;
  color:var(--ink);text-decoration:none;border-radius:12px;
}
.nd-label{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-body-size);line-height:1.3;letter-spacing:-0.006em;
  color:var(--ink-2);transition:color var(--hover-t) ease;
}
.nd-go{flex:none;display:grid;place-items:center;color:var(--ink-2);transition:color var(--hover-t) ease,background-color var(--hover-t) ease,border-color var(--hover-t) ease;}
.next-down:focus-visible .nd-label{color:var(--accent-text);}
@media (hover:hover){.next-down:hover .nd-label{color:var(--accent-text);}}
.next-down:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}

/* touch: the chevron in a circle */
.nd-mouse{display:none;}
.nd-go{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);background:var(--paper);overflow:hidden;}
.nd-chev{width:18px;height:18px;}
.next-down:focus-visible .nd-go{background:var(--accent-text);border-color:var(--accent-text);color:var(--paper);}
@media (hover:hover){.next-down:hover .nd-go{background:var(--accent-text);border-color:var(--accent-text);color:var(--paper);}}

/* mouse or trackpad: the mouse, unboxed, its edge on the statement's edge */
@media (hover:hover) and (pointer:fine){
  .nd-chev{display:none;}
  .nd-mouse{display:block;}
  .nd-go,.next-down:hover .nd-go,.next-down:focus-visible .nd-go{width:auto;height:44px;border:0;border-radius:0;background:none;}
  .next-down:hover .nd-go,.next-down:focus-visible .nd-go{color:var(--accent-text);}
}

@media (prefers-reduced-motion:no-preference){
  /* the wheel rolls down and fades, then comes back; faster on hover */
  .nd-wheel{transform-box:fill-box;animation:nd-wheel 1.1s cubic-bezier(.45,0,.3,1) infinite;}
  @media (hover:hover){.next-down:hover .nd-wheel{animation-duration:.7s;}}
  @keyframes nd-wheel{
    0%{transform:translateY(0);opacity:0;}
    15%{opacity:1;}
    70%{transform:translateY(9px);opacity:0;}
    100%{transform:translateY(9px);opacity:0;}
  }
  /* the chevron drops out of the bottom and comes back in from the top,
     once every few seconds */
  .nd-chev{animation:nd-drop 3.2s cubic-bezier(.5,0,.3,1) 1.2s infinite;}
  @keyframes nd-drop{
    0%,62%{transform:translateY(0);opacity:1;}
    80%{transform:translateY(22px);opacity:0;}
    81%{transform:translateY(-22px);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
  }
}

@media (prefers-reduced-motion:reduce){
  .practice,.practice h3,.practice-icon,.practice-arrow,.nd-label,.nd-go{transition:none;}
  .practice-arrow{transform:none;}
}