/* ==========================================================================
   indiepenpress.com home page
   --------------------------------------------------------------------------
   PART 1. The design, as delivered by the design session. Do not edit to fix
           a WordPress problem; add to Part 2 instead.
   PART 2. WordPress and Elementor compatibility.

   Loaded only on the home page by wp-content/mu-plugins/ipp-home-2026.php,
   which also adds the body.ipp-home-wrap class the whole file is scoped to.
   ========================================================================== */

/* ------------------------------------------------------------------
   Tokens. Palette is pinned in PRODUCT.md. Everything else is DESIGN.md.
   ------------------------------------------------------------------ */
:root{
  --navy:#1F2D4A;
  --navy-deep:#1A2438;
  --ink-muted:#5A6B82;
  --vermillion:#D04A26;
  --vermillion-deep:#A83918;
  --white:#FFFFFF;
  --card:#F5F8FA;
  --card-hover:#EEF3F9;
  --rule:#DCE3EB;
  --rule-strong:#B8C6D6;
  --footer-text:#C9D3E0;
  --footer-muted:#9AA9BC;

  --serif:"Piazzolla",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --fs-12:.75rem;
  --fs-13:.8125rem;
  --fs-14:.875rem;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-20:1.25rem;
  --fs-24:1.5rem;
  --fs-30:1.875rem;
  --fs-34:2.125rem;
  --fs-40:2.5rem;

  --measure:66ch;
  --container:1180px;
  --gutter:24px;
  --radius:4px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:var(--serif);font-size:var(--fs-18);line-height:1.6;
  font-variation-settings:"opsz" 18;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.15;text-wrap:balance;letter-spacing:-.01em}

h1{font-size:4rem;font-variation-settings:"opsz" 30;line-height:1.05;letter-spacing:-.02em}

h2{font-size:var(--fs-40);font-variation-settings:"opsz" 30}

h3{font-size:var(--fs-24);font-variation-settings:"opsz" 24}

p{margin:0}

p + p{margin-top:1em}

.measure{max-width:var(--measure)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.sans{font-family:var(--sans);font-variation-settings:"wdth" 100}

.tab{font-variant-numeric:tabular-nums lining-nums}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Links in running text */
.link{
  font-family:var(--sans);font-size:var(--fs-16);font-weight:500;
  color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);padding-bottom:1px;
  transition:border-color .18s var(--ease-out);
}

.link:hover{border-bottom-color:var(--navy)}

.link .arrow{display:inline-block;margin-left:.35em;transition:transform .25s var(--ease-out)}

.link:hover .arrow{transform:translateX(3px)}

/* Buttons: three weights, one primary per section */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:var(--fs-16);font-weight:600;letter-spacing:.005em;
  padding:14px 22px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out);
}

.btn .arrow{transition:transform .25s var(--ease-out)}

.btn:hover .arrow{transform:translateX(3px)}

.btn-primary{background:var(--vermillion);color:var(--white);border-color:var(--vermillion)}

.btn-primary:hover{background:var(--vermillion-deep);border-color:var(--vermillion-deep)}

.btn-secondary{background:var(--white);color:var(--navy);border-color:var(--navy)}

.btn-secondary:hover{background:var(--navy);color:var(--white)}

.arrow{width:1em;height:1em;flex:none}

/* Key numerals: the field-guide number that ties a figure to its caption */
.key{
  font-family:var(--sans);font-variation-settings:"wdth" 100;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--fs-13);font-weight:600;letter-spacing:.02em;
  color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:1px solid var(--navy);border-radius:50%;
  flex:none;line-height:1;
}

/* Section rhythm: more above a heading than below */
.section{padding:var(--s-9) 0}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-7);flex-wrap:wrap}

.section-head p{max-width:52ch;color:var(--ink-muted);font-size:var(--fs-18)}

.section-head .lead{display:flex;flex-direction:column;gap:var(--s-3)}

.section-head .link{white-space:nowrap;margin-bottom:6px}

/* Plate caption: the line under a figure, field-guide style. Not an eyebrow. */
.plate-caption{
  display:flex;justify-content:space-between;gap:var(--s-4);
  font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-muted);
  letter-spacing:.02em;border-top:1px solid var(--rule);padding-top:var(--s-3);margin-top:var(--s-4);
}

.plate-caption b{font-weight:600;color:var(--navy)}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header{border-bottom:1px solid var(--rule);background:var(--white);position:sticky;top:0;z-index:20}

.site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s-5)}

.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--navy)}

.brand img{height:48px;width:auto}

