/* Hallmark · macrostructure: Photographic · tone: warm photographic editorial · anchor hue: lilac */
/* Hallmark · pre-emit critique: P4 H5 E5 S5 R4 V5 */
@import url("./tokens.css?v=2");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-body)/1.65 var(--font-body); }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3, .wordmark { font-family: var(--font-display); }
h1, h2 { overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--text-heading); letter-spacing: -.055em; line-height: 1.16; }
.container { width: min(100% - clamp(2rem, 8vw, 8rem), 77rem); margin-inline: auto; }
.skip-link { position: fixed; z-index: 3; top: var(--space-3); left: var(--space-3); padding: var(--space-3); background: var(--color-white); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.small { font-size: var(--text-small); }
.masthead { border-bottom: 1px solid var(--color-line); }
.masthead-inner { min-height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-5); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.35rem; font-weight: 750; letter-spacing: -.055em; text-decoration: none; }
.wordmark img { border-radius: var(--radius-button); }
.masthead nav, .footer-inner nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.8rem, 2.7vw, 2.25rem); }
.masthead nav { justify-content: flex-end; }
.portal-language { max-width: 13rem; min-width: 0; min-height: 42px; border: 1px solid var(--color-line); border-radius: var(--radius-button); background: var(--color-paper); color: var(--color-ink); font: var(--text-small) var(--font-body); padding: var(--space-2); cursor: pointer; }
.masthead nav > a:not(.button), .footer-inner nav a { font-size: var(--text-small); text-decoration: none; white-space: nowrap; }
.masthead nav > a:not(.button):hover, .footer-inner nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-button); background: transparent; cursor: pointer; font-weight: 650; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: transform var(--dur-press) var(--ease-out); }
.button:active:not(:disabled) { transform: scale(.98); }
.button:disabled { opacity: .64; cursor: wait; }
.button-ink { background: var(--color-ink); color: var(--color-white); }
.button-ink:hover:not(:disabled) { background: var(--color-accent); }
.button-line { border-color: var(--color-ink); }
.button-line:hover:not(:disabled) { background: var(--color-white); }
.button-small { min-height: 42px; padding: var(--space-2) var(--space-4); font-size: var(--text-small); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 600; }
.text-link:hover { color: var(--color-accent); }

.hero { padding-bottom: clamp(2.75rem, 6vw, 5rem); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: var(--space-6) clamp(2rem, 5vw, 5rem); padding-top: clamp(1.5rem, 3vw, 3rem); }
.hero h1 { font-size: var(--text-display); letter-spacing: -.068em; font-weight: 800; line-height: 1.12; }
.hero h1 .hero-emphasis { color: var(--color-accent); }
.hero-copy p { max-width: 31rem; font-size: var(--text-lede); line-height: 1.8; color: var(--color-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.contact-photos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, .85fr); grid-template-rows: minmax(0, 1fr); gap: var(--space-1); height: clamp(17rem, 31vw, 33rem); overflow: hidden; background: var(--color-photo-bed); }
.contact-photos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.contact-photos img:nth-child(1) { object-position: center 50%; }
.contact-photos img:nth-child(2) { object-position: center 54%; }
.contact-photos img:nth-child(3) { object-position: center 57%; }
.contact-photos img:nth-child(4) { object-position: center 62%; }
.contact-sheet figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); font-size: var(--text-small); color: var(--color-muted); }
.palette-strip { display: flex; gap: var(--space-1); }
.palette-strip i { width: 14px; height: 14px; border-radius: 3px; background: var(--color-purple); }
.palette-strip i:nth-child(2) { background: var(--color-yellow); }
.palette-strip i:nth-child(3) { background: var(--color-blue); }
.palette-strip i:nth-child(4) { background: var(--color-orange); }

