@charset "utf-8";

/* ==========================================================================
   Pens by Phil — pensbyphil.com

   The pen photographs are silhouetted PNGs, so they can lie on any surface.
   The site treats that surface as a lit display case: a deep warm near-black,
   with a soft pool of light behind each pen and a cast shadow beneath it.
   Everything else stays quiet so the wood and the metal do the talking.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — warm, not tinted black */
  --ground: #171310;
  --lift: #201b16;

  /* Ink */
  --cream: #efe8dc;
  --cream-soft: #a79b8b;
  --cream-faint: #857a6d;

  /* Metals */
  --brass: #c9954a;
  --brass-dim: #8d6733;

  /* Rules */
  --rule: #332c25;
  --rule-strong: #4a4038;

  /* Type */
  --face: "Spectral", Georgia, "Times New Roman", serif;

  --size-display: clamp(2.35rem, 1.2rem + 4.4vw, 4.25rem);
  --size-title: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --size-heading: clamp(1.3rem, 1.14rem + 0.7vw, 1.6rem);
  --size-name: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --size-lede: clamp(1.12rem, 1.04rem + 0.4vw, 1.32rem);
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;

  /* Rhythm */
  --measure: 60ch;
  --gutter: clamp(1.35rem, 4vw, 3.25rem);
  --wrap: 64rem;
  --wrap-wide: 76rem;
  --pen: 44rem;
  --band: clamp(4rem, 9vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--face);
  font-size: var(--size-body);
  font-weight: 300;
  line-height: 1.74;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: var(--brass-dim);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

a:hover {
  color: var(--brass);
  text-decoration-color: var(--brass);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

::selection {
  background: var(--brass-dim);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--wrap-wide); }

.measure { max-width: var(--measure); }

.band { padding-block: var(--band); }

.band--continued { padding-top: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.15rem;
  background: var(--brass);
  color: #17130f;
  text-decoration: none;
}

.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-block: 1rem;
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover { color: var(--cream); }

.wordmark em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  font-size: var(--size-small);
}

