:root{
  --ink:#17201e; --paper:#f2f1e9; --soft:#d7ddd9; --dark:#1d2623;
  --blue:#b9dbe5; --warm:#eee8dc; --max:1180px;
  --top-h:46px; --foot-h:38px; --next-h:48px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif;padding-top:var(--top-h);padding-bottom:var(--foot-h)}
a{color:inherit;text-decoration:none}
.content{width:min(calc(100% - 64px),var(--max));margin-inline:auto}

/* fixed dark bars */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top-h);background:var(--dark);color:#eef1ef;z-index:1000}
.topbar-inner{width:min(calc(100% - 64px),var(--max));height:100%;margin:auto;display:grid;align-items:center}
.homebar{grid-template-columns:1fr auto}
.subbar{grid-template-columns:1fr auto 1fr}
.brand,.overview{font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;white-space:nowrap}
.overview{justify-self:center}
.top-right{justify-self:end;display:flex;align-items:center;gap:12px;min-width:0}
.langswitch{display:flex;gap:6px}
.langswitch button{border:0;background:none;color:#87908d;padding:2px 0;font:700 9px/1 Arial;cursor:pointer}
.langswitch button.active{color:#fff;border-bottom:1px solid #fff}
.globe{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:
 radial-gradient(ellipse at 35% 35%,#91a96c 0 17%,transparent 18%),
 radial-gradient(ellipse at 68% 62%,#728c58 0 18%,transparent 19%),
 radial-gradient(circle at 35% 28%,#6c9caf 0 54%,#2b4c58 74%,#14211f 100%);
 box-shadow:inset -3px -2px 4px #0009,inset 2px 2px 2px #fff4;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{position:fixed;inset:auto 0 0 0;height:var(--foot-h);background:var(--dark);color:#d8ddda;z-index:1000}
.footer-inner{width:min(calc(100% - 64px),var(--max));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;font:500 9px/1 Arial;letter-spacing:.11em;white-space:nowrap}

/* HOME */
.home-hero{height:52vh;min-height:430px;max-height:590px;background:
 linear-gradient(rgba(193,224,232,.46),rgba(193,224,232,.46)),url("hero-rome.jpg") center 48%/cover no-repeat;position:relative}
.hero-content{height:100%;position:relative;padding-top:148px}
.hero-name{margin:0;font-family:Baskerville,"Times New Roman",serif;font-weight:400;text-transform:uppercase;font-size:clamp(52px,6.1vw,94px);line-height:.92;letter-spacing:-.045em;white-space:nowrap;width:100%}

.hero-name .name-initial{
  font-size:1.15em;
  line-height:0;
}

.hero-subtitle{margin-top:10px;font:500 24px/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.hero-quote{position:absolute;left:0;bottom:24px;margin:0;max-width:560px;font:400 26px/1.3 Baskerville,Georgia,serif}
.hero-quote cite{font:600 13px/1 Arial;letter-spacing:.12em;text-transform:uppercase}
.home-main{background:linear-gradient(110deg,#e5e9e5 0%,#edf0ec 58%,#eee5cf 100%);padding:26px 0 28px}
.lead{margin:0 0 20px;max-width:760px;font:400 27px/1.24 Baskerville,Georgia,serif}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{min-height:190px;padding:18px 16px;border:1px solid #fff;background:#ffffff55;display:flex;flex-direction:column}
.tile-create{background:#e8dfd255}.tile-explore{background:#dce8e855}.tile-observe{background:#dedec855}.tile-think{background:#e6e4df66}
.tile h2{font:400 38px/1 Baskerville,Georgia,serif;margin:0 0 12px}
.tile p{font:400 13px/1.4 Arial;margin:0 0 16px}
.enter{margin-top:auto;font:500 9px/1 Arial;letter-spacing:.1em;text-decoration:underline;text-underline-offset:5px}

/* SUBPAGES */
.subpage{padding-bottom:calc(var(--foot-h) + var(--next-h))}
.pagehead{background:linear-gradient(100deg,var(--blue),#eef0eb 64%,var(--warm));padding:22px 0 20px}
.kicker{font:500 9px/1 Arial;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;color:#56635f}
.pagehead h1{font:400 clamp(54px,6vw,88px)/.9 Baskerville,Georgia,serif;margin:0 0 8px}
.deck{font:400 22px/1.25 Baskerville,Georgia,serif;margin:0;max-width:720px}
.story{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:70px;padding-top:28px;padding-bottom:90px}
.prose p{font:400 17px/1.55 Baskerville,Georgia,serif;margin:0 0 22px}

/* True two-line initial. Safari/iPhone uses -webkit-initial-letter.
   Fallback below keeps a two-line float in other browsers. */
.prose p:first-child::first-letter{
  float:left;
  font-family:Baskerville,Georgia,serif;
  font-size:2.92em;
  line-height:.78;
  padding:0 .09em 0 0;
  margin:.055em 0 -.04em 0;
}
@supports (-webkit-initial-letter: 2){
  .prose p:first-child::first-letter{
    float:none;
    -webkit-initial-letter:2;
    initial-letter:2;
    font-family:Baskerville,Georgia,serif;
    margin-right:.10em;
  }
}

.pull{border-left:1px solid #c7cbc5;padding-left:18px;font:400 23px/1.2 Baskerville,Georgia,serif;align-self:start}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{border:1px solid #b9beb9;border-radius:999px;padding:4px 8px;font:500 8px/1 Arial}
.next{position:fixed;left:0;right:0;bottom:var(--foot-h);height:var(--next-h);display:grid;grid-template-columns:repeat(3,1fr);background:var(--soft);z-index:999}
.next a{display:flex;align-items:center;justify-content:center;border-right:1px solid #bcc4c0;font:400 clamp(15px,1.35vw,21px)/1 Baskerville,Georgia,serif}
.next a:last-child{border-right:0}

/* iMac / large desktop */
@media(min-width:1440px){
  :root{--max:1220px}
  .home-hero{height:54vh;max-height:610px}
}

/* iPhone 14 Pro and comparable phones */
@media(max-width:600px){
  :root{--top-h:50px;--foot-h:34px;--next-h:42px}
  body{padding-top:var(--top-h)}
  .content,.topbar-inner,.footer-inner{width:calc(100% - 32px)}
  .homebar{grid-template-columns:1fr auto}
  .subbar{grid-template-columns:1fr auto 1fr;column-gap:5px}
  .brand,.overview{font-size:7.4px;letter-spacing:.07em}
  .top-right{gap:5px}
  .langswitch{gap:4px}
  .langswitch button{font-size:6.8px}
  .globe{width:9px;height:9px;flex-basis:9px}

  .home-hero{height:auto;min-height:0;max-height:none;aspect-ratio:16/9;background-size:contain;background-repeat:no-repeat;background-position:center center}
  .home-hero::before{background:rgba(201,229,235,.75)}
  .hero-content{overflow:hidden}
  .hero-content{padding-top:42px}
  .hero-name{font-size:clamp(24px,7vw,29px);line-height:.96;letter-spacing:-.035em;width:100%;white-space:nowrap}
  .hero-subtitle{margin-top:5px;font-size:10px;line-height:1.18;letter-spacing:.045em;white-space:normal;max-width:92%}
  .hero-quote{bottom:8px;max-width:92%;font-size:11px;line-height:1.15}
  .hero-quote cite{display:inline;margin-left:5px;font-size:6px;line-height:1.1}
  .home-main{padding:22px 0 18px}
  .lead{font-size:20px;line-height:1.28;margin-bottom:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{min-height:176px;padding:13px 12px}
  .tile h2{font-size:28px;margin-bottom:10px}
  .tile p{font-size:11px;line-height:1.38}
  .enter{font-size:7.5px}

  .pagehead{padding:16px 0 15px}
  .kicker{font-size:7px;margin-bottom:5px}
  .pagehead h1{font-size:44px;margin-bottom:7px}
  .deck{font-size:16px;line-height:1.25}
  .story{display:block;padding-top:22px;padding-bottom:74px}
  .prose p{font-size:16px;line-height:1.52;margin-bottom:20px}
  .pull{margin-top:28px;font-size:19px}
  .tag{font-size:14px}
  .next a{font-size:13px}
  .footer-inner{font-size:6.8px;letter-spacing:.07em}
}

/* narrow phones: keep the header intact rather than allowing overlap */
@media(max-width:380px){
  .brand,.overview{font-size:6.7px;letter-spacing:.04em}
  .top-right{gap:3px}
  .langswitch button{font-size:6.2px}
}


/* v44 — restrained typography depth */
body {
  text-shadow: 0 1px 1px rgba(0,0,0,.10);
}

/* Rome hero: clearly stronger shadow so typography remains legible over the image */
.home-hero .hero-name,
.home-hero .hero-subtitle,
.home-hero .hero-quote,
.home-hero .hero-quote cite {
  text-shadow:
    0 2px 2px rgba(255,255,255,.38),
    0 3px 5px rgba(0,0,0,.42);
}

/* Dark bars: subtle light separation rather than a heavy black shadow */
.site-header,
.site-header *,
.site-footer,
.site-footer * {
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
}

/* v45 — Kurzweil quote below "The tools change..." on Create */
.kurzweil-create{
  grid-column:2;
  margin:-48px 0 0;
  padding:18px 0 0 18px;
  border-left:1px solid #c7cbc5;
  font:400 18px/1.35 Baskerville,Georgia,serif;
}
.kurzweil-create strong{
  display:block;
  margin-top:8px;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.12em;
}
@media(max-width:600px){
  .kurzweil-create{
    margin:14px 0 0;
    padding:16px 0 0 18px;
    font-size:16px;
  }
}

/* v46 — homepage mission summary replaces Kurzweil quote */
.hero-summary{
  position:absolute;
  left:0;
  bottom:20px;
  margin:0;
  max-width:720px;
  font:400 17px/1.38 Arial,sans-serif;
  letter-spacing:.005em;
  text-shadow:
    0 2px 2px rgba(255,255,255,.38),
    0 3px 5px rgba(0,0,0,.42);
}
@media(max-width:600px){
  .hero-summary{
    left:0;
    bottom:7px;
    max-width:96%;
    font-size:9px;
    line-height:1.18;
    letter-spacing:0;
  }
}

/* v47 — homepage manifesto */
.manifesto{
  padding-top:42px;
  padding-bottom:54px;
}
.manifesto-inner{
  max-width:900px;
}
.manifesto h2{
  margin:0 0 22px;
  font:600 28px/1.08 Arial,sans-serif;
  letter-spacing:-.025em;
}
.manifesto p{
  margin:0 0 17px;
  max-width:820px;
  font-size:17px;
  line-height:1.55;
}
.manifesto-final{
  margin-top:27px !important;
  font-weight:700;
  font-size:18px !important;
}
@media(max-width:600px){
  .manifesto{
    padding-top:28px;
    padding-bottom:38px;
  }
  .manifesto h2{
    margin-bottom:16px;
    font-size:23px;
  }
  .manifesto p{
    margin-bottom:14px;
    font-size:15px;
    line-height:1.48;
  }
  .manifesto-final{
    margin-top:22px !important;
    font-size:16px !important;
  }
}

/* v48 — Rome uses the lower half of the original image only */
.home-hero{
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1376/384;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* Keep the typography comfortably inside the much flatter Rome strip */
.hero-content{
  padding-top:42px;
}
.hero-summary{
  bottom:16px;
  max-width:720px;
}

/* Manifesto aligns exactly with the "Four ways..." content column
   and uses the same page typography. */
.manifesto{
  padding-top:38px;
  padding-bottom:54px;
}
.manifesto-inner{
  max-width:none;
}
.manifesto h2{
  margin:0 0 18px;
  font:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-weight:700;
}
.manifesto p{
  max-width:none;
  font:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}
.manifesto-final{
  font:inherit;
  font-size:inherit !important;
  line-height:inherit;
  font-weight:700;
}

@media(max-width:600px){
  .home-hero{
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:1376/384;
    background-size:cover;
    background-position:center center;
  }
  .hero-content{
    padding-top:15px;
  }
  .hero-name{
    font-size:clamp(20px,6.4vw,26px);
  }
  .hero-subtitle{
    margin-top:3px;
    font-size:8px;
  }
  .hero-summary{
    bottom:5px;
    max-width:96%;
    font-size:7px;
    line-height:1.12;
  }
  .manifesto{
    padding-top:26px;
    padding-bottom:38px;
  }
  .manifesto h2,
  .manifesto p,
  .manifesto-final{
    font:inherit;
    font-size:inherit !important;
    line-height:inherit;
    letter-spacing:inherit;
  }
  .manifesto h2{
    font-weight:700;
    margin-bottom:14px;
  }
  .manifesto-final{
    font-weight:700;
  }
}

/* v49 — tighten Rome typography and unify homepage alignment/type */

/* Treat the three Rome text elements as one vertically balanced group:
   name/subtitle near the top, slogan pulled upward from the bottom. */
.hero-content{
  padding-top:20px;
}
.hero-subtitle{
  margin-top:2px;
}
.hero-summary{
  bottom:28px;
}

/* The manifesto must use the exact same content width/alignment as the
   lead and tiles, with no extra inset. */
.manifesto.content{
  width:min(1180px, calc(100% - 64px));
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
.manifesto-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

/* Same serif typography as the normal homepage copy. */
.manifesto h2,
.manifesto p,
.manifesto-final{
  font-family:Baskerville,Georgia,serif;
  font-weight:400;
  letter-spacing:normal;
  text-shadow:0 1px 1px rgba(0,0,0,.10);
}
.manifesto h2{
  font-size:24px;
  line-height:1.25;
  margin:0 0 16px;
}
.manifesto p{
  font-size:18px;
  line-height:1.38;
  margin:0 0 16px;
}
.manifesto-final{
  font-size:18px !important;
  line-height:1.38;
  font-weight:400;
}

@media(max-width:600px){
  .hero-content{
    padding-top:7px;
  }
  .hero-subtitle{
    margin-top:1px;
  }
  .hero-summary{
    bottom:10px;
  }
  .manifesto.content{
    width:calc(100% - 32px);
  }
  .manifesto h2{
    font-size:20px;
    line-height:1.28;
  }
  .manifesto p,
  .manifesto-final{
    font-size:16px !important;
    line-height:1.42;
  }
}

/* v50 — exact hero grouping + remove nested content inset */

/* Name, subtitle and slogan now form ONE compact block.
   Subtitle follows the name directly; slogan starts ~20px below it. */
.home-hero .hero-content{
  padding-top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.home-hero .hero-name{
  flex:0 0 auto;
}
.home-hero .hero-subtitle{
  flex:0 0 auto;
  margin-top:4px;
}
.home-hero .hero-summary{
  position:static;
  flex:0 0 auto;
  margin:20px 0 0;
  max-width:720px;
}

/* Manifesto is already inside the homepage .content wrapper.
   No second .content width/margin is allowed here. */
.manifesto{
  width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}
.manifesto-inner{
  width:100%;
  margin:0;
  padding:0;
}

/* Use the same serif family as the page's main editorial typography. */
.manifesto h2,
.manifesto p,
.manifesto-final{
  font-family:Baskerville,Georgia,serif;
  letter-spacing:normal;
}
.manifesto h2{
  font-weight:400;
}
.manifesto p,
.manifesto-final{
  font-weight:400;
}

@media(max-width:600px){
  .home-hero .hero-content{
    padding-top:0;
    justify-content:center;
  }
  .home-hero .hero-subtitle{
    margin-top:2px;
  }
  .home-hero .hero-summary{
    position:static;
    margin-top:12px;
    max-width:96%;
  }
  .manifesto{
    width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
}

/* v51 — supplied RomeFull image becomes the homepage background.
   The former cropped Rome hero image is removed from the top. */
body.home{
  background:
    linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
    url("rome-full.jpg") center top / auto 1200px no-repeat fixed;
}

/* No separate Rome picture at the top anymore. Keep only the text area. */
.home .home-hero{
  height:250px;
  min-height:250px;
  max-height:250px;
  aspect-ratio:auto;
  background:none !important;
}
.home .home-hero::before{
  display:none;
}
.home .home-hero .hero-content{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

/* Let the new Rome image remain visible behind the whole homepage. */
.home .home-main{
  background:rgba(242,241,233,.72);
}

/* Desktop: the complete portrait is exactly 1200px high, with no crop. */
@media(min-width:601px){
  body.home{
    background-size:auto 1200px;
    background-position:center top;
  }
}

/* iPhone/mobile: show the entire supplied image without cropping.
   It scales to the available width and keeps its full height. */
@media(max-width:600px){
  body.home{
    background:
      linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
      url("rome-full.jpg") center top / 100% auto no-repeat scroll;
  }
  .home .home-hero{
    height:210px;
    min-height:210px;
    max-height:210px;
    aspect-ratio:auto;
  }
  .home .home-main{
    background:rgba(242,241,233,.74);
  }
}

/* v52 — Rome remains visible behind ALL homepage content.
   No pale sheet behind lead, manifesto or general page content.
   Only the four navigation tiles get translucent panels. */
.home .home-main,
.home main,
.home .manifesto,
.home .manifesto-inner{
  background:transparent !important;
}

.home .tile{
  background:rgba(242,241,233,.64) !important;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

/* Mobile: same rule — no light lower overlay, tiles only. */
@media(max-width:600px){
  .home .home-main,
  .home main,
  .home .manifesto,
  .home .manifesto-inner{
    background:transparent !important;
  }
  .home .tile{
    background:rgba(242,241,233,.64) !important;
  }
}

/* v53 — two Rome backgrounds: original + vertically mirrored copy.
   Pure CSS; source images remain untouched. */
body.home{
  position:relative;
  isolation:isolate;
  background:none !important;
}

/* Desktop: new RomeDesktop.jpg, followed immediately by its vertical mirror. */
body.home::before,
body.home::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:0;
  width:100%;
  height:1200px;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
    url("rome-desktop.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:auto 1200px;
}
body.home::before{
  top:0;
}
body.home::after{
  top:1200px;
  transform:scaleY(-1);
  transform-origin:center top;
}

/* Keep page content transparent; only tiles retain their translucent panels. */
.home .home-main,
.home main,
.home .manifesto,
.home .manifesto-inner{
  background:transparent !important;
}

/* Mobile: use the existing portrait RomeFull image in full width,
   then place an immediately adjacent mirrored copy beneath it. */
@media(max-width:600px){
  body.home::before,
  body.home::after{
    height:auto;
    aspect-ratio:896/1200;
    background-image:
      linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
      url("rome-full.jpg");
    background-size:100% 100%;
    background-position:center center;
  }
  body.home::before{
    top:0;
  }
  body.home::after{
    top:calc(100vw * 1200 / 896);
    transform:scaleY(-1);
    transform-origin:center top;
  }
}

/* v54 — FIX: ORIGINAL first, MIRROR immediately below it.
   Two visible Rome copies per viewport version. */
body.home{
  position:relative;
  isolation:isolate;
  background:none !important;
}

/* Desktop original */
body.home::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:0;
  top:0;
  width:100%;
  height:1200px;
  pointer-events:none;
  background:
    linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
    url("rome-desktop.jpg") center center / auto 1200px no-repeat;
  transform:none !important;
  transform-origin:center center;
}

/* Desktop mirrored copy starts EXACTLY where original ends.
   Important: transform around its own center, so top stays at 1200px. */
body.home::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:0;
  top:1200px;
  width:100%;
  height:1200px;
  pointer-events:none;
  background:
    linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
    url("rome-desktop.jpg") center center / auto 1200px no-repeat;
  transform:scaleY(-1) !important;
  transform-origin:center center !important;
}

@media(max-width:600px){
  /* Original portrait image, complete and uncropped */
  body.home::before{
    top:0;
    width:100%;
    height:calc(100vw * 1200 / 896);
    background:
      linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
      url("rome-full.jpg") center center / 100% 100% no-repeat;
    transform:none !important;
  }

  /* Mirrored portrait begins immediately below original */
  body.home::after{
    top:calc(100vw * 1200 / 896);
    width:100%;
    height:calc(100vw * 1200 / 896);
    background:
      linear-gradient(rgba(242,241,233,.28),rgba(242,241,233,.28)),
      url("rome-full.jpg") center center / 100% 100% no-repeat;
    transform:scaleY(-1) !important;
    transform-origin:center center !important;
  }
}



/* v57 — balanced hero spacing on desktop AND iPhone */

/* Keep the title safely below the dark header.
   Gap from header to title is approximately one subtitle line-height. */
body.home .home-hero{
  height:225px !important;
  min-height:225px !important;
  max-height:225px !important;
}

body.home .home-hero .hero-content{
  height:auto !important;
  min-height:0 !important;
  padding-top:24px !important;
  padding-bottom:10px !important;
  justify-content:flex-start !important;
  position:static !important;
  top:auto !important;
  transform:none !important;
}

body.home .hero-subtitle{
  margin-top:4px !important;
}

body.home .hero-summary{
  position:static !important;
  margin-top:16px !important;
}

/* Only a little air before "Four ways..." */
body.home .home-main{
  padding-top:8px !important;
}
body.home .lead{
  margin-top:0 !important;
}

/* Tile headings: 15% smaller on ALL devices */
body.home .tile h2{
  font-size:32.3px !important;
  line-height:1.05 !important;
}

@media(max-width:600px){
  body.home .home-hero{
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
  }

  body.home .home-hero .hero-content{
    padding-top:18px !important;
    padding-bottom:8px !important;
  }

  body.home .hero-summary{
    margin-top:12px !important;
  }

  body.home .home-main{
    padding-top:6px !important;
  }

  /* 15% reduction relative to the former mobile tile heading size */
  body.home .tile h2{
    font-size:27.2px !important;
    line-height:1.05 !important;
  }
}

/* v58 — IPHONE/MOBILE ONLY. Desktop remains exactly as v57. */
@media(max-width:600px){

  /* 1. ALEXANDER FORSE: 15% larger than current mobile size */
  body.home .hero-name{
    font-size:115% !important;
  }

  /* 2. "Wir machen Vorstellungen..." / English equivalent: 20% larger */
  body.home .hero-summary{
    font-size:120% !important;
    margin-top:12px !important;
  }

  /* Make room for the enlarged text. */
  body.home .home-hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* 3. Approx. three empty text lines after the summary, then "Vier Arten..." */
  body.home .home-main{
    padding-top:3.6em !important;
  }
  body.home .lead{
    margin-top:0 !important;
  }

  /* 4. Tile headings: another 10% smaller than v57 mobile */
  body.home .tile h2{
    font-size:24.5px !important;
    line-height:1.05 !important;
  }
}

/* v59 — ONE TYPEFACE THROUGHOUT THE ENTIRE SITE
   One family only: Baskerville. Variants use weight/style/spacing. */
html,
body,
button,
input,
textarea,
select,
header,
footer,
nav,
main,
section,
article,
div,
span,
p,
a,
h1,h2,h3,h4,h5,h6,
strong,b,em,i,small,
blockquote,cite,
.hero-name,
.hero-subtitle,
.hero-summary,
.lead,
.tile,
.tile h2,
.tile p,
.manifesto,
.manifesto-inner,
.topbar,
.site-header,
.site-footer{
  font-family:Baskerville, "Baskerville Old Face", "Iowan Old Style", Georgia, serif !important;
}

/* Preserve hierarchy through variants of the SAME typeface. */
.hero-name,
.tile h2,
h1,h2,h3{
  font-weight:600;
}

.hero-subtitle,
.topbar,
.site-header,
.site-footer,
nav{
  font-weight:600;
  letter-spacing:.10em;
}

body,
p,
.lead,
.hero-summary,
.tile p,
.manifesto{
  font-weight:400;
}

em,i,cite{
  font-style:italic;
}

/* v60 — typography tuning */

/* ALEXANDER FORSE + CREATIVE... return to their original sans-serif typeface. */
body.home .hero-name,
body.home .hero-subtitle{
  font-family:Arial, Helvetica, sans-serif !important;
}

/* "Four ways..." / "Vier Arten..." matches the manifesto heading
   "From imagination to reality" / "Von der Vorstellung zur Wirklichkeit". */
body.home .lead{
  font-size:32px !important;
  line-height:1.12 !important;
}

/* Tile headings are deliberately NOT bold on desktop or mobile. */
body.home .tile h2{
  font-weight:400 !important;
}

@media(max-width:600px){
  body.home .lead{
    font-size:28px !important;
    line-height:1.12 !important;
  }

  body.home .tile h2{
    font-weight:400 !important;
  }
}

/* v61 — A and F initials use exactly the same typeface as the rest of ALEXANDER FORSE.
   They may remain enlarged, but no longer inherit the old Baskerville override. */
body.home .hero-name,
body.home .hero-name *,
body.home .hero-name .initial,
body.home .hero-name span{
  font-family:Arial, Helvetica, sans-serif !important;
}

/* v62 — restore the ORIGINAL serif hero typography */
body.home .hero-name,
body.home .hero-name *,
body.home .hero-name span,
body.home .hero-name .initial,
body.home .hero-subtitle,
body.home .hero-subtitle *{
  font-family:Baskerville, "Times New Roman", serif !important;
}

/* v63 — original serif hero, regular weight */
body.home .hero-name,
body.home .hero-name *,
body.home .hero-name span,
body.home .hero-name .initial,
body.home .hero-subtitle,
body.home .hero-subtitle *{
  font-weight:400 !important;
}

/* v65 — DESKTOP ONLY
   Keep the editorial text axis unchanged.
   Make the four-card row wider than that axis, while keeping the first
   card's heading/text aligned exactly with the editorial text. */
@media(min-width:601px){

  /* The tile row grows beyond the normal content column on both sides. */
  body.home .tiles{
    width:calc(100% + 56px) !important;
    margin-left:-28px !important;
    margin-right:-28px !important;
    box-sizing:border-box !important;
  }

  /* Preserve four equal, larger cards across the wider row. */
  body.home .tiles{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }

  body.home .tile{
    box-sizing:border-box !important;
  }

  /* The first card frame begins 28px left of the editorial axis.
     Its content is inset by the same 28px, so "Beobachten." lands
     exactly on the same vertical line as "Vier Arten..." and
     "Von der Vorstellung...". */
  body.home .tile:first-child{
    padding-left:28px !important;
  }
}

/* v66 — Rome backgrounds at full opacity.
   No pale/transparency overlay. Tile transparency remains unchanged. */
body.home::before,
body.home::after{
  background-image:url("rome-desktop.jpg") !important;
}

@media(max-width:600px){
  body.home::before,
  body.home::after{
    background-image:url("rome-full.jpg") !important;
  }
}

/* v67 — new supplied Rome originals, unaltered/full strength.
   Preserve existing original + vertical mirror geometry. */
body.home::before,
body.home::after{
  background-image:url("rome-desktop.jpg") !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  background-color:transparent !important;
  background-blend-mode:normal !important;
}

@media(max-width:600px){
  body.home::before,
  body.home::after{
    background-image:url("rome-full.jpg") !important;
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
    background-color:transparent !important;
    background-blend-mode:normal !important;
  }
}

/* v68 — sans serif in dark header/footer bars; desktop Rome >=1600px wide */
.site-header,
.site-header *,
.site-footer,
.site-footer *,
header,
header *,
footer,
footer *{
  font-family:Arial, Helvetica, sans-serif !important;
}

/* Desktop Rome: minimum 1600px wide, then grows with viewport.
   Keep the existing original + mirrored continuation. */
@media(min-width:601px){
  body.home::before,
  body.home::after{
    background-size:max(1600px, 100vw) auto !important;
    background-position:top center !important;
  }
}

/* v69 — homepage editorial text: white with black outline + shadow.
   Tiles remain black. Dark header/footer bars remain clean white sans-serif. */
body.home main,
body.home .home-hero,
body.home .home-main{
  color:#fff !important;
}

body.home main *:not(.tile):not(.tile *),
body.home .home-hero *{
  color:#fff !important;
  -webkit-text-stroke:0.6px #000;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    1px 2px 4px rgba(0,0,0,.80);
}

/* Cards explicitly keep their existing black typography. */
body.home .tile,
body.home .tile *{
  color:#000 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Header and footer: white sans-serif, but no outline/shadow effect. */
body.home header,
body.home header *,
body.home footer,
body.home footer *,
body.home .site-header,
body.home .site-header *,
body.home .site-footer,
body.home .site-footer *{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* v70 — replace black homepage text outline with a light warm bronze.
   Keep the existing dark shadow for readability. */
body.home main *:not(.tile):not(.tile *),
body.home .home-hero *{
  -webkit-text-stroke:0.6px #c9a56a !important;
}

/* Tiles and dark bars remain without an outline. */
body.home .tile,
body.home .tile *,
body.home header,
body.home header *,
body.home footer,
body.home footer *,
body.home .site-header,
body.home .site-header *,
body.home .site-footer,
body.home .site-footer *{
  -webkit-text-stroke:0 !important;
}

/* v71 — homepage typography + iPhone Rome behavior */

/* "We make ideas..." / homepage hero summary: +18% */
body.home .hero-summary{
  font-size:118% !important;
}

/* "From imagination to reality": +10% */
body.home .manifesto h2{
  font-size:110% !important;
}

/* First manifesto paragraph ("Since humans..."): +18% */
body.home .manifesto p:first-of-type{
  font-size:118% !important;
}

/* iPhone/mobile only */
@media(max-width:600px){

  /* "Four ways..." / "Vier Arten..." 14% smaller than its current mobile size */
  body.home .lead{
    font-size:24.08px !important; /* 28px × .86 */
  }

  /* Uploaded portrait Rome image fills the complete viewport width.
     Original first, its vertically mirrored continuation immediately below.
     Preserve the portrait image's natural 896:1200 aspect ratio. */
  body.home::before,
  body.home::after{
    left:0 !important;
    right:auto !important;
    width:100vw !important;
    height:calc(100vw * 1200 / 896) !important;
    background-image:url("rome-full.jpg") !important;
    background-size:100vw calc(100vw * 1200 / 896) !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
    background-color:transparent !important;
    background-blend-mode:normal !important;
  }

  body.home::before{
    top:0 !important;
    transform:none !important;
  }

  body.home::after{
    top:calc(100vw * 1200 / 896) !important;
    transform:scaleY(-1) !important;
    transform-origin:center center !important;
  }
}

/* v72 — desktop Rome seam fix.
   The pseudo-element height now follows the actual scaled image aspect ratio,
   so the mirrored copy begins exactly at the original image's bottom edge. */
@media(min-width:601px){
  body.home::before,
  body.home::after{
    width:100vw !important;
    left:0 !important;
    right:auto !important;
    height:calc(max(1600px, 100vw) * 768 / 1376) !important;
    background-image:url("rome-desktop.jpg") !important;
    background-size:max(1600px, 100vw) auto !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
  }

  body.home::before{
    top:0 !important;
    transform:none !important;
  }

  body.home::after{
    top:calc(max(1600px, 100vw) * 768 / 1376) !important;
    transform:scaleY(-1) !important;
    transform-origin:center center !important;
  }
}

/* v73 — desktop/web typography only.
   Mobile <=600px remains exactly as v72. */
@media(min-width:601px){

  /* "We make ideas visible, audible and shareable..." — 18% larger
     relative to its v72 desktop size. */
  body.home .hero-summary{
    font-size:139.24% !important; /* 118% × 1.18 */
  }

  /* Entire manifesto block — heading and all paragraphs — 20% larger
     relative to their v72 desktop sizes. */
  body.home .manifesto{
    font-size:120% !important;
  }

  /* v72 already made the heading 110% and first paragraph 118%;
     neutralize those nested multipliers so the whole manifesto grows
     uniformly by exactly 20% from its normal desktop typography. */
  body.home .manifesto h2{
    font-size:1em !important;
  }

  body.home .manifesto p:first-of-type{
    font-size:1em !important;
  }
}

/* v74 — homepage typography/alignment */

/* 1. CREATIVE RESEARCH... in sans serif; ALEXANDER FORSE remains serif. */
body.home .hero-subtitle{
  font-family:Arial, Helvetica, sans-serif !important;
}

/* 2. Center the Four ways... / Vier Arten... block. */
body.home .lead{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* 3. Manifesto heading + every paragraph exactly the same font size
      as the Four ways... block. */
@media(min-width:601px){
  body.home .manifesto,
  body.home .manifesto h2,
  body.home .manifesto p{
    font-size:32px !important;
  }
}

@media(max-width:600px){
  body.home .manifesto,
  body.home .manifesto h2,
  body.home .manifesto p{
    font-size:24.08px !important;
  }
}

/* v75 — center the complete homepage hero text block */
body.home .hero-content,
body.home .hero-name,
body.home .hero-subtitle,
body.home .hero-summary{
  text-align:center !important;
}

body.home .hero-content{
  align-items:center !important;
}

body.home .hero-name,
body.home .hero-subtitle,
body.home .hero-summary{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* v76 — fifth Evolution tile */
body.home .tile-evolution{
  grid-column:1 / -1 !important;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
body.home .tile-evolution h2{
  max-width:100%;
}
@media(max-width:600px){
  body.home .tile-evolution{
    grid-column:1 / -1 !important; /* two mobile tile columns */
    min-height:135px;
  }
}

/* v77 — iPhone/mobile only */
@media(max-width:600px){

  /* Rome 1: normal */
  body.home::before{
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:calc(100vw * 1200 / 896) !important;
    background:url("rome-full.jpg") top center / 100vw calc(100vw * 1200 / 896) no-repeat !important;
    transform:none !important;
  }

  /* Rome 2: vertically mirrored, immediately after Rome 1 */
  body.home::after{
    top:calc(100vw * 1200 / 896) !important;
    left:0 !important;
    width:100vw !important;
    height:calc(100vw * 1200 / 896) !important;
    background:url("rome-full.jpg") top center / 100vw calc(100vw * 1200 / 896) no-repeat !important;
    transform:scaleY(-1) !important;
    transform-origin:center center !important;
  }

  /* Rome 3: normal, immediately after Rome 2 */
  body.home{
    background-image:url("rome-full.jpg") !important;
    background-repeat:no-repeat !important;
    background-size:100vw calc(100vw * 1200 / 896) !important;
    background-position:center calc(2 * 100vw * 1200 / 896) !important;
  }

  /* ALEXANDER FORSE +15% */
  body.home .hero-name{
    font-size:132.25% !important;
  }

  /* CREATIVE RESEARCH... cleaner white, without bronze outline */
  body.home .hero-subtitle{
    color:#fff !important;
    -webkit-text-stroke:0 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.95),1px 2px 4px rgba(0,0,0,.80) !important;
  }

  /* We make... / Wir machen... +15% */
  body.home .hero-summary{
    font-size:135.7% !important;
  }

  /* Four ways... / Vier Arten... another 10% smaller */
  body.home .lead{
    font-size:21.672px !important;
  }
}

/* v78 — evolution page: supplied image only below the blue header/pagehead */
body.evolution-page .story{
  position:relative !important;
  z-index:0 !important;
  color:#fff !important;
  background:transparent !important;
}
body.evolution-page .story::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:100vw !important;
  transform:translateX(-50%) !important;
  background:url("evolution-background.jpg") top center / cover no-repeat !important;
}
body.evolution-page .story,
body.evolution-page .story .prose,
body.evolution-page .story .prose *{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95),1px 2px 4px rgba(0,0,0,.85) !important;
}

/* v79 — desktop/web homepage layout only */
@media(min-width:601px){

  /* Move the complete hero flow 15px lower. */
  body.home .hero-content{
    padding-top:39px !important; /* v57/v78 baseline 24px + 15px */
  }

  /* We make ideas... 20% larger than v78/v73 desktop value. */
  body.home .hero-summary{
    font-size:167.088% !important; /* 139.24% × 1.20 */
  }

  /* About 30px between hero summary and Four ways... */
  body.home .home-main{
    padding-top:30px !important;
  }

  /* At a 1000px-high desktop viewport, place the tile group in the
     lower third while keeping Four ways directly above it. */
  body.home .lead{
    margin-bottom:24px !important;
  }

  body.home .tiles{
    margin-top:0 !important;
  }

  @media(min-height:850px){
    body.home .home-main{
      padding-top:clamp(30px, calc((100vh - 850px) * 0.72 + 30px), 138px) !important;
    }
  }
}

/* v80 — desktop homepage: move first content block 50px lower */
@media(min-width:601px){
  body.home .hero-content{
    padding-top:89px !important; /* v79 39px + 50px */
  }
}

/* v81 — corrected desktop positioning.
   The hero has a fixed 225px height in the older CSS, so padding alone
   did not move the following layout. Increase the actual hero box and
   explicitly move its visible content. Mobile remains untouched. */
@media(min-width:601px){
  body.home .home-hero{
    height:275px !important;
    min-height:275px !important;
    max-height:275px !important;
  }

  body.home .home-hero .hero-content{
    padding-top:39px !important;
    transform:translateY(50px) !important;
  }
}

/* v82 — desktop/web typography only */
@media(min-width:601px){

  /* Homepage tiles: small descriptive text = 200%.
     Tile headings remain unchanged. */
  body.home .tile p,
  body.home .tile .tile-text,
  body.home .tile .tile-description{
    font-size:200% !important;
  }

  /* Section/evolution pages: article/body copy +15%. */
  body.subpage .story .prose,
  body.subpage .story .prose p,
  body.evolution-page .story .prose,
  body.evolution-page .story .prose p{
    font-size:115% !important;
  }

  /* Traditional initial/drop cap +15%. */
  body.subpage .story .prose > p:first-of-type::first-letter,
  body.evolution-page .story .prose > p:first-of-type::first-letter{
    font-size:115% !important;
  }
}

/* v83 — desktop homepage tile typography only */
@media(min-width:601px){
  /* Description text: 10% smaller than v82 (200% -> 180%). */
  body.home .tile p,
  body.home .tile .tile-text,
  body.home .tile .tile-description{
    font-size:180% !important;
  }

  /* Tile headings: +10%. */
  body.home .tile h2,
  body.home .tile h3,
  body.home .tile .tile-title{
    font-size:110% !important;
  }
}

/* v84 — corrected desktop tile typography using explicit px values.
   Existing desktop heading = 32.3px -> +10% = 35.53px.
   v82 description = 26px (200% of 13px) -> -10% = 23.4px. */
@media(min-width:601px){
  body.home .tile h2{
    font-size:35.53px !important;
    line-height:1.05 !important;
  }
  body.home .tile p{
    font-size:23.4px !important;
    line-height:1.4 !important;
  }
}

/* v85 — desktop Rome: robust seamless original + vertical mirror.
   Use two real image panels instead of two independently sized pseudo backgrounds. */
.rome-desktop-stack{display:none;}

@media(min-width:601px){
  body.home::before,
  body.home::after{
    display:none !important;
    content:none !important;
  }

  body.home{
    position:relative !important;
    isolation:isolate !important;
    background:none !important;
  }

  body.home .rome-desktop-stack{
    display:block !important;
    position:absolute !important;
    z-index:-2 !important;
    top:0 !important;
    left:50% !important;
    width:max(1600px,100vw) !important;
    transform:translateX(-50%) !important;
    pointer-events:none !important;
    overflow:hidden !important;
    line-height:0 !important;
  }

  body.home .rome-desktop-panel{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  body.home .rome-desktop-panel-mirror{
    transform:scaleY(-1) !important;
    transform-origin:center center !important;
    margin-top:-1px !important; /* one-pixel overlap prevents subpixel seams */
  }
}

@media(max-width:600px){
  body.home .rome-desktop-stack{
    display:none !important;
  }
}

/* v86 — iPhone/mobile homepage spacing only */
@media(max-width:600px){

  /* Move Alexander Forse / Creative... / summary block down by about one line. */
  body.home .hero-content{
    transform:translateY(28px) !important;
  }

  /* Recover one line of space before Four ways..., so the lower content
     does not get pushed down by the hero movement. */
  body.home .home-main{
    padding-top:2px !important;
  }

  body.home .hero-summary{
    margin-bottom:0 !important;
  }

  body.home .lead{
    margin-top:0 !important;
  }
}

/* v87 — desktop/web homepage only. Rome assets untouched. */
@media(min-width:601px){

  /* Summary: +10% from v86/v79 desktop value 167.088%. */
  body.home .hero-summary{
    font-size:183.7968% !important;
  }

  /* Entire tile grid/cards: 15% smaller, centered in the same area. */
  body.home .tiles{
    width:calc((100% + 56px) * .85) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:calc(24px * .85) !important;
  }

  body.home .tile{
    min-height:calc(220px * .85) !important;
    padding:calc(28px * .85) !important;
  }

  /* All tile typography: 15% smaller than v86. */
  body.home .tile h2{
    font-size:30.2005px !important; /* 35.53 × .85 */
  }
  body.home .tile p{
    font-size:19.89px !important; /* 23.4 × .85 */
  }
  body.home .tile .enter,
  body.home .tile .tile-enter,
  body.home .tile a{
    font-size:85% !important;
  }

  body.home .tile-evolution{
    min-height:127.5px !important; /* 150 × .85 */
  }
}

/* v88 — homepage only, desktop + mobile:
   remove bronze/gold edging from white text; retain dark shadow.
   Tiles stay untouched. */
body.home .hero-name,
body.home .hero-subtitle,
body.home .hero-summary,
body.home .lead{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    1px 2px 4px rgba(0,0,0,.82) !important;
}

/* Ensure tile typography keeps its existing black treatment. */
body.home .tile,
body.home .tile h2,
body.home .tile p,
body.home .tile a{
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
}

/* v89 — force Four ways / Vier Arten to pure white on homepage, desktop + mobile */
html body.home .lead,
html body.home .lead[data-en],
html body.home .lead[data-de]{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    1px 2px 4px rgba(0,0,0,.82) !important;
}

/* v91 — hero summary and lead: same size, each constrained to two lines */
body.home .hero-summary,
body.home .lead{
  font-size:32px !important;
  line-height:1.28 !important;
  width:min(100%, 980px) !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:balance;
}

@media(max-width:600px){
  body.home .hero-summary,
  body.home .lead{
    font-size:21.672px !important;
    line-height:1.28 !important;
    width:100% !important;
    max-width:100% !important;
    text-wrap:balance;
  }
}