.nav{display:flex;gap:var(--s-6);font-family:var(--sans);font-size:var(--fs-14);font-weight:500;letter-spacing:.01em}

.nav a{text-decoration:none;color:var(--navy);padding:6px 0;border-bottom:1px solid transparent;transition:border-color .18s}

.nav a:hover{border-bottom-color:var(--navy)}

.nav-toggle{display:none}

/* ------------------------------------------------------------------
   1. Hero: thesis left, Plate I right
   ------------------------------------------------------------------ */
.hero{padding:var(--s-9) 0 var(--s-9);border-bottom:1px solid var(--rule)}

.hero .container{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);align-items:center}

.hero-copy h1{max-width:14ch}

.hero-copy .sub{margin-top:var(--s-5);max-width:42ch;font-size:var(--fs-20);line-height:1.5;color:var(--navy)}

.hero-copy .sub .em{font-weight:600}

.hero-actions{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}

.hero-note{font-family:var(--sans);font-size:var(--fs-14);color:var(--ink-muted)}

/* Plate I: the sequence, as a keyed figure */
.plate{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-6) var(--s-6) var(--s-5);
}

.plate-title{
  font-family:var(--sans);font-size:var(--fs-13);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);display:flex;justify-content:space-between;gap:var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--rule-strong);margin-bottom:var(--s-2);
}

.plate-title span:last-child{font-weight:500;color:var(--ink-muted);letter-spacing:.02em;text-transform:none}

.sequence{list-style:none;margin:0;padding:0}

.sequence li{
  display:flex;align-items:baseline;gap:var(--s-3);
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);position:relative;
}

.sequence li:last-child{border-bottom:0}

.sequence .key{position:relative;top:4px;margin-right:var(--s-1)}

.sequence a{
  text-decoration:none;color:var(--navy);font-family:var(--serif);font-size:var(--fs-20);font-weight:500;
  font-variation-settings:"opsz" 20;letter-spacing:-.005em;white-space:nowrap;
}

.sequence a::after{content:"";position:absolute;inset:0}

.sequence li:hover a{text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px}

.sequence .leader{flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--rule-strong);position:relative;top:-5px}

.sequence .when{
  font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-muted);letter-spacing:.01em;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;text-align:right;
  flex:0 0 108px;
}

/* ------------------------------------------------------------------
   2. The five guides
   ------------------------------------------------------------------ */
.guides{border-bottom:1px solid var(--rule)}

.plate-row{display:flex;flex-wrap:wrap;padding:0;overflow:hidden}

.fig{
  flex:1 1 20%;min-width:200px;display:flex;flex-direction:column;
  padding:var(--s-5) var(--s-5) var(--s-4);text-decoration:none;color:var(--navy);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:-1px;
  transition:background .18s var(--ease-out);
}

.fig:last-child{border-right:0}

.fig:hover{background:var(--card-hover)}

.fig-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-3)}

.fig h3{font-size:var(--fs-20);line-height:1.2}

.fig p{font-size:var(--fs-16);line-height:1.5;color:var(--ink-muted);flex:1 1 auto}

.fig-cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-muted);letter-spacing:.01em;
}

.fig .read{font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:.4em}

.fig .read .arrow{transition:transform .25s var(--ease-out)}

.fig:hover .read .arrow{transform:translateX(3px)}

/* ------------------------------------------------------------------
   3. Catalogue teaser
   ------------------------------------------------------------------ */
.catalogue{border-bottom:1px solid var(--rule)}

.cover-row{display:flex;flex-wrap:wrap;gap:20px}

.cover{
  flex:1 1 calc(16.666% - 17px);min-width:150px;
  text-decoration:none;color:var(--navy);
}

.cover .frame{
  aspect-ratio:2/3;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;position:relative;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .25s var(--ease-out);
}

.cover .frame img{width:100%;height:100%;object-fit:cover}

.cover:hover .frame{border-color:var(--rule-strong);box-shadow:0 6px 16px rgba(31,45,74,.16);transform:translateY(-3px)}

.cover .cap{margin-top:var(--s-3)}

.cover .cap .key{width:22px;height:22px;font-size:var(--fs-12)}

.cover .cap .t{font-family:var(--sans);font-size:var(--fs-14);font-weight:500;line-height:1.35}

.cover .cap .g{font-family:var(--sans);font-size:var(--fs-12);color:var(--ink-muted);display:block;margin-top:2px;letter-spacing:.02em}

/* ------------------------------------------------------------------
   4. Perivane: a real report page, keyed
   ------------------------------------------------------------------ */
