/* Fay Coulter — site styles
   Colors come from Fay's own natural dyes in Weathered Prayers:
   black beans (blue), beets (pink), chlorophyll (green), marigold (yellow), undyed cotton. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations")}

:root{
  --paper:#FBFAF7;
  --ink:#2A2623;
  --soft:#6B635B;
  --line:#E3DDD3;
  --tint:#F1EDE6;
  --bean:#43608A;
  --beet:#B4577A;
  --chloro:#7A8B48;
  --marigold:#D6A03A;
  --undyed:#E8DFCC;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --gutter:clamp(16px, 4.5vw, 64px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.125rem/1.62 var(--serif);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--bean)}
:focus-visible{outline:2px solid var(--bean);outline-offset:3px}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* Header: a frosted strip that stays at the top */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.site-head .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-block:16px}
.name{font-size:1.3rem;letter-spacing:.005em;text-decoration:none}
.site-head nav{display:flex;gap:clamp(14px,2.6vw,34px);font-size:1rem}
.site-head nav a{text-decoration:none;color:var(--soft)}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink)}
.site-head nav a[aria-current]{text-decoration:underline}

/* Home: introduction, under the prayer flags */
.flag-line{max-width:1400px;margin:0 auto;padding:0 var(--gutter);overflow:hidden}
.flags{display:block;width:100%;height:auto;max-height:120px;margin-top:-1px}
.intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);
  align-items:end;padding-block:clamp(12px,3vw,40px) clamp(64px,9vw,128px)}
.intro h1{font-size:clamp(3rem,8.4vw,7.25rem);line-height:.95;letter-spacing:-.02em;font-weight:350;margin-bottom:.4em}
.intro-lede{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.45;max-width:30em}
.intro-status{color:var(--soft);font-style:italic}
.intro-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:1.6em}
.intro-links a{font-size:1.05rem}
.intro-portrait{margin:0}
.intro-portrait img,.about-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;background:var(--tint)}

/* Featured collections */
.feature{border-top:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);
  align-items:center;padding-block:clamp(48px,7vw,104px)}
.feature:nth-child(even) .feature-img{order:2}
.feature-img img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.meta{color:var(--soft);font-size:1rem;margin:0 0 .6em;font-style:italic}
.feature h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.015em;margin-bottom:.45em}
.feature h2 a{text-decoration:none}
.feature-summary p{max-width:34em}
.more{display:inline-block;margin-top:.4em}

/* Work index */
.index{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,104px)}
.index-title{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.8em}
.index-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.index-list li{border-bottom:1px solid var(--line)}
.index-list a{display:grid;grid-template-columns:64px minmax(0,1fr) auto 4.5em;align-items:center;gap:20px;
  padding:14px 0;text-decoration:none}
.i-thumb img{width:64px;height:64px;object-fit:cover;background:var(--tint)}
.i-title{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.i-kind{color:var(--soft);font-size:1rem}
.i-year{color:var(--soft);font-size:1rem;text-align:right;font-variant-numeric:oldstyle-nums}
.index-list a:hover .i-title{color:var(--bean)}

/* Project pages */
.p-head{padding-block:clamp(28px,5vw,64px) clamp(28px,4vw,48px)}
.back{display:inline-block;color:var(--soft);font-size:1rem;margin-bottom:clamp(24px,4vw,48px)}
.p-head h1{font-size:clamp(2.8rem,7.5vw,6.4rem);line-height:.98;letter-spacing:-.02em;font-weight:350;margin-bottom:.25em}
.p-intro{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.5;max-width:34em;margin-top:1.2em}
.p-cover{margin-top:0;margin-bottom:clamp(48px,7vw,96px)}
.p-cover img{width:100%;max-height:88vh;object-fit:contain;background:var(--tint)}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

.chapter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);
  padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.ch-text{align-self:start}
