/* ============================================================
   PAPER — theme stylesheet (recreated from the pen, the studio's pen)
   The pen's styles are kept as-is except:
   - `.mybutton`'s background was `background-color:
     radial-gradient(from 50% 60%, white, #f6f6f6)` — both the property
     (radial-gradient isn't a valid background-color value) and the
     gradient syntax (`from 50% 60%` isn't valid; needs `circle at`) were
     invalid, so the sheen never rendered. Fixed to `background:
     radial-gradient(circle at 50% 60%, #fff, #f6f6f6)` — same intended
     highlight, now visible. The hover rule shares the same fix.
   - body/#hero used fixed viewport heights sized for the CodePen preview
     pane (`body{height:100vh}`, `#hero{height:700px;max-height:100svh}`).
     This is a real, normally-scrolling page carrying more content than
     the pen's single line, so those became `min-height` + a flex column,
     letting the page grow instead of clipping.
   - the pen's own nav (logo + pill nav items) is dropped entirely — theme
     pages carry no nav of their own, pen or otherwise. h1's flat 5rem
     font-size is now clamped so the ghost-text motif survives small
     screens without overflowing.
   - new elements (hero_inner, badge, theme_card, theme_tags, theme_actions)
     are styled below, in the pen's own neumorphic idiom — raised pills for
     anything clickable (buttons), inset "pressed" pills for tags, so the
     page demonstrates both directions of the shadow illusion.
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  background: #E8E8E8;
}

body {
  background: #E8E8E8;
  color: #808080;
  margin: 0;
  font-family: arial;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 {
  color: #E8E8E8;
  text-shadow:
    -0.02em -0.02em 0.04em #ffffff,
    0.02em 0.03em 0.05em #b8b8bc;
  transition: all .2s ease-in-out;
  font-size: clamp(2.75rem, 12vw, 5rem);
  margin: 0;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* min-height, not just flex-grow. The page used to be nothing but #hero, so
   `flex: 1 0 auto` inside a 100vh body column was enough to fill the screen.
   With the second sheet and the collection band under it there is no free
   space left to grow into, and the cover would collapse to its content height
   the moment the document passed one screen. The floor is what keeps the
   cover a cover, and what makes the sheet below it something you scroll TO. */
#hero {
  flex: 1 0 auto;
  min-height: 100svh;
  padding-block: 3rem;
  justify-content: center;
}

section {
  padding: 2rem;
}

a {
  color: #808080;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.mybutton {
  padding: 20px;
  margin: 10px;
  background: radial-gradient(circle at 50% 60%, #fff, #f0f0f0);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 -6px 10px rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  transition: all .2s ease-in-out;
  display: inline-block;
  /* keeps the button permanently on its own compositor layer so the hover
     scale transition doesn't promote/demote it mid-animation — that
     promotion boundary is what was making the text flash thin then thick */
  will-change: transform;
  transition: all .2s ease;
}

.mybutton:hover,
.mybutton:focus-visible {
  filter: brightness(.98);
  transform: scale(.99);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 -6px 10px rgba(255, 255, 255, 0.6);
}

a:focus-visible {
  outline: 2px solid #6b6b6b;
  outline-offset: 3px;
}

/* ============================================================
   Everything below is new: the hero content column + the
   theme-for-sale kit (badge, card, tags, buttons), styled in the
   pen's own neumorphic idiom.
   ============================================================ */

.hero_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 3svh, 1.75rem);
}



.badge {
  margin: 0;
  padding: .5em 1.3em;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #6b6b6b;
  background: radial-gradient(circle at 50% 60%, #fff, #f6f6f6);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .15), 0 -4px 8px rgba(255, 255, 255, .6);
  border-radius: 100px;
}

.theme_card {
  background: radial-gradient(circle at 50% 0%, #fff, #f2f2f2);
  border-radius: 28px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .12), 0 -8px 16px rgba(255, 255, 255, .7);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 640px;
  color: #4a4a4a;
  font-size: clamp(.92rem, 1.6svh, 1.05rem);
  line-height: 1.65;
  text-align: left;
}

.theme_card p {
  margin: 0 0 1em;
}

.theme_card p:last-of-type {
  margin-bottom: 0;
}

.theme_tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.25em 0 0;
  padding: 0;
}

