/* ==========================================================================
   David Howland Photo — site styles
   Mobile-first. Base styles target phones; min-width queries layer on at
   48em (tablet), 64em (laptop) and 90em (wide). The header nav switches
   from the Menu button to an inline row at 56em.

   Principles: the photograph is the only color on the page. Chrome recedes —
   black type on white, hairline rules only where they separate sections,
   one small radius on controls, no shadows, motion only in response to
   something the visitor did.

   Contents
     1. Tokens
     2. Base
     3. Forms and buttons
     4. Page shell: header, main, footer
     5. Shared components: page-head, prose, photo-frame, pills, grid,
        pagination
     6. Photo and product pages
     7. Blog
     8. Page-specific details
     9. Reduced motion
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
  /* Color */
  --ink: #000;
  --paper: #fff;
  --ink-soft: #555;         /* metadata: dates, counts, captions (7.5:1 on white) */
  --rule: #d9d9d9;          /* hairlines between sections */
  --line: #767676;          /* form control borders (4.5:1 on white) */
  --wash: #f4f4f4;          /* disabled fields, image placeholders */
  --focus: #000;
  --error: #b3261e;         /* form and cart error text only */

  /* Type — system stack; scale is a 1.25 ratio from a 17px body */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.625rem;
  --text-title: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --leading: 1.6;
  --measure: 68ch;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Layout */
  --page-max: 90rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --header-h: 3.5rem;
  --radius: 2px;
  --control-h: 2.75rem;     /* 44px minimum touch target */

  /* Photo frame height: the height of a full-width 3:2 landscape, capped so
     the whole photo fits in the viewport below the header. Portraits use the
     same height, so every photo sits in the same-height rectangle. */
  --frame-h: min(calc((min(100vw, var(--page-max)) - 2 * var(--gutter)) * 2 / 3),
                 calc(85vh - var(--header-h)));
}

@supports (height: 1svh) {
  :root {
    --frame-h: min(calc((min(100vw, var(--page-max)) - 2 * var(--gutter)) * 2 / 3),
                   calc(85svh - var(--header-h)));
  }
}


/* 2. Base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { font-size: var(--text-base); }

p, ul, ol, dl, table, blockquote, pre, figure {
  margin: 0 0 var(--space-4);
}

ul, ol {
  padding-left: 1.25em;
}

li {
  margin-bottom: var(--space-1);
}

dd {
  margin-left: 0;
}

hr {
  margin: var(--space-7) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

code {
  padding: 0.1em 0.3em;
  font-size: 0.9em;
  background: var(--wash);
  border-radius: var(--radius);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 2000;
  padding: var(--space-2) var(--space-4);
  color: var(--paper);
  background: var(--ink);
}

.skip-link:focus {
  top: var(--space-2);
}


/* 3. Forms and buttons
   ========================================================================== */

button {
  font: inherit;
  color: inherit;
}

.button,
.button-primary,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.button:hover,
.button-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  color: var(--paper);
  background: #333;
  border-color: #333;
}

.button:disabled,
.button-primary:disabled,
button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.button:disabled:hover,
.button-primary:disabled:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* Secondary action, e.g. "Shop this print on Etsy" */
.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.btn-outline:hover {
  color: var(--ink);
  background: var(--wash);
}

.external-link-icon {
  font-size: var(--text-xs);
}

label,
legend {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  width: 100%;
  min-height: var(--control-h);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-base);   /* 16px+ prevents iOS zoom on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

textarea {
  min-height: 10rem;
  resize: vertical;
}

select {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--ink);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--ink-soft);
  cursor: not-allowed;
  background-color: var(--wash);
  border-color: var(--rule);
}

input[type="radio"],
input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--ink);
}

.contact-form {
  max-width: 32rem;
}


/* 4. Page shell
   ========================================================================== */

.wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.content {
  padding-block: var(--space-4) var(--space-8);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.cart-nav-section {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-nav-item {
  margin: 0;
}

.cart-icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  text-decoration: none;
}

.cart-icon {
  flex-shrink: 0;
}

.cart-icon-link:hover .cart-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.cart-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}

