/* The walk-through page at /inside/ ("Inside The Canada Magazine").
   Loaded by default.hbs for that one route and by nothing else.

   EVERY RULE STARTS WITH .inside (or html.ins-lock, which only this page's
   script ever sets), so nothing here can reach another page of the site.

   TWO STATES, AND THE ORDER IS THE POINT (the same rule the site's mobile menu
   follows). The plain rules below are the page with JavaScript OFF: every page
   of the issue is in the document, in order, in a strip that scrolls sideways;
   every photo is a link to its large file. The rules under
   `html.js .inside:not(.is-plain)` are the enhanced state: one spread at a
   time, arrows, tabs, a thumbnail strip. `js` is set in the <head> by
   default.hbs before anything paints; `is-plain` is put on the page by
   inside.hbs if inside.js fails to load, which drops it back to the first
   state instead of leaving controls that do nothing.

   The look is the approved mockup (docs/research/2026-11-12-walkthrough-mockup,
   v2): dark navy, photographs edge to edge, white Playfair. Tokens are the
   site's own (--serif, --sans, --navy-950, --navy-900, --gold, --gold-bright,
   --red, --maxw, all from screen.css).

   Layout widths: the rail sits on the left edge from 1280px up and becomes a
   bar at the bottom below that; the page-turner shows one page instead of a
   spread at 720px and below. All media blocks are at the END of this file: a
   later plain rule beats an earlier one inside a media block at the same
   weight, which is how a phone layout quietly stops applying. */

.inside{
  --ins-mist:rgba(255,255,255,.72);
  --ins-line:rgba(196,162,101,.34);
  --ins-ratio:.74786;                       /* a page's width over its height (1047 / 1400) */
  /* How tall a page stands in the page-turner: so that the heading, the tabs,
     the spread and its count all fit in one window on a laptop (the rep says
     "go to section 1" and the prospect should see a whole spread), and never
     so tall that two pages plus the arrows are wider than the window. */
  --ins-h:min(clamp(380px, calc(100vh - 340px), 720px), calc((100vw - 232px) / 1.49572));
  position:relative;
  background:var(--navy-950);
  color:#fff;
  font:400 17px/1.6 var(--sans);
  font-variant-numeric:lining-nums;
}
.inside img{display:block;max-width:100%}
.inside a{color:inherit;text-decoration:none}
.inside button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.inside :focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.inside section{position:relative;padding:120px 0;scroll-margin-top:74px}
.inside .ins-wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
.inside h2{font:500 54px/1.06 var(--serif);letter-spacing:-.012em;max-width:15em}
.inside .ins-num{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;font:500 16px/1 var(--serif);color:var(--gold-bright)}
.inside .ins-num b{font:500 20px/1 var(--serif);font-variant-numeric:lining-nums}
.inside .ins-num i{flex:0 0 64px;height:1px;background:var(--ins-line);transform:translateY(-5px)}
.inside .ins-lede{font-size:19px;color:var(--ins-mist);max-width:36em;margin-top:22px}
.inside .ins-hint{font:400 14px/1.4 var(--sans);color:rgba(255,255,255,.5)}
.inside .ins-js{display:none}
html.js .inside:not(.is-plain) .ins-js{display:block}
html.js .inside:not(.is-plain) .ins-nojs{display:none}

/* ---------------------------------------------------------------- the rail
   Sticky with no height of its own, so it rides the window while the page is
   on screen and leaves with it: it never sits over the site's footer. */