.perivane{background:var(--card);border-bottom:1px solid var(--rule)}

.perivane .container{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);align-items:center}

.perivane h2{max-width:16ch}

.perivane .lede{margin-top:var(--s-5);font-size:var(--fs-20);line-height:1.5;max-width:40ch}

.perivane .body{margin-top:var(--s-4);color:var(--ink-muted);max-width:48ch}

.perivane .actions{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}

.perivane .price{font-family:var(--sans);font-size:var(--fs-14);color:var(--ink-muted)}

.perivane .price b{color:var(--navy);font-weight:600}

.report{position:relative}

.report .page{
  position:relative;
  background:var(--white);border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;
}

.report .page img{width:100%}

.report .marker{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:var(--white);border:2px solid var(--white);
  font-family:var(--sans);font-size:var(--fs-12);font-weight:600;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(31,45,74,.3);
}

.report-key{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-2)}

.report-key li{display:grid;grid-template-columns:26px 1fr;gap:var(--s-3);align-items:baseline;font-family:var(--sans);font-size:var(--fs-14);color:var(--ink-muted);line-height:1.45}

.report-key li b{color:var(--navy);font-weight:600}

.report-key .key{background:var(--navy);color:var(--white);width:22px;height:22px;font-size:var(--fs-12);position:relative;top:3px}

/* ------------------------------------------------------------------
   5. Latest articles
   ------------------------------------------------------------------ */
.articles{border-bottom:1px solid var(--rule)}

.article-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}

.article-list li{border-bottom:1px solid var(--rule)}

.article-list a{
  display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:var(--s-5);align-items:center;
  padding:var(--s-5) var(--s-2);text-decoration:none;color:var(--navy);
  transition:background .18s var(--ease-out);border-radius:var(--radius);
}

.article-list a:hover{background:var(--card)}

.article-list .title{font-size:var(--fs-24);font-weight:500;font-variation-settings:"opsz" 24;letter-spacing:-.005em;line-height:1.25}

.article-list .topic{font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-muted);letter-spacing:.02em;white-space:nowrap}

.article-list .arrow{color:var(--ink-muted);transition:transform .25s var(--ease-out)}

.article-list a:hover .arrow{transform:translateX(3px)}

/* ------------------------------------------------------------------
   6. Newsletter
   ------------------------------------------------------------------ */
.newsletter{background:var(--card);border-bottom:1px solid var(--rule)}

.newsletter .container{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);align-items:center}

.newsletter h2{max-width:16ch}

.newsletter .body{margin-top:var(--s-4);max-width:44ch;color:var(--ink-muted)}

.form-slot{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-6);
}

.form-slot label{display:block;font-family:var(--sans);font-size:var(--fs-14);font-weight:600;margin-bottom:var(--s-2)}

.form-row{display:flex;gap:var(--s-3);flex-wrap:wrap}

.form-row input{
  flex:1 1 220px;font-family:var(--sans);font-size:var(--fs-16);
  padding:13px 14px;border:1px solid var(--rule-strong);border-radius:var(--radius);color:var(--navy);
  background:var(--white);min-width:0;
}

.form-row input::placeholder{color:var(--ink-muted)}

.form-row input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}

.form-note{font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-muted);margin-top:var(--s-3);line-height:1.5}

/* ------------------------------------------------------------------
   7. Who this is
   ------------------------------------------------------------------ */
.who{border-bottom:1px solid var(--rule)}

.who .container{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:start}

.portrait{
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--card);
  aspect-ratio:1/1;
}

.portrait img{width:100%;height:100%;object-fit:cover}

.who h2{max-width:18ch}

.who .body{margin-top:var(--s-5);max-width:58ch}

.who .body p{font-size:var(--fs-18)}

.who .links{margin-top:var(--s-6);display:flex;gap:var(--s-6);flex-wrap:wrap}

/* ------------------------------------------------------------------
   8. Network strip
   ------------------------------------------------------------------ */
.network{padding:var(--s-8) 0}

.network .section-head{margin-bottom:var(--s-6)}

.network .section-head h2{font-size:var(--fs-24)}

.net-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.net-track{display:flex;gap:16px;width:max-content;animation:netscroll 48s linear infinite}

.net-marquee:hover .net-track,.net-marquee:focus-within .net-track{animation-play-state:paused}

@keyframes netscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}

.net-tile{
  flex:0 0 auto;width:196px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-5) var(--s-4) var(--s-4);text-decoration:none;color:var(--navy);
  font-family:var(--sans);font-size:var(--fs-13);font-weight:500;line-height:1.25;text-align:center;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out);
}

