/* Field Notes v2: airy, uninterrupted image canvas and a true 3D reading scene.
   Visual / motion references: useLayouts Infinite Canvas + Perspective Text Scroll.
   This stylesheet scopes the redesign to the Field Notes landing page only. */
.fieldnotes-home{display:block!important}
.fieldnotes-home>.hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:24px!important;min-height:auto!important;padding:clamp(72px,10vw,150px) 0 78px!important;border-bottom:1px solid var(--edge)!important}
.fieldnotes-home .hero h1{font-family:var(--sans);font-size:clamp(78px,11.6vw,172px)!important;line-height:.83;letter-spacing:-.092em;font-weight:620;max-width:1120px}
.fieldnotes-home .hero h1 em{font-family:var(--serif);font-size:.86em;font-weight:400;letter-spacing:-.075em;color:var(--accent)}
.fieldnotes-home .hero__note{font-size:clamp(16px,1.6vw,20px);max-width:35rem;line-height:1.5;margin-top:36px;color:var(--muted)}
.fieldnotes-home .hero__link{font-size:15px;gap:34px}
.fieldnotes-home .hero__count{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:1px!important;margin:0 0 12px!important;flex-shrink:0}
.fieldnotes-home .hero__count strong{font-size:clamp(40px,5.4vw,82px)!important;line-height:1;letter-spacing:-.09em;font-weight:450;color:var(--text)}
.fieldnotes-home .hero__count span{font-size:13px!important;color:var(--muted)!important;margin:0!important}

.fieldnotes-home>#close-reads{grid-column:auto!important;grid-row:auto!important;min-width:0;margin-top:66px!important}
.fieldnotes-home #close-reads .section-head{margin-bottom:14px}
.fieldnotes-home #close-reads .section-head h2{font-size:clamp(35px,4.2vw,56px)!important;letter-spacing:-.055em}
.fieldnotes-home #close-reads .section-head sup{font:500 13px var(--sans);vertical-align:top;letter-spacing:0;color:var(--muted);margin-left:5px}

/* useLayouts canvas composition: photos breathe on a quiet plane.
   3x3 repeated blocks with inertial dragging, not tiny outlined tiles. */
