/* ============================================================
   HOME_catalog — the reading room

   The same paper, ink and olive as the customer page. Tokens are
   copied from the `.simple` block in ../app/globals.css so this
   folder opens on its own, with no build and no dev server. If the
   palette moves there, move it here too.

   One accent on the whole page, the olive. Everything else is
   paper, ink and hairlines, so the only real colour is the
   furniture itself.
   ============================================================ */

:root {
  --paper: #ffffff;
  --card: #ffffff;
  --sunk: #e3ded8;
  --ink: #3b3735;
  --ink-2: #6e6867;
  --line: rgba(75, 71, 71, .16);
  --line-2: rgba(75, 71, 71, .28);
  --fill: #606151;
  --fill-ink: #ffffff;
  --veil: rgba(255, 255, 255, .88);
  --shadow: 0 1px 2px rgba(60, 45, 30, .05), 0 14px 36px rgba(60, 45, 30, .08);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --band: clamp(54px, 7.4vw, 108px);
  color-scheme: light;
}

/* White is the default, deliberately.

   There is no prefers-color-scheme rule here, so a viewer whose machine is set
   to dark still opens this page on paper. A catalogue is looked at the way a
   printed one is, and every one of these shops photographs its furniture on a
   white sweep, so a dark page puts a hundred white squares on a dark ground.

   Dark is still there, but only when someone asks for it with the toggle, which
   stamps data-theme on the root and is remembered per browser. This is the one
   place the page departs from .simple in ../app/globals.css, which does follow
   the machine. */
:root[data-theme="dark"] {
  --paper: #262523;
  --card: #2e2d2a;
  --sunk: #383632;
  --ink: #f2efec;
  --ink-2: #a39d98;
  --line: rgba(244, 239, 230, .14);
  --line-2: rgba(244, 239, 230, .26);
  --fill: #a9bb95;
  --fill-ink: #23211c;
  --veil: rgba(38, 36, 31, .86);
  --shadow: 0 14px 40px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* hidden has to mean hidden, everywhere on this page.

   A class that sets display outranks the browser's own [hidden] rule, and
   several things here do set it: .sheet is grid, .faves is inline-flex. Both
   have already been bitten. The vendor sheet stayed on screen as an invisible
   full page panel swallowing every click, and the "Try them in a room" button
   showed up with nothing hearted. One rule closes off the whole class of it. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 19px; line-height: 1.5; letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
main, footer { width: min(1240px, 100%); margin-inline: auto; padding-inline: 22px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fill); outline-offset: 3px; }

/* ------------------------------------------------------------------ nav */

.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--veil); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  width: min(1240px, 100%); margin-inline: auto; padding: 0 18px; min-height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.home {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  padding: 9px 14px; margin-inline-start: -14px; border-radius: 10px; min-height: 44px;
}
.home:hover { background: var(--sunk); }
.home-icon { width: 32px; height: 32px; display: block; color: var(--fill); flex: 0 0 auto; }
.home-words { display: grid; gap: 0; line-height: 1.12; }
.home-words b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.home-words em {
  font-family: var(--serif); font-style: italic; font-size: 13px; font-weight: 400;
  color: var(--ink-2); letter-spacing: .01em;
}
.top-right { display: flex; align-items: center; gap: 4px; }
.theme {
  border: 0; background: none; cursor: pointer; color: var(--ink);
  font-size: 17px; font-weight: 500; padding: 9px 14px; border-radius: 10px; min-height: 44px;
}
.theme:hover { background: var(--sunk); }

/* the bag in the corner, for shops who want to be in here */
.vendor {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: none; color: var(--ink);
  font-size: 16px; font-weight: 500; padding: 8px 15px; min-height: 44px; border-radius: 999px;
}
.vendor:hover { background: var(--sunk); border-color: var(--ink); }
.vendor svg { width: 19px; height: 19px; display: block; flex: 0 0 auto; }

/* ------------------------------------------------------- the vendor sheet */

.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.sheet-back { position: absolute; inset: 0; background: rgba(28, 25, 22, .44); }
.sheet-panel {
  position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px; padding: 30px 28px 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.sheet-panel h2 {
  margin: 0 0 12px; font-family: var(--serif); font-size: 31px; font-weight: 400;
  line-height: 1.12; letter-spacing: -.018em;
}
.sheet-shut {
  position: absolute; top: 12px; right: 14px; border: 0; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--ink-2); padding: 6px 10px; border-radius: 10px;
}
.sheet-shut:hover { background: var(--sunk); color: var(--ink); }
.sheet-form { display: grid; gap: 14px; margin-top: 22px; }
.sheet-form label { display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.sheet-form input, .sheet-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; min-height: 46px;
  width: 100%; resize: vertical;
}
.s-send {
  border: 0; border-radius: 10px; background: var(--fill); color: var(--fill-ink);
  font: inherit; font-size: 18px; font-weight: 500; padding: 14px 24px; min-height: 52px;
  cursor: pointer; margin-top: 4px;
}
.s-send:hover { opacity: .86; }
.sheet-said { padding-top: 2px; }