.chapter h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-bottom:.6em}
.ch-body p{max-width:32em}
.ch-images{display:grid;gap:clamp(8px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.ch-images.count-1{grid-template-columns:1fr}
.ch-images.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-images.count-many{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-images figure{margin:0}
.ch-images img{width:100%;background:var(--tint)}
.ch-images figcaption{font-size:.95rem;color:var(--soft);margin-top:8px;font-style:italic}
.chapter-wide{grid-template-columns:1fr}
.chapter-wide .ch-text{position:static;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px)}
.chapter-wide .ch-text h2{margin:0}
/* A named look: the dress gets the room, the story sits beside it */
.chapter-look{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.chapter-look h2{font-style:italic}
.chapter-look .ch-body{font-size:1.2rem;line-height:1.55}
.p-notes{max-width:44em;padding-block:32px}
.p-next{border-top:1px solid var(--ink);margin-top:clamp(40px,6vw,80px);padding-block:28px clamp(56px,8vw,112px)}
.p-next a{font-size:clamp(1.8rem,4vw,3rem);text-decoration:none;line-height:1.1}
.p-next span{display:block;font-size:1rem;color:var(--soft);font-style:italic;margin-bottom:6px}
.p-next a:hover{color:var(--bean)}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);
  padding-block:clamp(36px,6vw,88px) clamp(64px,9vw,128px)}
.about-portrait{margin:0;align-self:start;position:sticky;top:96px}
.about-portrait figcaption{font-size:.95rem;color:var(--soft);font-style:italic;margin-top:8px}
.about-text h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-.02em;font-weight:350;margin-bottom:.6em}
.about-bio p{max-width:34em}
.about-bio p:first-child{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.5}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 48px;
  margin:2.4em 0;padding-top:1.6em;border-top:1px solid var(--line)}
.facts h2{font-size:1.15rem;font-style:italic;margin-bottom:.5em}
.facts ul{margin:0;padding:0;list-style:none}
.facts li{margin-bottom:.3em}
.about-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.button{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:.62em 1.15em;border-radius:3px;font-size:1.02rem}
.button:hover{background:var(--bean);color:var(--paper)}

/* Resume page (also prints cleanly) */
.resume{max-width:820px;padding-block:clamp(32px,5vw,72px) clamp(64px,9vw,120px)}
.resume-downloads{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:3em}
.resume-downloads p{margin:0;color:var(--soft)}
.r-head h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;font-weight:350;margin-bottom:.2em}
.r-head p{color:var(--soft)}
.r-sec{border-top:1px solid var(--line);padding-top:1.1em;margin-top:1.6em}
.r-sec h2{font-size:1.15rem;font-style:italic;margin-bottom:.8em}
.r-item{margin-bottom:1.1em}
.r-item h3{font-size:1.15rem;font-weight:500}
.r-sub,.r-dates{color:var(--soft);margin:0;font-size:1rem}
.r-item ul{margin:.4em 0 0;padding-left:1.1em}
.r-item li{margin-bottom:.25em}

/* Footer: edge to edge, no rounded corners */
.site-foot{background:var(--ink);color:var(--paper);padding-block:clamp(56px,8vw,112px) 28px}
.foot-lede{font-size:clamp(1.2rem,2vw,1.5rem);color:color-mix(in srgb, var(--paper) 75%, transparent);font-style:italic;max-width:28em}
.foot-email{display:inline-block;font-size:clamp(1.9rem,5.6vw,4.4rem);line-height:1.1;letter-spacing:-.015em;
  text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--paper) 40%, transparent);word-break:break-word;margin-bottom:.8em}
.foot-email:hover{color:var(--undyed)}
.foot-links{list-style:none;margin:0 0 3em;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-links a:hover{color:var(--undyed)}
.foot-small{font-size:.92rem;color:color-mix(in srgb, var(--paper) 60%, transparent);margin:0}
.site-foot :focus-visible{outline-color:var(--undyed)}

/* Image viewer */
.viewer{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;
  background:color-mix(in srgb, var(--paper) 97%, transparent);color:var(--ink)}
.viewer::backdrop{background:transparent}
.viewer figure{margin:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:56px var(--gutter) 20px;gap:12px}
.viewer img{max-width:100%;max-height:100%;margin:auto;object-fit:contain}
.viewer figcaption{text-align:center;color:var(--soft);font-style:italic;min-height:1.6em}
.viewer button{font:inherit;background:none;border:0;color:var(--ink);cursor:pointer;padding:10px 12px}
.viewer-close{position:absolute;top:8px;right:calc(var(--gutter) - 12px)}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%)}
.viewer-nav.prev{left:4px}.viewer-nav.next{right:4px}

