:root {
  color-scheme:dark;
  --ink:#0a1513;
  --ink-deep:#07100f;
  --ivory:#eee8db;
  --muted:#afb5ab;
  --gold:#c5ad78;
  --line:#35403b;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* {box-sizing:border-box;}
html {scroll-behavior:smooth;scroll-padding-top:110px;}
body {margin:0;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.6;}
a {color:inherit;text-underline-offset:5px;}
button,input,a {-webkit-tap-highlight-color:transparent;}
button,a {touch-action:manipulation;}
button {font:inherit;cursor:pointer;}
a:focus-visible,button:focus-visible,summary:focus-visible {outline:2px solid var(--gold);outline-offset:5px;}
img {display:block;max-width:100%;}
h1,h2,h3,p {margin-top:0;}
h1,h2,h3 {font-family:var(--serif);font-weight:400;line-height:1.08;}
.page-width {width:min(1280px,92%);margin-inline:auto;}
.eyebrow,.card-kicker {color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;}
.skip-link {position:fixed;z-index:30;left:20px;top:15px;background:var(--ivory);color:var(--ink);padding:12px 18px;transform:translateY(-160%);}
.skip-link:focus {transform:translateY(0);}
.site-header {position:sticky;top:0;z-index:10;background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4%;border-bottom:1px solid var(--line);}
.wordmark {display:inline-flex;align-items:center;gap:10px;font-size:26px;font-family:var(--serif);text-decoration:none;letter-spacing:-.035em;}
.brand-mark {font-family:var(--sans);color:var(--gold);font-size:29px;line-height:1;}
.site-header nav {display:flex;align-items:center;gap:30px;font-size:12px;}
.site-header nav a {text-decoration:none;padding-block:8px;white-space:nowrap;}
.site-header nav a:hover {color:var(--gold);}
.showcase-intro {padding-top:65px;}
.intro-layout {display:grid;grid-template-columns:1.6fr 1fr;align-items:end;gap:70px;}
.intro-layout h1 {font-size:clamp(42px,5.1vw,72px);line-height:1.02;letter-spacing:-.047em;margin:0;}
.intro-copy {max-width:450px;padding-bottom:4px;}
.intro-copy p {color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:22px;}
.text-link {display:inline-flex;align-items:center;gap:25px;font-size:13px;text-decoration:none;padding-bottom:7px;border-bottom:1px solid var(--gold);}
.text-link span {color:var(--gold);}
.collection-overview {padding-block:60px 78px;}
.directory-heading {display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-bottom:26px;}
.directory-heading h2 {font-size:28px;letter-spacing:-.02em;margin:0;}
.collection-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;}
.collection-card {display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);transition:border-color .15s ease;background:#0e1a16;}
.collection-card:hover {border-color:var(--gold);}
.collection-card-image {background:var(--ink-deep);}
.collection-card-image img {width:100%;height:auto;}
.collection-card-copy {display:flex;flex-direction:column;flex:1;padding:25px 27px 20px;}
.card-kicker {margin-bottom:12px;}
.collection-card h3 {font-size:34px;letter-spacing:-.025em;margin-bottom:14px;}
.card-summary {font-size:14px;line-height:1.65;color:var(--muted);margin-bottom:24px;max-width:440px;}
.card-footer {display:flex;justify-content:flex-start;align-items:center;margin-top:auto;font-size:12px;}
.card-footer>span:last-child {color:var(--ivory);}
.photo-group {padding-block:32px 0;border-top:1px solid var(--line);}
.group-heading {position:relative;margin-bottom:42px;}
.back-to-collections {display:inline-block;font-size:11px;color:var(--muted);text-decoration:none;margin-bottom:18px;}
.back-to-collections:hover {color:var(--ivory);}
.group-heading h2 {font-size:clamp(32px,4vw,50px);letter-spacing:-.028em;margin-bottom:20px;}
.group-description {color:var(--muted);max-width:780px;font-size:15px;margin-bottom:18px;}
.collection-story {max-width:780px;margin-top:22px;font-size:14px;}
.collection-story summary {cursor:pointer;width:fit-content;color:var(--gold);font-size:12px;padding:3px 0;}
.collection-story p {color:var(--muted);line-height:1.7;margin-top:16px;}
.photo-story {width:85%;max-width:800px;margin-inline:auto;margin-bottom:76px;}
.photo-heading {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:24px;}
.photo-heading h3 {font-size:clamp(28px,3vw,37px);letter-spacing:-.02em;display:flex;gap:23px;align-items:baseline;margin:0;}
.photo-heading p {font-size:14px;color:var(--muted);max-width:480px;line-height:1.65;margin:0;}
.comparison {
  --divider:50%;
  position:relative;
  width:100%;
  aspect-ratio:var(--photo-ratio, 3 / 2);
  overflow:hidden;
  background:var(--ink-deep);
  outline:1px solid #28312d;
  outline-offset:-1px;
  isolation:isolate;
}