.net-tile:hover{background:var(--card-hover);border-color:var(--rule-strong)}

.net-tile .icon{
  width:64px;height:64px;background:var(--white);border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

.net-tile .icon img{width:40px;height:40px;object-fit:contain;border-radius:50%}

.net-tile .url{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .net-track{animation:none;flex-wrap:wrap;width:auto}

.net-track .net-tile[aria-hidden]{display:none}

.net-marquee{mask-image:none;-webkit-mask-image:none}

}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer{background:var(--navy-deep);color:var(--footer-text);padding:var(--s-8) 0 var(--s-6);font-family:var(--sans);font-size:var(--fs-14)}

.site-footer .container{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:var(--s-7)}

.site-footer h3{font-family:var(--sans);font-size:var(--fs-13);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-bottom:var(--s-4)}

.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}

.site-footer a{color:var(--footer-text);text-decoration:none}

.site-footer a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}

.site-footer .brand-block p{max-width:38ch;line-height:1.55}

.site-footer address{font-style:normal;line-height:1.55;margin-top:var(--s-4);color:#FFFFFF}

.site-footer .legal{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s-5);margin-top:var(--s-4);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-13);color:var(--footer-muted)}

/* ------------------------------------------------------------------
   Motion: one authored moment. The hero's Plate I keys itself in.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .sequence li{opacity:0;transform:translateY(8px);animation:keyin .7s var(--ease-out) forwards}

.sequence li:nth-child(1){animation-delay:.15s}

.sequence li:nth-child(2){animation-delay:.27s}

.sequence li:nth-child(3){animation-delay:.39s}

.sequence li:nth-child(4){animation-delay:.51s}

.sequence li:nth-child(5){animation-delay:.63s}

@keyframes keyin{to{opacity:1;transform:none}}

}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  h1{font-size:var(--fs-40)}

h2{font-size:var(--fs-30)}

.hero .container,.perivane .container,.newsletter .container{grid-template-columns:1fr;gap:var(--s-7)}

.who .container{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

.fig{flex-basis:33.333%}

.fig:nth-child(3){border-right:0}

.cover{flex-basis:calc(33.333% - 14px)}

.site-footer .container{grid-template-columns:1fr 1fr}

.site-footer .brand-block{grid-column:1 / -1}

}

@media (max-width:767px){
  :root{--gutter:18px}

.section{padding:var(--s-8) 0}

.hero{padding:var(--s-7) 0}

h1{font-size:var(--fs-34)}

h2{font-size:var(--fs-30)}

.hero-copy .sub{font-size:var(--fs-18)}

.nav{display:none}

.nav-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--fs-14);font-weight:600;background:none;border:1px solid var(--navy);border-radius:var(--radius);padding:8px 12px;color:var(--navy)}

.plate{padding:var(--s-5) var(--s-4)}

.plate-title{flex-direction:column;gap:2px}

.perivane .report{order:2}

.perivane .perivane-copy{order:1}

.fig{flex-basis:100%;border-right:0}

.sequence li{flex-wrap:wrap}

.sequence .leader{display:none}

.sequence .when{flex:0 0 100%;text-align:left;padding-left:38px;margin-top:-6px}

.cover{flex-basis:calc(50% - 10px);min-width:0}

.who .container{grid-template-columns:1fr}

.portrait{max-width:320px}

.article-list a{grid-template-columns:minmax(0,1fr) !important;row-gap:var(--s-2)}

.article-list .arrow{display:none}

.article-list .title{font-size:var(--fs-20)}

.net-tile{width:160px}

.site-footer .container{grid-template-columns:1fr}

.section-head{margin-bottom:var(--s-6)}

}

/* ==========================================================================
   PART 2. WordPress and Elementor compatibility
   ==========================================================================
   Everything above is the design's own stylesheet, unchanged.

   Everything below exists because the page runs inside WordPress with
   Elementor rather than as a standalone document. Each block says which
   platform behaviour it is answering. Nothing here is a design decision.

   Scope: body.ipp-home-wrap, added by the ipp-home-2026 mu-plugin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Container display
   Elementor renders every container as display:var(--display). For containers
   built programmatically the variable is never emitted, the declaration is
   invalid, and every container collapses to display:inline. A fallback keeps
   the intended box model. Section grids below must therefore be !important,
   because this rule sits earlier and would otherwise be overridden by nothing,
   while later equal-specificity rules would override the grids.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .e-con,
.ipp-home-wrap .e-con > .e-con-inner{display:var(--display, flex)}

.ipp-home-wrap .e-con{flex-direction:var(--flex-direction, column)}

.ipp-home-wrap .e-con > .e-con-inner{flex-direction:var(--flex-direction, column);width:100%}

/* --------------------------------------------------------------------------
   2. The content column
   The design used .container. Elementor uses .e-con-inner, so the measure and
   gutters move onto it.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .e-con > .e-con-inner{max-width:1180px;margin:0 auto;
  padding-left:24px;padding-right:24px}

/* --------------------------------------------------------------------------
   3. Section grids
   The design's two- and four-column layouts were .container grids. Elementor
   produces two container shapes: boxed ones own an .e-con-inner, full-width
   ones do not, so the grid lands on a different element in each case.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .hero > .e-con-inner{
  display:grid !important;grid-template-columns:minmax(0,6fr) minmax(0,6fr) !important;
  gap:64px !important;align-items:center !important}

.ipp-home-wrap .perivane > .e-con-inner > .e-con,
.ipp-home-wrap .newsletter > .e-con-inner > .e-con{
  display:grid !important;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:64px;align-items:center;width:100% !important}

.ipp-home-wrap .who > .e-con-inner > .e-con{
  display:grid !important;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:64px;align-items:start;width:100% !important}

.ipp-home-wrap .site-footer > .e-con-inner > .e-con:first-child{
  display:grid !important;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));
  gap:48px;width:100% !important}

.ipp-home-wrap .covers{display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;width:100% !important}

.ipp-home-wrap .section-head{display:flex !important;width:100% !important;
  align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px}

.ipp-home-wrap .section-head-link{flex:0 0 auto !important;text-align:right}

/* grid items size themselves: the builder's percentage widths would overflow
   the gap and wrap, which is what collapsed these sections originally */
