/* River Water Glass — public shop.
   Placeholder styling so the pages are legible while the real front end is built;
   the palette is the finished one, taken from Amy's own photographs. */

:root{
  --ground:#F2EFE8; --surface:#FBFAF7; --surface-2:#EDE8DE;
  --ink:#1B2E36; --ink-2:#5B6B72; --rule:#D9D2C5; --accent:#2E7EA8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.55 "Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}

.site{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 22px;background:var(--surface);border-bottom:1px solid var(--rule)}
.site .mark{font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-size:.92rem;color:var(--ink);text-decoration:none}
.site nav{margin-left:auto;display:flex;gap:16px}
.site nav a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
.site nav a:hover{color:var(--accent)}

.wrap{max-width:1120px;margin:0 auto;padding:26px 18px 70px}
/* Headings are set in a serif, which is most of what separates "clean and elegant" from
   "a form". It is a system stack on purpose: Georgia and Iowan are already on every
   machine, so there is no webfont request, nothing to fail slowly on a phone in Bend,
   and no flash of the wrong type on the way in.
   Note that "Jost" below -- the wordmark face from the printed brand package -- has been
   named in this stack since the first day and never actually loaded, so the site has
   always rendered in the visitor's system sans. Loading it properly is a separate,
   visible change. */
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif}
h1{font-size:2.1rem;font-weight:600;letter-spacing:.005em;margin:0 0 18px}
/* The wordmark keeps the sans: it is set in Jost on the printed cards, and a serif
   version of the name beside a sans one on the card would read as two brands. */
.site .mark,.foot .mark{font-family:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif}


.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters select{padding:9px 12px;font:inherit;background:var(--surface);
  border:1px solid var(--rule);border-radius:20px;color:var(--ink)}
.count{color:var(--ink-2);font-size:.9rem;margin:0 0 18px}

.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--surface-2)}
/* tableware is shot square and must not be cropped to a portrait card */
.card img.sq{object-fit:contain;background:var(--surface-2)}
.card h2{font-size:1.02rem;font-weight:600;margin:12px 14px 2px}
.card .sku{margin:0 14px;font-size:.78rem;color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card .price{margin:8px 14px 0;font-size:1.05rem}
.card .tag{margin:6px 14px 14px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}

@media (max-width:560px){
  .wrap{padding:18px 12px 50px}
  h1{font-size:1.5rem}
  .grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---------- shared bits added with the detail, contact and studio pages ---------- */
.wrap.narrow{max-width:660px}
.lead{font-size:1.06rem;color:var(--ink-2);max-width:58ch}
.btn{display:inline-block;margin:14px 8px 0 0;padding:12px 22px;background:var(--ink);
  color:#fff;border:0;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;
  text-decoration:none}
.btn:hover{background:#14242b}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--surface-2)}
.err{background:#FBEAE6;color:#A6402F;border:1px solid #EBC9C1;padding:10px 13px;
  border-radius:8px;margin:10px 0}
.note{font-size:.9rem;color:var(--ink-2);max-width:56ch}
.crumb{font-size:.85rem;color:var(--ink-2);margin:0 0 14px}
.crumb a{color:var(--ink-2)} .crumb span{margin:0 6px;opacity:.5}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--accent)}

/* ---------- piece detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:start}
.shots img{width:100%;border-radius:10px;background:var(--surface-2);display:block;
  aspect-ratio:4/5;object-fit:cover}
.shots img.sq{object-fit:contain;aspect-ratio:1/1}
.angles{display:flex;gap:8px;margin-top:12px}
.angbtn{border:1px solid var(--rule);background:var(--surface);padding:7px 15px;
  border-radius:20px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.angbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.info h1{font-size:1.8rem;margin:0 0 4px}
.info .sku{margin:0 0 16px;font-size:.82rem;color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.info .price{font-size:1.7rem;margin:0 0 6px;font-variant-numeric:tabular-nums}
.info .price.sold{color:var(--ink-2)}
.badge{display:inline-block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);border-radius:20px;padding:4px 11px;margin:0 0 6px}
.badge.samp{border-color:#C4642A;color:#A2521F}
.chainpick{margin:20px 0 4px;padding:16px;background:var(--surface);
  border:1px solid var(--rule);border-radius:10px}
.chainpick label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:7px}
.chainpick select{width:100%;padding:10px 12px;font:inherit;margin-bottom:8px;
  background:var(--ground);border:1px solid var(--rule);border-radius:8px;color:var(--ink)}
.chainnote{font-size:.85rem;color:var(--ink-2);margin:4px 0 0}
table.spec{width:100%;border-collapse:collapse;margin-top:22px;font-size:.92rem}
table.spec th{text-align:left;font-weight:600;padding:8px 12px 8px 0;color:var(--ink-2);
  width:34%;vertical-align:top;font-size:.85rem}
table.spec td{padding:8px 0;border-bottom:1px solid var(--rule)}
.desc{margin-top:18px;max-width:56ch}
h2.more{font-size:1.1rem;margin:52px 0 16px;font-weight:600}

/* ---------- contact ---------- */
form.contact{margin-top:20px;max-width:520px}
form.contact label{display:block;margin:16px 0 5px;font-size:.85rem;font-weight:600}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:11px 12px;
  font:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  color:var(--ink)}