.nav a {
  text-decoration: none;
  color: var(--cream-soft);
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover { color: var(--cream); }

.nav a[aria-current="page"] {
  color: var(--cream);
  border-bottom-color: var(--brass);
}

/* The nav wraps to its own line on small screens, so the bar is tightened
   to keep the sticky header from eating the viewport. */
@media (max-width: 32rem) {
  .masthead__inner { padding-block: 0.7rem; }

  .wordmark { font-size: 1.1rem; }

  .nav { gap: 0.25rem 1.25rem; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   5. The stage — a pen lying in a pool of light
   -------------------------------------------------------------------------- */

.stage {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The photographs hold about 850px of real detail, so the pen is inset well
   inside the column rather than stretched to fill it. Its left edge lines up
   with the type; the space to its right is deliberate. */
.pen__hold { max-width: var(--pen); }

/* A pen's negative bottom margin would otherwise let a following background
   paint over its cast shadow. */
.stage + .closing { margin-top: clamp(2.5rem, 6vw, 5rem); }

main > .stage:last-child { padding-bottom: clamp(2.5rem, 6vw, 5rem); }

/* .stage matches .wrap exactly, so a pen lines up with the words about it. */

/* Each PNG carries transparent padding above and below the pen. The trim
   values below are that padding measured as a percentage of the image width,
   pulled back with negative margins so spacing is measured from the pen
   itself rather than from the empty canvas around it. */
.pen {
  margin: 0;
  position: relative;
  margin-block: calc(-1 * var(--trim-t, 8%)) calc(-1 * var(--trim-b, 8%));
  background: radial-gradient(
    ellipse 58% 46% at 50% 52%,
    rgba(233, 201, 152, 0.15),
    rgba(233, 201, 152, 0.05) 45%,
    rgba(233, 201, 152, 0) 72%
  );
}

.pen img {
  width: 100%;
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.pen--front    { --trim-t: 10.6%; --trim-b: 10.23%; }
.pen--platinum { --trim-t: 7.69%; --trim-b: 7.64%; }
.pen--americana{ --trim-t: 8.15%; --trim-b: 8.66%; }
.pen--redwood  { --trim-t: 8.56%; --trim-b: 7.97%; }
.pen--cocobolo { --trim-t: 8.20%; --trim-b: 8.52%; }
.pen--maple    { --trim-t: 6.63%; --trim-b: 6.58%; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: clamp(3rem, 8vw, 6.5rem); }

.hero__title {
  font-size: var(--size-display);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 30ch;
}

/* The slogan is an antithesis, so each half gets its own line and the
   contrast is carried by the setting as well as the words. */
.hero__title span,
.hero__title em { display: block; }

.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}

.hero__lede {
  margin-top: 1.75rem;
  max-width: 44ch;
  font-size: var(--size-lede);
  font-weight: 300;
  line-height: 1.6;
  color: var(--cream-soft);
}

/* Left-aligned under the headline, and held well under the photographs'
   real detail width (~850px) so upscaling artifacts stay out of sight. */
.hero__stage { margin-top: clamp(1.75rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   7. Page headers
   -------------------------------------------------------------------------- */

.pagehead { padding-block: clamp(3.25rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }

.pagehead__title {
  font-size: var(--size-title);
  font-weight: 200;
  letter-spacing: -0.024em;
}

.pagehead__lede {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: var(--size-lede);
  font-weight: 300;
  line-height: 1.62;
  color: var(--cream-soft);
}

/* --------------------------------------------------------------------------
   8. Prose
   -------------------------------------------------------------------------- */

.prose { color: var(--cream-soft); }

.prose h2 {
  font-size: var(--size-heading);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 0.9rem;
}

.prose h3 {
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 0.55rem;
}

.prose :is(h2, h3) + p { margin-top: 0; }

.prose p + :is(h2, h3) { margin-top: 2.3rem; }

.prose strong { font-weight: 600; color: var(--cream); }

.prose em { font-style: italic; }

.section-title {
  font-size: var(--size-heading);
  font-weight: 400;
  margin-bottom: 2rem;
}

.actions { margin-top: 2rem; }

.columns {
  display: grid;
  gap: clamp(2.25rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .columns--split { grid-template-columns: 1.1fr 1fr; }
  .columns--split > * { max-width: 52ch; }
}

/* --------------------------------------------------------------------------
   9. Listing — the gallery price line
   -------------------------------------------------------------------------- */

/* Space belongs between pieces, not inside them: the entry stays tucked
   under its pen, and the gap opens up before the next one. */
.piece { padding-bottom: clamp(3rem, 7vw, 6rem); }

.entry { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

.listing {
  display: flex;
  align-items: baseline;
  gap: 1.35rem;
}

.listing__name {
  font-size: var(--size-name);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.listing__name em {
  font-style: italic;
  font-weight: 300;
  color: var(--cream-soft);
}

.listing__lead {
  flex: 1 0 3.5rem;
  height: 1px;
  background: var(--rule-strong);
  transform: translateY(-0.3em);
}

.listing__price {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Too little room for a price list's leader rule; the price drops below. */
@media (max-width: 32rem) {
  .listing { flex-wrap: wrap; gap: 0.4rem; }

  .listing__name { flex: 1 1 100%; }

  .listing__lead { display: none; }
}

.entry__body { margin-top: 1.75rem; }

.entry__body > .specs { margin-top: 0; }

.entry__note {
  margin-top: 1rem;
  font-size: var(--size-small);
  color: var(--cream-faint);
}

/* --------------------------------------------------------------------------
   10. Specifications
   -------------------------------------------------------------------------- */

.specs {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 1.5rem;
  font-size: var(--size-small);
  line-height: 1.55;
  align-self: start;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.specs dt {
  color: var(--cream-faint);
  font-style: italic;
  white-space: nowrap;
}

.specs dd {
  margin: 0;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   11. Woods — grain glowing against the dark
   -------------------------------------------------------------------------- */

/* The swatch photographs are 400px wide. The grid is capped so two of them
   sit side by side at native size rather than being stretched soft. */
.woods {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 53rem;
}

.wood { margin: 0; }

.wood img {
  width: 100%;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.5);
}

.wood figcaption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.wood__name {
  font-size: 1.18rem;
  font-weight: 400;
}

.wood__origin {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--size-small);
  font-style: italic;
  color: var(--cream-faint);
}

/* --------------------------------------------------------------------------
   12. Model index
   -------------------------------------------------------------------------- */

.models {
  display: grid;
  border-top: 1px solid var(--rule);
  max-width: 64rem;
}

.model {
  display: grid;
  gap: 0.35rem 2.25rem;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr;
  align-items: baseline;
}

@media (min-width: 46rem) {
  .model { grid-template-columns: 14rem 1fr auto; }
}

.model__name {
  font-size: 1.3rem;
  font-weight: 400;
}

.model__what {
  margin: 0;
  color: var(--cream-soft);
  font-size: var(--size-small);
  max-width: 48ch;
}

.model__from {
  margin: 0;
  font-size: var(--size-small);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brass);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Call to action
   -------------------------------------------------------------------------- */

.cta {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  font-size: var(--size-small);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}

.cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #17130f;
}

/* --------------------------------------------------------------------------
   14. Contact details
   -------------------------------------------------------------------------- */

.details {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  max-width: 60rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

.detail h2 {
  font-size: var(--size-small);
  font-style: italic;
  font-weight: 300;
  color: var(--cream-faint);
  margin-bottom: 0.6rem;
  letter-spacing: 0;
}

.detail p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   15. Closing band
   -------------------------------------------------------------------------- */

.closing {
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%,
      rgba(201, 149, 74, 0.09), rgba(201, 149, 74, 0) 70%),
    var(--lift);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.closing h2 {
  font-size: var(--size-title);
  font-weight: 200;
  max-width: 19ch;
}

.closing p {
  margin-top: 1.4rem;
  max-width: 50ch;
  color: var(--cream-soft);
  font-size: var(--size-lede);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.25rem;
  font-size: var(--size-small);
  color: var(--cream-faint);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.footer p { margin: 0; }

/* --------------------------------------------------------------------------
   17. Motion — one arrival on the home page
   -------------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(2rem) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.arrive > * { animation: rise 950ms cubic-bezier(0.22, 0.68, 0.35, 1) both; }

.arrive > *:nth-child(2) { animation-delay: 130ms; }

.arrive-stage { animation: settle 1200ms cubic-bezier(0.22, 0.68, 0.35, 1) 260ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .arrive > *,
  .arrive-stage { animation: none; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead,
  .cta { display: none; }

  body { background: #fff; color: #000; }

  .pen { background: none; }

  .pen img { filter: none; }

  .closing {
    background: #fff;
    color: #000;
  }
}