.theme_tags li {
  padding: .5em 1.1em;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: bold;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b6b6b;
  background: #E8E8E8;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .12), inset -3px -3px 6px rgba(255, 255, 255, .7);
}

.theme_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.25em;
  padding: 0;
}

.theme_actions .mybutton {
  color: #5a5a5a;
  font-size: .85rem;
}

/* ============================================================
   THE SECOND SHEET + THE COLLECTION BAND (2026-08-10)

   Both are written in the pen's own neumorphic idiom and add no new
   material: one raised surface, one shadow pair, no borders, no color
   doing any work. Nothing here is a color the pen did not already use.

   THE INK IS #4a4a4a, NOT body's #808080. The pen's body color is
   3.22:1 on the #E8E8E8 sheet, which is fine for the decorative ghost
   h1 and fails for anything anyone reads. .theme_card already opts up
   to #4a4a4a (7.23:1) and every reading surface below does the same.
   If the sheet color ever moves, both figures move with it.
   ============================================================ */

h2 {
  margin: 0 0 .6em;
  color: #4a4a4a;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.25;
  /* the engraved look on a light surface is a white highlight UNDER the
     glyph, not the h1 treatment. h1 is legible as a ghost because it is
     5rem of decoration; at reading size that same emboss is unreadable,
     so the ink here is real ink and the shadow is only the bevel. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}

/* The global `a` rule is the pen's NAV-PILL styling (bold, uppercase,
   no underline) and it applies to every link on the page, so a link
   inside a sentence inherits it and shouts. .prose_link hands all three
   back. Any new link in running copy needs this class. */
.prose_link {
  font-weight: inherit;
  text-transform: none;
  color: #3d3d3d;
  text-decoration: underline;
  text-decoration-color: #b0b0b0;
  text-underline-offset: .18em;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.prose_link:hover,
.prose_link:focus-visible {
  color: #1f1f1f;
  text-decoration-color: #6b6b6b;
}

/* ---------- the second sheet ---------- */

#about {
  padding-block: clamp(3rem, 9svh, 6rem);
  display: flex;
  justify-content: center;
}

.sheet {
  background: radial-gradient(circle at 50% 0%, #fff, #f2f2f2);
  border-radius: 28px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .12), 0 -8px 16px rgba(255, 255, 255, .7);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 640px;
  color: #4a4a4a;
  font-size: clamp(.92rem, 1.6svh, 1.05rem);
  line-height: 1.65;
}

.sheet p {
  margin: 0 0 1.6em;
}

.sheet p:last-child {
  margin-bottom: 0;
}

.sheet h2+p {
  margin-top: 0;
}

.sheet p+h2 {
  margin-top: 0;
}

/* ---------- the collection band ---------- */

.alsolike {
  padding-block: clamp(2rem, 6svh, 4rem) clamp(3rem, 9svh, 6rem);
}

.alsolike_inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #4a4a4a;
}

.alsolike_lead {
  margin: 0 auto 2.5em;
  max-width: 46ch;
  font-size: clamp(.88rem, 1.5svh, 1rem);
  line-height: 1.65;
}

.alsolike_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* A raised card, same shadow pair as .theme_card at a smaller throw. The
   pen has no hover state for a surface (only for pills), so the press on
   hover is the tags' INSET shadow borrowed: the card goes from raised to
   pressed, which is the one gesture this material can make. */
.tt_card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.6rem 1.4rem;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, #fff, #f2f2f2);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .11), 0 -6px 12px rgba(255, 255, 255, .7);
  text-align: left;
  font-weight: normal;
  text-transform: none;
  color: #4a4a4a;
  transition: box-shadow .2s ease, background .2s ease;
}

.tt_card:hover,
.tt_card:focus-visible {
  background: #E8E8E8;
  box-shadow: inset 4px 4px 9px rgba(0, 0, 0, .12), inset -4px -4px 9px rgba(255, 255, 255, .7);
}

.tt_name {
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #3d3d3d;
}

.tt_line {
  font-size: clamp(.85rem, 1.4svh, .95rem);
  line-height: 1.55;
}

.alsolike_more {
  margin: 2.5em 0 0;
  font-size: clamp(.85rem, 1.4svh, .95rem);
}

/* Twin pair — html.reduce-motion is the main site's motion toggle,
   stamped pre-paint by /js/deck.js. Edit both together. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

html.reduce-motion * {
  transition: none !important;
}