.comparison img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:none;
  user-select:none;
  pointer-events:none;
}

.comparison .before-image {
  clip-path:inset(0 calc(100% - var(--divider)) 0 0);
  z-index:1;
}

.compare-divider {
  position:absolute;
  left:var(--divider);
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-1px);
  background:rgba(238,232,219,.9);
  z-index:2;
  pointer-events:none;
}

.compare-handle {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--ivory);
  background:rgba(7,16,15,.78);
  border-radius:50%;
  color:var(--ivory);
  font-size:20px;
  line-height:1;
}

.image-label {
  position:absolute;
  top:20px;
  z-index:2;
  padding:5px 11px;
  background:rgba(7,16,15,.8);
  border:1px solid rgba(238,232,219,.25);
  color:var(--ivory);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
}

.image-label-before {
  left:20px;
}

.image-label-after {
  right:20px;
}

.image-label[hidden],.compare-divider[hidden] {
  display:none;
}

.compare-range {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  touch-action:pan-y;
}

.compare-range::-webkit-slider-runnable-track {
  height:100%;
  background:transparent;
}

.compare-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:1px;
  height:100%;
  background:transparent;
}

.compare-range::-moz-range-track {
  height:100%;
  background:transparent;
}

.compare-range::-moz-range-thumb {
  width:1px;
  height:100%;
  border:0;
  background:transparent;
}

.comparison:focus-within {
  outline:3px solid var(--gold);
  outline-offset:5px;
}

.compare-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
}

.compare-buttons {
  display:flex;
  padding:3px;
  border:1px solid var(--line);
}

.compare-buttons button {
  background:transparent;
  border:0;
  color:var(--muted);
  padding:8px 17px;
  font-size:12px;
  min-height:38px;
}

.compare-buttons button[aria-pressed=true] {
  background:var(--ivory);
  color:var(--ink);
}

.compare-buttons button:hover:not([aria-pressed=true]) {
  color:var(--ivory);
  background:#1c2823;
}

.compare-help {
  font-size:11px;
  color:var(--muted);
  text-align:right;
  line-height:1.5;
  margin:0;
}

.compare-help strong {
  font-weight:500;
  color:var(--ivory);
}

.photo-links {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:11px;
  margin:15px 0 0;
}

.photo-links a:hover {
  color:var(--ivory);
}

.fallback-photo {
  width:100%;
  height:auto;
}

.fallback-caption {
  font-size:12px;
  color:var(--muted);
  margin-top:15px;
}