form.contact textarea{resize:vertical;min-height:130px}
form.contact :focus{outline:2px solid var(--accent);outline-offset:1px}
.about{background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  padding:11px 14px;font-size:.93rem}
/* the spam trap: off-screen rather than display:none, which some bots detect */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the studio ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;
  align-items:start;margin-bottom:46px}
.storytext p{max-width:60ch}
.portrait img{width:100%;border-radius:10px;display:block}
.portrait figcaption,.gallery figcaption{font-size:.82rem;color:var(--ink-2);margin-top:8px}
.portrait{margin:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;
  margin-bottom:46px}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:10px;display:block;aspect-ratio:3/4;object-fit:cover}
.facts{display:flex;gap:40px;flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin-bottom:40px}
.facts b{display:block;font-size:1.9rem;line-height:1}
.facts span{font-size:.86rem;color:var(--ink-2)}
.cta{max-width:60ch}
.cta h2{font-size:1.25rem;margin:0 0 10px}

@media (max-width:760px){
  .detail,.story{grid-template-columns:1fr;gap:24px}
  .story .portrait{order:-1}
  .info h1{font-size:1.5rem}
  .facts{gap:26px}
}

/* basket, checkout and receipt */
table.basket{width:100%;border-collapse:collapse;margin:18px 0}
table.basket td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.basket .sku{display:inline-block;margin-left:8px;font-size:.78rem;color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.chainline{display:block;font-size:.85rem;color:var(--ink-2);margin-top:3px}
table.basket .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.basket tr.sub td{color:var(--ink-2);font-size:.92rem}
table.basket tr.tot td{font-size:1.15rem;font-weight:600;border-bottom:0}
.linkbtn{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:.85rem;
  text-decoration:underline;cursor:pointer;padding:0}
#paypal-buttons{margin:22px 0;max-width:440px}

/* The discount code box on the basket. */
.coupon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.coupon label{font-weight:600;font-size:.92rem}
.coupon input{padding:8px 10px;border:1px solid #d8d3c9;border-radius:8px;font:inherit;width:12rem}

/* ---------- the front page: the studio, with a way through to the shop ---------- */
.site nav a.on{color:var(--ink);font-weight:600}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;
  align-items:center;margin:26px 0 54px}
.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 12px}
.hero h1{font-size:2.5rem;line-height:1.14;margin:0 0 16px;max-width:16ch}
.hero .lead{margin:0}
.heroact{margin:26px 0 0}
.heroshot{margin:0}
/* Capped, so the portrait cannot grow the row taller than the words beside it and
   leave a band of nothing above the headline. */
.heroshot img{width:100%;max-height:470px;border-radius:12px;display:block;
  aspect-ratio:5/6;object-fit:cover;object-position:center 22%}