.ipp-home-wrap .hero > .e-con-inner > .e-con,
.ipp-home-wrap .perivane .e-con-inner > .e-con,
.ipp-home-wrap .newsletter .e-con-inner > .e-con,
.ipp-home-wrap .who .e-con-inner > .e-con,
.ipp-home-wrap .site-footer .e-con-inner > .e-con,
.ipp-home-wrap .covers > .e-con,
.ipp-home-wrap .section-head > .e-con{width:auto !important;max-width:none !important}

/* wrappers must not re-pad the column they contain */
.ipp-home-wrap .perivane > .e-con-inner > .e-con,
.ipp-home-wrap .newsletter > .e-con-inner > .e-con,
.ipp-home-wrap .who > .e-con-inner > .e-con,
.ipp-home-wrap .site-footer > .e-con-inner > .e-con{padding-left:0;padding-right:0}

/* --------------------------------------------------------------------------
   3b. Default container padding
   Elementor gives every container 10px of padding by default. On nested
   structures that compounds: the guides section head carried it three times
   over and stood 194px tall against the design's 150. Inner containers carry
   no padding of their own; spacing comes from the design's own rules.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .e-con.e-con-full{padding:0}

/* --------------------------------------------------------------------------
   3c. Catalogue row
   The design draws each cover in a fixed 2:3 frame with the image cropped to
   fill it. The Elementor image widgets render at each file's own aspect ratio
   instead, so the six covers came out different heights with uneven gaps, and
   the captions sat too far below. This restores the frame.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .covers{gap:20px !important;align-items:start}

.ipp-home-wrap .covers > .e-con{gap:0 !important}

.ipp-home-wrap .covers .elementor-widget-image{margin:0}

.ipp-home-wrap .covers .elementor-widget-image .elementor-widget-container{
  aspect-ratio:2/3;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;display:block;
  transition:border-color .18s,box-shadow .18s,transform .25s}

.ipp-home-wrap .covers .elementor-widget-image a,
.ipp-home-wrap .covers .elementor-widget-image img{
  width:100% !important;height:100% !important;object-fit:cover;display:block}

.ipp-home-wrap .covers > .e-con:hover .elementor-widget-image .elementor-widget-container{
  border-color:var(--rule-strong);box-shadow:0 6px 16px rgba(31,45,74,.16);transform:translateY(-3px)}

/* caption directly under the frame, at the design's sizes */
.ipp-home-wrap .covers .elementor-widget-text-editor{margin-top:12px}

.ipp-home-wrap .book-title{font-family:var(--sans) !important;font-size:var(--fs-14) !important;
  font-weight:500 !important;line-height:1.35 !important;color:var(--navy) !important;margin:0 !important}

