/* The Entry page (/entry, 18 Oct 2026; apply-additions.py item 24, entry_page.py, entry.js). Entry, Buildner's
   digital magazine on architecture competitions, by subscription. The MICROHOME page's pattern: the first screen and
   who it is for on a night ground the cover shines on (the magazine moving), then paper and the shop's light grey in
   turn, the shop's yellow for the latest issue. The current issue (19 Oct 2026) on paper: its cover large, its contents as in the magazine
   (the page number, the part, what is in it), its highlights in a grid of four (a picture or a number each, the
   numbers on yellow, ink or grey), a row of cards to swipe on a phone; its pages open in the book pages' preview
   (styles.css .preview-dialog), spreads side by side with the fold between them. The type stays in the shop's system: the page
   title (h1), section titles (h2 with the italic line), the chapter titles, one h3 size, the lead, body text, one
   small grey line and the eyebrow labels. What Entry costs (26 Oct 2026, in place of two tiles that read as a choice) is
   one offer: the price at the size of the numbers with what it buys beside it, then each new issue's price, in the
   first screen and the subscription sheet; How it works shows the run of issues: the latest one today in a yellow
   cell, the next ones in ink with their price in yellow, then "and so on" in the shop's grey, with no month named.
   The subscription sheet (26 Oct 2026) has two sides: the night ground with what the subscriber gets, paper with the
   form; Manage my subscription is a white card; both come from the bottom on phones. Back from Stripe's page the view
   shows only the thank-you section (.is-done); the bar at the bottom of the screen is the book pages' buy bar (buy-bar.css). */