.cart-counter.empty {
  display: none;
}

.menu-toggle {
  grid-column: 3;
  grid-row: 1;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  cursor: pointer;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

html:not(.js) .menu-toggle {
  display: none;
}

.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
}

html.js .site-nav {
  display: none;
}

html.js .menu-toggle[aria-expanded="true"] ~ .site-nav {
  display: block;
}

.site-nav-list,
.site-nav-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-list {
  padding-block: var(--space-2) var(--space-3);
}

.site-nav li {
  margin: 0;
}

.site-nav a,
.site-nav-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--control-h);
  padding: 0;
  font-size: var(--text-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
}

.site-nav a:hover,
.site-nav-toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"],
.site-nav-toggle.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Chevron on dropdown buttons; points down when closed, up when open */
.site-nav-toggle::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin: -0.2em 0 0 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"]::after {
  margin-top: 0.2em;
  transform: rotate(-135deg);
}

html.js .site-nav-sub {
  display: none;
}

html.js .site-nav-toggle[aria-expanded="true"] + .site-nav-sub {
  display: block;
}

/* Small screens: dropdowns open inline, indented under their button */
.site-nav-sub {
  padding-left: var(--space-4);
}

/* The full nav needs ~46em beside the wordmark and cart, so it stays behind
   the Menu button until 56em. */
@media (min-width: 56em) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-6);
  }

  .menu-toggle {
    display: none;
  }

  html.js .site-nav,
  .site-nav {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .cart-nav-section {
    grid-column: 3;
  }

  .site-nav-list {
    display: flex;
    gap: var(--space-5);
    padding: 0;
  }

  .site-nav a,
  .site-nav-toggle {
    width: auto;
  }

  .site-nav-group {
    position: relative;
  }

  .site-nav-sub {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--space-4));
    z-index: 900;
    min-width: 13rem;
    padding: var(--space-2) 0;
    background: var(--paper);
    border: 1px solid var(--rule);
  }

  /* The last menu (About) sits at the right edge; open it leftward */
  .site-nav-group:last-child .site-nav-sub {
    right: calc(-1 * var(--space-4));
    left: auto;
  }

  html:not(.js) .site-nav-sub {
    display: none;
  }

  html:not(.js) .site-nav-group:focus-within .site-nav-sub,
  html:not(.js) .site-nav-group:hover .site-nav-sub {
    display: block;
  }

  .site-nav-sub a {
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    white-space: nowrap;
  }
}

/* Footer ------------------------------------------------------------------ */