.inside .inside-rail{position:sticky;z-index:80;top:calc(50vh - 147px);height:0}   /* seven dots: 7 x 30 + 6 x 14 = 294px, halved */
.inside .ins-rail-in{position:absolute;left:26px;top:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.inside .inside-rail a{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font:500 15px/1 var(--serif);font-variant-numeric:lining-nums;color:rgba(255,255,255,.6)}
.inside .inside-rail a + a::before{content:"";position:absolute;left:50%;top:-11px;width:1px;height:8px;background:rgba(255,255,255,.22)}
.inside .inside-rail a:hover{color:#fff}
.inside .inside-rail a[aria-current]{color:var(--navy-950);background:var(--gold-bright)}
.inside .inside-rail a::after{content:attr(data-name);position:absolute;left:42px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 10px;background:rgba(6,15,28,.94);border:1px solid var(--ins-line);font:500 13px/1 var(--sans);color:#fff;opacity:0;pointer-events:none}
.inside .inside-rail a:hover::after,.inside .inside-rail a:focus-visible::after{opacity:1}

/* ---------------------------------------------------------------- opening */
.inside .ins-open{padding:0;height:720px;overflow:hidden;background:var(--navy-950)}
.inside .ins-open-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:30% 38%;filter:saturate(.7) brightness(.42)}
.inside .ins-open::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,15,28,.96) 0%,rgba(6,15,28,.82) 38%,rgba(6,15,28,.28) 72%,rgba(6,15,28,.5) 100%),linear-gradient(0deg,var(--navy-950) 0%,rgba(6,15,28,0) 26%)}
.inside .ins-open-grid{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:1fr 560px;align-items:center;gap:20px}
.inside h1{font:500 82px/1 var(--serif);letter-spacing:-.02em}
.inside .ins-open-lede{font-size:21px;line-height:1.5;color:var(--ins-mist);max-width:25em;margin-top:28px}
.inside .ins-open-issue{display:flex;align-items:center;gap:16px;margin-top:44px;font:500 17px/1 var(--serif);color:var(--gold-bright)}
.inside .ins-open-issue i{width:64px;height:1px;background:var(--ins-line)}
.inside .ins-fan{position:relative;height:560px}
.inside .ins-fan-img{position:absolute;height:500px;width:auto;max-width:none;box-shadow:0 40px 70px rgba(0,0,0,.65),0 6px 14px rgba(0,0,0,.4)}
.inside .ins-fan-img:first-child{left:10px;top:54px;transform:rotate(-7deg)}
.inside .ins-fan-img:last-child{left:230px;top:18px;transform:rotate(5deg)}