.ey-view{--ey-night:#0e1215;--ey-soft:#b3b9bf;--ey-gap:30px}
.ey-view h2{font-size:clamp(40px,4.3vw,70px)}
.ey-view h3{font-size:22px;line-height:1.25;letter-spacing:-.03em;font-weight:400;margin:10px 0 0;min-height:0}
.ey-view .button{margin:0}
.ey-lead{font-size:20px;line-height:1.55;letter-spacing:-.01em;margin:0;text-wrap:pretty}
.ey-small{font-size:13px;line-height:1.5;color:var(--muted)}
.ey-label{display:block;margin:0 0 8px;font-size:12px;letter-spacing:.095em;text-transform:uppercase;font-weight:700}
.ey-no{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.ey-tag{display:inline-block;padding:3px 8px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.095em;text-transform:uppercase}
.ey-textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ey-textlink:hover{text-decoration-thickness:2px}
.ey-textlink span{font-size:16px;text-decoration:none}
.ey-head .eyebrow{margin:0}
.ey-head h2{margin:18px 0 0}
.ey-head .ey-lead{margin-top:24px;max-width:34em}
.ey-view :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ey-hero :focus-visible,.ey-for :focus-visible{outline-color:var(--yellow)}
.header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.ey-view figure{margin:0}

/* 1. The first screen: what Entry is, what it costs, Subscribe now, the latest issue at once and Manage my
   subscription, beside the cover in front of two pages, which move */
.ey-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding:72px var(--pad) 84px;background:var(--ey-night);color:#fff;overflow:hidden}
.ey-hero-copy{min-width:0}
.ey-hero h1{margin:22px 0 0;font-size:clamp(40px,4.35vw,72px);color:#fff;text-wrap:balance}
.ey-hero .ey-lead{margin-top:26px;max-width:31em;color:var(--ey-soft)}
.ey-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:30px}
.ey-meta{margin:26px 0 0;font-size:14px;line-height:1.5;color:var(--ey-soft)}
/* a button that reads as a link in a sentence (Manage my subscription) */
.ey-inline{display:inline;min-height:0;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ey-inline:hover{text-decoration-thickness:2px}
.ey-meta .ey-inline{padding:12px 0}
/* What Entry costs, one offer (26 Oct 2026): the price to sign up and get your first issue, then each new issue's
   price; framed in the shop's yellow on the night ground of the first screen, unframed in the subscription sheet */
.ey-offer{margin:30px 0 0;max-width:540px;padding:18px 20px 18px;border:1px solid var(--yellow)}
.ey-offer p{margin:0}
.ey-offer-now{display:flex;align-items:flex-start;gap:16px}
.ey-offer-now b{flex:none;font-size:clamp(36px,3.2vw,48px);font-weight:400;letter-spacing:-.055em;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.ey-offer-now span{padding-top:3px;font-size:17px;line-height:1.4;color:#fff}
.ey-offer .ey-offer-then{margin-top:14px;font-size:14px;line-height:1.45;color:var(--ey-soft)}
.ey-thanks{margin:0 0 28px;padding:12px 16px;background:var(--yellow);color:var(--ink);font-size:15px;line-height:1.5}
.ey-thanks[hidden]{display:none}
.ey-stack{position:relative;width:100%;aspect-ratio:6/5}
.ey-stack img{position:absolute;display:block;height:auto;box-shadow:0 22px 40px rgba(0,0,0,.45)}
.ey-stack-cover{z-index:2;width:54%;left:23%;top:1%}
.ey-stack-back{width:40%;top:13%;filter:brightness(.8)}
.ey-stack-left{left:0;transform:rotate(-5deg)}
.ey-stack-right{right:0;transform:rotate(5deg)}
/* The magazine moves (Lauris, 19 Oct 2026: "make that these elements move"): the two pages fan out from behind the
   cover as the page opens, then the three float slowly; on a computer they follow the pointer a little (entry.js sets
   --ey-mx and --ey-my, -1 to 1) and as the page scrolls the pages spread (--ey-sy, 0 to 1). The cover is never
   hidden while it comes in (it is the page's first picture). Nothing moves for readers who ask for less motion. */
.ey-stack{--ey-mx:0;--ey-my:0;--ey-sy:0}
.ey-stack img{transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.ey-stack-cover{translate:calc(var(--ey-mx) * 10px) calc(var(--ey-my) * 8px - var(--ey-sy) * 22px);animation:ey-cover-in 1s cubic-bezier(.2,.7,.2,1) both,ey-cover-float 6.5s ease-in-out 1s infinite alternate}
.ey-stack-left{translate:calc(var(--ey-mx) * -20px - var(--ey-sy) * 30px) calc(var(--ey-my) * -12px + var(--ey-sy) * 18px);animation:ey-left-in 1.2s cubic-bezier(.2,.7,.2,1) .15s both,ey-left-float 7.5s ease-in-out 1.35s infinite alternate}
.ey-stack-right{translate:calc(var(--ey-mx) * -26px + var(--ey-sy) * 12px) calc(var(--ey-my) * -14px + var(--ey-sy) * 30px);animation:ey-right-in 1.2s cubic-bezier(.2,.7,.2,1) .3s both,ey-right-float 8.5s ease-in-out 1.5s infinite alternate}
@keyframes ey-cover-in{from{transform:translateY(26px)}to{transform:translateY(0)}}
@keyframes ey-cover-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes ey-left-in{from{opacity:0;transform:translate(42%,0) rotate(0deg)}to{opacity:1;transform:translate(0,0) rotate(-5deg)}}
@keyframes ey-left-float{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(-6px,8px) rotate(-7deg)}}
@keyframes ey-right-in{from{opacity:0;transform:translate(-42%,0) rotate(0deg)}to{opacity:1;transform:translate(0,0) rotate(5deg)}}
@keyframes ey-right-float{from{transform:translate(0,0) rotate(5deg)}to{transform:translate(6px,-8px) rotate(7deg)}}

/* 2. Who it is for, still on the night (19 Oct 2026, in place of four numbers): the four readers, an icon each on the
   shop's yellow, what Entry brings them, a line from the current issue and the link to their highlights */
.ey-for{padding:0 var(--pad) 104px;background:var(--ey-night);color:#fff}
.ey-for-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--ey-gap);padding-top:76px;border-top:1px solid rgba(255,255,255,.24)}
.ey-for .ey-head{grid-column:1/span 6}
.ey-for .ey-for-lead{grid-column:8/span 5;align-self:end;margin:0;color:var(--ey-soft)}
.ey-for .ey-head h2{color:#fff}
.ey-for-list{grid-column:1/-1;list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ey-gap)}
.ey-reader{display:flex;flex-direction:column;min-width:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.24)}
.ey-view .ey-reader h3{margin:0;color:#fff}
.ey-reader p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ey-soft)}
.ey-reader .ey-reader-text{flex:1 0 auto}
.ey-reader .ey-reader-issue{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);color:#fff}
.ey-reader-issue .ey-label{margin-bottom:6px;color:var(--yellow)}
.ey-reader .ey-textlink{align-self:flex-start;margin-top:auto;padding-top:16px;color:#fff}
.ey-who-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 0 24px;background:var(--yellow);color:var(--ink)}
.ey-who-icon svg{display:block;width:40px;height:40px}

/* 2b. The current issue: its cover (it opens the pages), what it covers and its contents, Subscribe now; then its
   highlights, a picture or a number each, and a filter for each kind of reader */
.ey-now{background:#fff}
.ey-now-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;gap:0 var(--ey-gap)}
.ey-now-cover{grid-column:1/span 5;grid-row:1/span 2;align-self:start}
.ey-now .ey-head{grid-column:7/span 6;grid-row:1;min-width:0}
.ey-now-rest{grid-column:7/span 6;grid-row:2;min-width:0;margin-top:30px}
.ey-now-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;transition:transform .35s ease}
.ey-now-open img{display:block;width:100%;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 48px rgba(0,0,0,.2);transition:box-shadow .35s ease}
@media(hover:hover){
  .ey-now-open:hover{transform:translateY(-6px)}
  .ey-now-open:hover img{box-shadow:0 1px 2px rgba(0,0,0,.08),0 34px 60px rgba(0,0,0,.26)}
  .ey-spread:hover .ey-spread-pages{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 16px 30px rgba(0,0,0,.16)}
  .ey-spread:hover .ey-spread-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .ey-toc-row:hover .ey-toc-name{text-decoration-color:currentColor}
  .ey-toc-row:hover .ey-toc-go{transform:translateX(4px)}
  .ey-chip:hover{border-color:var(--ink)}
  .ey-card:hover .ey-card-media img{transform:scale(1.03)}
  .ey-card:hover .ey-card-go{text-decoration-thickness:2px}
}
.ey-now-chip{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--ink);color:#fff;font-size:14px;line-height:1.2;white-space:nowrap}
.ey-now-chip b{font-weight:400;font-size:16px}
.ey-now-cover figcaption{margin-top:42px;max-width:34em}
.ey-spreads{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-gap)}
.ey-spread{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ey-spread-pages{position:relative;display:flex;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(0,0,0,.12);transition:transform .3s ease,box-shadow .3s ease}
.ey-spread-pages img{display:block;width:50%;height:auto}
.ey-spread-pages::after{content:'';position:absolute;top:0;bottom:0;left:44%;width:12%;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.13) 50%,rgba(0,0,0,0));pointer-events:none}
.ey-spread-title{display:block;margin-top:14px;font-size:15px;line-height:1.35;letter-spacing:-.01em}
.ey-spread-where{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.ey-now-meta{margin:0 0 30px;font-size:15px;line-height:1.5}
.ey-toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ey-toc li{border-bottom:1px solid var(--line)}
.ey-toc-row{display:grid;grid-template-columns:54px minmax(0,1fr) 22px;grid-template-areas:"no name go" "no text go";gap:3px 14px;align-items:baseline;width:100%;min-height:44px;padding:14px 0 15px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ey-toc-no{grid-area:no;font-size:30px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ey-toc-name{grid-area:name;font-size:18px;line-height:1.3;letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .18s}
.ey-toc-text{grid-area:text;font-size:14px;line-height:1.45;color:var(--muted)}
.ey-toc-go{grid-area:go;align-self:center;justify-self:end;font-size:16px;transition:transform .18s}
.ey-now-note{margin:14px 0 0}
.ey-hl{margin-top:104px;padding-top:30px;border-top:1px solid var(--ink);scroll-margin-top:16px}
.ey-hl-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px}
.ey-view .ey-hl-title{margin:0;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:-.05em}
.ey-chips{display:flex;flex-wrap:wrap;gap:8px}
.ey-chip{min-height:44px;padding:10px 16px;border:1px solid #cacac3;background:#fff;color:var(--ink);font:inherit;font-size:14px;line-height:1.2;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.ey-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ey-cards{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--ey-gap)}
.ey-card{position:relative;display:flex;flex-direction:column;min-width:0}
.ey-card[hidden]{display:none}
.ey-card.is-in{animation:ey-in .32s ease both}
.ey-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.ey-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ey-card-big{display:flex;align-items:flex-end;padding:20px 22px}
.ey-card-big p{margin:0}
.ey-card-big b{display:block;font-size:clamp(46px,4.6vw,72px);font-weight:400;letter-spacing:-.065em;line-height:1;white-space:nowrap}
.ey-card-big span{display:block;margin-top:10px;font-size:13px;line-height:1.4}
.ey-card-big.is-yellow{background:var(--yellow);color:var(--ink)}
.ey-card-big.is-ink{background:var(--ink);color:#fff}
.ey-card-big.is-ink span{color:#c9c9c4}
.ey-card-big.is-grey{background:var(--surface);color:var(--ink)}
.ey-card-big.is-grey span{color:var(--muted)}
.ey-card-body{display:flex;flex-direction:column;flex:1;padding-top:18px}
.ey-card-sec{margin:0;font-size:12px;line-height:1.5;letter-spacing:.095em;text-transform:uppercase;font-weight:700}
.ey-card-sec span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:13px}
.ey-view .ey-card h4{margin:8px 0 0;font-size:22px;line-height:1.25;letter-spacing:-.03em;font-weight:400}
.ey-card-text{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.ey-card-credit{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.ey-card-go{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:auto;padding:14px 0 0;border:0;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ey-card-go::after{content:'';position:absolute;inset:0}
@keyframes ey-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 3. The grid of the sections below (What Entry is and its readers became section 2 on 19 Oct 2026) */
.ey-how,.ey-faq,.ey-cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--ey-gap)}
.ey-steps li{padding-top:20px;border-top:1px solid var(--ink)}
.ey-steps li p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* 4. The five chapters: the words, and a page or two of Issue 01 beside them, in turn on paper and grey */
.ey-chapters-head{padding-bottom:20px}
.ey-ch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--ey-gap);align-items:center;padding:76px var(--pad) 92px;border-top:1px solid var(--line)}
.ey-ch:nth-of-type(odd){background:var(--surface);border-top:0}
.ey-ch-text{grid-column:1/span 5;grid-row:1;min-width:0}
.ey-pages{grid-column:7/span 6;grid-row:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.ey-ch:nth-of-type(even) .ey-ch-text{grid-column:8/span 5}
.ey-ch:nth-of-type(even) .ey-pages{grid-column:1/span 6}
.ey-pages-1{grid-template-columns:minmax(0,.62fr);justify-content:center}
.ey-pages li{min-width:0}
.ey-pages img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 30px rgba(0,0,0,.12)}
.ey-pages figcaption{margin-top:10px}
.ey-view .ey-ch-title{margin:14px 0 0;font-size:clamp(34px,3.4vw,54px);line-height:1.02;letter-spacing:-.06em}
.ey-ch-lead{margin:22px 0 0;font-size:17px;line-height:1.6}
.ey-issue{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--ink);font-size:15px;line-height:1.55}
.ey-issue .ey-label{margin-bottom:6px}

/* 5. How it works: the run of issues (the latest one today on yellow, the next ones in ink with their price in yellow,
   "and so on" in grey; 20 Oct 2026, in place of the joining fee and the year of months), then four steps */
.ey-how{border-top:1px solid var(--line)}
.ey-how .ey-head{grid-column:1/span 6}
.ey-series-box{grid-column:1/-1;margin-top:52px}
.ey-series{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ey-s{display:grid;align-content:space-between;gap:30px;min-width:0;min-height:156px;padding:14px 16px 16px;background:var(--ink);color:#c9c9c4;font-size:14px;line-height:1.4}
.ey-s p{margin:0}
.ey-s span{display:block}
.ey-s b{display:block;margin-top:4px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff}
.ey-s em{display:block;margin-bottom:6px;font-style:normal;font-size:clamp(30px,2.6vw,40px);font-weight:400;letter-spacing:-.055em;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.ey-s.is-now{background:var(--yellow);color:var(--ink)}
.ey-s.is-now b,.ey-s.is-now em{color:var(--ink)}
.ey-s.is-more{background:var(--surface);color:var(--muted)}
.ey-s.is-more b{margin-top:0;color:var(--ink)}
.ey-series-box .ey-small{margin:14px 0 0}
.ey-steps{grid-column:1/-1;list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ey-gap)}

/* 6. The latest issue, on the shop's yellow */
.ey-cta{background:var(--yellow);align-items:end;row-gap:28px}
.ey-cta-copy{grid-column:1/span 6}
.ey-view .ey-cta h2{margin:18px 0 0;font-size:clamp(56px,7vw,116px)}
.ey-cta-act{grid-column:8/span 5;display:grid;gap:26px;justify-items:start}

/* 7. Questions, and Manage my subscription under their title */
.ey-faq-side{grid-column:1/span 4;min-width:0}
.ey-manage-box{margin-top:44px;padding-top:18px;border-top:1px solid var(--ink)}
.ey-manage-box p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.ey-manage-box .ey-label{color:var(--ink)}
.ey-view .ey-manage-box .button{margin-top:18px}
.ey-qa{grid-column:6/span 7}
.ey-qa details{border-top:1px solid var(--ink)}
.ey-qa details:last-of-type{border-bottom:1px solid var(--ink)}
.ey-qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:18px 0;list-style:none;cursor:pointer;font-size:20px;line-height:1.35;letter-spacing:-.02em}
.ey-qa summary::-webkit-details-marker{display:none}
.ey-qa summary::after{content:'+';flex:none;font-size:24px;line-height:1;transition:transform .2s}
.ey-qa details[open] summary::after{transform:rotate(45deg)}
.ey-qa p{margin:0 0 22px;max-width:38em;font-size:16px;line-height:1.6;color:var(--muted)}
.ey-qa .ey-textlink{margin-top:26px}

/* The viewer of the issue's pages: the book pages' preview (styles.css .preview-dialog, .preview-heading,
   .preview-controls, .icon-button) with the spread's title, the pages on the shop's grey (two side by side with the
   fold between them, or one), where they are, the arrows and Subscribe */
.ey-v-in{height:100%;display:flex;flex-direction:column}
.ey-viewer .preview-heading h2{min-height:1.2em;margin:6px 0 0;font-size:23px;line-height:1.2;letter-spacing:-.045em}
.ey-v-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;touch-action:pan-y pinch-zoom}
.ey-v-pages{display:flex;align-items:center;justify-content:center}
.ey-v-page{position:relative;margin:0;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.ey-v-page[hidden]{display:none}
.ey-v-page img{display:block;width:auto;height:auto;max-width:calc(100vw - 96px);max-height:calc(90dvh - 220px);background:#fff}
.ey-viewer.is-spread .ey-v-page img{max-width:44vw}
.ey-viewer.is-spread .ey-v-page::after{content:'';position:absolute;inset:0;pointer-events:none}
.ey-viewer.is-spread .ey-v-page.is-left::after{background:linear-gradient(to left,rgba(0,0,0,.16),rgba(0,0,0,0) 6%)}
.ey-viewer.is-spread .ey-v-page.is-right::after{background:linear-gradient(to right,rgba(0,0,0,.16),rgba(0,0,0,0) 6%)}
@supports (container-type:size){
  .ey-v-stage{container-type:size}
  .ey-v-page img,.ey-viewer.is-spread .ey-v-page img{max-width:none;max-height:none;width:min(100cqw,100cqh * .7067)}
  .ey-viewer.is-spread .ey-v-page img{width:min(50cqw,100cqh * .7067)}
}
.ey-v-pages.is-next{animation:ey-turn-next .3s ease}
.ey-v-pages.is-prev{animation:ey-turn-prev .3s ease}
@keyframes ey-turn-next{from{opacity:.25;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ey-turn-prev{from{opacity:.25;transform:translateX(-26px)}to{opacity:1;transform:none}}
.ey-viewer .preview-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;padding:8px 20px}
.ey-v-cap{margin:0;min-width:0;font-size:13px;line-height:1.35}
.ey-v-cap strong{font-weight:700}
.ey-v-nav{display:flex;align-items:center;gap:22px}
.ey-v-count{min-width:5.5em;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ey-viewer .button.ey-v-sub{justify-self:end;min-height:44px;padding:10px 16px;gap:18px;white-space:nowrap}

/* The subscription sheet and Manage my subscription: white cards over the page, sheets from the bottom on phones */
.ey-sheet{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:auto}
.ey-sheet::backdrop{background:rgba(20,20,20,.55)}
.ey-sheet-in{display:grid;gap:20px;padding:26px 26px 28px}
.ey-sheet-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:16px;align-items:center}
.ey-sheet-cover{display:block;width:44px;height:auto;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ey-view .ey-sheet h2{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.04em}
.ey-sheet-x{width:44px;height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.ey-sheet-x:hover{background:var(--surface)}
.ey-sheet-rows{margin:0;border-top:1px solid var(--ink)}
.ey-sheet-rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.ey-sheet-rows dt{color:var(--muted)}
.ey-sheet-rows dd{margin:0;text-align:right}
.ey-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.5;cursor:pointer}
.ey-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer}
.ey-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ey-sheet-error{margin:0;padding:10px 12px;background:#fdf1ef;color:#a3271a;font-size:14px;line-height:1.45}
.ey-sheet-error[hidden]{display:none}
.ey-view .button.ey-sheet-go{width:100%}
.ey-view .button.ey-sheet-go[aria-busy="true"]{opacity:.6;cursor:progress}
.ey-field{margin:0;font-size:14px;line-height:1.4}
.ey-field input{font-family:inherit}
.ey-field input[aria-invalid="true"]{border-color:#a3271a}
.ey-field-note{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
/* The subscription sheet (26 Oct 2026, Lauris of the one before: "messy random layout"): two sides on white ("cmon
   balck on blck? make the popup white"), a line between them: what the subscriber gets (the cover, the offer, delivery
   and cancelling) and the form (the title, the email, the box in small type, Continue to payment); the band on top
   below 861px, from the bottom on phones */
.ey-sheet.ey-sub{width:min(900px,calc(100vw - 32px))}
.ey-sub-in{position:relative;display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);min-height:100%}
.ey-sub-side{display:flex;flex-direction:column;gap:26px;padding:44px 36px 34px;background:#fff;color:var(--ink);border-right:1px solid var(--line)}
.ey-sub-cover{display:block;width:168px;height:auto;box-shadow:0 14px 30px rgba(0,0,0,.2)}
.ey-sub-eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.095em;text-transform:uppercase;color:var(--ink)}
.ey-offer.is-side{margin:0;max-width:none;padding:0;border:0}
.ey-offer.is-side .ey-offer-now{gap:14px}
.ey-offer.is-side .ey-offer-now b{font-size:46px;color:var(--ink)}
.ey-offer.is-side .ey-offer-now span{padding-top:4px;font-size:16px;color:var(--ink)}
.ey-offer.is-side .ey-offer-then{margin-top:14px;font-size:14px;color:var(--muted)}
.ey-sub-facts{margin:auto 0 0;border-top:1px solid var(--line)}
.ey-sub-facts div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}
.ey-sub-facts dt{color:var(--muted)}
.ey-sub-facts dd{margin:0;color:var(--ink)}
.ey-sub-main{display:flex;flex-direction:column;gap:22px;min-width:0;padding:44px 40px 34px}
.ey-view .ey-sub h2{margin:0 44px 4px 0;font-size:32px;line-height:1.05;letter-spacing:-.045em}
.ey-sub .ey-consent{grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.55;color:var(--muted)}
.ey-sub .ey-consent input{width:18px;height:18px;margin:1px 0 0}
.ey-sub .ey-consent a{color:var(--ink)}
.ey-sub-note{margin:-8px 0 0}
.ey-sub-x{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:30px;font-weight:300;line-height:1;cursor:pointer}
.ey-sub-x:hover{background:var(--surface)}
.ey-view .ey-sub-x:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
/* Thank you (26 Oct 2026): back from Stripe's page (?subscribed=1, or =again) the view shows only this, on the night
   ground: the thanks, the three things to know, Continue exploring Buildner Books, beside the issue's cover */
.ey-done{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;min-height:calc(100dvh - 180px);padding:56px var(--pad) 80px;background:var(--ey-night);color:#fff}
.ey-done[hidden],.ey-done [data-v="again"],.ey-done.is-again [data-v="new"]{display:none}
.ey-done.is-again span[data-v="again"]{display:inline}
.ey-done.is-again p[data-v="again"]{display:block}
.ey-done-copy{min-width:0}
.ey-view .ey-done h2{margin:18px 0 0;font-size:clamp(44px,4.4vw,78px);color:#fff;text-wrap:balance}
.ey-view .ey-done .ey-lead{margin-top:20px;max-width:28em;color:#fff;font-size:22px}
.ey-done-steps{list-style:none;margin:34px 0 0;padding:0;max-width:600px;border-bottom:1px solid rgba(255,255,255,.18)}
.ey-done-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:8px;padding:14px 0 15px;border-top:1px solid rgba(255,255,255,.18)}
.ey-done-no{grid-row:1/span 2;padding-top:4px;font-size:13px;font-weight:700;letter-spacing:.095em;color:var(--yellow)}
.ey-view .ey-done-steps h3{margin:0;color:#fff;font-size:19px;line-height:1.3}
.ey-done-steps p{grid-column:2;margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ey-soft)}
.ey-done-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;margin-top:32px}
.ey-done-manage{color:#fff}
.ey-done-pic{justify-self:center;width:min(100%,360px)}
.ey-done-cover{display:block;width:100%;height:auto;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.ey-done :focus-visible{outline-color:var(--yellow)}
.ey-view.is-done>section:not(.ey-done),.ey-view.is-done .ey-bar{display:none!important}
.ey-m-ask,.ey-m-done,.ey-m-acct{display:grid;gap:18px;min-width:0}
.ey-m-ask[hidden],.ey-m-done[hidden],.ey-m-acct[hidden]{display:none}
.ey-m-text,.ey-m-note{margin:0;font-size:15px;line-height:1.55}
.ey-m-note.is-due{padding:12px 14px;background:var(--yellow)}
.ey-m-note.is-quiet{color:var(--muted)}
.ey-m-acct .ey-sheet-rows dd{overflow-wrap:anywhere}
.ey-m-acct [tabindex="-1"]:focus{outline:none}
.ey-m-status{display:inline-block;padding:2px 8px;background:var(--surface);font-size:13px;font-weight:700}
.ey-m-status.is-active{background:var(--ink);color:#fff}
.ey-m-status.is-past_due{background:var(--yellow);color:var(--ink)}
.ey-m-issues{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ey-m-issues li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.ey-m-issues .ey-m-state{font-size:13px;color:var(--muted)}
.ey-m-issues .ey-m-go{display:flex;align-items:center;gap:14px}
.ey-m-issues .ey-textlink{min-height:40px}
.ey-m-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.ey-m-acts .button{flex:1 1 auto}
.ey-m-confirm{display:grid;gap:14px;padding:16px;background:var(--surface)}
.ey-m-confirm[hidden]{display:none}
.ey-m-confirm p{margin:0;font-size:15px;line-height:1.55}
.ey-m-confirm div{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.ey-m-loading{margin:0;padding:22px 0;font-size:15px;color:var(--muted)}

/* The bar at the bottom of the screen: the cover, the price of an issue, Subscribe */
.ey-bar .buy-bar-cover{width:31px;height:44px;object-fit:cover;background:none;mix-blend-mode:normal;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ey-bar .buy-bar-add{flex:0 0 auto}

@media(max-width:1100px){
  .ey-hero{gap:40px}
  .ey-ch-text{grid-column:1/span 5}
  .ey-pages{grid-column:6/span 7}
  .ey-ch:nth-of-type(even) .ey-ch-text{grid-column:8/span 5}
  .ey-ch:nth-of-type(even) .ey-pages{grid-column:1/span 7}
  .ey-faq-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ey-gap);align-items:end}
  .ey-manage-box{margin-top:0}
  .ey-qa{grid-column:1/-1;margin-top:40px}
  .ey-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .ey-series{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ey-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ey-hl{margin-top:84px}
  .ey-for-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .ey-for .ey-head{grid-column:1/span 7}
  .ey-for .ey-for-lead{grid-column:8/span 5}
}
@media(max-width:860px){
  .ey-sub-in{grid-template-columns:minmax(0,1fr)}
  .ey-sub-side{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px 18px;align-items:start;padding:26px 28px 20px;border-right:0;border-bottom:1px solid var(--line)}
  .ey-sub-cover{width:72px}
  .ey-sub-what{padding-right:40px}
  .ey-sub-eyebrow{margin-bottom:8px}
  .ey-offer.is-side .ey-offer-now{gap:10px}
  .ey-offer.is-side .ey-offer-now b{font-size:36px}
  .ey-offer.is-side .ey-offer-now span{padding-top:2px;font-size:15px}
  .ey-offer.is-side .ey-offer-then{margin-top:8px;font-size:13px}
  .ey-sub-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 22px;margin:2px 0 0;border:0}
  .ey-sub-facts div{display:flex;gap:7px;padding:0;border:0;font-size:13px}
  .ey-sub-main{gap:18px;padding:26px 28px 28px}
  .ey-view .ey-sub h2{margin:0;font-size:28px}
  .ey-sub-x{top:10px;right:10px}
  .ey-done{grid-template-columns:minmax(0,1fr);gap:48px;min-height:0;padding-top:56px;padding-bottom:72px}
  .ey-done-pic{width:min(70%,300px)}
  .ey-hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px}
  .ey-hero h1{font-size:clamp(48px,7vw,60px)}
  .ey-stack{max-width:560px;justify-self:center}
  .ey-how .ey-head{grid-column:1/-1}
  .ey-for .ey-head,.ey-for .ey-for-lead{grid-column:1/-1}
  .ey-for .ey-for-lead{margin-top:24px}
  .ey-ch{grid-template-columns:minmax(0,1fr)}
  .ey-ch .ey-ch-text,.ey-ch:nth-of-type(even) .ey-ch-text{grid-column:1;grid-row:1}
  .ey-ch .ey-pages,.ey-ch:nth-of-type(even) .ey-pages{grid-column:1;grid-row:2;margin-top:40px}
  .ey-cta-copy,.ey-cta-act{grid-column:1/-1}
  .ey-now-intro{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .ey-now .ey-head{grid-column:1;grid-row:1}
  .ey-now-cover{grid-column:1;grid-row:2;justify-self:center;width:min(100%,420px)}
  .ey-now .ey-now-cover{margin-top:44px}
  .ey-spreads{display:none}
  .ey-now-rest{grid-column:1;grid-row:3;margin-top:40px}
}
@media(max-width:700px){
  .ey-view{--ey-gap:20px}
  .ey-lead{font-size:18px}
  .ey-view h3,.ey-view .ey-card h4{font-size:20px}
  .ey-hero h1{font-size:clamp(40px,10.8vw,56px)}
  .ey-view h2{font-size:clamp(36px,10.5vw,46px)}
  .ey-view .ey-ch-title{font-size:clamp(32px,9.5vw,40px)}
  .ey-view .ey-cta h2{font-size:clamp(56px,17vw,76px)}
  .ey-actions{gap:6px 24px}
  .ey-actions .button{width:100%}
  .ey-hero{gap:30px;padding-top:32px}
  .ey-hero .ey-lead{font-size:17px}
  .ey-for{padding-bottom:64px}
  .ey-for-in{padding-top:52px}
  .ey-for-list{grid-template-columns:1fr;margin-top:40px;row-gap:36px}
  .ey-who-icon{width:60px;height:60px;margin-bottom:18px}
  .ey-who-icon svg{width:34px;height:34px}
  .ey-ch{padding-top:56px;padding-bottom:64px}
  .ey-pages{gap:14px}
  .ey-pages-1{grid-template-columns:minmax(0,.8fr)}
  .ey-s{min-height:132px;gap:22px;padding:12px 12px 14px;font-size:13px}
  .ey-s b{font-size:17px}
  .ey-faq-side{display:block}
  .ey-manage-box{margin-top:36px}
  .ey-manage-box .button{width:100%}
  .ey-offer{padding:14px 14px 16px}
  .ey-offer-now{gap:12px}
  .ey-offer-now span{font-size:15px}
  .ey-offer .ey-offer-then{font-size:13px}
  .ey-steps{grid-template-columns:1fr;row-gap:24px;margin-top:48px}
  .ey-qa summary{font-size:18px}
  .ey-cta .button{width:100%}
  .ey-now-cover{width:min(100%,320px)}
  .ey-now-cover figcaption{margin-top:38px}
  .ey-toc-row{grid-template-columns:42px minmax(0,1fr) 16px;gap:3px 12px}
  .ey-toc-no{font-size:26px}
  .ey-toc-name{font-size:17px}
  .ey-hl{margin-top:72px;padding-top:24px}
  .ey-hl-head{display:block}
  .ey-chips,.ey-cards{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}
  .ey-chips::-webkit-scrollbar,.ey-cards::-webkit-scrollbar{display:none}
  .ey-chips{margin-top:18px;padding-bottom:4px}
  .ey-chip{flex:0 0 auto;white-space:nowrap}
  .ey-cards{display:flex;gap:16px;margin-top:24px;padding-bottom:8px;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad)}
  .ey-cards{align-items:flex-start}
  .ey-card{flex:0 0 80%;scroll-snap-align:start}
  .ey-v-stage{padding:12px}
  .ey-viewer .preview-heading h2{font-size:20px}
  .ey-viewer .preview-controls{grid-template-columns:auto minmax(0,1fr);padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .ey-v-cap{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ey-v-nav{gap:6px}
  .ey-sheet,.ey-sheet.ey-sub{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0}
  .ey-sub-side{padding:22px var(--pad) 18px}
  .ey-sub-main{gap:16px;padding:22px var(--pad) calc(24px + env(safe-area-inset-bottom))}
  .ey-view .ey-sub h2{font-size:26px}
  .ey-done{padding-top:44px;padding-bottom:60px}
  .ey-view .ey-done h2{font-size:clamp(44px,13vw,60px)}
  .ey-view .ey-done .ey-lead{font-size:19px}
  .ey-done-steps li{grid-template-columns:40px minmax(0,1fr)}
  .ey-done-act .button{width:100%}
  .ey-sheet-in{padding:22px var(--pad) calc(24px + env(safe-area-inset-bottom))}
  .ey-bar .buy-bar-row{gap:12px;min-height:70px;padding:10px 16px}
  body[data-entry] .bnf{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  body:has(.ey-bar.is-on) .bb-cookies{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media(max-width:400px){.ey-bar .buy-bar-format{display:none}}
@media(prefers-reduced-motion:reduce){
  .ey-qa summary::after,.ey-now-open,.ey-now-open img,.ey-card-media img,.ey-toc-go,.ey-spread-pages{transition:none}
  .ey-card.is-in,.ey-v-pages.is-next,.ey-v-pages.is-prev,.ey-stack img{animation:none}
  .ey-stack img{transition:none;translate:none}
}
@media print{.ey-actions,.ey-cta .button,.ey-bar,.ey-sheet,.ey-viewer,.ey-chips,.ey-card-go,.ey-now-chip,.ey-meta,.ey-manage-box{display:none!important}}