/* Volley journal — Court & Garden, "Bento" direction (1g).
   Built from design_handoff_journal_bento. Tokens are the handoff's, verbatim.

   ONE DEPARTURE, AND IT IS DELIBERATE: the handoff's photo slots are empty
   placeholders and it says so — "real garment flat-lays are still needed". We
   have none. Rather than borrow an ambient scene (the hard rules say no people
   and only garments, and our scene library is rooms, not clothes), every photo
   slot renders as the tint wall it will sit inside. The layout is final; the
   plates are waiting. */

:root {
  /* grounds and fills */
  --cream: #F6F1E6;        /* page ground (journal only) */
  --card: #FFFFFF;
  --tint: #F5EFDF;
  --sage: #E9EEDC;
  --pink-soft: #F8E6EB;
  --blush: #F6E2E7;
  /* Court & Garden: a FIELD colour, never a button. Declared for the 1h
     sticker layer (260925 journal bento); matches tokens.json color.court-pink. */
  --court-pink: #E8A6B8;
  --line: #E6E1D0;
  --pine: #2F4023;
  --grass: #5E7E44;
  --rose: #C25E7E;
  /* text */
  --ink: #2E3A22;          /* no black anywhere */
  --sub: #5C6252;
  --rose-deep: #963955;
  --grass-text: #4C6636;
  /* marks, never text */
  --fog: #7C8370;
  /* radii by role */
  --r-depict: 6px;
  --r-control: 14px;
  --r-surface: 22px;
  --r-pill: 999px;
  /* shadows: single source, pine-tinted, never grey */
  --sh-tile: 0 18px 36px rgba(47,64,35,.14);
  --sh-mat: 0 16px 32px rgba(47,64,35,.10);
  --sh-label: 0 10px 24px rgba(47,64,35,.06);
  --sh-rose: 0 8px 20px rgba(194,94,126,.28);
  --sh-grass: 0 8px 20px rgba(94,126,68,.30);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── type ──────────────────────────────────────────────────────────────── */
.fr { font-family: Fraunces, Georgia, "Times New Roman", serif; }
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 10.5px; color: var(--sub);
}

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav { display: flex; align-items: center; gap: 24px; padding: 32px 0 8px; flex-wrap: wrap; }
.mark { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 28px; letter-spacing: -.02em; text-decoration: none; }
.mark::after { content: ""; display: block; width: 40px; height: 2px; background: var(--rose); margin-top: 4px; }
.tabs {
  display: flex; align-items: center; gap: 0; height: 56px; padding: 0 22px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: transparent;
}
.tabs a { text-decoration: none; font-size: 15px; padding: 0 14px; }
.tabs a[aria-current] { font-weight: 700; }
.tabs .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fog); }
.navspace { flex: 1 1 auto; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .22s cubic-bezier(.2,.7,.1,1);
}
.btn-rose { background: var(--rose); color: var(--cream); box-shadow: var(--sh-rose); }
.btn-grass { background: var(--grass); color: var(--cream); box-shadow: var(--sh-grass); }
.btn-quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: scale(.99); }

/* ── header ────────────────────────────────────────────────────────────── */
.jhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin: 40px 0 28px; flex-wrap: wrap; }
.jhead h1 { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 132px; line-height: .82; letter-spacing: -.05em; margin: 0; }
.jhead .letter { display: flex; align-items: center; gap: 18px; max-width: 460px; }
.jhead .letter p { margin: 0; font-size: 17px; color: var(--sub); }

/* ── bento ─────────────────────────────────────────────────────────────── */
/* minmax(0,…) rather than bare fr: a grid item's default min-width is auto,
   so a long unbroken title can push a column wider than its track and shove
   the others off. The design source uses minmax for the same reason. */