.ipp-home-wrap .book-group{font-family:var(--sans) !important;font-size:var(--fs-12) !important;
  color:var(--ink-muted) !important;letter-spacing:.02em;margin:2px 0 0 !important}

/* --------------------------------------------------------------------------
   3d. Section heads
   Heading and lead on the left, the link right, on one line. Without a basis
   the first column claimed the full width and pushed the link onto its own row.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .section-head > .e-con:first-child{flex:1 1 60% !important;min-width:0}

.ipp-home-wrap .section-head > .e-con:last-child{flex:0 0 auto !important;
  align-items:flex-end;text-align:right}

/* --------------------------------------------------------------------------
   3e. Newsletter form
   The mock's form markup survives inside the slot, but its <label> and <button>
   are styled by the theme and the kit: the label rendered as a serif heading and
   Subscribe came out navy with a stray border, uppercased. Restore the design.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .form-slot label{display:block;font-family:var(--sans) !important;
  font-size:var(--fs-14) !important;font-weight:600 !important;color:var(--navy) !important;
  margin-bottom:8px !important;letter-spacing:0 !important;text-transform:none !important}

.ipp-home-wrap .form-row input{flex:1 1 220px;font-family:var(--sans) !important;
  font-size:var(--fs-16) !important;padding:13px 14px !important;
  border:1px solid var(--rule-strong) !important;border-radius:var(--radius) !important;
  color:var(--navy) !important;background:var(--white) !important;box-shadow:none !important}

.ipp-home-wrap .form-row button,
.ipp-home-wrap .form-slot .btn-primary{
  background:var(--vermillion) !important;color:var(--white) !important;
  border:1px solid var(--vermillion) !important;border-radius:var(--radius) !important;
  font-family:var(--sans) !important;font-size:var(--fs-16) !important;font-weight:600 !important;
  text-transform:none !important;letter-spacing:.005em !important;
  padding:13px 22px !important;box-shadow:none !important;cursor:pointer}

.ipp-home-wrap .form-row button:hover,
.ipp-home-wrap .form-slot .btn-primary:hover{
  background:var(--vermillion-deep) !important;border-color:var(--vermillion-deep) !important}

.ipp-home-wrap .form-note{font-family:var(--sans) !important;font-size:var(--fs-13) !important;
  color:var(--ink-muted) !important;margin-top:12px !important;line-height:1.5 !important}

/* the band is tinted, and the two columns sit centred against each other */
.ipp-home-wrap .newsletter{background:var(--card);border-bottom:1px solid var(--rule)}

.ipp-home-wrap .newsletter h2{max-width:16ch}

.ipp-home-wrap .newsletter .body{margin-top:16px;max-width:44ch;color:var(--ink-muted)}

/* --------------------------------------------------------------------------
   4. Type and colour
   The design styles body{}, which on WordPress is the theme's body. Elementor's
   kit wins there, so the page rendered in Inter and Lora at #0B1A30. The kit
   also sets .elementor-kit-NNN a, which ties with .ipp-home-wrap a on
   specificity and loads later, turning every link blue.
   -------------------------------------------------------------------------- */