.heroshot figcaption{font-size:.82rem;color:var(--ink-2);margin-top:8px}

/* The one control that has to be found without looking for it. Larger than every other
   button on the site, in the river blue rather than the ink, and carrying the count --
   "37 pieces" is a better reason to press it than the word "shop". */
.btn.big{display:inline-block;margin:0;padding:16px 30px;background:var(--accent);
  border:0;border-radius:10px;color:#fff;font-size:1.12rem;font-weight:600;
  line-height:1.25;box-shadow:0 2px 14px rgba(46,126,168,.28)}
.btn.big:hover{background:#26688b}
.btn.big span{display:block;font-size:.8rem;font-weight:400;opacity:.85;margin-top:3px;
  letter-spacing:.01em}

.peek{margin:0 0 52px}
.peekhead{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.peekhead h2{font-size:1.25rem;margin:0}
.peekhead a{margin-left:auto;font-size:.92rem;color:var(--accent);text-decoration:none;
  white-space:nowrap}
.peekhead a:hover{text-decoration:underline}

.story h2{font-size:1.25rem;margin:0 0 10px}
/* No border here: .facts already ends with one, and the two together drew a double rule
   with an empty band between them. */
.facts{padding-bottom:22px}
.closer{margin-top:8px;padding:34px 0 0;text-align:center}
.closer h2{font-size:1.5rem;margin:0 0 8px}
.closer .lead{margin:0 auto 22px;max-width:44ch}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:26px;margin-bottom:36px}
  .hero h1{font-size:2rem;max-width:none}
  .heroshot{order:-1}
  .heroshot img{aspect-ratio:3/2}
  .btn.big{display:block;text-align:center}
}

/* ---------- the announcement bar ---------- */
.strip{background:var(--ink);color:#fff;text-align:center;padding:9px 16px;
  font-size:.82rem;letter-spacing:.05em}