.footer {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.footer hr {
  margin: 0 0 var(--space-6);
}

.footer p {
  max-width: 34rem;
}

.footer ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.footer li {
  margin-bottom: var(--space-2);
}

.footer a {
  color: var(--ink);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* Newsletter form (footer, About, /newsletter) */
.newsletter-form-container {
  width: 100%;
  max-width: 32rem;
  margin: var(--space-4) 0;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.newsletter-input-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.newsletter-input-row .newsletter-form-input {
  margin: 0;
}

.newsletter-form-button,
.newsletter-loading-button {
  width: 100%;
}

.newsletter-loading-button {
  cursor: default;
}

@media (min-width: 30em) {
  .newsletter-input-row {
    flex-direction: row;
  }

  .newsletter-input-row .newsletter-form-input {
    flex: 1;
    min-width: 0;
  }

  .newsletter-form-button,
  .newsletter-loading-button {
    width: auto;
  }
}

.newsletter-success,
.newsletter-error {
  margin-top: var(--space-3);
}

.newsletter-success-message,
.newsletter-error-message {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink);
  border-left: 2px solid var(--ink);
  background: var(--wash);
}

.newsletter-error-message {
  color: var(--error);
  border-left-color: var(--error);
}

.newsletter-back-button {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
}

.newsletter-back-button:hover {
  color: var(--ink);
  text-decoration: underline;
}


/* 5. Shared components
   ========================================================================== */

/* Page head: breadcrumb, h1, optional intro line --------------------------- */

.page-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-title,
.page-head h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-head > :last-child {
  margin-bottom: 0;
}

.page-head ul {
  margin-top: var(--space-3);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.45;
}

.page-head .lede {
  color: var(--ink-soft);
}

.page-head--home {
  margin-bottom: var(--space-5);
}

.page-head--home .lede {
  color: var(--ink);
}

.meta {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.breadcrumb {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.breadcrumb a {
  color: inherit;
}

.section-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Prose: Markdown content held to a readable measure ----------------------- */

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

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin-top: var(--space-7);
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose > h2:first-child,
.prose > h3:first-child {
  margin-top: 0;
}

.prose img {
  margin-block: var(--space-5);
}

.prose blockquote {
  margin-left: 0;
  padding-left: var(--space-4);
  color: var(--ink-soft);
  border-left: 2px solid var(--ink);
}

/* Photo frame: every hero photo sits in the same-height rectangle ---------- */

.photo-frame {
  display: block;
  margin: 0 0 var(--space-5);
}

.photo-frame img,
.inline-photo img {
  width: 100%;
  height: auto;
  max-height: var(--frame-h);
  object-fit: contain;
  background: var(--paper);
}

.photo-frame--panorama img,
.inline-photo--panorama img {
  max-height: none;
}

/* On phones a portrait fills the width (up to most of the screen height);
   from tablets up it takes the landscape frame height. */
.photo-frame--portrait img,
.inline-photo--portrait img {
  max-height: 85vh;
  max-height: 85svh;
}

@media (min-width: 48em) {
  .photo-frame--portrait img,
  .inline-photo--portrait img {
    width: auto;
    height: var(--frame-h);
    max-height: none;
    margin-inline: auto;
  }
}

/* Thumbnails that switch the main image on product pages */
.thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.medium-thumb {
  width: 5rem;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 0.7;
}

.medium-thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.medium-thumb:hover,
.medium-thumb.active {
  opacity: 1;
}

.medium-thumb.active {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Pills: tag and category links ------------------------------------------- */

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.pill-list li {
  margin: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.pill:hover {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* Grid: every thumbnail grid on the site --------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.625rem;
  margin-bottom: var(--space-6);
}

/* Related-photo rows hold four, so they fill even rows */
.grid--related {
  margin-bottom: 0;
}

@media (min-width: 36em) {
  .grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grid--related {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid-item a {
  display: block;
  text-decoration: none;
}

.grid-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wash);
}

.grid-item a:hover img {
  filter: brightness(0.85);
}

.grid-caption {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.grid-item a:hover .grid-caption {
  text-decoration: underline;
}

.grid-caption-meta {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Notecard grid items show the mockup; hovering reveals the photo */
.grid-image-swap {
  position: relative;
  display: block;
}

.grid-image-swap img + img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.grid-item a:hover .grid-image-swap img + img {
  opacity: 1;
}

.grid-item a:hover .grid-image-swap img {
  filter: none;
}

/* Pagination (blog pages and JS grid pagination) ---------------------------- */

.pagination {
  margin-top: var(--space-6);
}

.pagination-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pagination-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pagination-prev,
.pagination-next,
.pagination-page,
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.pagination-prev,
.pagination-next,
.pagination-page {
  cursor: pointer;
}

.pagination-prev:hover,
.pagination-next:hover,
.pagination-page:hover {
  border-color: var(--line);
}

.pagination-page.current {
  color: var(--paper);
  cursor: default;
  background: var(--ink);
  border-color: var(--ink);
}

.pagination-prev.disabled,
.pagination-next.disabled {
  color: var(--ink-soft);
  cursor: default;
  opacity: 0.5;
}

.pagination-prev.disabled:hover,
.pagination-next.disabled:hover {
  border-color: transparent;
}

.pagination-ellipsis {
  min-width: 1.5rem;
  padding: 0;
  color: var(--ink-soft);
}


/* 6. Photo and product pages
   ==========================================================================
   Areas: frame (the photo), intro (title, story and tags), form (order
   form), related (more photos like this).

   Phones and tablets:  Laptop and up (≥64em):     Portrait "split" (≥64em):
   frame                frame   frame              frame   intro
   intro                intro   form               frame   form
   form                 related related            related related
   related

   On landscape pages the whole block is as wide as the photo, so the text
   starts at the photo's left edge and the form ends at its right edge.
   ========================================================================== */

.photo-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "frame"
    "intro"
    "form"
    "related";
  column-gap: var(--space-7);
}

/* A 3:2 landscape at the frame height is frame-h × 1.5 wide. When the height
   cap narrows the photo, the page narrows and centers with it. */
.photo-page--landscape {
  max-width: calc(var(--frame-h) * 1.5);
  margin-inline: auto;
}

.photo-page > .photo-frame { grid-area: frame; }
.photo-page > .photo-intro { grid-area: intro; }
.photo-page > .order-form  { grid-area: form; }
.photo-page > .photo-related { grid-area: related; }

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

.photo-intro .pill-list {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* More photos (or notecards) like this: a full-width row under the page */
.photo-related,
.product-related {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.order-form {
  width: 100%;
  max-width: 28rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

@media (min-width: 64em) {
  /* The form column is fixed; the story gets the rest */
  .photo-page {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    grid-template-areas:
      "frame   frame"
      "intro   form"
      "related related";
  }

  .photo-page > .order-form {
    align-self: start;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .photo-page > .photo-frame {
    margin-bottom: var(--space-6);
  }

  .photo-page--split {
    grid-template-columns: min-content minmax(0, 1fr);
    grid-template-areas:
      "frame   intro"
      "frame   form"
      "frame   ."
      "related related";
    grid-template-rows: auto auto 1fr auto;
  }

  .photo-page--split > .photo-frame {
    align-self: start;
    margin-bottom: 0;
  }

  /* max-width: none keeps the photo's width as the column's min-content */
  .photo-page--split > .photo-frame img {
    max-width: none;
    margin-inline: 0;
  }

  /* The split's right column is wide; keep the form at a usable width,
     left-aligned with the story above it */
  .photo-page--split > .order-form {
    max-width: 28rem;
    margin-top: var(--space-6);
  }
}

/* Product pages (notecards, puzzles, calendar) ------------------------------
   These show product shots rather than the art itself, so the image shares
   the screen with the order form instead of filling it.

   Phones:     Tablet and up:
   gallery     gallery  summary
   summary     details  summary
   details

   Phones put the order form before the story; wider screens set the story
   under the image, beside the (taller) order column.
   -------------------------------------------------------------------------- */

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "gallery"
    "summary"
    "details"
    "related";
  column-gap: var(--space-7);
}

.product-gallery {
  grid-area: gallery;
  margin: 0 0 var(--space-5);
}

.product-main-image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 3 / 2);
  object-fit: contain;
  background: var(--paper);
}

.product-summary {
  grid-area: summary;
  max-width: 32rem;
}

.product-summary .lede {
  color: var(--ink-soft);
}

.product-summary .order-form {
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: 0;
}

.product-details {
  grid-area: details;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.product-details > * {
  max-width: var(--measure);
}

.product-related {
  grid-area: related;
}

.product-details .prose {
  margin-bottom: var(--space-6);
}

@media (min-width: 48em) {
  .product-page {
    grid-template-columns: minmax(0, 11fr) minmax(18rem, 9fr);
    grid-template-areas:
      "gallery summary"
      "details summary"
      "related related";
    grid-template-rows: auto 1fr auto;
    align-items: start;
  }

  .product-gallery {
    margin-bottom: 0;
  }

  .product-details {
    margin-top: var(--space-6);
    padding-top: 0;
    border-top: 0;
  }
}

/* Order form controls ------------------------------------------------------ */

.option-group {
  margin-bottom: var(--space-4);
}

.option-group select,
.option-group input[type="number"] {
  margin: 0;
}

.medium-options,
.paper-options,
.puzzle-size-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.medium-option,
.paper-option,
.puzzle-size-option,
.tile,
.frame-swatch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.medium-option:hover,
.tile:hover,
.paper-option:hover,
.puzzle-size-option:hover {
  border-color: var(--line);
}

.medium-option:has(input:checked),
.tile:has(input:checked),
.paper-option:has(input:checked),
.puzzle-size-option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.price-display {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
  padding-block: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  border-block: 1px solid var(--rule);
}

/* "12×18 Fine Art Print, walnut frame" under the photo page's price */
.order-summary {
  flex-basis: 100%;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.price-label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.order-form .button,
.order-form .button-primary,
.order-form .btn-outline {
  width: 100%;
}

.order-form .btn-outline {
  margin-top: var(--space-3);
}

/* "Added to cart" / error message under the Add to Cart button */
.cart-feedback {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-left: 2px solid var(--ink);
  background: var(--wash);
}

.cart-feedback-error {
  color: var(--error);
  border-left-color: var(--error);
}

/* Option groups are fieldsets; drop the browser border and padding */
fieldset.option-group {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

/* "from $14.99" beside a medium, "$24.99" under a size */
.option-price {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.medium-option strong,
.paper-option strong {
  font-weight: 600;
}

.medium-option .option-price {
  margin-left: auto;
}

/* "(inches)" after Size, "Walnut, +$70.00" after Frame */
.legend-detail {
  font-weight: 400;
  color: var(--ink-soft);
}

/* Sizes and card packs: a grid of tiles, size over price. The radio is
   hidden; the tile's border shows the choice and its focus ring. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.tile {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: var(--space-2) var(--space-3);
  line-height: 1.3;
}

.tile-label {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile input,
.frame-swatch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tile:has(input:focus-visible),
.frame-swatch:has(input:focus-visible) .swatch-chip {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Frames: a row of finish chips with the short name under each */
.frame-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.frame-swatch {
  position: relative;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
  padding: 0;
  border: 0;
}

.swatch-chip {
  width: var(--control-h);
  height: var(--control-h);
  border: 1px solid var(--rule);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--paper);
}

.swatch-chip--none {
  background: linear-gradient(to top right, var(--paper) calc(50% - 0.5px), var(--line) 50%, var(--paper) calc(50% + 0.5px));
}

.swatch-chip--black  { background: #000; }
.swatch-chip--walnut { background: #5b3a29; }
.swatch-chip--maple  { background: #d8b88a; }

.frame-swatch:hover .swatch-chip {
  border-color: var(--line);
}

.frame-swatch:has(input:checked) .swatch-chip {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 1px var(--ink);
}

.frame-swatch:has(input:checked) .swatch-name {
  font-weight: 600;
}

.frame-swatch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.35;
}

.frame-swatch:has(input:disabled) input {
  cursor: not-allowed;
}

.option-group-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.option-group-note:empty {
  display: none;
}

.etsy-link {
  margin-top: var(--space-3);
}

/* Shipping summary under the order buttons */
.shipping-summary {
  margin-top: var(--space-4);
}

/* Public-lands donation note at the end of the photo order form */
.order-form > p.meta {
  margin-top: var(--space-4);
}

.shipping-summary > .meta {
  margin-bottom: var(--space-2);
}

.shipping-details summary {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.shipping-details dl {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
}

.shipping-details dt {
  font-weight: 600;
}

.shipping-details dd {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
}

.product-details .pill-list {
  margin-bottom: 0;
}


/* 7. Blog
   ========================================================================== */

/* Index: lead post then a grid of posts ------------------------------------- */

.post-lead {
  margin-bottom: var(--space-7);
}

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

.post-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}

.post-title--lead {
  font-size: var(--text-xl);
}

.post-title a {
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.post-summary .meta,
.post-card .meta {
  margin-bottom: var(--space-2);
}

.grid--posts {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-6);
}

@media (min-width: 48em) {
  .grid--posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 90em) {
  .grid--posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-card-image {
  display: block;
  margin-bottom: var(--space-3);
}

.post-card-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wash);
}

.post-card-image:hover img {
  filter: brightness(0.85);
}

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

/* Post: text column with photos breaking out of it -------------------------- */

.post-body {
  --wide: 56rem;
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100%)
    [text-end] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [wide-end] minmax(0, 1fr)
    [full-end];
}

.post-body > * {
  grid-column: text;
}

/* Larger reading type on bigger screens. The column is measured in ch, so
   it widens with the type while the line length stays the same. */
@media (min-width: 64em) {
  .post-body {
    font-size: 1.125rem;
  }
}

@media (min-width: 90em) {
  .post-body {
    font-size: 1.1875rem;
  }
}

.post-body > .inline-photo {
  grid-column: full;
}

.post-body > .blog-image--landscape {
  grid-column: wide;
}

.post-body > .page-head {
  margin-bottom: var(--space-5);
}

.post-body > p:first-of-type {
  font-size: 1.2em;
  line-height: 1.5;
}

.post-body h2 {
  margin-top: var(--space-6);
}

.inline-photo,
.blog-image {
  margin: var(--space-5) 0 var(--space-6);
}

.inline-photo-link {
  display: block;
}

.blog-image img {
  width: 100%;
}

.blog-image--portrait img {
  width: auto;
  max-height: 80vh;
  max-height: 80svh;
  margin-inline: auto;
}

.caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.inline-photo .caption {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Posts are a centered column, so captions center under their photos */
.post-body .caption {
  text-align: center;
}

.caption a {
  font-weight: 600;
  color: var(--ink);
}

.caption-text {
  display: block;
}

.post-photos {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.post-photos .meta {
  margin-top: calc(-1 * var(--space-3));
}

.post-nav {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.post-nav-link {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.post-nav-link img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wash);
}

.post-nav-link .meta {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 400;
}

.post-nav-link:hover .post-nav-text {
  text-decoration: underline;
}

.post-nav-link:hover img {
  filter: brightness(0.85);
}

@media (min-width: 48em) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }

  /* Newer post mirrors older: text then thumbnail, right-aligned */
  .post-nav-link--newer {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    text-align: right;
  }

  .post-nav-link--newer img {
    order: 2;
  }
}


/* 8. Page-specific details
   ========================================================================== */

/* About: photo beside the heading and bio, contact form below --------------
   Columns are 45/55 for a landscape photo, 35/65 for a portrait one.

   Phones:     Tablet and up:
   photo       photo    head
   head        photo    bio
   bio         contact  contact
   contact
   -------------------------------------------------------------------------- */

.about-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "photo"
    "head"
    "bio"
    "contact";
  column-gap: var(--space-7);
}

.about-photo {
  grid-area: photo;
  margin: 0 0 var(--space-5);
}

.about-photo img {
  width: 100%;
}

/* Stacked on small screens, a portrait shouldn't be taller than the screen */
.about-page--portrait .about-photo img {
  width: auto;
  max-height: 80vh;
  max-height: 80svh;
}

.about-head {
  grid-area: head;
  max-width: var(--measure);
}

.about-bio {
  grid-area: bio;
  max-width: var(--measure);
}

.about-bio > :last-child {
  margin-bottom: 0;
}

.about-contact {
  grid-area: contact;
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

@media (min-width: 48em) {
  .about-page {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    grid-template-areas:
      "photo head"
      "photo bio"
      "contact contact";
    grid-template-rows: auto 1fr auto;
  }

  .about-page--portrait {
    grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
  }

  .about-page--portrait .about-photo img {
    width: 100%;
    max-height: none;
  }

  .about-photo {
    align-self: start;
    margin-bottom: 0;
  }
}

.order-success h2 {
  font-size: var(--text-lg);
}


/* 9. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}