.ipp-home-wrap{color:var(--navy);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.ipp-home-wrap,
.ipp-home-wrap p,.ipp-home-wrap li,.ipp-home-wrap span,
.ipp-home-wrap a,.ipp-home-wrap div{font-family:var(--serif)}

.ipp-home-wrap h1,.ipp-home-wrap h2,.ipp-home-wrap h3,
.ipp-home-wrap h4,.ipp-home-wrap h5,.ipp-home-wrap h6{
  font-family:var(--serif) !important;color:var(--navy) !important}

.ipp-home-wrap .nav,.ipp-home-wrap .nav *,
.ipp-home-wrap .key,.ipp-home-wrap .when,.ipp-home-wrap .num,
.ipp-home-wrap figcaption,.ipp-home-wrap .plate-title,.ipp-home-wrap .plate-caption,
.ipp-home-wrap .btn,.ipp-home-wrap button,.ipp-home-wrap input,
.ipp-home-wrap .book-group,
.ipp-home-wrap .form-note,.ipp-home-wrap .legal{font-family:var(--sans) !important}

.ipp-home-wrap a,.ipp-home-wrap a:visited,
.ipp-home-wrap a:hover,.ipp-home-wrap a:focus{color:var(--navy) !important}

.ipp-home-wrap .site-footer,.ipp-home-wrap .site-footer *{color:var(--footer-text)}

.ipp-home-wrap .site-footer h1,.ipp-home-wrap .site-footer h2,
.ipp-home-wrap .site-footer h3{color:var(--white) !important}

.ipp-home-wrap .site-footer a,
.ipp-home-wrap .site-footer a:visited{color:var(--footer-text) !important}

.ipp-home-wrap .site-footer a:hover{color:var(--white) !important}

/* --------------------------------------------------------------------------
   4b. Type scale
   The kit sets h1 to h6 sizes with .elementor-kit-NNN h2, which ties with the
   design's own h2 on specificity and loads later, so the kit won: headings ran
   4px large and the guide cards grew from roughly 380px to 508px because
   .fig h3 and .fig p lost to the kit as well. Restore the design's scale.
   -------------------------------------------------------------------------- */
.ipp-home-wrap h1{font-size:4rem !important;line-height:1.05 !important;letter-spacing:-.02em}

.ipp-home-wrap h2{font-size:var(--fs-40) !important;line-height:1.15 !important}

.ipp-home-wrap h3{font-size:var(--fs-24) !important;line-height:1.15 !important}

.ipp-home-wrap .fig h3{font-size:var(--fs-20) !important;line-height:1.2 !important}

.ipp-home-wrap .fig p{font-size:var(--fs-16) !important;line-height:1.5 !important;
  color:var(--ink-muted) !important}

.ipp-home-wrap .site-footer h3{font-size:var(--fs-14) !important}

.ipp-home-wrap .lead,.ipp-home-wrap .lede{font-size:var(--fs-18) !important}

.ipp-home-wrap .plate-title,.ipp-home-wrap .plate-caption,
.ipp-home-wrap .when,.ipp-home-wrap .fig-cap{font-size:var(--fs-13) !important}

@media(max-width:1024px){.ipp-home-wrap h1{font-size:var(--fs-40) !important}}

@media(max-width:767px){.ipp-home-wrap h1{font-size:var(--fs-34) !important}}

/* --------------------------------------------------------------------------
   5. Buttons
   The design's .btn classes do not reach Elementor button widgets, which
   inherit the kit instead: the hero CTA rendered navy on navy in Inter.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .hero-cta .elementor-button{
  background-color:var(--vermillion) !important;color:var(--white) !important;
  border:1px solid var(--vermillion) !important;
  font-family:var(--sans) !important;font-size:15px !important;font-weight:600 !important;
  letter-spacing:.01em;border-radius:var(--radius) !important;
  padding:16px 26px !important;text-decoration:none !important;
  display:inline-flex;align-items:center;gap:10px;transition:background .18s}

.ipp-home-wrap .hero-cta .elementor-button:hover{
  background-color:var(--vermillion-deep) !important;
  border-color:var(--vermillion-deep) !important;color:var(--white) !important}

.ipp-home-wrap .btn-secondary-el .elementor-button{
  background-color:var(--white) !important;color:var(--navy) !important;
  border:1px solid var(--navy) !important;
  font-family:var(--sans) !important;font-size:15px !important;font-weight:600 !important;
  border-radius:var(--radius) !important;padding:15px 24px !important;
  text-decoration:none !important}

.ipp-home-wrap .btn-secondary-el .elementor-button:hover{
  background-color:var(--card) !important;color:var(--navy) !important}

/* the design's own anchor buttons, used inside the HTML fragments */
.ipp-home-wrap .btn{text-decoration:none !important}

.ipp-home-wrap a.btn-primary,.ipp-home-wrap a.btn-primary:visited{
  background:var(--vermillion) !important;color:var(--white) !important;
  border-color:var(--vermillion) !important}

.ipp-home-wrap a.btn-primary:hover{background:var(--vermillion-deep) !important;
  border-color:var(--vermillion-deep) !important;color:var(--white) !important}

.ipp-home-wrap a.btn-secondary,.ipp-home-wrap a.btn-secondary:visited{
  background:var(--white) !important;color:var(--navy) !important;
  border-color:var(--navy) !important}

.ipp-home-wrap a.btn-secondary:hover{background:var(--card) !important}

/* the mock's own inline header is gone, and its mobile toggle with it */
.ipp-home-wrap .nav-toggle{display:none !important}

/* --------------------------------------------------------------------------
   7. Spacing
   The header is taller than the design assumed, so the hero needs more air.
   -------------------------------------------------------------------------- */
.ipp-home-wrap .hero{padding-top:96px}

/* --------------------------------------------------------------------------
   8. Responsive
   The design's own breakpoints are 1024 and 767; these mirror them for the
   Elementor structure.
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .ipp-home-wrap .hero > .e-con-inner{grid-template-columns:1fr !important;gap:48px !important}

.ipp-home-wrap .perivane > .e-con-inner > .e-con,
  .ipp-home-wrap .newsletter > .e-con-inner > .e-con{grid-template-columns:1fr;gap:48px}

.ipp-home-wrap .who > .e-con-inner > .e-con{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

.ipp-home-wrap .site-footer > .e-con-inner > .e-con:first-child{grid-template-columns:1fr 1fr}

.ipp-home-wrap .covers{grid-template-columns:repeat(3,minmax(0,1fr))}

.ipp-home-wrap .hero{padding-top:72px}

}

@media(max-width:767px){
  .ipp-home-wrap .who > .e-con-inner > .e-con,
  .ipp-home-wrap .site-footer > .e-con-inner > .e-con:first-child{grid-template-columns:1fr}

.ipp-home-wrap .covers{grid-template-columns:repeat(2,minmax(0,1fr))}

.ipp-home-wrap .hero{padding-top:48px}

}

/* Elementor containers centre their children by default, which pushed the
   section headings into the middle of the column and right-justified them.
   Text blocks in this page are left aligned unless the design says otherwise. */
.ipp-home-wrap .e-con{align-items:var(--align-items, stretch)}

.ipp-home-wrap .section-head > .e-con:first-child{align-items:flex-start !important;text-align:left !important}

.ipp-home-wrap .section-head > .e-con:first-child *{text-align:left !important}

.ipp-home-wrap .section-head > .e-con:last-child,
.ipp-home-wrap .section-head > .e-con:last-child *{text-align:right !important}

.ipp-home-wrap .hero-copy,.ipp-home-wrap .perivane-copy,.ipp-home-wrap .who-copy{
  align-items:flex-start !important;text-align:left !important}

.ipp-home-wrap .hero-copy *,.ipp-home-wrap .perivane-copy *,.ipp-home-wrap .who-copy *{text-align:left}

.ipp-home-wrap .covers > .e-con{align-items:stretch !important;text-align:left}

.ipp-home-wrap .covers .elementor-widget-text-editor *{text-align:left !important}

/* honeypot: off-screen, never focusable */
.ipp-home-wrap .ipp-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}