/* ---------------------------------------------------------------- 1. the page-turner */
.inside .ins-s1{padding-top:64px}
.inside .ins-s1-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.inside .ins-tabs{display:none;gap:34px;padding-bottom:10px}
.inside .ins-tab{font:500 19px/1 var(--serif);color:rgba(255,255,255,.55);padding:12px 0;border-bottom:1px solid transparent}
.inside .ins-tab.is-on{color:#fff;border-bottom-color:var(--gold-bright)}
.inside .ins-viewer{margin-top:28px}
.inside .ins-stage{position:relative}
.inside .ins-arrow{display:none}
.inside .ins-side-name{font:500 22px/1.2 var(--serif);max-width:var(--maxw);margin:34px auto 14px;padding:0 44px}
.inside .ins-side{display:flex;gap:18px;list-style:none;overflow-x:auto;padding:0 44px 18px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(196,162,101,.5) transparent}
.inside .ins-spread{display:flex;flex:none;scroll-snap-align:center}
.inside .inside-page{display:block;flex:none}
.inside .ins-page-img{height:460px;width:calc(460px * var(--ins-ratio));max-width:none;background:rgba(255,255,255,.05)}
.inside .ins-film,.inside .ins-count{display:none}
.inside .ins-viewer .ins-hint{text-align:center;margin-top:12px}

html.js .inside:not(.is-plain) .ins-tabs{display:flex}
html.js .inside:not(.is-plain) .ins-side-name{display:none}
html.js .inside:not(.is-plain) .ins-stage{background:radial-gradient(60% 70% at 50% 46%,rgba(40,62,98,.55),rgba(6,15,28,0) 70%);min-height:var(--ins-h);touch-action:pan-y}
html.js .inside:not(.is-plain) .ins-side{display:none;overflow:visible;padding:0;gap:0}
html.js .inside:not(.is-plain) .ins-side.is-on{display:block}
html.js .inside:not(.is-plain) .ins-spread{display:none}
html.js .inside:not(.is-plain) .ins-spread.is-current{display:flex;justify-content:center;filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
html.js .inside:not(.is-plain) .inside-page{cursor:zoom-in}
html.js .inside:not(.is-plain) .ins-page-img{height:var(--ins-h);width:calc(var(--ins-h) * var(--ins-ratio))}
/* the fold: a soft shadow down the inner edge of a left-hand page */
html.js .inside:not(.is-plain) .ins-spread .inside-page:first-child:not(:only-child){position:relative}
html.js .inside:not(.is-plain) .ins-spread .inside-page:first-child:not(:only-child)::after{content:"";position:absolute;top:0;bottom:0;right:0;width:26px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.28));pointer-events:none}
html.js .inside:not(.is-plain) .ins-page-fail{display:flex;align-items:center;justify-content:center;height:var(--ins-h);width:calc(var(--ins-h) * var(--ins-ratio));padding:24px;text-align:center;font:400 15px/1.5 var(--sans);color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
html.js .inside:not(.is-plain) .ins-arrow{display:flex;align-items:center;justify-content:center;position:absolute;z-index:2;top:calc(var(--ins-h) / 2 - 32px);width:64px;height:64px;border:1px solid var(--ins-line);border-radius:50%;color:var(--gold-bright);font:400 22px/1 var(--sans);background:rgba(6,15,28,.55)}
html.js .inside:not(.is-plain) .ins-arrow:hover{border-color:var(--gold-bright);color:#fff}
html.js .inside:not(.is-plain) .ins-arrow[disabled]{opacity:.28;cursor:default}
html.js .inside:not(.is-plain) .ins-arrow-prev{left:max(14px, calc(50% - var(--ins-h) * var(--ins-ratio) - 100px))}
html.js .inside:not(.is-plain) .ins-arrow-next{right:max(14px, calc(50% - var(--ins-h) * var(--ins-ratio) - 100px))}
html.js .inside:not(.is-plain) .ins-film.is-on{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;margin-top:26px;padding:6px 44px 14px;scrollbar-width:thin;scrollbar-color:rgba(196,162,101,.5) transparent}
html.js .inside:not(.is-plain) .ins-film.is-on::before,html.js .inside:not(.is-plain) .ins-film.is-on::after{content:"";margin:auto}
html.js .inside:not(.is-plain) .ins-thumb{display:flex;flex:none;opacity:.5;padding:0}
html.js .inside:not(.is-plain) .ins-thumb:hover{opacity:.85}
html.js .inside:not(.is-plain) .ins-thumb.is-current{opacity:1}
html.js .inside:not(.is-plain) .ins-thumb.is-current .ins-thumb-img{outline:1px solid var(--gold-bright);outline-offset:2px}
html.js .inside:not(.is-plain) .ins-thumb-pg{display:block}
html.js .inside:not(.is-plain) .ins-thumb-img{height:60px;width:45px;background:rgba(255,255,255,.07)}
html.js .inside:not(.is-plain) .ins-thumb-pg b{display:block;height:16px;margin-top:6px;text-align:center;font:500 11px/16px var(--sans);font-variant-numeric:lining-nums;color:rgba(255,255,255,.7)}
html.js .inside:not(.is-plain) .ins-count{display:block;text-align:center;margin-top:16px;font:500 16px/1.3 var(--serif);font-variant-numeric:lining-nums;color:rgba(255,255,255,.86)}

/* ---------------------------------------------------------------- 2. where it goes */
.inside .ins-s2{background:linear-gradient(180deg,var(--navy-950),var(--navy-900))}
.inside .ins-two{display:grid;grid-template-columns:1fr 470px;gap:90px;align-items:center}
.inside .ins-where{font-size:38px;line-height:1.15;max-width:13em}
.inside .ins-big{display:block;font:500 168px/.9 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.03em;margin:8px 0 34px -6px}
.inside .ins-papers{margin-top:44px}
.inside .ins-papers-head{font:500 17px/1.3 var(--serif);color:var(--gold-bright);padding-bottom:14px;border-bottom:1px solid var(--ins-line)}
.inside .ins-paper{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,1.2fr);gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--ins-line);font-size:17px;color:var(--ins-mist);font-variant-numeric:lining-nums}
.inside .ins-paper-name{font:500 24px/1.1 var(--serif);color:#fff;white-space:nowrap}
.inside .ins-paper-date{text-align:right}
.inside .inside-map{display:block;cursor:zoom-in}
.inside .ins-map{width:100%;height:auto;box-shadow:0 40px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.inside .ins-map-col .ins-hint{margin-top:16px;text-align:center}

/* ---------------------------------------------------------------- 3. who reads it */
/* Behind section 3: the opening's own photograph again, far out of focus, so the
   flat navy has some depth. The same file as the opening, so it costs no download. */
.inside .ins-s3{background:var(--navy-900);overflow:hidden}
.inside .ins-s3-bg{position:absolute;left:-90px;top:-90px;width:calc(100% + 180px);height:calc(100% + 180px);max-width:none;object-fit:cover;object-position:60% 30%;filter:blur(64px) brightness(.3) saturate(1.1)}
.inside .ins-s3::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,26,46,.78) 0%,rgba(12,26,46,.5) 45%,rgba(6,15,28,.82) 100%)}
.inside .ins-rd{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:start}
.inside .ins-s3 h2{font-size:46px;max-width:11em}
.inside .ins-np{display:grid;grid-template-columns:1fr 1fr}
.inside .ins-np-col{padding:6px 36px 6px 40px;border-left:1px solid var(--ins-line)}
.inside .ins-np-col h3{font:500 26px/1.15 var(--serif);min-height:60px}
.inside .ins-age{display:block;font:500 132px/.9 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.03em;margin:30px 0 26px -4px}
.inside .ins-age-l{display:block;font:500 17px/1 var(--serif);color:var(--gold-bright)}
.inside .ins-np-col ul{list-style:none;margin-top:34px}
.inside .ins-np-col li{padding:16px 0;border-top:1px solid rgba(255,255,255,.14);color:var(--ins-mist);font-size:16px;line-height:1.45;font-variant-numeric:lining-nums}