.bento { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1.24fr) minmax(0, .72fr); grid-auto-rows: 520px 350px; gap: 10px; }
.tile { border-radius: var(--r-surface); overflow: hidden; position: relative; transition: transform .22s cubic-bezier(.2,.7,.1,1), box-shadow .22s; }
a.tile { text-decoration: none; color: inherit; }
a.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-tile); }
a.tile:active { transform: scale(.99); }
.tile-lead { grid-row: span 2; background: var(--tint); display: flex; align-items: flex-end; }
.tile-sage { background: var(--sage); padding: 32px; display: flex; flex-direction: column; }
.tile-photo { background: var(--tint); display: flex; align-items: flex-end; padding: 18px; }
.tile-pine { background: var(--pine); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }

/* the notched title tab, cut into the lead tile's bottom-left */
.tab {
  background: var(--cream); max-width: 470px; padding: 26px 30px 24px;
  border-top-right-radius: var(--r-surface);
  -webkit-mask-image: radial-gradient(circle at 100% 0, transparent 21.5px, #000 22px);
  mask-image: radial-gradient(circle at 100% 0, transparent 21.5px, #000 22px);
}
.tab h2 { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 50px; line-height: 1.02; letter-spacing: -.035em; margin: 8px 0 0; }
.pill-meta {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--cream); border-radius: var(--r-pill); padding: 7px 14px;
}

.tile-sage .kicker { margin-bottom: 10px; }
.tile-sage h3 { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 12px; }
.tile-sage .dek { font-size: 17px; color: var(--sub); margin: 0 0 auto; }
.rowlist { margin-top: 24px; }
.rowlist .row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1.5px solid var(--ink); padding: 14px 0 12px;
  font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 17px;
  text-decoration: none; transition: color .16s;
}
.rowlist .row:hover { color: var(--rose-deep); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border-radius: var(--r-pill); padding: 8px 15px; font-size: 14px;
  border: 1.5px solid rgba(246,241,230,.35); color: var(--cream); text-decoration: none;
}
.chip[aria-current] { background: #D9E48A; color: var(--ink); border-color: #D9E48A; } /* chartreuse only on pine */
.pinecount { display: flex; align-items: center; gap: 14px; color: var(--cream); }
.ball { width: 56px; height: 56px; border-radius: 50%; background: #D9E48A; flex: none; }

/* ── THE MATTED PLATE (design: 24px mat, radius 6, inside the tint wall) ──
   This is what makes borrowed photography sit correctly beside our cream: the
   photo is an OBJECT on a mat, not the page's ground, so its own grey or linen
   never competes with ours. Stock is licensed free for commercial use
   (Unsplash), garments only, no people and no third-party marks — the three
   things that killed the SS27 carousel on rights. */
.plate { position: absolute; inset: 0; padding: 24px; background: var(--tint); }
.plate img {
  width: 100%; height: 100%; object-fit: cover;
  /* NOT `center`. These are full-length frames — a runway shot or a hanging
     garment is 3:4 or taller, and a centred crop lands on the middle of a
     skirt. Anchoring at 28% keeps the part of the garment that carries the
     picture (neckline, shoulder, the place the eye goes) inside the plate. */
  object-position: center 28%;
  border-radius: var(--r-depict); box-shadow: var(--sh-mat); display: block;
}
.plate-lead { padding: 0; }
.plate-lead img { border-radius: 0; box-shadow: none; }

/* the empty-photo treatment — see the header note */
.slot { position: absolute; inset: 0; background: var(--tint); }
.slot::after {
  /* bottom-left, not top-left: the meta pill lives at top-left on the lead
     tile and the two collided in the first render. */
  content: attr(data-note); position: absolute; left: 20px; bottom: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; color: var(--fog);
}

/* ── the note under the grid ───────────────────────────────────────────── */
.sofar { margin: 28px 0 0; font-size: 17px; color: var(--sub); }

/* ── everything else (design: 4 columns grouped by kind) ───────────────── */
.everything { margin: 96px 0 0; }
.everything h3 { margin: 0 0 24px; }
.ecols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; }
.ecol h4 { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.ecount { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 11px; color: var(--sub); }
.ecol-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 17px; line-height: 1.25; transition: color .16s; }
.ecol-row:hover { color: var(--rose-deep); }
.ecol-row .mono { flex: none; }

@media (max-width: 860px) {
  .ecols { grid-template-columns: 1fr; gap: 32px; }
  .everything { margin-top: 56px; }
}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { margin: 120px 0 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--sub); }
.foot a { text-decoration: none; margin-right: 18px; }
.foot a:hover { color: var(--rose-deep); }

