/*
 * Field Notes hub (/field-notes/), v13: prototypes/13/38-stories.html (11-03
 * content, a11y and SEO pass). The rules of editorial.css that 38 uses plus
 * 38-stories.css whole, scoped to the block wrapper.
 * Brief: docs/briefs/2026-10-31-field-notes-wp-port.md (hub only).
 *
 * Differences from the prototype, all mechanical:
 *   - reveals hide their sections only under html.js
 *     (inc/field-notes-page.php), so the page reads without JavaScript;
 *   - photos sit in <picture> (WebP first), which takes no box of its own,
 *     and crop at var(--photo-focal, <the prototype's crop>);
 *   - a card without a featured image is all text (no empty frame);
 *   - no html/body overflow rule: nothing on the page bleeds sideways.
 */

.rhinory-page--field-notes { background: #FBF7EE; }

.rhinory-field-notes {
	--paper: #FBF7EE;
	--card: #F4EEE0;
	--card-2: #EAE1CE;
	--ink-warm: #2D2926;
	--ink-warm-2: #3A352F;
	--rhino-warm: #717271;
	--rule-warm: rgba(45,41,38,.10);
	--rule-warm-2: rgba(45,41,38,.18);
	--burgundy: #520000;
	--acacia: #B97727;
	--reserve: #211B18;
	--ivory: #F3F2ED;
	background: var(--paper);
	color: var(--ink-warm);
	font-size: 16px;
}
.rhinory-field-notes a:not(.btn):not(.ed-card) { color: var(--burgundy); }
.rhinory-field-notes a:not(.btn):not(.ed-card):hover { color: #3d0000; }
.rhinory-field-notes .ed-photo picture { display: contents; }
.rhinory-field-notes .ed-photo img { object-position: var(--photo-focal, 50% 50%); }
.rhinory-field-notes .ed-ctas .btn { text-decoration: none; }
.rhinory-field-notes .ed-form-row button:disabled { cursor: default; background: var(--card-2); color: var(--ink-warm-2); }

/* editorial.css, the rules prototype 38 uses */
.rhinory-field-notes [data-section="journal"] { --sec-wash:rgba(82,0,0,.07);--sec-ink:var(--burgundy) }
.rhinory-field-notes [data-section="wine"] { --sec-wash:rgba(185,119,39,.16);--sec-ink:var(--ink-warm) }
.rhinory-field-notes [data-section="recipes"] { --sec-wash:rgba(216,198,160,.55);--sec-ink:var(--ink-warm) }
.rhinory-field-notes .ed-wrap { max-width:1280px;margin:0 auto;padding:0 56px }
.rhinory-field-notes .ed-sec { padding:clamp(72px,8vw,112px) 0;border-top:1px solid var(--rule-warm-2);scroll-margin-top:96px }
.rhinory-field-notes .ed-paper { background:var(--paper) }
.rhinory-field-notes .ed-cardbg { background:var(--card) }
.rhinory-field-notes .ed-h1 { font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(46px,6vw,84px);line-height:.98;letter-spacing:-.014em;margin:0;color:var(--ink-warm);text-wrap:pretty }
.rhinory-field-notes .ed-h2 { font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.012em;margin:0;color:var(--ink-warm);text-wrap:pretty }
.rhinory-field-notes .ed-h1 em, .rhinory-field-notes .ed-h2 em { font-style:italic;font-weight:500;color:var(--burgundy) }
.rhinory-field-notes .ed-lede { margin:0;font-family:"Lora",Georgia,serif;font-size:18px;line-height:1.7;color:var(--ink-warm-2);max-width:60ch;text-wrap:pretty }
.rhinory-field-notes .ed-lede strong { font-weight:600;color:var(--ink-warm) }
.rhinory-field-notes .ed-lede em { font-style:italic }
.rhinory-field-notes .ed-lede a { color:var(--burgundy);text-decoration:none;border-bottom:1px solid rgba(82,0,0,.35);transition:border-color .2s }
.rhinory-field-notes .ed-lede a:hover { border-bottom-color:var(--burgundy) }
.rhinory-field-notes .ed-ctas { display:flex;gap:14px;flex-wrap:wrap;align-items:center }
.rhinory-field-notes .ed-ctas .btn { font-weight:600 }
.rhinory-field-notes .ed-ctas .btn-outline { border:1px solid var(--rule-warm-2);color:var(--burgundy);background:transparent }
.rhinory-field-notes .ed-ctas .btn-outline:hover { border-color:var(--burgundy);background:rgba(82,0,0,.05);transform:none }
.rhinory-field-notes .ed-photo { position:relative;overflow:hidden;background:#1a1614;border:1px solid var(--rule-warm-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10) }
.rhinory-field-notes .ed-photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.03);display:block }
.rhinory-field-notes .ed-sec .ed-h2+.ed-lede, .rhinory-field-notes .ed-sec .ed-h2+.ed-p { margin-top:24px }
.rhinory-field-notes .ed-sec .ed-lede+.ed-ctas, .rhinory-field-notes .ed-sec .ed-p+.ed-ctas { margin-top:30px }
.rhinory-field-notes .ed-sec .ed-lede+.ed-lede, .rhinory-field-notes .ed-sec .ed-lede+.ed-p, .rhinory-field-notes .ed-sec .ed-p+.ed-p { margin-top:18px }
.rhinory-field-notes .ed-row-head .ed-lede { max-width:52ch }
.rhinory-field-notes .ed-card { display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule-warm-2);color:var(--ink-warm);text-decoration:none;position:relative;transition:transform .25s ease,border-color .25s ease }
.rhinory-field-notes .ed-card:hover { transform:translateY(-4px);border-color:var(--burgundy) }
.rhinory-field-notes .ed-card .ed-photo { aspect-ratio:4/3;border:0;border-bottom:1px solid var(--rule-warm);box-shadow:none }
.rhinory-field-notes .ed-card-body { padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1 }
.rhinory-field-notes .ed-card-title { margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(24px,2.2vw,28px);line-height:1.1;letter-spacing:-.008em;color:var(--ink-warm);text-wrap:pretty;transition:color .2s }
.rhinory-field-notes .ed-card-title em { font-style:italic;font-weight:500;color:var(--burgundy) }
.rhinory-field-notes .ed-card:hover .ed-card-title { color:var(--burgundy) }
.rhinory-field-notes .ed-card-x { margin:0;font-family:"Lora",Georgia,serif;font-size:15px;line-height:1.65;color:var(--ink-warm-2);text-wrap:pretty }
.rhinory-field-notes .ed-news { background:color-mix(in oklab,var(--rhino-warm) 16%,var(--paper));border-top:1px solid var(--rule-warm-2);padding:clamp(72px,8vw,104px) 0 }
.rhinory-field-notes .ed-news .ed-wrap { display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,80px);align-items:center }
.rhinory-field-notes .ed-news .ed-h2 { margin-bottom:22px }
.rhinory-field-notes .ed-news .ed-h2 em { display:block }
.rhinory-field-notes .ed-form { background:#fff;border:1px solid var(--rule-warm-2);padding:30px 32px 26px;display:flex;flex-direction:column;gap:16px }
.rhinory-field-notes .ed-form label { font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy) }
.rhinory-field-notes .ed-form-row { display:grid;grid-template-columns:1fr auto;border:1px solid var(--rule-warm-2);background:#fff }
.rhinory-field-notes .ed-form-row input { background:transparent;border:0;color:var(--ink-warm);font-family:"Lora",Georgia,serif;font-size:15px;padding:14px 16px;outline:none;min-width:0 }
.rhinory-field-notes .ed-form-row input::placeholder { color:var(--rhino-warm) }
.rhinory-field-notes .ed-form-row input:focus-visible { box-shadow:inset 0 0 0 1px var(--burgundy) }
.rhinory-field-notes .ed-form-row button { background:var(--acacia);color:#1C1916;border:0;font-family:"Josefin Sans",system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:0 22px;min-height:44px;cursor:pointer;transition:background .2s }
.rhinory-field-notes .ed-form-row button:hover { background:var(--reserve);color:var(--ivory);border-color:var(--reserve); }
.rhinory-field-notes .ed-fine { margin:0;font-family:"Lora",Georgia,serif;font-size:13.5px;line-height:1.6;color:var(--rhino-warm) }
@media (max-width:1024px) {
	.rhinory-field-notes .ed-wrap { padding:0 40px }
}
@media (max-width:900px) {
	.rhinory-field-notes .ed-news .ed-wrap { grid-template-columns:1fr;gap:32px }
}
@media (max-width:640px) {
	.rhinory-field-notes .ed-wrap { padding:0 22px }
	.rhinory-field-notes .ed-ctas .btn { flex:1 1 auto;justify-content:center;min-width:0 }
	.rhinory-field-notes .ed-form-row { grid-template-columns:1fr }
	.rhinory-field-notes .ed-form-row button { min-height:48px }
}

/* 38-stories.css */
.rhinory-field-notes .st-head { padding:clamp(40px,5vw,64px) 0 clamp(48px,5vw,72px);background:var(--paper) }
.rhinory-field-notes .st-head-grid { display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,48px) }
.rhinory-field-notes .st-head .ed-h1 { white-space:nowrap }
.rhinory-field-notes .st-head-side { display:flex;flex-direction:column;gap:22px;padding-bottom:6px;justify-self:end }
.rhinory-field-notes .st-head-side .ed-lede { max-width:52ch;text-wrap:balance }
.rhinory-field-notes .st-head-fig { margin:0 }
.rhinory-field-notes .st-head-fig .ed-photo { aspect-ratio:5/2 }
.rhinory-field-notes .st-head-fig .ed-photo img { object-position:50% 100% }
.rhinory-field-notes .st-head-fig .ed-photo img { transform-origin:50% 100%;animation:st-kb 22s cubic-bezier(.2,.7,.2,1) both }
.rhinory-field-notes .st-sec-head { margin-bottom:clamp(36px,4vw,56px) }
.rhinory-field-notes .st-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }
.rhinory-field-notes .st-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px }
.rhinory-field-notes .st-grid .ed-card .ed-photo { aspect-ratio:4/3 }
.rhinory-field-notes .st-col { position:relative }
.rhinory-field-notes .st-col .ed-card-body { padding:28px 28px 30px;gap:16px }
.rhinory-field-notes .st-col .ed-card-title { font-size:clamp(30px,3vw,38px) }
.rhinory-field-notes .st-col .ed-card-x { font-size:16px;line-height:1.68 }
.rhinory-field-notes .st-col .ed-ctas { margin-top:auto;padding-top:10px }
.rhinory-field-notes .st-col .ed-ctas .btn { position:static;white-space:nowrap;transform:none !important }
.rhinory-field-notes .st-col .ed-ctas .btn::before { content:"";position:absolute;inset:0;z-index:1 }
.rhinory-field-notes .st-col:hover .btn-outline { border-color:var(--burgundy);background:rgba(82,0,0,.05) }
.rhinory-field-notes .st-col:focus-within { border-color:var(--burgundy) }
.rhinory-field-notes .st-col .btn:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }
.rhinory-field-notes .st-list { display:flex;flex-wrap:wrap;justify-content:center;gap:24px }
.rhinory-field-notes .st-list>.ed-card { flex:0 1 calc((100% - 48px)/3);min-width:0 }
.rhinory-field-notes .st-list .ed-card .ed-photo { aspect-ratio:4/3 }
.rhinory-field-notes .st-list>.st-wide { flex-basis:calc((100% - 24px)/2) }
.rhinory-field-notes .st-wide .ed-photo { aspect-ratio:3/2 }
.rhinory-field-notes .st-wide .ed-card-title { font-size:clamp(26px,2.4vw,32px) }
.rhinory-field-notes .st-post .ed-card-body { padding:24px 26px 26px }
.rhinory-field-notes .st-post-foot { margin-top:auto;padding-top:16px;border-top:1px solid var(--rule-warm);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-family:"Lora",Georgia,serif;font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-warm-2) }
.rhinory-field-notes .st-post-foot .sep { font-style:normal;color:var(--burgundy) }
.rhinory-field-notes .st-post:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }
@media (max-width:1080px) and (min-width:641px) {
	.rhinory-field-notes .st-grid { grid-template-columns:1fr;gap:20px }
	.rhinory-field-notes .st-grid .ed-card, .rhinory-field-notes .st-list>.ed-card { display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
	.rhinory-field-notes .st-grid .ed-card .ed-photo, .rhinory-field-notes .st-list .ed-card .ed-photo { aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:1px solid var(--rule-warm) }
	.rhinory-field-notes .st-list { gap:20px }
	.rhinory-field-notes .st-list>.ed-card { flex-basis:100% }
}
@media (max-width:900px) {
	.rhinory-field-notes .st-head-grid { grid-template-columns:1fr;gap:24px;align-items:start }
	.rhinory-field-notes .st-head-side { padding-bottom:0 }
	.rhinory-field-notes .st-head-side { justify-self:start }
	.rhinory-field-notes .st-head-fig .ed-photo { aspect-ratio:2/1 }
	.rhinory-field-notes .st-head-fig .ed-photo img { object-position:62% 55% }
}
@media (max-width:640px) {
	.rhinory-field-notes .st-grid { grid-template-columns:1fr;gap:20px }
	.rhinory-field-notes .st-list { gap:20px }
	.rhinory-field-notes .st-list>.ed-card { flex-basis:100% }
	.rhinory-field-notes .st-head-fig .ed-photo { aspect-ratio:3/2 }
	.rhinory-field-notes .st-head-side .ed-ctas .btn { flex:0 1 auto }
	.rhinory-field-notes .st-col .ed-card-body { padding:24px 22px 26px }
}


/* Crops: the prototype's, as the --photo-focal fallback. */
.rhinory-field-notes .st-head-fig .ed-photo img { object-position: var(--photo-focal, 50% 100%); }
@media (max-width:900px) {
	.rhinory-field-notes .st-head-fig .ed-photo img { object-position: var(--photo-focal, 62% 55%); }
}

/* Reveals, only under html.js; view.js adds .is-in. */
html.js .rhinory-field-notes .ed-reveal { opacity: 0; transform: translate3d(0,22px,0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
html.js .rhinory-field-notes .ed-reveal.is-in { opacity: 1; transform: none; }
/* Card stagger, 100/200/300ms after the section; backwards fill so the hover lift still works. */
html.js .rhinory-field-notes .ed-reveal:not(.is-in) :is(.st-grid,.st-list) > * { opacity: 0; }
html.js .rhinory-field-notes .ed-reveal.is-in :is(.st-grid,.st-list) > * { animation: st-rise 1s cubic-bezier(.2,.7,.2,1) backwards; }
html.js .rhinory-field-notes .ed-reveal.is-in :is(.st-grid,.st-list) > :nth-child(1) { animation-delay: .1s; }
html.js .rhinory-field-notes .ed-reveal.is-in :is(.st-grid,.st-list) > :nth-child(2) { animation-delay: .2s; }
html.js .rhinory-field-notes .ed-reveal.is-in :is(.st-grid,.st-list) > :nth-child(n+3) { animation-delay: .3s; }
@keyframes st-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes st-rise { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html.js .rhinory-field-notes .ed-reveal { opacity: 1; transform: none; transition: none; }
	.rhinory-field-notes .ed-card { transition: none; }
	.rhinory-field-notes .ed-card:hover { transform: none; }
	.rhinory-field-notes .st-head-fig .ed-photo img { animation: none; transform: none; }
	html.js .rhinory-field-notes .ed-reveal :is(.st-grid,.st-list) > * { opacity: 1 !important; animation: none !important; }
}

/* Breadcrumb (38 / 39 / 41, CD 2026-11-04-field-notes-hub-41-pass): the 40
   post trail's markup and look, one trail across the hub. 39 and 41 drop
   "Rhinory /" at 560px and below; the hub keeps it, or only the current
   item would be left. Built by rhinory_v4_field_notes_crumb(). */
.rhinory-field-notes .ed-crumb { display:flex;flex-wrap:nowrap;min-width:0;align-items:center;gap:11px;margin:0 0 clamp(24px,3vw,32px);font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase }
.rhinory-field-notes .ed-crumb a:not(.btn) { color:var(--ink-warm-2);text-decoration:none;transition:color .2s }
.rhinory-field-notes .ed-crumb a:not(.btn):hover { color:var(--burgundy) }
.rhinory-field-notes .ed-crumb a, .rhinory-field-notes .ed-crumb .sep { flex:none;white-space:nowrap }
.rhinory-field-notes .ed-crumb .sep { color:var(--rule-warm-2) }
.rhinory-field-notes .ed-crumb .current { color:var(--burgundy);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.rhinory-field-notes .ed-crumb a:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }
@media (max-width:560px) {
	.rhinory-field-notes :is(.bj-crumb,.wn-crumb) > a:first-child, .rhinory-field-notes :is(.bj-crumb,.wn-crumb) > a:first-child + .sep { display:none }
}