.trial-band { background: var(--color-trial); }
.trial { padding-block: clamp(2.75rem, 6vw, 5rem); display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.trial-copy > p:not(.trial-note) { margin: var(--space-4) 0 var(--space-5); color: var(--color-muted); max-width: 24rem; }
.trial-note { margin-top: var(--space-3); color: var(--color-muted); }
.trial-board { min-width: 0; }
.trial-stage { display: grid; }
.trial-stage > .choices { grid-area: 1 / 1; }
.trial-stage[aria-busy="true"] > #choices { visibility: hidden; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.35rem, 1.6vw, 1rem); }
.shuffle-overlay { visibility: hidden; pointer-events: none; perspective: 800px; }
.trial-stage[aria-busy="true"] > .shuffle-overlay { visibility: visible; }
.trial-stage[aria-busy="true"] .shuffle-card { animation: shuffle-print var(--dur-shuffle) var(--ease-in-out) both; }
.trial-stage[aria-busy="true"] .shuffle-card:nth-child(2) { animation-delay: 50ms; }
.trial-stage[aria-busy="true"] .shuffle-card:nth-child(3) { animation-delay: 100ms; }
.shuffle-card .chip { opacity: .65; }
@keyframes shuffle-print {
  0% { opacity: .76; transform: translateY(6px) rotateX(0deg); }
  46% { opacity: 1; transform: translateY(-15px) rotateX(49deg) rotateZ(-3deg); }
  74% { opacity: .86; transform: translateY(-4px) rotateX(-20deg) rotateZ(1deg); }
  100% { opacity: 1; transform: none; }
}
.sample-card, .choice { min-width: 0; border-radius: var(--radius-image); border: 1px solid var(--color-line); padding: var(--space-2); background: var(--color-paper); color: var(--color-ink); }
.sample-card:not(.shuffle-card) > span:last-child { display: block; padding: var(--space-2) var(--space-1) var(--space-1); font-size: var(--text-small); }
.chip { display: block; width: 100%; aspect-ratio: 1.25; background: var(--swatch, var(--color-placeholder)); border-radius: var(--radius-button); border: 1px solid var(--color-swatch-line); }
.chip-first { background: var(--color-purple); }
.chip-second { background: var(--color-blue); }
.chip-daily { background: var(--color-yellow); }
.choice { text-align: start; cursor: pointer; }
.choice:hover { border-color: var(--color-accent); }
.choice[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.choice .chip { position: relative; }
.choice .chip::after { content: "✓"; display: grid; place-items: center; position: absolute; inset: var(--space-2) var(--space-2) auto auto; width: 24px; height: 24px; border-radius: 50%; background: var(--color-white); color: var(--color-ink); font-size: .84rem; font-weight: 800; opacity: 0; transform: scale(.74); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.choice[aria-pressed="true"] .chip::after { opacity: 1; transform: scale(1); }
.choice:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.choice-label, .choice-name, .choice-code { display: block; padding-inline: var(--space-1); overflow-wrap: anywhere; }
.choice-label { margin-top: var(--space-2); font-size: .74rem; color: var(--color-muted); }
.choice-name { font-size: clamp(.76rem, 1.5vw, 1rem); font-weight: 700; line-height: 1.3; margin-block: var(--space-1); }
.choice-code { font: .76rem/1.6 var(--font-code); color: var(--color-muted); }
.trial-status { min-height: 1.6em; margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-ink); }

.explore { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.section-head p { margin-top: var(--space-3); color: var(--color-muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.filters button { min-height: 44px; padding: var(--space-2) var(--space-3); background: transparent; border: 1px solid transparent; border-radius: var(--radius-button); cursor: pointer; font-size: var(--text-small); }
.filters button:hover { border-color: var(--color-line); }
.filters button[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-white); font-weight: 700; }
.feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-6); }
.feed-card { min-width: 0; width: 100%; display: grid; align-content: start; text-align: start; padding: 0; border: 0; border-radius: var(--radius-button); background: transparent; cursor: pointer; }
.feed-card:hover .feed-card-caption, .feed-card:focus-visible .feed-card-caption { color: var(--color-accent); }
.post-collage {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  background: var(--swatch, var(--color-placeholder));
}
.post-collage[data-columns="2"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.post-collage[data-columns="3"] { grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.post-collage.has-photos { background: var(--color-white); }
.post-collage.has-gaps { gap: 4px; }
.post-collage.is-rounded:not(.has-gaps), .post-collage.is-rounded:not(.has-photos) { border-radius: var(--radius-image); }
.post-collage.is-rounded.has-gaps .collage-tile { border-radius: var(--radius-image); }
.post-collage.is-portrait:not(.feed-art) { aspect-ratio: 3 / 4; }
.post-collage.is-portrait img { object-fit: contain; }
.collage-tile { display: block; min-width: 0; min-height: 0; overflow: hidden; }
button.collage-tile { position: relative; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
button.collage-tile:focus-visible { z-index: 1; outline-offset: -3px; }
.photo-frame { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; background: var(--color-placeholder); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame img.is-ready { animation: photo-in var(--dur-dialog) var(--ease-out) both; }
@keyframes photo-in { from { opacity: .24; } to { opacity: 1; } }
.photo-frame img[hidden] { display: none; }
.photo-error { padding: var(--space-2); text-align: center; color: var(--color-muted); font-size: var(--text-small); }
.feed-card-main { display: grid; padding: var(--space-3) 0; gap: var(--space-2); }
.feed-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); align-items: baseline; gap: var(--space-3); font-size: var(--text-small); }
.feed-meta strong, .feed-meta time, .feed-card-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-meta time { color: var(--color-muted); text-align: end; }
.feed-card-caption { min-height: 1.5em; line-height: 1.5; }
.post-color { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-2); color: var(--color-muted); font: .78rem/1.45 var(--font-code); }
.feed-card .post-color { min-height: 1.45em; }
.post-color i { width: 12px; height: 12px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--swatch); }
.feed-message:not(:empty) { margin-block: var(--space-6) var(--space-4); color: var(--color-muted); text-align: center; }
.feed-actions { margin-top: var(--space-4); display: flex; justify-content: center; }
.feed-skeleton { aspect-ratio: 1; border-radius: var(--radius-image); background: var(--color-placeholder); }

.download-band { background: var(--color-download); }
.download { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 7vw, 7rem); align-items: center; padding-block: var(--space-12); }
.journal-image { justify-self: center; width: min(69%, 240px); border: 1px solid var(--color-line); border-radius: var(--radius-frame); overflow: hidden; background: var(--color-white); }
.journal-image img { height: auto; width: 100%; }
.download-copy p { max-width: 24rem; color: var(--color-muted); margin-top: var(--space-4); }
.download-copy .store-actions { margin-top: var(--space-6); }
.site-footer { border-top: 1px solid var(--color-line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-6); }
.footer-inner small { color: var(--color-muted); }

dialog { color: var(--color-ink); background: var(--color-paper); width: min(100% - var(--space-8), 42rem); max-height: min(92dvh, 60rem); padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-frame); }
dialog::backdrop { background: var(--color-overlay); }
dialog[open] { animation: dialog-in var(--dur-dialog) var(--ease-out) both; }
dialog[open]::backdrop { animation: photo-in var(--dur-dialog) var(--ease-out) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  dialog, dialog::backdrop {
    opacity: 0;
    transition: opacity var(--dur-dismiss) var(--ease-in), display var(--dur-dismiss) allow-discrete, overlay var(--dur-dismiss) allow-discrete;
  }
  dialog { transform: translateY(10px) scale(.98); transition: opacity var(--dur-dismiss) var(--ease-in), transform var(--dur-dismiss) var(--ease-in), display var(--dur-dismiss) allow-discrete, overlay var(--dur-dismiss) allow-discrete; }
  dialog[open], dialog[open]::backdrop { opacity: 1; animation: none; transition-duration: var(--dur-dialog); transition-timing-function: var(--ease-out); }
  dialog[open] { transform: none; }
  @starting-style {
    dialog[open], dialog[open]::backdrop { opacity: 0; }
    dialog[open] { transform: translateY(10px) scale(.98); }
  }
}
.post-panel { padding: clamp(1rem, 4vw, 2rem); }
.post-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.post-top h2 { font-size: 1.45rem; letter-spacing: 0; overflow-wrap: anywhere; }
.icon-button { min-width: 44px; min-height: 44px; padding: var(--space-2); font-size: 1.4rem; }
.icon-button:hover { background: var(--color-placeholder); }
.post-image { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-image); background: var(--swatch, var(--color-placeholder)); }
.post-image.is-portrait { aspect-ratio: 3 / 4; }
.post-image img { object-fit: contain; }
.post-paging { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); }
.post-paging button:disabled { cursor: default; }
.post-caption { overflow-wrap: anywhere; white-space: pre-wrap; margin-top: var(--space-4); }
.post-info { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-muted); margin-top: var(--space-3); font-size: var(--text-small); }
#post-open, #post-retry { margin-top: var(--space-4); }
#post-status:not(:empty) { margin-top: var(--space-4); color: var(--color-muted); }