.ipp-home-wrap .ipp-sub-msg{font-family:var(--sans) !important;font-size:var(--fs-14) !important;
  color:var(--navy) !important;margin:12px 0 0 !important;min-height:1.2em}

/* --------------------------------------------------------------------------
   3g. Perivane and network, matched to the design
   My type-scale block set .lede to 18px and h2 to 40px everywhere, which
   overrode the design's own .perivane .lede (20px) and .network h2 (24px).
   -------------------------------------------------------------------------- */
.ipp-home-wrap .perivane .lede{font-size:var(--fs-20) !important;line-height:1.5;max-width:40ch}

.ipp-home-wrap .perivane .body p,.ipp-home-wrap .perivane .body{
  color:var(--ink-muted) !important;max-width:48ch}

.ipp-home-wrap .network h2,
.ipp-home-wrap .network .section-head h2{font-size:var(--fs-24) !important}

/* button and price on one line, as drawn */
.ipp-home-wrap .perivane .actions{display:flex !important;flex-direction:row !important;
  align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px;width:100% !important}

.ipp-home-wrap .perivane .actions > .elementor-widget{width:auto !important;margin:0}

.ipp-home-wrap .perivane .actions .price{margin:0 !important}

/* Elementor applies one flex gap between every child, which flattens the
   design's per-element rhythm (24 / 16 / 32) to a uniform 20 and doubles up
   where a margin is also set. Use the design's margins, not the gap. */
.ipp-home-wrap .perivane-copy{gap:0 !important}

.ipp-home-wrap .perivane-copy > *{margin:0}

.ipp-home-wrap .perivane .lede{margin-top:24px !important}

.ipp-home-wrap .perivane .body{margin-top:16px !important}

.ipp-home-wrap .perivane .actions{margin-top:32px !important}

/* The design sets p{margin:0} and spaces blocks deliberately; the kit puts a
   32px bottom margin back on every paragraph, which showed up in all eight
   sections. Restore the design's rule, including its p + p rhythm. */
.ipp-home-wrap .elementor-widget-text-editor p{margin:0}

.ipp-home-wrap .elementor-widget-text-editor p + p{margin-top:1em}

.ipp-home-wrap .elementor-widget-text-editor{margin-bottom:0 !important}