.fn-infinite{position:relative}
.fn-infinite__top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 19px}
.fn-infinite__intro{font-size:14px;color:var(--muted)}
.fn-infinite__tools{display:flex;align-items:center;gap:24px}
.fn-infinite__tools button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;background:none;color:var(--text);border:0;border-bottom:1px solid var(--edge);border-radius:0;padding:7px 1px;font-size:13px;font-weight:550;white-space:nowrap}
.fn-infinite__tools button:hover{color:var(--accent);border-bottom-color:var(--accent)}
.fn-infinite__tools button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fn-infinite__tools button span{font-size:17px;line-height:1;color:var(--accent)}
.fn-infinite__viewport{
 --fn-card-width:clamp(250px,21.5vw,310px);
 --fn-grid-gap:clamp(24px,2.8vw,44px);
 position:relative;width:calc(100% + 6vw);margin-left:-3vw;height:min(86svh,810px);
 min-height:680px;overflow:hidden;background:#f8f7f4;
 cursor:grab;isolation:isolate;touch-action:none;overscroll-behavior:contain;
 user-select:none;-webkit-user-select:none
}
.fn-infinite__viewport.is-dragging{cursor:grabbing}
.fn-infinite__viewport:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fn-infinite__matrix{position:absolute;left:0;top:0;display:grid;grid-template-columns:repeat(3,max-content);grid-template-rows:repeat(3,max-content);width:max-content;transform:translate3d(0,0,0);transform-origin:center;will-change:transform;backface-visibility:hidden}
.fn-infinite__block{display:grid;width:max-content;grid-template-columns:repeat(4,var(--fn-card-width));gap:var(--fn-grid-gap);padding:calc(var(--fn-grid-gap)/2);align-items:start}
.fn-infinite__tile{display:flex;width:var(--fn-card-width);min-width:0;flex-direction:column;gap:20px;align-items:center;color:#252724;text-decoration:none;cursor:pointer}
.fn-infinite__tile:focus-visible{outline:3px solid #746447;outline-offset:6px}
.fn-infinite__picture{position:relative;display:grid;place-items:center;aspect-ratio:1.48;width:100%;overflow:hidden;background:#e9e8e3}
.fn-infinite__picture img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;pointer-events:none;transition:transform .35s cubic-bezier(.22,.8,.2,1)}
.fn-infinite__tile:hover .fn-infinite__picture img,.fn-infinite__tile:focus-visible .fn-infinite__picture img{transform:scale(1.035)}
.fn-infinite__fallback{font:italic 54px/1 var(--serif);color:#9c998f;letter-spacing:-.06em}
.fn-infinite__meta{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:4px;min-height:47px;max-width:100%;pointer-events:none}
.fn-infinite__number{font:500 11px/1.2 var(--sans);color:#99968f;letter-spacing:.12em}
.fn-infinite__label{font:600 13px/1.35 var(--sans);color:#292a28;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.012em}
.fn-infinite__hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;align-items:center;gap:13px;padding:10px 16px;border-radius:100px;background:rgba(30,31,29,.88);color:#f7f4ec;font-size:11px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.fn-infinite__hint span{font-size:18px;color:#cdbf9e;line-height:1}
.fn-infinite__mobile-tip{display:none}
.fn-canvas-ready #close-reads .featured-gallery,
.fn-canvas-ready #close-reads .selected-more,
.fn-canvas-ready #close-reads .featured-list{display:none}
.fn-canvas-ready #close-reads.fn-list-open .fn-infinite__viewport,
.fn-canvas-ready #close-reads.fn-list-open .fn-infinite__mobile-tip{display:none}
.fn-canvas-ready #close-reads.fn-list-open .featured-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:22px 0 0;overflow:visible;padding:0}
.fn-canvas-ready #close-reads.fn-list-open .featured-card,
.fn-canvas-ready #close-reads.fn-list-open .featured-card:hover{width:100%;min-width:0;max-width:none;flex-basis:auto;transform:none;scroll-snap-align:unset}
.fn-canvas-ready #close-reads.fn-list-open .featured-card .preview{aspect-ratio:1.35}

/* useLayouts' text comes forward through depth on a quiet, unboxed surface.
   It is a passage to read, rather than a second oversized slogan. */
.fn-perspective{
 position:relative;width:calc(100vw - 18px);margin:100px 0 0 calc(50% - 50vw + 9px);
 height:250svh;min-height:1250px;background:#f7f4f2;color:#3f5b4e;isolation:isolate;
}
.fn-perspective__sticky{
 position:sticky;top:0;left:0;height:100svh;min-height:500px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:110px max(24px,5vw) 50px;text-align:center;overflow:hidden;perspective:560px;
}
.fn-perspective__eyebrow{color:#66786a;font:550 12px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin-bottom:32px}
.fn-perspective__headline{
 max-width:1030px;margin:0;
 font:570 clamp(32px,3.05vw,48px)/1.24 var(--sans);
 letter-spacing:-.055em;color:#496958;
 transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;
}
.fn-perspective__headline em{font:inherit;color:#496958}
.fn-perspective__aside{max-width:440px;margin-top:30px;font-size:15px;line-height:1.65;color:#67786b}
.fn-perspective__sticky::after{content:"";pointer-events:none;position:absolute;left:0;bottom:0;width:100%;height:17%;background:linear-gradient(0deg,#f7f4f2,transparent)}
.fieldnotes-home>#index{grid-column:auto!important;grid-row:auto!important;margin-top:84px!important;padding-top:0!important;border-top:0!important}
.fieldnotes-home>#index .section-head h2{font-size:clamp(40px,5.5vw,72px);letter-spacing:-.06em}
.fieldnotes-home>.contribute{grid-column:auto!important}
@media(max-width:900px){
 .fieldnotes-home>.hero{padding:82px 0 58px!important}
 .fieldnotes-home #close-reads{margin-top:58px!important}
 .fn-infinite__viewport{--fn-card-width:clamp(225px,30vw,280px);--fn-grid-gap:clamp(20px,3vw,32px);min-height:590px;height:73svh;width:calc(100% + 4vw);margin-left:-2vw}
 .fn-perspective{margin-top:68px;min-height:1000px}
 .fn-perspective__headline{font-size:clamp(33px,5.3vw,54px)}
}
@media(max-width:600px){
 .fieldnotes-home>.hero{grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:22px!important;padding:67px 0 51px!important}
 .fieldnotes-home .hero h1{font-size:clamp(57px,12.4vw,80px)!important;letter-spacing:-.078em;line-height:.93}
 .fieldnotes-home .hero h1 em{letter-spacing:-.07em}
 .fieldnotes-home .hero__note{font-size:16px;margin-top:22px;line-height:1.6}
 .fieldnotes-home .hero__count{flex-direction:row!important;align-items:baseline!important;justify-content:flex-start!important;gap:9px!important;margin:0!important}
 .fieldnotes-home .hero__count strong{font-size:30px!important}
 .fieldnotes-home .hero__count span{font-size:12px!important}
 .fieldnotes-home>#close-reads{margin-top:46px!important}
 .fieldnotes-home #close-reads .section-head{margin-bottom:12px}
 .fieldnotes-home #close-reads .section-head h2{font-size:34px!important}
 .fn-infinite__top{gap:12px;align-items:flex-start;flex-wrap:wrap}
 .fn-infinite__intro{font-size:13px;line-height:1.5}
 .fn-infinite__tools{width:100%;justify-content:space-between;gap:12px}
 .fn-infinite__tools button{min-height:44px;font-size:13px}
 .fn-infinite__viewport{--fn-card-width:clamp(220px,64vw,270px);--fn-grid-gap:23px;width:calc(100% + 7vw);margin-left:-3.5vw;height:530px;min-height:0;touch-action:pan-y}
 .fn-infinite__tile{gap:12px}
 .fn-infinite__meta{min-height:42px;gap:3px}
 .fn-infinite__label{font-size:12px}
 .fn-infinite__hint{bottom:13px;font-size:10px;padding:9px 12px}
 .fn-infinite__mobile-tip{display:block;margin:12px 0 0;font-size:12px;color:var(--muted)}
 .fn-canvas-ready #close-reads.fn-list-open .featured-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .fn-canvas-ready #close-reads.fn-list-open .featured-card .featured-card__name{font-size:13px}
 .fn-perspective{margin-top:66px;height:210svh;min-height:850px}
 .fn-perspective__sticky{padding:70px 22px 35px;min-height:0}
 .fn-perspective__eyebrow{font-size:11px;margin-bottom:24px}
 .fn-perspective__headline{font-size:clamp(29px,7.7vw,38px);line-height:1.24;letter-spacing:-.042em}
 .fn-perspective__aside{font-size:14px;margin-top:24px}
 .fieldnotes-home>#index{margin-top:66px!important}
 .fieldnotes-home>#index .section-head h2{font-size:38px}
}
@media(max-width:360px){
 .fn-infinite__viewport{--fn-card-width:215px}
 .fn-perspective__headline{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
 .fn-infinite__picture img{transition:none!important}
 .fn-perspective{height:auto;min-height:0;padding:0}
 .fn-perspective__sticky{height:auto;min-height:0;position:static;padding:98px 24px}
 .fn-perspective__headline{transform:none!important;opacity:1!important;will-change:auto}
}