@media (max-width: 760px) {
  .vendor span { display: none; }
  .vendor { padding: 8px 12px; }
}

/* the row of rooms, scrolls sideways on a phone */
.rooms { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 54px; z-index: 19; }
.rooms-in {
  width: min(1240px, 100%); margin-inline: auto; padding: 9px 18px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.rooms-in::-webkit-scrollbar { display: none; }
.room {
  border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px; min-height: 40px;
}
.room:hover { color: var(--ink); border-color: var(--line-2); }
.room.on { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.room i { font-style: normal; opacity: .6; margin-inline-start: 6px; font-size: 13px; }
.room.on i { opacity: .75; }

/* ----------------------------------------------------------------- head */

.head { padding-block: 52px 8px; max-width: 46ch; }
.eyebrow {
  margin: 0 0 16px; font-size: 13px; line-height: 1; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
h1 {
  margin: 0; font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); font-weight: 400;
  line-height: 1.1; letter-spacing: -.012em;
}
/* the second line of the heading is a line break, not a change of voice */
h1 em { font-style: normal; display: block; }
.lede { margin: 14px 0 0; color: var(--ink-2); font-size: 20px; max-width: 58ch; letter-spacing: -.012em; }
.note { margin: 0; color: var(--ink-2); font-size: 16px; }

/* the search line and the shop filter */
.sift { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-block: 26px 4px; }
/* the tally is a line of text beside them, not a control, so it keeps its own size */
.sift .tally { height: auto; font-size: 15px; }
/* Every control in this row is the same height, the same radius and the same
   border. A <select> will not take a height on its own: the platform draws it
   and sizes it to taste, which is why the two dropdowns sat shorter than the
   search box and the Favourites button. appearance:none hands the drawing back
   to us, and the chevron is painted on as a background. */
.sift > * { height: 48px; border-radius: 10px; font-size: 17px; }

.find {
  flex: 1 1 260px; min-width: 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-2); padding: 0 14px;
}
.find::placeholder { color: var(--ink-2); }

.shops {
  -webkit-appearance: none; appearance: none;
  background-color: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  padding: 0 38px 0 14px; cursor: pointer; line-height: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236e6867' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.shops:hover { border-color: var(--ink); }
:root[data-theme="dark"] .shops {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a39d98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* the favourites filter, beside the shop one */
.faves {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  padding: 0 16px; white-space: nowrap;
}
.faves:hover { background: var(--sunk); }
.faves b { font-size: 19px; font-weight: 400; line-height: 1; }   /* same as .heart on a card */
.faves i { font-style: normal; color: var(--ink-2); font-size: 15px; }
.faves.on { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.faves.on i { color: var(--fill-ink); opacity: .75; }
.faves:disabled { opacity: .5; cursor: default; }
.faves:disabled:hover { background: var(--card); }

.tally { font-size: 15px; color: var(--ink-2); white-space: nowrap; padding-inline: 2px; }

/* ------------------------------------------------------------- sections */

.aisle { padding-block: 0 var(--band); scroll-margin-top: 118px; }
.aisle-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: 40px 22px; border-top: 1px solid var(--line); margin-top: 8px; flex-wrap: wrap;
}
.aisle-head h2 {
  margin: 0; font-family: var(--serif); font-size: clamp(27px, 3vw, 38px); font-weight: 400;
  line-height: 1.12; letter-spacing: -.018em;
}
.aisle-head .note { text-align: right; }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 30px 20px; }

/* --------------------------------------------------------------- a piece

   The photograph is the link. The name sits under it, and the shop's own
   mark sits under the name, so you know whose showroom you are about to
   open before you open it. */

/* min-width 0 on the card and everything in it. A grid item defaults to
   min-width auto, so one long unbroken name or one nowrap pill widens the whole
   track and shoves every other card out of line. */
.piece { display: grid; gap: 9px; align-content: start; min-width: 0; }
.piece > * { min-width: 0; max-width: 100%; }
.shot {
  display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.shot img {
  /* The whole piece, shrunk until it fits the square, never cropped to fill it.
     A sofa with its arms cut off is not a photograph of that sofa. */
  width: 100%; height: 100%; object-fit: contain; padding: 7%; display: block;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  background: var(--sunk);
}
.shot:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.shot:hover img { transform: scale(1.04); }
.shot img.gone { padding: 22%; opacity: .32; }

/* The heart sits on the photograph, bottom right, and is NOT inside the link.
   A button inside an anchor is invalid and the press would fight the link, so
   the anchor and the heart are siblings in .shot-wrap and the heart is laid
   over it. Hence the wrapper: .shot keeps overflow hidden for the zoom, and a
   heart inside it would be clipped. */
.shot-wrap { position: relative; display: block; }
.heart {
  position: absolute; right: 9px; bottom: 9px; z-index: 2;
  width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; line-height: 1;
  font-size: 19px; color: var(--ink-2);
  background: var(--veil); border: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s cubic-bezier(.32,.72,.26,1);
}
.heart:hover { color: var(--ink); border-color: var(--line-2); transform: scale(1.07); }
.heart:active { transform: scale(.94); }
.heart.on { color: var(--fill); border-color: var(--fill); background: var(--card); }
.heart.on:hover { color: var(--fill); }

.name {
  margin: 0;    /* it is a <p> when the piece is ours */
  overflow-wrap: anywhere;
  font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
  padding: 0 2px; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.name:hover { text-decoration: underline; text-underline-offset: 2px; }

/* the shop's mark, under the name */
.mark {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 2px;
  font-size: 14px; color: var(--ink-2); text-decoration: none; letter-spacing: -.005em;
  justify-self: start; border-radius: 6px;
}
.mark:hover { color: var(--ink); }
.mark img {
  width: 17px; height: 17px; border-radius: 4px; display: block; flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line); object-fit: contain;
}
.mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* our own pieces: no outward link, so nothing here should invite a press */
.shot-ours { cursor: default; }
.shot-ours:hover { border-color: var(--line); box-shadow: none; }
.shot-ours:hover img { transform: none; }
.mark-ours { cursor: default; }
.mark-ours:hover { color: var(--ink-2); }
.only {
  justify-self: start; margin: -2px 2px 0;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fill-ink); background: var(--fill);
  padding: 3px 9px; border-radius: 999px;
}

/* The flat shelf, used by every sort but "By aisle". One grid, no headings,
   because once the pieces are mixed up a heading would be lying about what sits
   under it. */
.shelf-flat { padding-block: 34px 10px; border-top: 1px solid var(--line); margin-top: 8px; }

/* ------------------------------------------------------------- the pager */

.pages {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px;
  padding-block: 10px 70px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 34px;
}
.page {
  min-width: 44px; min-height: 44px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--ink);
  border-radius: 10px; font-size: 17px; font-weight: 500;
}
.page:hover:not(:disabled) { background: var(--sunk); border-color: var(--line-2); }
.page.on { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.page:disabled { opacity: .36; cursor: default; }
.page-gap { color: var(--ink-2); padding: 0 2px; }
.page-of { width: 100%; text-align: center; font-size: 15px; color: var(--ink-2); margin: 0 0 4px; }

@media (max-width: 700px) {
  .pages { padding-block: 6px 52px; gap: 6px; }
  .page { padding: 8px 11px; font-size: 16px; }
}

/* nothing matched */
.none { padding-block: 60px 80px; display: grid; gap: 12px; justify-items: start; }
.none b { font-family: var(--serif); font-size: 27px; font-weight: 400; }
.clear {
  border: 1px solid var(--line-2); background: none; color: var(--ink); border-radius: 10px;
  font-size: 17px; font-weight: 500; padding: 10px 18px; min-height: 44px; cursor: pointer;
}
.clear:hover { background: var(--sunk); }

/* ---------------------------------------------------------------- footer */

.foot {
  padding-block: 40px 56px; border-top: 1px solid var(--line); margin-top: 8px;
  display: grid; gap: 12px; font-size: 15px; color: var(--ink-2);
}
.foot p { margin: 0; max-width: 72ch; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
/* the shop list at the foot is set exactly like the mark under a card, so a
   shop's name reads the same wherever it appears: 14px, regular, the same
   15px mark beside it */
.foot-shops { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.foot-shops a, .foot-shops span { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.foot-shops img { width: 17px; height: 17px; border-radius: 4px; border: 1px solid var(--line); object-fit: contain; background: var(--card); }

@media (max-width: 700px) {
  body { font-size: 18px; }
  main, footer { padding-inline: 16px; }
  .top-in, .rooms-in { padding-inline: 12px; }
  .head { padding-block: 34px 4px; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .heart { right: 7px; bottom: 7px; width: 40px; height: 40px; font-size: 20px; }
  .sift { gap: 8px; }
  .faves { flex: 1 1 auto; justify-content: center; }
  .aisle-head { padding-block: 30px 18px; }
  .aisle-head .note { text-align: left; }
  .aisle { scroll-margin-top: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* Hand the hearted pieces to the render app, which is a separate page on a
   separate port and so cannot read this one's favourites for itself. */
.try-room { border-color: currentColor; }
.try-room[disabled] { opacity: .55; cursor: progress; }