/* Goods: what we could make now, each with what it's made of one tap away, and what's still in the works. Only this page loads it. */

/* a piece: the photograph, then what it is, what makes it good, and a quiet way to ask for it */
.pc{display:grid;gap:18px;padding:22px 0 34px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--top) + 16px)}
.ghead + .pc{padding-top:4px}
.pc-ph{position:relative;background:#EAE6DD;overflow:hidden}
.pc-ph > img{width:100%;height:auto}
.pc-t{display:grid;align-content:start;gap:10px;min-width:0}
.pc-k{font-size:14px;font-weight:500;line-height:1.3;color:var(--mute)}
.pc-t h3{font-weight:650;font-size:clamp(28px,7.4vw,42px);line-height:1;letter-spacing:-.032em}
.pc-l{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.4;max-width:38ch}

/* made of: what each piece is made of, as a row of close-ups; a tap opens one in place: the close-up, a drawing of the
   choice beside the one we passed on, and why. One open at a time per piece. */
.mo{margin-top:10px;padding-top:16px;border-top:1px solid var(--rule);container-type:inline-size}
.mo-h{font-size:16px;font-weight:600;margin-bottom:12px}
.mo-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:460px}
.mo-t{display:grid;gap:7px;align-content:start;text-align:left;font-size:13px;font-weight:500;line-height:1.25;color:var(--mute);-webkit-tap-highlight-color:transparent;transition:color .25s}
.mo-t img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#EAE6DD;box-shadow:0 0 0 1px rgba(22,21,20,.06);transition:transform .45s var(--ease),box-shadow .25s}
.mo-t:hover{color:var(--ink)}
.mo-t:hover img{transform:scale(1.03)}
.mo-t[aria-expanded="true"]{color:var(--ink)}
.mo-t[aria-expanded="true"] img{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--ink)}
.mo-t:focus-visible{outline:none}
.mo-t:focus-visible img{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--ink)}
.mo-b.moving{overflow:hidden}   /* clipped only while its height moves, so the panel's shadow shows the rest of the time */
.mo-p{display:grid;gap:14px;margin-top:14px;padding:14px;background:var(--sheet);border:1px solid var(--rule);box-shadow:var(--soft)}
.mo-p[hidden]{display:none}
html:not(.js) .mo-p[hidden]{display:grid}   /* without the script, every panel simply shows */
.mo-ph{width:100%;aspect-ratio:3/2;object-fit:cover;background:#EAE6DD}
.mo-tx{display:grid;gap:7px}
.mo-tx h4{font-size:18px;font-weight:650;line-height:1.2;letter-spacing:-.012em}
.mo-tx p{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:16.5px;line-height:1.42;color:var(--mute);max-width:52ch}
.mo-tx p:first-of-type{color:var(--ink)}
.mo-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid var(--rule)}
.mo-vs.one{grid-template-columns:1fr}
.mo-vs figure{display:grid;gap:6px;align-content:start;color:#A39E94}
.mo-vs figure.ours{color:var(--ink)}
.mo-vs svg{width:100%;height:auto;overflow:visible}
.mo-vs.one svg{max-width:440px}
.mo-vs figcaption{font-size:13.5px;line-height:1.35;color:var(--mute)}
.mo-vs .ours figcaption{color:var(--ink)}
.mo-vs figcaption b{font-weight:600}
/* the drawings: one line weight at any size; theirs takes the grey of its cell, ours the ink */
.mo-vs .d{fill:none;stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mo-vs .d.thin{stroke-width:1px}
.mo-vs .dash{stroke-dasharray:2.5 3}
.mo-vs .two{stroke-width:2.6px}
.mo-vs .ours .d.ours{stroke-width:1.8px}
.mo-vs .sw{fill:#EFEBE2;stroke:none}
.mo-vs .ft{fill:#E8E3D8}
.mo-vs .fk{fill:#3A3835}
.mo-vs .fi{fill:currentColor}
.mo-vs .fp{fill:var(--sheet)}
.mo-vs .fw{fill:#D5D9DA}
.mo-vs .fg{fill:#fff;opacity:.75}
.mo-vs .sh{fill:rgba(22,21,20,.08)}
.mo-vs text{fill:currentColor;font:500 11px/1 var(--sans)}
.mo-vs text.b{font-weight:650}
.mo-vs text.mt{fill:var(--mute);font-size:10px}
.mo-vs text.pen{fill:var(--mute);font:400 13px/1 var(--serif)}
.mo-src{font-size:12.5px;line-height:1.5;color:var(--mute);max-width:60ch;margin-top:12px}
.mo-src a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--rule)}
.mo-src a:hover{color:var(--ink);text-decoration-color:currentColor}
/* a panel arrives the same way every time it's shown: the close-up settles, the words rise, the drawings draw left to right */
html.js .mo-p:not([hidden]) .mo-ph{animation:mo-ph .55s var(--arrive) both}
html.js .mo-p:not([hidden]) .mo-tx{animation:mo-up .45s var(--arrive) .06s both}
html.js .mo-p:not([hidden]) .mo-vs svg{animation:mo-draw .7s var(--ease) .16s both}
html.js .mo-p:not([hidden]) .mo-vs figure + figure svg{animation-delay:.3s}
@keyframes mo-ph{from{opacity:0;transform:scale(1.035)}}
@keyframes mo-up{from{opacity:0;transform:translateY(6px)}}
@keyframes mo-draw{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px -4px -4px -4px)}}
/* made of, for the drop's pieces (the same facts as the drop page, written in by scripts/made-of.mjs): each material is a
   line, and a tap opens it onto one close-up and why we chose it. One open at a time per piece. */
.mats{list-style:none;margin-top:10px;border-top:1px solid var(--rule)}
.mats > li{border-bottom:1px solid var(--rule)}
.mat{display:grid;grid-template-columns:44px 1fr 14px;align-items:center;gap:14px;width:100%;padding:10px 0;font-size:16px;font-weight:500;line-height:1.3}
.mat img{width:44px;height:44px;border-radius:3px;object-fit:cover}
.mat i{position:relative;width:12px;height:12px;justify-self:end;transition:transform .45s var(--ease)}
.mat i::before,.mat i::after{content:"";position:absolute;left:0;top:5.3px;width:12px;height:1.4px;background:currentColor}
.mat i::after{transform:rotate(90deg)}
.mat[aria-expanded="true"] i{transform:rotate(45deg)}
.mat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mats .why{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--arrive)}
.mats .why.on{grid-template-rows:1fr}
/* shut, it's out of reach as well as out of sight, once it has finished closing */
.mats .why > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .55s}
.mats .why.on > div{visibility:visible;transition:none}
.mats .why figure{display:grid;gap:14px;padding:4px 0 20px}
.mats .why figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;transform:scale(1.03);opacity:0;transition:transform .9s var(--arrive),opacity .5s ease}
.mats .why.on figure img{transform:none;opacity:1}
.mats .why p{font:400 18px/1.45 var(--serif);font-variation-settings:"opsz" 18;max-width:40ch;text-wrap:pretty}
html:not(.js) .mats .why{grid-template-rows:1fr}   /* without the script, every reason simply shows */
html:not(.js) .mats .why > div{visibility:visible}
html:not(.js) .mats .why figure img{transform:none;opacity:1}
@media (min-width:860px){
  .mats .why figure{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;padding:6px 0 22px}
  .mats .why figure img{aspect-ratio:1}
}
/* a piece's other side: the photograph swipes or taps round */
.pc-ph{touch-action:pan-y}