/* Phones and small tablets */
@media (max-width:860px){
  .intro-grid,.feature-grid,.about-grid,.chapter,.chapter-look,.chapter-wide .ch-text{grid-template-columns:1fr}
  .intro-portrait{max-width:440px;order:-1}
  .feature:nth-child(even) .feature-img{order:0}
  .ch-text,.about-portrait{position:static}
  .about-portrait{max-width:440px}
  .ch-images.count-3,.ch-images.count-many{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-list a{grid-template-columns:52px minmax(0,1fr) auto;gap:14px}
  .i-thumb img{width:52px;height:52px}
  .i-kind{display:none}
  .viewer-nav{top:auto;bottom:12px;transform:none}
}
@media (max-width:520px){
  .site-head .wrap{flex-direction:column;gap:6px}
  .site-head nav{gap:18px}
  .flags{max-height:64px}
}

@media print{
  .site-head,.site-foot,.resume-downloads,.viewer,.skip{display:none !important}
  body{background:#fff;font-size:11pt}
  .resume{padding:0;max-width:none}
}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);
  padding-block:clamp(36px,6vw,88px) clamp(64px,9vw,128px)}
.contact-intro h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-.02em;font-weight:350;margin-bottom:.5em}
.contact-lede{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.5;max-width:26em}
.contact-direct{color:var(--soft)}
.contact-direct a{color:var(--ink);overflow-wrap:anywhere}
.contact-form{display:grid;gap:22px;align-content:start;min-width:0}
.field{display:grid;gap:6px}
.field label{font-size:1rem}
.opt{color:var(--soft);font-style:italic}
.field input,.field select,.field textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-bottom-color:var(--soft);border-radius:2px;padding:.6em .7em;width:100%}
.field textarea{resize:vertical;min-height:9em}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--bean);outline-offset:1px;border-color:var(--bean)}
.contact-form .button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.contact-form .button[disabled]{opacity:.55;cursor:default}
.form-status{margin:0;min-height:1.6em}
.form-status.ok{color:var(--chloro)}
.form-status.err{color:var(--beet)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--beet)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Process ---------- */
/* The process path: one prayer flag per stage, hung on a string. Colors follow Fay's dyes. */
.path{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.path ol{list-style:none;margin:0;padding:18px 0 0;position:relative;
  display:grid;grid-template-columns:repeat(var(--count),minmax(88px,1fr));min-width:calc(var(--count) * 88px)}
.path ol::before{content:"";position:absolute;left:0;right:0;top:18px;height:22px;
  border-top:1px solid var(--ink);border-radius:50% 50% 0 0 / 22px 22px 0 0;transform:scaleY(-1);transform-origin:top;opacity:.55}
.path li{position:relative}
.path a{display:grid;justify-items:center;gap:4px;text-decoration:none;padding:0 4px 4px;text-align:center}
.flag{display:block;width:clamp(34px,4vw,48px);aspect-ratio:4/5;background:var(--c,var(--bean));
  transform-origin:top center;transition:transform .25s ease}
.path li:nth-child(5n+1){--c:var(--bean)} .path li:nth-child(5n+2){--c:var(--undyed)}
.path li:nth-child(5n+3){--c:var(--beet)} .path li:nth-child(5n+4){--c:var(--chloro)} .path li:nth-child(5n+5){--c:var(--marigold)}
.path li:nth-child(odd) .flag{margin-top:6px}
.path .n{font-size:.92rem;color:var(--soft);font-variant-numeric:lining-nums tabular-nums;margin-top:6px}
.path .l{font-size:1.02rem;line-height:1.2}
.path a:hover .flag,.path a:focus-visible .flag{transform:rotate(-4deg)}
.path a:hover .l{color:var(--bean)}
@media (prefers-reduced-motion:reduce){.flag{transition:none}}

.p-process{padding-block:clamp(8px,2vw,16px) clamp(40px,6vw,72px)}
.p-process h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:.3em}
.p-process-intro{color:var(--soft);max-width:38em;margin-bottom:1.6em}

/* A stage: number, heading and text, then its board */
.stage{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.stage-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,64px);
  align-items:baseline;margin-bottom:clamp(24px,3.5vw,44px)}
.stage-n{grid-column:1;grid-row:1;margin:0 0 .2em;font-size:clamp(2.6rem,5vw,4rem);line-height:1;font-weight:300;
  color:var(--soft);font-variant-numeric:lining-nums}
.stage-head h2{grid-column:1;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.1}
.stage-text{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:36em}
.stage-text p:last-child{margin-bottom:0}

