@import url("/official-preview.css");

:root { --paper: #f3efe6; --ink: #151513; --night: #0b0a09; --orange: #dc3e12; }
* { box-sizing: border-box; }
body.journal-page { margin: 0; background: var(--paper); color: var(--ink); }
.story { overflow: hidden; }
.story-heading { display: grid; min-height: 72svh; padding: clamp(70px, 9vw, 140px) clamp(20px, 7vw, 110px) clamp(50px, 7vw, 100px); grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); grid-template-rows: auto 1fr auto; gap: 24px 7vw; align-items: end; }
.story-kicker { grid-column: 1 / -1; align-self: start; margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.story-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.2rem, 10vw, 10rem); font-weight: 400; line-height: .78; letter-spacing: -.055em; }
.story-heading h1 em { color: var(--orange); font-weight: 400; }
.story-title { align-self: end; }
.story-gallery-link { display: inline-flex; gap: .55em; align-items: center; margin-top: 34px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.story-gallery-link span { color: var(--orange); font-size: 1rem; }
.story-deck { max-width: 430px; margin: 0 0 .6em; font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.55; }
.story figure { margin: 0; background: var(--night); }
.story img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-hero { height: min(86svh, 960px); }
.story-hero img { object-position: center 42%; }
.story-copy { display: grid; padding: clamp(60px, 9vw, 140px) clamp(20px, 12vw, 190px); grid-template-columns: 1fr 1fr; gap: 7vw; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2vw, 2.05rem); line-height: 1.45; }
.story-copy p { margin: 0; }
.story-grid { display: grid; gap: 8px; padding: 8px; background: var(--night); }
.story-grid--opening { grid-template-columns: .84fr 1.16fr; }
.story-grid--opening figure:first-child { height: 70vw; max-height: 940px; }
.story-grid--opening figure:last-child { height: 70vw; max-height: 940px; }
.story-wide { height: min(95svh, 1100px); }
.story-wide img { object-position: center 37%; }
blockquote { max-width: 18ch; margin: 0 auto; padding: clamp(90px, 13vw, 200px) 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 5vw, 6rem); line-height: 1.03; letter-spacing: -.035em; text-align: center; }
.story-grid--night { grid-template-columns: repeat(2, 1fr); }
.story-grid--night figure { aspect-ratio: 2 / 3; }
.story-finale { height: min(100svh, 1200px); }
.story-finale img { object-position: center 58%; }
.story-footer { display: flex; padding: 34px clamp(20px, 5vw, 80px); align-items: center; justify-content: space-between; gap: 24px; background: var(--night); color: #fffaf0; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.story-footer a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.journal-mobile-home { display: none; }
.gallery-page { background: var(--night); color: #fffaf0; }
.gallery-heading { display: grid; min-height: 48svh; padding: clamp(90px, 10vw, 160px) clamp(20px, 5vw, 80px) clamp(50px, 6vw, 90px); align-content: end; }
.gallery-heading p { margin: 0 0 18px; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gallery-heading h1 { max-width: 12ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.8rem, 8vw, 9rem); font-weight: 400; line-height: .86; letter-spacing: -.05em; }
.gallery-heading h1 em { color: var(--orange); font-weight: 400; }
.gallery-feed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; }
.gallery-feed figure { margin: 0; aspect-ratio: 2 / 3; overflow: hidden; background: #181614; }
.gallery-feed img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-feed figure:hover img { transform: scale(1.018); }
.journal-index { min-height: 100svh; padding-top: 0; background: var(--paper); }
.journal-intro { display: grid; min-height: 0; padding: 10px clamp(20px, 5vw, 80px); grid-template-columns: 1fr auto; gap: 28px; align-items: center; border-bottom: 1px solid rgba(21, 21, 19, .16); }
.journal-intro p { max-width: none; margin: 0; font-size: .68rem; font-weight: 700; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
.journal-intro-meta { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.journal-intro-meta span { color: rgb(21 21 19 / .55); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.journal-intro h1 { justify-self: end; margin: 0; font-family: inherit; font-size: .68rem; font-weight: 800; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.journal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; background: var(--night); }
.journal-card { min-width: 0; }
.journal-card-link { display: grid; min-height: clamp(650px, calc(100svh - 118px), 900px); grid-template-rows: auto minmax(0, 1fr); background: #17120f; color: #fffaf0; overflow: hidden; }
.journal-card-copy { display: flex; min-height: 0; padding: clamp(24px, 2.7vw, 44px); flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.journal-card time { margin: 0 0 clamp(18px, 2vw, 30px); font-size: .65rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.journal-card h2 { margin: 0 0 18px; color: #fffaf0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.2vw, 6.4rem); font-weight: 400; line-height: .82; letter-spacing: -.05em; }
.journal-card h2 em { color: var(--orange); font-weight: 400; }
.journal-card-copy p { max-width: 29ch; margin: 0; color: rgb(255 250 240 / .72); font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.55; }
.journal-card-action { margin-top: clamp(20px, 2vw, 30px); padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.journal-card figure { min-height: 0; margin: 0; overflow: hidden; background: #29140e; }
.journal-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: transform .7s ease; }
.journal-card-link:hover img { transform: scale(1.025); }
.journal-card-link:focus-visible { outline: 3px solid #fffaf0; outline-offset: -5px; }
.journal-card--nobox .journal-card-link { background: #e9e4d8; color: #11110f; }
.journal-card--nobox .journal-card-copy p { color: rgb(17 17 15 / .68); }
.journal-card--nobox .journal-card h2, .journal-card--nobox h2 { color: #11110f; }
.journal-card--nobox h2 em { color: #16866f; }
.journal-card--nobox figure { background: #cfddce; }
.journal-card--amelia { grid-column: 1 / -1; }
.journal-card--amelia .journal-card-link { grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); grid-template-rows: 1fr; background: #8a523c; color: #fff6e8; }
.journal-card--amelia .journal-card-copy { grid-column: 2; grid-row: 1; }
.journal-card--amelia figure { grid-column: 1; grid-row: 1; background: #d8a06e; }
.journal-card--amelia figure img { object-position: center 52%; }
.journal-card--amelia .journal-card-copy p { color: rgb(255 246 232 / .72); }
.journal-card--amelia h2 { color: #12130f; }
.journal-card--amelia h2 em { color: #fff1dc; }
.amelia-story .story-heading h1 em, .amelia-story .story-gallery-link span, .amelia-gallery .gallery-heading h1 em { color: #c86536; }
.amelia-story .story-grid { background: #8aa6ad; }
.amelia-story blockquote { color: #456c78; }
.amelia-gallery { background: #24434d; }
.journal-card--organic { grid-column: 1 / -1; }
.journal-card--organic .journal-card-link { grid-template-columns: minmax(380px, .78fr) minmax(0, 1.22fr); grid-template-rows: 1fr; background: #e8dfce; color: #17201e; }
.journal-card--organic .journal-card-copy p { color: rgb(23 32 30 / .68); }
.journal-card--organic h2 { color: #17201e; }
.journal-card--organic h2 em { color: #b84d2d; }
.journal-card--organic figure { background: #24636a; }
.organic-story .story-heading h1 em, .organic-story .story-gallery-link span, .organic-gallery .gallery-heading h1 em { color: #b84d2d; }
.organic-story .story-grid { background: var(--paper); }
.organic-story .story-grid figure { background: var(--paper); }
.organic-story blockquote { color: #24636a; }
.organic-gallery { background: #163b40; }
.nobox-story .story-heading h1 em, .nobox-story .story-gallery-link span, .nobox-gallery .gallery-heading h1 em { color: #16866f; }
.nobox-story .story-grid { background: #17362f; }
.journal-index-footer { display: flex; padding: 34px clamp(20px, 5vw, 80px); justify-content: space-between; gap: 24px; background: var(--night); color: #fffaf0; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.journal-index-footer a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

@media (max-width: 700px) {
  .journal-page .site-header { min-height: 64px; padding: 12px 18px; }
  .journal-page .site-header .nav { display: none; }
  .journal-page .journal-mobile-home { display: inline-block; margin-left: auto; color: inherit; font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
  .story-heading { min-height: 66svh; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .story-heading h1 { font-size: clamp(4rem, 20vw, 6.8rem); }
  .story-gallery-link { margin-top: 26px; }
  .story-deck { max-width: 32ch; }
  .story-hero { height: 76svh; }
  .organic-story .story-hero { height: auto; aspect-ratio: 3 / 2; background: var(--paper); }
  .organic-story .story-hero img { object-position: center center !important; }
  .story-copy { grid-template-columns: 1fr; gap: 28px; padding-block: 70px; }
  .story-grid--opening { grid-template-columns: 1fr; }
  .story-grid--opening figure:first-child, .story-grid--opening figure:last-child { height: auto; aspect-ratio: 2 / 3; }
  .story-wide { height: 80svh; }
  .organic-story .story-wide { height: auto; aspect-ratio: 3 / 2; background: var(--paper); }
  .story-grid--night { grid-template-columns: 1fr; }
  blockquote { padding-block: 90px; }
  .story-finale { height: 78svh; }
  .story-footer { align-items: flex-start; flex-direction: column; }
  .gallery-heading { min-height: 42svh; }
  .gallery-heading h1 { font-size: clamp(3.5rem, 16vw, 5.8rem); }
  .gallery-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .journal-intro { min-height: 0; padding: 9px 18px; grid-template-columns: 1fr auto; gap: 16px; }
  .journal-intro p { max-width: 28ch; font-size: .58rem; line-height: 1.12; }
  .journal-intro-meta { gap: 12px; }
  .journal-intro-meta span { font-size: .5rem; }
  .journal-intro h1 { justify-self: end; font-size: .6rem; }
  .journal-list { grid-template-columns: 1fr; }
  .journal-card--organic { grid-column: auto; }
  .journal-card--organic .journal-card-link { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .journal-card--amelia { grid-column: auto; }
  .journal-card--amelia .journal-card-link { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .journal-card--amelia .journal-card-copy { grid-column: 1; grid-row: 1; }
  .journal-card--amelia figure { grid-column: 1; grid-row: 2; }
  .journal-card-link { min-height: 84svh; grid-template-rows: auto minmax(0, 1fr); }
  .journal-card-copy { min-height: 0; }
  .journal-card h2 { font-size: clamp(3.5rem, 16vw, 5.8rem); }
  .journal-card figure { aspect-ratio: auto; }
  .journal-index-footer { align-items: flex-start; flex-direction: column; }
}