/* ---------------------------------------------------------------- 4. what you can book
   On the lighter navy, so the open magazine's own (black) shadow reads. */
.inside .ins-s4{background:var(--navy-900)}
.inside .ins-s4 .ins-hint{margin-top:18px}
.inside .ins-book-lead{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:center;margin-top:56px;padding-bottom:64px;border-bottom:1px solid var(--ins-line)}
.inside .ins-book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 44px;margin-top:64px}
.inside .ins-book-pics{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1400/922}
/* Two open magazines (the four-page feature) share the same box as one, so the names under a row stay level:
   the first sits top left, the second bottom right, over its corner. */
.inside .ins-book-pics.is-pair{display:block}
.inside .ins-book-pics.is-pair .inside-mock{position:absolute;width:66%}
.inside .ins-book-pics.is-pair .inside-mock:first-of-type{left:0;top:0}
.inside .ins-book-pics.is-pair .inside-mock:last-of-type{right:0;bottom:0;z-index:1}
.inside .inside-mock{display:block;width:100%}
.inside .inside-mock.is-single{width:auto;height:100%}
.inside .ins-mock{width:100%;height:auto}
.inside .inside-mock.is-single .ins-mock{width:auto;height:100%}
.inside .ins-book.has-cover .inside-mock{width:76%;margin-left:24%}
.inside .ins-book-cover{position:absolute;z-index:1;left:0;bottom:15%;height:60%;width:auto;transform:rotate(-5deg);box-shadow:0 18px 34px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.4)}
.inside .ins-book-name{font:500 23px/1.2 var(--serif);margin-top:22px;padding-top:18px;border-top:1px solid var(--ins-line)}
.inside .ins-book-lead .ins-book-name{font-size:34px;line-height:1.12;margin-top:0;padding-top:0;border-top:0}
.inside .ins-book-line{color:var(--ins-mist);font-size:15.5px;line-height:1.5;margin-top:8px}
.inside .ins-book-lead .ins-book-line{font-size:18px;margin-top:16px}
.inside .ins-eg{font:400 13.5px/1.45 var(--sans);color:rgba(255,255,255,.55);margin-top:10px}
/* An option that has a one-pager opens it: its picture, and each market named under it. An option
   without one is not a link and does nothing (Tyler, 2026-11-12). */