@container (min-width:440px){
  .mo-p{grid-template-columns:168px minmax(0,1fr);column-gap:18px;padding:16px}
  .mo-ph{aspect-ratio:1}
  .mo-vs{grid-column:1/-1}
}

/* I'd want this: one quiet button; a tap opens the address row in its place */
.want{display:grid;gap:8px;margin-top:8px;max-width:440px}
.want-b{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:1.5px solid var(--ink);border-radius:23px;font-size:15.5px;font-weight:600;transition:background .3s,color .3s}
.want-b:hover{background:var(--ink);color:var(--paper)}
.want-b:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.want-b[hidden],.want-f[hidden]{display:none}
.want-f{display:grid;grid-template-columns:1fr auto;gap:8px}
.want-f input{height:48px;border:1.5px solid var(--ink);border-radius:24px;padding:0 18px;background:var(--sheet);font-size:16px;min-width:0}
.want-f input:focus{outline:none;box-shadow:0 0 0 3px rgba(22,21,20,.12)}
.want-f .btn{min-height:48px;padding:0 20px;font-size:15.5px}
.want small{font-size:14px;line-height:1.4;color:var(--mute)}
.want.done small{color:var(--ink)}

/* in the works: smaller, a picture and two lines each, and what stands in the way */
.later .good figcaption em{color:var(--ink);opacity:.72}

@media (min-width:1000px){
  .pc{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:56px;align-items:start;padding:30px 0 44px}
  .pc-t{position:sticky;top:calc(var(--top) + 24px);padding-top:6px}
}
@media (prefers-reduced-motion: reduce){
  .want-b,.mo-t,.mo-t img,.mat i,.mats .why,.mats .why > div,.mats .why figure img{transition:none}
  html.js .mo-p:not([hidden]) .mo-ph,html.js .mo-p:not([hidden]) .mo-tx,html.js .mo-p:not([hidden]) .mo-vs svg{animation:none}
}