/* ── piece ─────────────────────────────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--grass); width: 0; z-index: 9; }
.titlerow { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin: 28px 0 56px; }
.titletile { background: var(--sage); border-radius: var(--r-surface); padding: 40px; }
.titletile h1 { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 104px; line-height: .92; letter-spacing: -.05em; margin: 18px 0 18px; }
.titletile h1.t-mid  { font-size: 76px; }
.titletile h1.t-long { font-size: 58px; line-height: .98; letter-spacing: -.035em; }
.titletile .dek { font-size: 21px; color: var(--sub); margin: 0; }
.metapills { display: flex; gap: 8px; flex-wrap: wrap; }
.metapills span { background: var(--cream); border-radius: var(--r-pill); padding: 7px 14px; }

.bodygrid { display: grid; grid-template-columns: 260px 1fr 260px; gap: 40px; align-items: start; }
.walllabel, .curators {
  background: var(--card); border-radius: var(--r-depict); padding: 22px 20px;
  box-shadow: var(--sh-label); font-size: 14px; color: var(--sub);
}
.walllabel h4 { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 22px; color: var(--ink); margin: 10px 0 8px; letter-spacing: -.01em; }
.curators { border-left: 2px solid var(--grass); }
.curators h4 { margin: 8px 0 8px; font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 20px; color: var(--ink); }
.body { max-width: 65ch; }
.body p { margin: 0 0 22px; }
.body h2 { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; margin: 56px 0 18px; }
.body em { color: var(--sub); }
.body a { color: var(--rose-deep); }

.quotewall { background: var(--sage); border-radius: var(--r-surface); padding: 64px; margin: 72px 0; }
.quotewall blockquote { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 300; font-style: italic; font-size: 62px; line-height: 1.06; letter-spacing: -.03em; }

.closing { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 30px; line-height: 1.22; letter-spacing: -.02em; margin: 48px 0 28px; }
.endmark { width: 22px; height: 22px; border: 2px solid var(--grass); border-radius: 50%; }

.receipts { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); }
.rlist { font-size: 14px; line-height: 1.6; color: var(--sub); }
.rlist ol { padding-left: 20px; margin: 0; }
.rlist li { margin-bottom: 8px; }
.rlist a { color: var(--rose-deep); }
.receipts ol { font-size: 14px; line-height: 1.6; color: var(--sub); padding-left: 20px; }
.receipts li { margin-bottom: 8px; }
.receipts a { color: var(--rose-deep); }
.rtoggle { display: none; }

.share { margin-top: 56px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  body { font-size: 17px; line-height: 1.6; }
  .wrap { padding: 0 12px; }
  .nav { gap: 14px; padding-top: 18px; }
  .tabs { display: none; }
  .jhead { margin: 22px 0 18px; align-items: flex-start; }
  .jhead h1 { font-size: 62px; }
  .jhead .letter { max-width: none; flex-direction: column; align-items: flex-start; gap: 12px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .tile-lead { grid-column: 1 / -1; grid-row: auto; min-height: 400px; }
  .tile-sage, .tile-photo, .tile-pine, .tile-blush, .tile-tintpiece { grid-column: span 1; min-height: 300px; }
  .tab h2 { font-size: 32px; }
  .titlerow { grid-template-columns: 1fr; margin-bottom: 32px; }
  .titletile { padding: 24px; }
  .titletile h1 { font-size: 44px; }
  .titletile h1.t-mid { font-size: 38px; }
  .titletile h1.t-long { font-size: 32px; }
  .titletile .dek { font-size: 18px; }
  .bodygrid { grid-template-columns: 1fr; gap: 28px; }
  .walllabel { display: none; }        /* the room label is desktop chrome */
  .quotewall { padding: 28px; margin: 44px 0; }
  .quotewall blockquote { font-size: 30px; }
  .closing { font-size: 24px; }
  /* receipts collapse behind a 48h row */
  .rtoggle { display: block; width: 100%; height: 48px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; padding: 0; cursor: pointer; }
  .receipts[data-collapsed="true"] ol, .receipts[data-collapsed="true"] .rhead { display: none; }
}