.process-section {padding:75px 0 68px;background:#101d18;border-top:1px solid var(--line);}
.process-intro {max-width:730px;}
.process-intro h2 {font-size:clamp(36px,4.1vw,56px);letter-spacing:-.03em;margin-bottom:24px;}
.process-steps {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;padding:22px 0 0;margin:0 0 32px;}
.process-steps li {border-top:1px solid var(--line);padding-top:18px;}
.step-number {color:var(--gold);font-size:11px;letter-spacing:.14em;}
.process-steps h3 {font-size:29px;margin:18px 0 16px;letter-spacing:-.025em;}
.process-steps p {font-size:14px;color:var(--muted);line-height:1.7;}
.process-next {display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid var(--line);padding-top:24px;}
.process-next p {max-width:620px;font-size:13px;color:var(--muted);margin:0;}
.process-next a {flex-shrink:0;}
.process-links {display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.site-footer {display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:35px 40px;}
.site-footer p {margin:0;font-size:12px;color:var(--muted);}
.photo-rights {display:block;margin-top:5px;font-size:11px;}
.site-footer>a:last-child {font-size:12px;white-space:nowrap;text-decoration:none;}
.site-footer>a:last-child span {color:var(--gold);margin-left:12px;}
@media(max-width:1000px) {
  .intro-layout {gap:40px;grid-template-columns:1.25fr 1fr;}
  .intro-copy p {font-size:15px;}
  .collection-grid {gap:25px;}
  .photo-heading {gap:40px;}
  .process-steps {gap:28px;}
  .process-next {align-items:flex-start;}
}
@media(max-width:759px) {
  .showcase-intro {padding-top:42px;}
  .intro-layout {display:block;}
  .intro-layout h1 {font-size:clamp(43px,8.5vw,64px);}
  .intro-copy {max-width:530px;margin-top:27px;}
  .directory-heading {display:block;}
  .directory-heading h2 {margin-bottom:12px;}
  .collection-overview {padding-block:42px 55px;}
  .collection-grid {grid-template-columns:1fr;gap:28px;}
  .process-steps {grid-template-columns:1fr;gap:14px;}
  .process-steps h3 {font-size:27px;}
  .process-next {display:block;}
  .process-links {margin-top:24px;}
  .site-footer {flex-wrap:wrap;}
  .site-footer p {order:3;flex-basis:100%;}
}
@media(max-width:600px) {
  html {scroll-padding-top:125px;}
  .site-header {flex-wrap:wrap;gap:7px;padding-block:14px 10px;}
  .wordmark {font-size:23px;}
  .brand-mark {font-size:26px;}
  .site-header nav {flex-basis:100%;gap:25px;font-size:11px;}
  .intro-copy p {font-size:14px;}
  .directory-heading h2 {font-size:26px;}
  .collection-card-copy {padding:20px;}
  .collection-card h3 {font-size:30px;}
  .card-summary {font-size:13px;}
  .group-heading {margin-bottom:30px;}
  .group-heading h2 {font-size:34px;}
  .group-description {font-size:14px;}
  .back-to-collections {font-size:10px;}
  .photo-heading {display:block;margin-bottom:18px;}
  .photo-heading h3 {font-size:29px;gap:13px;margin-bottom:16px;}
  .photo-heading p {font-size:13px;}
  .photo-story {width:100%;margin-bottom:55px;}
  .comparison,.fallback-photo {width:85%;margin-inline:auto;}
  .image-label {top:10px;padding:4px 8px;font-size:9px;}
  .image-label-before {left:10px;}
  .image-label-after {right:10px;}
  .compare-handle {width:36px;height:36px;font-size:17px;}
  .compare-toolbar {align-items:flex-start;gap:10px;flex-wrap:wrap;padding-top:15px;}
  .compare-buttons {max-width:100%;}
  .compare-buttons button {padding:7px 10px;min-height:38px;}
  .compare-help {font-size:10px;text-align:left;}
  .photo-links {font-size:10px;gap:12px;flex-wrap:wrap;}
  .process-section {padding:48px 0;}
  .process-intro h2 {font-size:36px;}
  .process-steps {padding-top:17px;}
  .process-next p {font-size:12px;}
  .site-footer {gap:20px;padding-block:28px;}
}
@media(max-width:370px) {
  .intro-layout h1 {font-size:35px;}
  .site-header nav {gap:21px;}
  .card-footer {gap:8px;}
  .collection-card h3 {font-size:28px;}
  .image-label {font-size:8px;letter-spacing:.08em;}
  .compare-buttons button {padding-inline:9px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  .collection-card {transition:none;}
}