.strip a{color:#fff}

/* ---------- browse-by entry points ---------- */
.ways{margin:0 0 52px}
.ways h2{font-size:1.25rem;margin:0 0 16px}
.waygrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.way{display:block;padding:20px 18px;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;text-decoration:none;color:inherit;transition:border-color .15s}
.way:hover{border-color:var(--accent)}
.way b{display:block;font-family:Georgia,"Iowan Old Style",Palatino,serif;font-size:1.12rem;
  font-weight:600;margin-bottom:2px}
.way span{font-size:.82rem;color:var(--ink-2)}

/* ---------- the footer the site never had ---------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);margin-top:0;
  padding:46px 18px 8px}
.footin{max-width:1120px;margin:0 auto;display:grid;gap:34px;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.footbrand .mark{display:inline-block;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.86rem;color:var(--ink);text-decoration:none;
  margin-bottom:12px}
.footbrand p{font-size:.88rem;color:var(--ink-2);max-width:44ch;margin:0}
.footnav h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px;font-family:inherit;font-weight:600}
.footnav a{display:block;font-size:.9rem;color:var(--ink);text-decoration:none;
  margin-bottom:8px}
.footnav a:hover{color:var(--accent);text-decoration:underline}
.footnav p{font-size:.88rem;color:var(--ink-2);margin:0}
.footline{max-width:1120px;margin:34px auto 0;padding-top:18px;
  border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-2)}
@media (max-width:760px){
  .footin{grid-template-columns:1fr 1fr;gap:26px}
  .footbrand{grid-column:1/-1}
}

/* ---------- Instagram ---------- */
.ig{display:inline-flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
.igmark{flex:none;display:block}

/* In the header: the mark alone, so the nav does not grow a fifth word. */
.ig-icon{color:var(--ink-2);padding:2px}
.ig-icon:hover{color:var(--accent)}

/* In the footer: a link that looks like the ones beside it, but with the mark so it is
   findable by shape rather than by reading. */
/* .footnav a is display:block, which broke the flex row and dropped the mark onto its
   own line above the words. */
.footnav a.ig-quiet{display:inline-flex}
.ig-quiet{color:var(--ink);font-size:.9rem;margin-bottom:8px}
.ig-quiet:hover{color:var(--accent);text-decoration:underline}
.ig-quiet b{font-weight:600}

/* On the front page: an actual button. A text link in a footer column is not a follow
   button, which is the whole point of putting one on the page. */
.ig-solid{padding:14px 24px;border-radius:10px;background:var(--ink);color:#fff;
  font-size:1rem;font-weight:600;flex:none}
.ig-solid:hover{background:var(--accent)}
.ig-solid b{font-weight:600}

.igband{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin:46px 0 8px;
  padding:28px 30px;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px}
.igband h2{margin:0 0 6px;font-size:1.35rem}
.igband .lead{margin:0;max-width:46ch}
.igband > div{flex:1 1 300px}
@media (max-width:560px){
  .ig-solid{width:100%;justify-content:center}
  .igband{padding:22px 20px}
}

/* ---------- The shop: one piece at a time, down the page ---------- */
/* The grid this replaced put every piece in an identical box. Fifty one-of-a-kind objects
   in fifty identical rectangles read as a catalogue of the same thing in different
   colours, which is the opposite of true. Here each piece gets a lane of its own, and the
   ovals differ in size because the pieces do. */
.lede{color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:56ch;margin:-2px 0 22px}
.run{display:flex;flex-direction:column;gap:clamp(56px,8vw,104px);
  padding:34px 0 12px;margin-top:18px;border-top:1px solid var(--rule)}
.lane{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,60px);align-items:center}
.lane.flip .art{order:2}
.lane.flip .say{order:1;text-align:right}
.art{display:flex;align-items:center;justify-content:center;min-width:0}
/* The oval is a plain rectangular JPEG rounded off here. CSS anti-aliases the edge better
   than GD does, and it keeps the pictures a fraction of the size a transparent PNG would
   be -- which on a page showing every piece at once is the difference between a shop that
   opens at once and one that loads in pieces. */
.art img{display:block;max-width:100%;height:auto;border-radius:50%;
  box-shadow:0 26px 44px -20px rgba(58,52,43,.42), 0 5px 14px rgba(58,52,43,.12);
  transition:transform .35s ease, box-shadow .35s ease}
.lane:hover .art img{transform:translateY(-3px);
  box-shadow:0 32px 52px -20px rgba(58,52,43,.5), 0 6px 16px rgba(58,52,43,.14)}
.say h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:400;letter-spacing:-.01em;margin:0 0 10px;line-height:1.2}
.say h2 a{color:inherit;text-decoration:none}
.say h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.blurb{color:var(--ink-2);line-height:1.75;max-width:36ch;margin:0 0 16px;font-size:.98rem}
.lane.flip .blurb{margin-left:auto}
.say .meta{font-size:.82rem;color:var(--ink-3,var(--ink-2));letter-spacing:.04em;margin:0}
.say .price{font-size:1.08rem;margin:9px 0 0}
.say .tag{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:7px 0 0}
.say .see{display:inline-block;margin-top:18px;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule-strong,var(--rule));padding-bottom:4px}
.say .see:hover{border-bottom-color:currentColor}

/* On a phone the alternation is meaningless -- there is only one column -- so the picture
   simply sits above its words, and the flipped rows stop being right-aligned. */
@media (max-width:720px){
  .run{gap:52px;padding-top:26px}
  .lane,.lane.flip{grid-template-columns:minmax(0,1fr);gap:18px}
  .lane.flip .art{order:0}
  .lane.flip .say{order:0;text-align:left}
  .lane.flip .blurb{margin-left:0}
  .art img{max-width:min(72vw,320px)}
}

/* A tableware lane gets a wider picture column, so a plate can actually be drawn at the
   size it deserves instead of being quietly squeezed back to the width of a pendant. */
.lane.big{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr)}
.lane.big.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.72fr)}
@media (max-width:720px){
  .lane.big,.lane.big.flip{grid-template-columns:minmax(0,1fr)}
  .lane.big .art img{max-width:min(86vw,380px)}
}