/* AX1 and up: chrome changes shape rather than shrinking */
@media (max-width: 860px) and (min-resolution: 1x) {
  .jhead .letter .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  a.tile:hover { transform: none; }
}

/* ── 1h · THE STICKER BOARD (Tate 2026-09-25, star in COURT-PINK) ─────────
   He chose 1h over the clean 1g, with one amendment: the star is court-pink
   #E8A6B8, not chartreuse. The README asked for chartreuse and said out loud
   that it "bends a rule" — chartreuse off pine — naming court-pink or cream as
   the fallbacks. He took court-pink, so nothing bends. Worth recording because
   nothing here would have caught it: "chartreuse only on pine" is a FEEL-lens
   item in CLAUDE.md, a human check, and the pre-cut sweep runs on app builds,
   not on this site.

   EVERY STICKER IS DECORATION. `pointer-events: none` so a tap always reaches
   the tile underneath, and the markup carries `aria-hidden="true"` so a screen
   reader never reads one. The prototype set pointer-events and NOT aria-hidden;
   the README claims both. Both are here.

   NONE OF THEM CARRIES MEANING, which is the README's binding rule for this
   layer, so the 4.5:1 contrast floor does not apply to them — they are marks,
   not type to be understood. The one that comes closest is the ticket stub,
   because it names a read time, and it is therefore only ever placed on a tile
   that HAS one. */
/* The minmax() columns moved UP to the base `.bento` rule (search "minmax").
   THEY CANNOT LIVE DOWN HERE. This block is appended AFTER the
   `max-width: 860px` media query, and a later rule of equal specificity wins
   regardless of the media query — so a `.bento { grid-template-columns: … }`
   at the end of the file silently overrode the phone's two-column collapse
   and left the bento at three columns on a 375px screen. It looked perfect on
   desktop. Caught by emulating a phone, not by reading the diff. */

.sticker { position: absolute; pointer-events: none; z-index: 3; }
.sticker svg { width: 100%; height: 100%; display: block; }

/* The star, and the pin through it. */
.sticker-star {
  top: 26px; right: 30px; width: 150px; height: 150px;
  transform: rotate(14deg);
  filter: drop-shadow(0 6px 8px rgba(47, 64, 35, .28));
}
.sticker-pin {
  top: 52px; right: 92px; width: 34px; height: 34px;
  filter: drop-shadow(3px 5px 3px rgba(47, 64, 35, .35));
}

/* The polaroid lead: a white border and one degree off square. The rotation is
   on the TILE, so its hover lift has to restate it or the tile snaps straight
   on hover — which is the kind of thing that looks like a bug and is a missing
   transform. */
.tile-polaroid {
  border: 10px solid #FFF;
  box-shadow: 0 14px 30px rgba(47, 64, 35, .16);
  transform: rotate(-1deg);
}
a.tile-polaroid:hover { transform: rotate(-1deg) translateY(-3px); }
a.tile-polaroid:active { transform: rotate(-1deg) scale(.99); }

/* The two tiles the grid always had room for and never had. */
.tile-blush, .tile-tintpiece {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tile-blush { background: var(--blush); overflow: visible; }
.tile-tintpiece { background: var(--tint); }
/* THE PHOTO FILLS THESE TILES, so the shared `.plate` rule has to be undone
   here. `.plate` is written for the piece-page hero: `padding: 24px` and
   `background: var(--tint)`. On a bento tile that does two wrong things at
   once — it insets the photograph by 24px on every side, AND it paints tint
   over the tile's own colour, which is why the blush tile came out looking
   tint. `.plate-lead` already solved this for the lead tile with `padding: 0`;
   these two need the background cleared as well, because unlike the lead they
   sit on a tile whose colour is part of the design. */
.tile-blush .plate, .tile-tintpiece .plate { padding: 0; background: transparent; }
.tile-blush .plate img, .tile-tintpiece .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0; box-shadow: none;
}
.tiletext {
  position: relative; z-index: 2; margin: 0 18px 18px;
  background: var(--cream); border-radius: var(--r-depict); padding: 16px 18px;
}
.tiletext .kicker { margin-bottom: 8px; }
.tiletext h3 {
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 26px;
  line-height: 1.04; letter-spacing: -.03em; margin: 0;
}