.inside .inside-mock.is-still{cursor:default}
.inside .ins-sheets{font:400 13.5px/1.45 var(--sans);color:rgba(255,255,255,.55);margin-top:2px}
.inside .inside-sheet{display:inline-block;padding:9px 1px;color:var(--gold-bright);text-decoration:underline;text-decoration-color:rgba(196,162,101,.45);text-underline-offset:3px}
.inside .inside-sheet:hover{color:#fff;text-decoration-color:#fff}
.inside .ins-book-lead .ins-eg{margin-top:18px}

/* ---------------------------------------------------------------- 5. the billboard */
/* The photograph is shown WHOLE and bright, with the words above it. Tyler, 2026-11-12: "any way to
   have it so you can see all of the traffic (as it's jammed)". The heading used to lie over the left
   half of it on a dark wash, which is where the expressway is. It is fixed to its BOTTOM edge, so
   when a short window has to trim it, sky goes and the traffic stays; and it is never trimmed by
   more than about a fifth (52vw is 78% of its height), which keeps the screen's own sign in. */
.inside .ins-s5-head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}
.inside .ins-s5-head .ins-lede{margin-top:0;max-width:30em}
.inside .ins-wide{position:relative;margin-top:56px;overflow:hidden}
.inside .ins-wide-img{width:100%;height:auto;max-width:none;aspect-ratio:3 / 2;max-height:max(calc(100vh - 40px), 52vw);object-fit:cover;object-position:50% 100%}
.inside .ins-wide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--navy-950) 0%,rgba(6,15,28,0) 13%)}
.inside .ins-cats{margin-top:56px}
.inside .ins-cats .ins-hint{padding-bottom:20px}
.inside .ins-cat{display:grid;grid-template-columns:260px 1fr;gap:36px;padding:44px 0;border-top:1px solid var(--ins-line);align-items:start}
.inside .ins-cat-name{font:500 28px/1.14 var(--serif)}
.inside .ins-cat-name::before{content:"";display:block;width:26px;height:2px;background:var(--red);margin-bottom:18px}
.inside .ins-cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inside .inside-shot{display:block;cursor:zoom-in}
.inside .ins-shot-img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;background:rgba(255,255,255,.05)}
.inside .ins-shot-name{display:block;font:500 17px/1.3 var(--serif);margin-top:14px}

/* ---------------------------------------------------------------- 6. your story online
   Pictures of a real page of the site: flat, with a hairline and a shadow. No drawn browser or
   phone around them; the phone picture only has its corners rounded. */