.stage-images{display:grid;gap:clamp(8px,1.2vw,16px);grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.stage-images.count-1{grid-template-columns:minmax(0,1fr);max-width:820px}
.stage-images.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stage-images.count-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stage-wide .stage-images.count-many{grid-template-columns:repeat(4,minmax(0,1fr))}
.stage-wide .stage-images.count-many figure:first-child{grid-column:1 / -1}
.stage figure{margin:0}
.stage img{width:100%;background:var(--tint)}
.stage figcaption{font-size:.95rem;color:var(--soft);margin-top:8px;font-style:italic}

/* Boards: parallel strands within one stage, as on Fay's presentation pages */
.boards{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0}
.board{padding:0 clamp(14px,2vw,28px);border-left:1px dashed color-mix(in srgb, var(--chloro) 70%, transparent);min-width:0}
.board:first-child{padding-left:0;border-left:0}
.board:last-child{padding-right:0}
.board h3{font-size:1.2rem;font-style:italic;margin-bottom:.8em}
.board-images{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-bottom:12px}
.board-images.count-2,.board-images.count-3,.board-images.count-many{grid-template-columns:repeat(2,minmax(0,1fr))}
.board-images.count-3 figure:first-child{grid-column:1 / -1}
.board-text{font-size:1.02rem}

/* Looks: each one traced step by step, collage or pattern piece to finished */
.looks{display:grid;gap:clamp(36px,5vw,64px)}
.look{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);align-items:start}
.look-head h3{font-size:clamp(1.35rem,2.2vw,1.75rem);font-style:italic;margin-bottom:.5em}
.look-text{font-size:1.05rem}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:clamp(22px,2.6vw,34px);align-items:start;counter-reset:step}
.steps li{position:relative;counter-increment:step}
.steps li + li::before{content:"";position:absolute;left:calc(clamp(22px,2.6vw,34px) * -1);width:clamp(22px,2.6vw,34px);top:40%;
  height:1px;background:var(--ink);opacity:.5}
.steps li + li::after{content:"";position:absolute;left:-7px;top:calc(40% - 3px);width:6px;height:6px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg);opacity:.6}
.steps .zoom{aspect-ratio:3/4;background:var(--tint)}
.steps img{width:100%;height:100%;object-fit:contain}
.steps figcaption{font-style:normal}
.steps figcaption::before{content:counter(step) ". ";color:var(--soft)}

@media (max-width:860px){
  .stage-head{grid-template-columns:1fr}
  .stage-text{grid-column:1;grid-row:auto;margin-top:.8em}
  .boards{grid-template-columns:1fr;gap:32px}
  .board{padding:0;border-left:0;border-top:1px dashed color-mix(in srgb, var(--chloro) 70%, transparent);padding-top:20px}
  .board:first-child{border-top:0;padding-top:0}
  .look{grid-template-columns:1fr}
  .path ol{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;row-gap:18px}
  .path ol::before{display:none}
  .path li:nth-child(odd) .flag{margin-top:0}
  .steps{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .steps li + li::before,.steps li + li::after{display:none}
  .stage-images,.stage-images.count-4,.stage-wide .stage-images.count-many{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Home: how I work */
.how{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,104px)}
.how-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.how-head h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.015em}
.how-head p{margin:0;max-width:34em;color:var(--soft)}
.how-list{list-style:none;margin:0;padding:24px 0 0;position:relative;display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.how-list::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:var(--ink);opacity:.55}
.how-list a{display:grid;gap:8px;text-decoration:none;align-content:start}
.how-list .flag{width:30px;margin:-1px 0 4px}
.how-list li:nth-child(5n+1){--c:var(--bean)} .how-list li:nth-child(5n+2){--c:var(--undyed)}
.how-list li:nth-child(5n+3){--c:var(--beet)} .how-list li:nth-child(5n+4){--c:var(--chloro)} .how-list li:nth-child(5n+5){--c:var(--marigold)}
.how-img img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--tint)}
.how-list .n{font-size:.92rem;color:var(--soft);font-variant-numeric:lining-nums tabular-nums}
.how-label{font-size:1.15rem;line-height:1.2}
.how-text{font-size:.98rem;line-height:1.45;color:var(--soft)}
.how-list a:hover .how-label{color:var(--bean)}
.how-list a:hover .flag{transform:rotate(-4deg)}
@media (max-width:1100px){.how-list{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:36px}.how-list::before{display:none}}
@media (max-width:860px){.how-head{grid-template-columns:1fr}}
@media (max-width:560px){.how-list{grid-template-columns:repeat(2,minmax(0,1fr))}}