@media (max-width: 48rem) {
  .masthead-inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-2); }
  .masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: start; gap: var(--space-2) var(--space-4); }
  .portal-language { grid-column: 2; grid-row: 1; max-width: 10rem; min-height: 36px; }
  .hero { padding-bottom: var(--space-10); }
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hero h1 { font-size: clamp(2.55rem, 8.5vw, 4.5rem); }
  .hero-actions { margin-top: var(--space-6); }
  .contact-photos { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(13.5rem, 62vw, 24rem); }
  .trial { grid-template-columns: 1fr; }
  .trial h2 br, .download h2 br { display: none; }
  .section-head { align-items: start; flex-direction: column; }
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .download { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-6); }
  .journal-image { width: 100%; }
}
@media (max-width: 29rem) {
  .masthead-inner { min-height: 64px; gap: var(--space-2); }
  .wordmark { font-size: 1.18rem; }
  .wordmark img { width: 30px; height: 30px; }
  .masthead nav { gap: var(--space-2); }
  .masthead nav > a { font-size: .75rem; }
  .masthead .button-small { padding-inline: var(--space-2); min-height: 36px; gap: var(--space-1); }
  .download { grid-template-columns: minmax(0, 1fr); }
  .journal-image { grid-row: 2; width: min(52%, 190px); }
  .download-copy { grid-row: 1; }
  .feed-meta { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, 1.65em); gap: 0; font-size: .76rem; }
  .feed-meta time { text-align: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .contact-photos img { animation: contact-in 680ms var(--ease-out) both; }
  .contact-photos img:nth-child(2) { animation-delay: 70ms; }
  .contact-photos img:nth-child(3) { animation-delay: 140ms; }
  .contact-photos img:nth-child(4) { animation-delay: 210ms; }
  @keyframes contact-in {
    from { opacity: .3; transform: scale(1.045); }
    to { opacity: 1; transform: none; }
  }

  .hero-copy h1 { animation: section-in 600ms var(--ease-out) 100ms both; }
  .hero-description { animation: section-in 600ms var(--ease-out) 190ms both; }
  .is-in-view[data-reveal] { animation: section-in 560ms var(--ease-out) both; }
  @keyframes section-in {
    from { opacity: .38; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  #draw:disabled > [aria-hidden] { animation: draw-turn var(--dur-shuffle) var(--ease-out); }
  @keyframes draw-turn { to { transform: rotate(360deg); } }
  .choices .choice { animation: card-in var(--dur-reveal) var(--ease-out) both; }
  .choices .choice:nth-child(2) { animation-delay: 70ms; }
  .choices .choice:nth-child(3) { animation-delay: 140ms; }
  .feed-card.is-in-view { animation: card-in var(--dur-reveal) var(--ease-out) var(--entry-delay, 0ms) both; }
  @keyframes card-in {
    from { opacity: .42; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  .choice, .filters button { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .feed-art img { transition: transform var(--dur-reveal) var(--ease-out); }
  .feed-card:focus-visible .feed-art img { transform: scale(1.04); }
  .feed-card:active .feed-art img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .feed-card:hover:not(:active) .feed-art img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .trial-stage[aria-busy="true"] .shuffle-card,
  .choice .chip::after, .photo-frame img.is-ready,
  dialog, dialog[open], dialog::backdrop, dialog[open]::backdrop {
    animation: none;
    transition: none;
    transform: none;
  }
}