/* "on loan" — it overhangs the tile corner, which is why .tile-blush is
   overflow:visible and not hidden like every other tile. */
.sticker-onloan {
  top: -14px; right: -10px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--court-pink); border: 5px solid #FFF; box-sizing: border-box;
  transform: rotate(-12deg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-style: italic; font-size: 19px; color: var(--ink);
  box-shadow: 0 4px 10px rgba(47, 64, 35, .18);
}

/* The ticket stub. Only ever on a tile with a real read time. */
.sticker-stub {
  right: 88px; top: 74px; white-space: nowrap; transform: rotate(7deg);
  background: #FFF; border: 2px dashed var(--fog); border-radius: var(--r-depict);
  padding: 8px 14px; font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}

/* ── the header doodles ─────────────────────────────────────────────────── */
.jtitle { position: relative; }
.doodle { position: absolute; pointer-events: none; overflow: visible; z-index: 0; }
.doodle-loop { left: -30px; top: -40px; width: 560px; height: 210px; }
.jtitle h1 { position: relative; z-index: 1; }
.doodle-note {
  position: absolute; font-style: italic; font-weight: 500; white-space: nowrap;
  pointer-events: none;
}
.doodle-note-new { left: 470px; top: -18px; transform: rotate(-6deg); font-size: 22px; color: var(--rose-deep); }
.letterwrap { position: relative; display: inline-flex; align-items: center; }
.doodle-arrow { left: -128px; top: -30px; width: 120px; height: 90px; }
.doodle-note-sched { left: -330px; top: -44px; transform: rotate(-4deg); font-size: 20px; color: var(--grass-text); }

@media (max-width: 860px) {
  /* Phone keeps the star and the pin and drops the rest — the README's call.
     A doodle positioned off the left of a 375px viewport is a horizontal
     scrollbar, not a decoration. */
  .doodle, .doodle-note, .sticker-stub { display: none; }
  .sticker-star { width: 84px; height: 84px; top: 16px; right: 18px; }
  .sticker-pin { top: 32px; right: 54px; }
  .sticker-onloan { width: 72px; height: 72px; font-size: 15px; top: -10px; right: -6px; }
}

/* ── A PHONE GETS ONE COLUMN, NOT TWO (2026-09-25) ───────────────────────
   The 860px block collapses the bento from three columns to two. At 375px that
   is two ~170px tracks, and `.tile-sage h3` is 46px Fraunces — so "Notes about
   the closet you already have" set one word per line and "already" ran out past
   the tile's right edge. PRE-EXISTING, not introduced by the sticker work: the
   sage tile has been in that two-column collapse since the bento shipped. It
   surfaced now only because emulating a phone is what finally happened.

   Two columns is right for a tablet and wrong for a phone, so the breakpoint
   splits rather than the type shrinking twice. Below 640px everything stacks
   full width, which is also what the handoff's phone index draws. */
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .tile-lead, .tile-sage, .tile-photo, .tile-pine,
  .tile-blush, .tile-tintpiece { grid-column: 1 / -1; }
  .tile-sage { padding: 24px; }
  .tile-sage h3 { font-size: 32px; }
  .tile-sage .dek { font-size: 16px; }
  .tiletext h3 { font-size: 22px; }
  /* The polaroid's tilt costs horizontal room it does not have at 375px, and a
     rotated full-bleed tile is what puts a sideways scrollbar on a phone. */
  .tile-polaroid { transform: none; border-width: 8px; }
  a.tile-polaroid:hover, a.tile-polaroid:active { transform: none; }
}