.inside .ins-s6{background:var(--navy-900)}
.inside .ins-web{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.inside .ins-s6 h2{font-size:46px;max-width:11em}
.inside .ins-web-lists{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start;margin-top:84px}
.inside .ins-web-h{font:500 17px/1.3 var(--serif);color:var(--gold-bright);padding-bottom:14px;border-bottom:1px solid var(--ins-line)}
.inside .ins-web-inc,.inside .ins-web-steps{list-style:none}
.inside .ins-web-inc li{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:24px;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.inside .ins-web-name{font:500 20px/1.25 var(--serif)}
.inside .ins-web-line{color:var(--ins-mist);font-size:16px;line-height:1.5}
.inside .ins-web-steps{counter-reset:ins-step}
.inside .ins-web-steps li{counter-increment:ins-step;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);color:var(--ins-mist);font-size:16.5px;line-height:1.5}
.inside .ins-web-steps li::before{content:counter(ins-step);font:500 24px/1 var(--serif);font-variant-numeric:lining-nums;color:var(--gold-bright)}
.inside .ins-web-pics{position:relative}
.inside .inside-web{display:block;cursor:zoom-in}
.inside .inside-web.is-desktop{width:84%;margin-left:16%;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px rgba(0,0,0,.6)}
.inside .inside-web.is-phone{position:absolute;z-index:1;left:0;bottom:20px;width:27%;border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.inside .ins-web-img{width:100%;height:auto}
.inside .ins-web-pics .ins-eg{margin:20px 0 0 30%;text-align:right}
.inside .ins-web-pics .ins-hint{margin:6px 0 0 30%;text-align:right}

/* ---------------------------------------------------------------- 7. what you get after */
.inside .ins-s7{background:linear-gradient(180deg,var(--navy-950),var(--navy-900));padding-bottom:70px}
.inside .ins-after{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.inside .ins-docs{--ins-doc-gap:16px;display:flex;flex-wrap:wrap;gap:var(--ins-doc-gap);margin-top:54px}   /* four documents fit one row: 131 + 131 + 109 + 109 and three gaps */
.inside .inside-doc{position:relative;display:block;flex:none;cursor:zoom-in}
.inside .ins-doc-img{height:146px;width:auto;box-shadow:0 22px 44px rgba(0,0,0,.55)}
.inside .inside-doc.is-pdf .ins-doc-img{width:131px;object-fit:cover;object-position:50% 0}
.inside .inside-doc.is-photo{flex:1 1 100%}
.inside .inside-doc.is-photo .ins-doc-img{width:100%;height:auto}
.inside .ins-doc-n{position:absolute;left:-10px;top:-10px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--gold-bright);color:var(--navy-950);font:600 14px/1 var(--serif);font-variant-numeric:lining-nums}
/* Two pictures for one line of the list (the two affidavits) share ONE number, on the corner where they meet:
   Tyler, 2026-11-12, "put the 1 inbetween the two first pages, at the corner of them both". */
.inside .ins-doc-n.is-between{left:calc(var(--ins-doc-gap) / -2 - 14px)}
.inside .ins-proof{list-style:none;counter-reset:ins-proof;border-top:1px solid var(--ins-line)}
.inside .ins-proof-item{counter-increment:ins-proof;display:grid;grid-template-columns:60px 1fr;padding:26px 0;border-bottom:1px solid var(--ins-line)}
.inside .ins-proof-item::before{content:counter(ins-proof);grid-row:1 / 3;font:500 30px/1 var(--serif);font-variant-numeric:lining-nums;color:var(--gold-bright)}
.inside .ins-proof-name{grid-column:2;font:500 23px/1.25 var(--serif)}
.inside .ins-proof-line{grid-column:2;color:var(--ins-mist);font-size:16px}

/* ---------------------------------------------------------------- the close
   Tyler, 2026-11-12: "Thank you for your time!" as the last thing on the page, above the site's footer.
   It carries the room at the bottom that the rail's bar needs on a narrower window. */
.inside .ins-close{padding:70px 44px 150px;text-align:center;background:var(--navy-900)}
.inside .ins-thanks{font:500 46px/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.inside .ins-thanks::before{content:"";display:block;width:64px;height:1px;margin:0 auto 36px;background:var(--ins-line)}

/* ---------------------------------------------------------------- the enlarge view (built by inside.js) */
html.ins-lock{overflow:hidden}
.inside .ins-lb{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:64px 84px 34px;background:rgba(3,8,16,.99)}
.inside .ins-lb.is-open{display:flex}
.inside .ins-lb-img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;box-shadow:0 40px 90px rgba(0,0,0,.8)}
.inside .ins-lb.is-loading .ins-lb-img{opacity:.25}
.inside .ins-lb-cap{font:500 20px/1.3 var(--serif);font-variant-numeric:lining-nums;text-align:center;max-width:44em}
.inside .ins-lb-n{font:400 14px/1 var(--sans);color:rgba(255,255,255,.5);font-variant-numeric:lining-nums}
.inside .ins-lb-x,.inside .ins-lb-prev,.inside .ins-lb-next{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ins-line);border-radius:50%;color:var(--gold-bright);font:400 22px/1 var(--sans);background:rgba(6,15,28,.6)}
.inside .ins-lb-x{top:18px;right:22px}
.inside .ins-lb-prev{left:18px;top:calc(50% - 26px)}
.inside .ins-lb-next{right:18px;top:calc(50% - 26px)}
.inside .ins-lb-x:hover,.inside .ins-lb-prev:hover,.inside .ins-lb-next:hover{border-color:var(--gold-bright);color:#fff}
.inside .ins-lb-prev[disabled],.inside .ins-lb-next[disabled]{opacity:.28;cursor:default}
.inside .ins-lb-prev[hidden],.inside .ins-lb-next[hidden]{display:none}

/* ================================================================ narrower windows */
@media (max-width:1279px){
  /* The rail leaves the left edge, where it would sit on the text, and becomes a bar along the bottom. */
  .inside .inside-rail{top:calc(100vh - 66px);top:calc(100dvh - 66px)}
  .inside .ins-rail-in{left:50%;transform:translateX(-50%);flex-direction:row;gap:0;padding:0 6px;background:rgba(6,15,28,.94);border:1px solid var(--ins-line);border-radius:27px}
  .inside .inside-rail a + a::before{display:none}
  .inside .inside-rail a{width:44px;height:52px;border-radius:0;background:none;font-size:17px}
  .inside .inside-rail a[aria-current]{background:none;color:var(--gold-bright)}
  .inside .inside-rail a[aria-current]::before{content:"";display:block;position:absolute;left:10px;right:10px;top:auto;bottom:9px;width:auto;height:2px;background:var(--gold-bright)}
  .inside .inside-rail a::after{display:none}
  .inside .ins-close{padding-bottom:170px}
}
@media (max-width:1080px){
  .inside section{padding:96px 0;scroll-margin-top:64px}
  .inside h2{font-size:44px}
  .inside .ins-open{height:auto}
  .inside .ins-open-grid{grid-template-columns:1fr;gap:0;padding-top:84px;padding-bottom:56px}
  .inside h1{font-size:64px}
  .inside .ins-fan{height:440px;margin-top:36px;max-width:520px}
  .inside .ins-fan-img{height:380px}
  .inside .ins-fan-img:first-child{left:6px;top:44px}
  .inside .ins-fan-img:last-child{left:180px;top:14px}
  .inside .ins-two{grid-template-columns:1fr;gap:56px}
  .inside .ins-map-col{max-width:520px}
  .inside .ins-rd{grid-template-columns:1fr;gap:56px}
  .inside .ins-book-lead{grid-template-columns:1fr;gap:34px}
  .inside .ins-book-grid{grid-template-columns:repeat(2,1fr)}
  .inside .ins-cat{grid-template-columns:1fr;gap:22px}
  .inside .ins-after{grid-template-columns:1fr;gap:56px}
  .inside .ins-s5-head{grid-template-columns:1fr;gap:22px}
  .inside .ins-web{grid-template-columns:1fr;gap:56px}
  .inside .ins-web-pics{max-width:620px}
  .inside .ins-web-lists{grid-template-columns:1fr;gap:44px;margin-top:64px}
}
@media (max-width:720px){
  .inside{--ins-h:min(calc((100vw - 44px) / var(--ins-ratio)), calc(100vh - 150px));font-size:16px}
  .inside section{padding:76px 0}
  .inside .ins-wrap{padding:0 22px}
  .inside h1{font-size:46px;line-height:1.04}
  .inside h2{font-size:34px;line-height:1.1}
  .inside .ins-lede{font-size:17px}
  .inside .ins-open-grid{padding-top:60px;padding-bottom:44px}
  .inside .ins-open-lede{font-size:18px;margin-top:20px}
  .inside .ins-open-issue{margin-top:30px}
  .inside .ins-fan{height:330px;margin-top:30px}
  .inside .ins-fan-img{height:280px}
  .inside .ins-fan-img:first-child{left:4px;top:34px}
  .inside .ins-fan-img:last-child{left:128px;top:10px}
  .inside .ins-s1{padding-top:56px}
  .inside .ins-s1-head{flex-direction:column;align-items:flex-start;gap:22px}
  .inside .ins-tabs{gap:26px;padding-bottom:0}
  .inside .ins-tab{font-size:17px;padding:14px 0}
  .inside .ins-viewer{margin-top:24px}
  .inside .ins-side-name{padding:0 22px}
  .inside .ins-side{padding:0 22px 16px}
  .inside .ins-page-img{height:400px;width:calc(400px * var(--ins-ratio))}
  /* One page at a time: a spread is unreadable at this width. inside.js steps by page here. */
  html.js .inside:not(.is-plain) .ins-spread.is-current .inside-page{display:none}
  html.js .inside:not(.is-plain) .ins-spread.is-current .inside-page.is-shown{display:block}
  html.js .inside:not(.is-plain) .ins-spread.is-current .ins-page-fail.is-shown{display:flex}
  html.js .inside:not(.is-plain) .ins-spread .inside-page:first-child:not(:only-child)::after{display:none}
  html.js .inside:not(.is-plain) .ins-page-img{height:var(--ins-h);width:calc(var(--ins-h) * var(--ins-ratio))}
  html.js .inside:not(.is-plain) .ins-arrow{width:44px;height:44px;top:calc(var(--ins-h) / 2 - 22px);font-size:18px;background:rgba(6,15,28,.78)}
  html.js .inside:not(.is-plain) .ins-arrow-prev{left:6px}
  html.js .inside:not(.is-plain) .ins-arrow-next{right:6px}
  html.js .inside:not(.is-plain) .ins-film.is-on{padding:6px 22px 12px;margin-top:22px}
  /* The count sits ABOVE the page here, so the bar at the bottom of the screen never covers it. */
  html.js .inside:not(.is-plain) .ins-viewer{display:flex;flex-direction:column}
  html.js .inside:not(.is-plain) .ins-count{order:-1;margin:0 0 12px}
  .inside .ins-where{font-size:26px}
  .inside .ins-big{font-size:96px;margin-bottom:22px;margin-left:-3px}
  .inside .ins-paper{grid-template-columns:1fr 1fr;gap:4px 16px;padding:16px 0;font-size:15.5px}
  .inside .ins-paper-name{grid-column:1 / 3;font-size:21px}
  .inside .ins-s3 h2{font-size:32px}
  .inside .ins-np{grid-template-columns:1fr;gap:44px}
  .inside .ins-np-col{padding:0 0 0 22px}
  .inside .ins-np-col h3{min-height:0;font-size:23px}
  .inside .ins-age{font-size:96px;margin:18px 0 18px -3px}
  .inside .ins-np-col ul{margin-top:24px}
  .inside .ins-book-lead{margin-top:40px;padding-bottom:48px}
  .inside .ins-book-lead .ins-book-name{font-size:27px}
  .inside .ins-book-lead .ins-book-line{font-size:16.5px}
  .inside .ins-book-grid{grid-template-columns:1fr;gap:48px;margin-top:48px}
  /* A square of the photograph on a phone: its right two thirds, which holds the screen and the thick of the traffic. */
  .inside .ins-wide{margin-top:36px}
  .inside .ins-wide-img{aspect-ratio:1 / 1;max-height:none;object-position:85% 100%}
  .inside .ins-cats{margin-top:36px}
  .inside .ins-s6 h2{font-size:32px}
  .inside .ins-web-lists{margin-top:48px;gap:38px}
  .inside .ins-web-inc li{grid-template-columns:1fr;gap:4px;padding:15px 0}
  .inside .ins-web-name{font-size:19px}
  .inside .inside-web.is-phone{border-radius:10px}
  .inside .ins-cat{padding:34px 0}
  .inside .ins-cat-name{font-size:25px}
  .inside .ins-cat-row{gap:10px}
  .inside .ins-shot-name{font-size:13px;line-height:1.3;margin-top:8px}
  .inside .ins-docs{--ins-doc-gap:12px;margin-top:36px}
  .inside .ins-doc-img{height:92px}
  .inside .inside-doc.is-pdf .ins-doc-img{width:83px}
  .inside .ins-proof-item{grid-template-columns:44px 1fr;padding:20px 0}
  .inside .ins-proof-item::before{font-size:25px}
  .inside .ins-proof-name{font-size:20px}
  .inside .ins-s7{padding-bottom:44px}
  .inside .ins-close{padding:44px 22px 150px}
  .inside .ins-thanks{font-size:28px}   /* one line on a 390px screen; on a narrower one the two lines balance */
  .inside .ins-thanks::before{margin-bottom:26px}
  .inside .ins-lb{padding:60px 10px 20px;gap:12px}
  .inside .ins-lb-img{max-height:calc(100vh - 190px)}
  .inside .ins-lb-cap{font-size:16px;padding:0 44px}
  .inside .ins-lb-x,.inside .ins-lb-prev,.inside .ins-lb-next{width:44px;height:44px;font-size:18px}
  .inside .ins-lb-x{top:10px;right:10px}
  .inside .ins-lb-prev{left:6px;top:auto;bottom:14px}
  .inside .ins-lb-next{right:6px;top:auto;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .inside *,.inside *::before,.inside *::after{transition:none !important;animation:none !important}
}