/* EN Kalatu — the shared component sheet.
 *
 * Every rule here is a direct port of one component in the Claude Design system's
 * components/ directory. The source styles inline and tracks hover with React
 * state; this keeps the declarations exactly and moves them under a class so hover
 * is :hover and the markup stays clean. Where the source had a prop that changed a
 * declaration (variant, side, full, depth), that becomes a modifier class.
 *
 * Sections follow the source grouping: core, navigation, blog, optin, sections,
 * widgets. A skin may override any of it; nothing here is !important.
 */

/* --------------------------------------------------------------- fallbacks --
 * Components reference custom properties that only the per-design skins define
 * (--nav-veil, --profile-size, --btn-texture and friends). An undefined custom
 * property inside var() with no fallback is invalid at computed-value time: the
 * declaration does not fall back to the initial value, it makes the property
 * inherit, which turns a missing --radius-btn into an inherited radius and a
 * missing --hero-image into a broken hero. Declaring neutral defaults here means a
 * design that never sets one renders as though the rule were absent, which is what
 * the source's `undefined` prop did.
 */
:root{
  --nav-veil:none;--nav-shadow:none;--nav-text-shadow:none;
  --profile-size:150px;--accent-frame:var(--en-white);--profile-shadow:none;
  --surface-footer-content:var(--en-navy-800);--text-footer-content:var(--en-navy-100);
  --radius-avatar:0;--radius-btn:0;--border-btn:transparent;--btn-texture:none;
  --hero-image:none;--action-gradient:none;--action-inner-glow:none;
  --border-rule:var(--border-hairline);--text-muted:var(--text-meta);--search-inset:none;
  --fs-lede:var(--fs-hero-text);--lh-lede:var(--lh-body);--ls-meta:var(--tracking-meta);
  --lh-quote:var(--lh-loose);--font-meta:var(--font-body);--font-quote:var(--font-body);
  --weight-body:var(--weight-regular);--weight-display:var(--weight-bold);
  --weight-meta:var(--weight-bold);--weight-quote:var(--weight-regular);
  --ls-display:normal;--lh-display:var(--lh-tight);--tt-display:none;
}

/* -------------------------------------------------------------- foundation -- */

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

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--weight-body);
  line-height:var(--lh-body);
  /* Every design in this library is light. Without this the UA `field` keyword
     resolves near-black under a dark system theme and the 2014 habit of not
     declaring a field background drops form text to about 1.2:1. */
  color-scheme:light;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto}
a{color:var(--text-link)}
h1,h2,h3,h4,h5,h6{color:var(--text-heading);font-family:var(--font-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:var(--tt-display);font-weight:var(--weight-display)}

/* The originals were fixed-width and pre-responsive: a 1076px container splitting
   into 776 + 300 with a 30px gutter. Keeping the measurement and adding only a
   max-width preserves the design on desktop and stops it scrolling sideways on a
   phone, which is the one change every one of these themes needs. */
.en-wrap{width:var(--layout-width);max-width:100%;margin:0 auto;padding:0 15px}

/* Positioned so a design whose chrome is transparent and overlaid — purpose, and
   anything else that floats a navbar over its hero — anchors to the site rather
   than to the viewport, where it would scroll away from the band it belongs to. */
.en-site{position:relative}

/* The site title is a link, so without this it takes the body link colour and the
   default underline — which on a design that sets the title over a photograph
   renders as a green underlined heading rather than the wordmark. Inheriting from
   the heading is right for every design: each one styles .en-site-title itself. */
.en-site-title a,.en-site-title a:hover{color:inherit;text-decoration:none}
.en-site-tagline a{color:inherit;text-decoration:none}

.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.en-skip-link{position:absolute;left:-9999px;top:0;z-index:999}
.en-skip-link:focus{left:0;background:var(--surface-card);color:var(--text-heading);padding:10px 15px}

/* The originals have no focus rings at all. Adding one is a deliberate deviation:
   a keyboard user cannot use these designs without it. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* --------------------------------------------------------------- core/Button */

.en-btn{
  display:inline-block;padding:15px;border:none;text-align:center;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-tight);
  text-decoration:none;box-sizing:border-box;
}
.en-btn--primary{background:var(--action-bg);color:var(--action-fg)}
.en-btn--primary:hover{background:var(--action-bg-hover)}
.en-btn--brand{background:var(--brand-block);color:var(--action-fg)}
.en-btn--brand:hover{background:var(--action-bg)}
.en-btn--accent{background:var(--accent);color:var(--action-fg)}
.en-btn--accent:hover{background:var(--action-bg-hover)}
.en-btn--plain{background:transparent;color:var(--text-link);padding:0;text-decoration:none}
.en-btn--plain:hover{text-decoration:underline}
.en-btn--full{width:100%;display:block}
.en-btn[disabled],.en-btn--disabled{opacity:.5;cursor:default}

/* ------------------------------------------------------------ core/ReadMore */
/* The guillemet is part of the component, not the copy — .read-more in the
   source's common.less appends it with :after. */
.en-readmore{font-size:var(--fs-meta);color:var(--text-link);text-decoration:none}
.en-readmore:hover{text-decoration:underline}
.en-readmore::after{content:' \00bb'}

/* ------------------------------------------------------------ core/LoadMore */
.en-loadmore{clear:both;display:block;text-align:right;height:26px;margin:0}
.en-loadmore a{color:var(--en-ink-900);margin-right:20px;text-decoration:none;font-family:var(--font-body);font-size:var(--fs-body)}

/* ---------------------------------------------------------- core/Pagination */
.en-pagination{display:flex;justify-content:flex-end;gap:4px;list-style:none;padding:10px 0;margin:0;font-family:var(--font-body)}
.en-pagination .page-numbers{
  display:inline-block;padding:5px 10px;background:var(--surface-card);color:var(--text-body);
  border-radius:var(--radius-note);text-decoration:none;font-size:var(--fs-body);
}
.en-pagination .page-numbers.current{background:var(--accent);color:#fff}

/* ----------------------------------------------------------- core/TextInput */
.en-field{
  box-sizing:border-box;padding:10px;font-size:var(--fs-body);background:var(--surface-card);
  font-family:var(--font-body);color:var(--en-ink-400);margin:0;
  border:var(--border-input-width) solid var(--border-input);width:100%;color-scheme:light;
}
textarea.en-field{height:300px;resize:none}

/* ------------------------------------------------------- navigation/NavBar */

.en-navbar{background:var(--surface-nav);width:100%;height:var(--nav-height);position:relative;left:0;top:0;z-index:var(--z-nav);text-align:center}
/* Must pin to the viewport. position:fixed alone leaves top:auto (static
   position), which under a padded .en-site floats the bar off the top and
   leaves a gap above the hero. */
.en-navbar--fixed{position:fixed;top:0;left:0;right:0;width:100%}
body.admin-bar .en-navbar--fixed{top:32px}
.en-navbar__inner{width:var(--layout-width);max-width:100%;margin:0 auto;position:relative}
.en-navbar__brand{position:absolute;left:0;top:0;z-index:10;text-align:left}
.en-navbar__brand a{
  display:block;text-decoration:none;padding:15px 30px;color:var(--text-on-dark);
  font-family:var(--font-display);font-size:var(--fs-logo);text-transform:uppercase;
  line-height:var(--lh-logo);background:var(--brand-block);
}
.en-navbar__brand--logo a{padding:10px;background:transparent}
.en-navbar__brand img{max-width:460px;max-height:80px;vertical-align:baseline}
.en-navbar__menu{display:flex;justify-content:flex-end;gap:48px;list-style:none;text-align:right;padding:35px 0;margin:0;box-sizing:border-box}
.en-navbar__menu li{position:relative}
.en-navbar__menu a{font-size:var(--fs-nav);color:var(--text-nav);text-decoration:none;font-family:var(--font-body)}
.en-navbar__menu .current-menu-item>a,.en-navbar__menu a:hover{color:var(--text-link)}
/* The caret is not an icon — the source injects the Unicode glyph via :after,
   with the nested form for submenus. No SVG exists anywhere in the archive. */
.en-navbar__menu .menu-item-has-children>a::after{content:'\25bc';margin-left:3px;font-size:var(--fs-caret);position:relative;top:-2px;display:inline-block}
.en-navbar__menu .sub-menu .menu-item-has-children>a::after{content:'\25b6';font-size:var(--fs-caret-sub)}
.en-navbar__menu .sub-menu{
  display:none;position:absolute;left:0;top:100%;z-index:var(--z-submenu);
  background:var(--surface-nav);list-style:none;margin:0;padding:0;min-width:200px;text-align:left;
}
.en-navbar__menu li:hover>.sub-menu,.en-navbar__menu li:focus-within>.sub-menu{display:block}
.en-navbar__menu .sub-menu a{display:block;padding:10px 15px}
.en-navbar__menu .sub-menu a:hover{background:#ddd}

.en-nav-toggle{display:none;background:none;border:0;padding:12px 15px;cursor:pointer;font-size:20px;color:var(--text-nav)}

/* -------------------------------------------------- navigation/BlogMasthead */
/* The ENV2 chassis: a chrome bar with an inset veil and text shadow over a banner
   with the profile card breaking out of its bottom-left corner. */
.en-masthead__bar{background:var(--surface-nav);background-image:var(--nav-veil);box-shadow:var(--nav-shadow);border:1px solid rgba(0,0,0,.7);min-height:var(--nav-height)}
.en-masthead__inner{width:var(--layout-width);max-width:100%;margin:0 auto;display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.en-masthead__brand{margin:0;align-self:center;padding:0 10px}
.en-masthead__brand a{color:#fff;text-decoration:none;font-family:var(--font-display);font-size:28px;text-shadow:var(--nav-text-shadow);display:block}
.en-masthead__brand strong{font-weight:700}
.en-masthead__brand span{font-weight:400}
.en-masthead__brand img{max-height:70px;display:block}
.en-masthead__menu{display:flex;list-style:none;margin:0;padding:0}
.en-masthead__menu a{
  color:#fff;display:inline-block;text-decoration:none;
  border-right:1px solid rgba(0,0,0,.3);border-left:1px solid rgba(255,255,255,.15);
  border-top:1px solid rgba(255,255,255,.15);padding:24px 15px 20px;font-size:14px;
  text-shadow:var(--nav-text-shadow);text-transform:uppercase;
}
.en-masthead__menu .current-menu-item>a,.en-masthead__menu a:hover{color:var(--accent-hi)}
.en-masthead__banner{width:var(--layout-width);max-width:100%;margin:0 auto;position:relative}
.en-masthead__banner-inner{max-width:1024px;min-height:100px;max-height:300px;overflow:hidden;margin:0 auto}
.en-masthead__banner-inner img{width:100%;display:block}
.en-masthead__profile{
  position:absolute;bottom:-3%;left:2.1%;width:var(--profile-size);height:var(--profile-size);
  background:#fff;border:5px solid var(--accent-frame);box-shadow:var(--profile-shadow);
  overflow:hidden;box-sizing:border-box;
}
.en-masthead__profile img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------- navigation/Footer */
.en-footer{background:var(--surface-footer);color:var(--text-on-footer);position:relative;padding:var(--footer-pad-y) 0;font-family:var(--font-body)}
.en-footer__inner{width:var(--layout-width);max-width:100%;margin:0 auto;position:relative;min-height:34px}
.en-footer__copy{position:absolute;font-size:var(--fs-footer);top:4px;left:0;margin:0;padding:0}
.en-footer__menu{display:flex;justify-content:center;gap:10px;list-style:none;font-size:var(--fs-footer);padding:4px 0;margin:0}
.en-footer__menu li{line-height:var(--lh-body)}
.en-footer__menu a{color:var(--text-on-footer);text-decoration:none}
.en-footer__social{position:absolute;top:-6px;right:0}
/* Its own row beneath .en-footer__inner, because that container positions the
   copyright and the social links absolutely and anything in normal flow inside it
   ends up underneath them. */
.en-footer__colophon{width:var(--layout-width);max-width:100%;margin:0 auto;padding-top:14px}
.en-colophon,.en-disclaimer{font-size:var(--fs-footer);margin:0}
.en-disclaimer{opacity:.85;margin-top:8px}

/* ----------------------------------------------- navigation/FooterColumns */
.en-footercols{background-color:var(--surface-footer-content);background-repeat:no-repeat;background-position:center;background-size:cover;color:var(--text-footer-content);font-family:var(--font-body)}
.en-footercols__inner{width:var(--layout-width);max-width:100%;margin:0 auto;padding:30px 0;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.en-footercols__col{width:220px;font-size:13px;line-height:var(--lh-body)}
.en-footercols__col--about{font-size:var(--fs-meta)}
.en-footercols__col--follow{margin-left:auto}
.en-footercols h3{font-size:18px;margin:0 0 10px}
.en-footercols__col img{max-width:60px;max-height:60px;border-radius:var(--radius-avatar);display:block;margin-bottom:8px}
.en-footercols ul{list-style:none;margin:0;padding:0}
.en-footercols li{padding:4px 0}
.en-footercols li a{color:var(--text-footer-content);text-decoration:none;display:flex;align-items:center;gap:5px}

/* -------------------------------------------------- navigation/SocialLinks */
.en-social{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.en-social a{display:block;width:34px;height:34px;text-align:center;background:var(--en-navy-300)}
.en-social img{margin-top:7px}

/* ----------------------------------------------------------- blog/PostCard */
.en-postcard{
  background:var(--surface-card);box-shadow:var(--shadow-card);height:var(--post-card-height);
  position:relative;z-index:var(--z-card);overflow:hidden;font-family:var(--font-body);
  display:flex;flex-direction:column;
}
.en-postcard__image{width:100%;display:block;flex:0 0 auto}
.en-postcard__body{padding:10px 20px 20px;box-sizing:border-box;overflow:hidden;flex:1 1 auto;min-height:0}
.en-postcard__title{font-size:var(--fs-post-title);padding-bottom:12px;line-height:var(--lh-tight);margin:0}
.en-postcard__title a{color:var(--text-heading);text-decoration:none}
.en-postcard__excerpt{line-height:var(--lh-body);padding:8px 0;margin:0;color:var(--text-body)}
.en-postcard__meta{
  padding:10px 20px 20px;font-size:var(--fs-meta);font-weight:var(--weight-meta);
  color:var(--text-meta);letter-spacing:var(--ls-meta);background:var(--surface-card);
  text-transform:uppercase;flex:0 0 auto;font-family:var(--font-meta);
}

/* ----------------------------------------------------------- blog/PostMeta */
.en-postmeta{
  display:flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-meta);font-weight:var(--weight-meta);
  color:var(--text-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;font-family:var(--font-meta);
}

/* -------------------------------------------------------- blog/ArticleCard */
.en-article-card{background:var(--surface-card);border:1px solid var(--border-hairline);margin-bottom:7%;padding:4% 3%;position:relative;font-family:var(--font-body);color:var(--text-body)}
.en-article-card__head{display:flex;gap:12px;align-items:flex-start}
.en-article-card__headings{flex:1;min-width:0}
.en-article-card__title{margin:0;font-size:22px;line-height:1.2}
.en-article-card__title a{color:var(--text-heading);text-decoration:none;overflow-wrap:break-word}
.en-article-card__title a:hover{color:var(--accent-alt)}
.en-article-card__byline{margin:0;color:var(--text-meta);font-size:14px;padding-top:4px}
.en-article-card__comments{text-align:right;flex:0 0 auto}
.en-article-card__comments img{display:block;margin-left:auto}
.en-article-card__comments p{margin:6.5px 0;text-align:right;font-size:14px}
.en-article-card__comments a{color:var(--text-link);text-decoration:none}
.en-article-card__body{border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);overflow:hidden;padding:4.5% 0;margin-top:15px}
.en-article-card__body figure{margin:0 0 4%;overflow:hidden;width:100%}
.en-article-card__body img{width:100%;display:block}
.en-article-card__body p{margin:0;line-height:1.6;overflow-wrap:break-word}
.en-article-card__foot{padding-top:30px;display:flex;justify-content:flex-end}
.en-article-card__cta{
  background:var(--action-bg) var(--btn-texture) repeat-x 0 0;border-radius:var(--radius-btn);
  border:1px solid var(--border-btn);color:var(--action-fg);font-size:14px;line-height:34px;
  height:36px;padding:0 15px;text-decoration:none;box-sizing:border-box;display:inline-block;
}

/* --------------------------------------------------------- blog/LatestPost */
/* The speech arrow: a 15x30 border triangle joining a coloured panel to the photo
   beside it, always pinned at top:43%. The one genuinely distinctive shape here. */
.en-latest{position:relative;min-height:var(--about-tile);font-family:var(--font-body)}
.en-latest__panel{width:var(--about-tile);background:var(--surface-feature);color:var(--text-on-dark);position:relative;z-index:3;padding:20px;box-sizing:border-box;min-height:var(--about-tile)}
.en-latest__title{font-size:var(--fs-post-title);margin:0;padding-bottom:12px;line-height:var(--lh-tight)}
.en-latest__title a{color:var(--text-on-dark);text-decoration:none}
.en-latest__panel p{line-height:var(--lh-body);margin:0;padding:8px 0}
.en-latest__panel .en-readmore{color:var(--text-on-dark)}
.en-latest__arrow{
  display:block;width:0;height:0;border-style:solid;
  border-width:var(--speech-arrow) 0 var(--speech-arrow) var(--speech-arrow-depth);
  border-color:transparent transparent transparent var(--surface-feature);
  position:absolute;top:43%;left:100%;z-index:10;
}
.en-latest--no-photo .en-latest__panel{width:100%}
.en-latest__photo{background-color:var(--surface-feature);background-position:right center;background-size:cover;background-repeat:no-repeat;position:absolute;top:0;left:var(--about-tile);bottom:0;right:0;z-index:2}

/* ------------------------------------------------------ blog/RelatedPosts */
.en-related{display:flex;gap:20px;flex-wrap:wrap}
.en-related>*{width:calc(50% - 10px)}
.en-related .en-postcard{height:420px}

/* ----------------------------------------------------------- blog/Comments */
.en-comments{background:var(--surface-card);box-shadow:var(--shadow-card);padding:35px 25px;font-family:var(--font-body);color:var(--text-body)}
.en-comments__title{font-size:var(--fs-h3);margin:0;padding:8px 0;color:var(--text-heading)}
.en-comments__list{display:flex;flex-direction:column;gap:20px;list-style:none;margin:20px 0;padding:0}
.en-comments__list .children{list-style:none;margin:20px 0 0;padding:0 0 0 30px;display:flex;flex-direction:column;gap:20px}
.en-comment{display:flex;gap:15px;border-top:1px solid var(--border-hairline);padding-top:20px}
.en-comment img.avatar{width:60px;height:60px;flex:0 0 auto}
.en-comment__meta{font-size:var(--fs-meta);font-weight:var(--weight-meta);letter-spacing:var(--ls-meta);color:var(--text-meta);text-transform:uppercase;font-family:var(--font-meta)}
.en-comment__body p{line-height:var(--lh-body);padding:8px 0;margin:0}
.en-comments form{display:flex;flex-direction:column;gap:12px}
.en-comments textarea{height:120px}
.en-comments .form-submit{margin:0}

/* --------------------------------------------------------- optin/OptinForm */
.en-optin{text-align:left;color:var(--text-on-dark);font-family:var(--font-body)}
/* The colour has to be declared on the heading itself, not inherited from .en-optin:
   the h1-h6 rule above sets --text-heading directly on the element, and a direct
   declaration beats an inherited one however specific the ancestor. Without this
   the hero headline renders in body ink on a dark photograph. */
.en-optin__headline{
  padding:0;margin:0;line-height:var(--lh-tight);color:var(--text-on-dark);
  font-family:var(--font-body);text-transform:none;letter-spacing:normal;
}
.en-optin__num{float:left;font-size:var(--fs-hero-num);color:var(--accent-hi);font-weight:var(--weight-bold);position:relative;top:-5px;padding-right:5px}
.en-optin__line1{font-size:var(--fs-hero-1)}
.en-optin__line2{font-size:var(--fs-hero-2)}
.en-optin__kicker{padding:12px 0;margin:0;font-size:var(--fs-hero-text);line-height:var(--lh-body)}
.en-optin__fields{display:flex;gap:12px;flex-direction:row;padding-top:12px}
.en-optin__fields--stacked{flex-direction:column}
.en-optin__fields input{box-sizing:border-box;padding:10px;font-size:var(--fs-body);background:var(--surface-card);font-family:var(--font-body);color:var(--en-ink-400);border:none;flex:1;min-width:0;color-scheme:light}
.en-optin__submit{display:block;width:100%;padding:15px;margin-top:12px;border:none;background:var(--action-bg);color:var(--action-fg);text-align:center;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-body)}
.en-optin__submit:hover{background:var(--action-bg-hover)}

/* ------------------------------------------------------ optin/SubscribeBand */
.en-subscribe{background-color:var(--surface-optin);background-position:center center;background-size:cover;background-repeat:no-repeat}
.en-subscribe__inner{width:var(--layout-width);max-width:100%;margin:0 auto;text-align:center;padding:var(--optin-pad-y) 15px;box-sizing:border-box}
.en-subscribe__title{color:var(--text-on-dark);padding:10px 0 15px;margin:0;font-size:var(--fs-subscribe);font-family:var(--font-body);line-height:var(--lh-tight)}
.en-subscribe__title span{color:var(--accent-alt)}
.en-subscribe__form{width:480px;max-width:100%;margin:0 auto}

/* -------------------------------------------------- sections/FeaturedTextBand */
.en-band{background-color:var(--surface-band);background-position:center center;background-size:cover;background-repeat:no-repeat;color:var(--text-on-dark);font-size:var(--fs-band-body);font-family:var(--font-body)}
.en-band__inner{width:var(--layout-width);max-width:100%;margin:0 auto;padding:var(--band-pad-y) 15px;box-sizing:border-box}
.en-band__title{font-size:var(--fs-band);font-weight:var(--weight-bold);padding:10px 0;margin:0;line-height:var(--lh-tight);text-transform:uppercase;color:var(--text-on-dark)}
.en-band__title span{color:var(--accent)}
.en-band__body{line-height:var(--lh-body)}

/* ------------------------------------------------------- sections/AboutBrick */
.en-brick{display:flex;width:var(--about-brick);max-width:100%;padding-bottom:15px}
.en-brick__photo{width:var(--about-tile);height:var(--about-tile);flex:0 0 auto;overflow:hidden;background-color:var(--en-navy-400);background-position:right center;background-size:cover;background-repeat:no-repeat}
.en-brick__text{
  width:var(--about-tile);height:var(--about-tile);flex:0 0 auto;box-sizing:border-box;
  background:var(--surface-card);box-shadow:var(--shadow-card);padding:20px;position:relative;
  font-family:var(--font-body);color:var(--text-body);line-height:var(--lh-body);overflow:hidden;
}
.en-brick__arrow{display:block;width:0;height:0;border-style:solid;position:absolute;top:43%;z-index:10}
.en-brick--left .en-brick__arrow{border-width:var(--speech-arrow) var(--speech-arrow-depth) var(--speech-arrow) 0;border-color:transparent var(--surface-card) transparent transparent;right:100%}
.en-brick--right .en-brick__arrow{border-width:var(--speech-arrow) 0 var(--speech-arrow) var(--speech-arrow-depth);border-color:transparent transparent transparent var(--surface-card);left:100%}

/* ------------------------------------------------------ sections/HeroProfile */
.en-hero{background-color:var(--surface-band);background-image:var(--hero-image);background-repeat:no-repeat;background-position:0 0;background-size:cover;padding-bottom:20px}
.en-hero__inner{width:var(--layout-width);max-width:100%;margin:0 auto;min-height:var(--hero-height);display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.en-hero__photo{width:285px;flex:0 0 auto;padding:75px 0;margin-left:5px}
.en-hero__photo img{width:100%;border-radius:var(--radius-avatar);display:block}
.en-hero__body{flex:1;color:#fff;line-height:var(--lh-tight);margin-right:5px;padding-top:95px;min-width:0}
.en-hero__kicker{font-size:36px;font-family:var(--font-body);font-weight:300;padding-bottom:30px;margin:0;color:#fff}
.en-hero__headline{font-size:30px;font-weight:700;padding-bottom:30px;margin:0;font-family:var(--font-body);color:#fff}
.en-hero__cta{
  display:block;width:386px;max-width:100%;padding:20px 0;color:var(--action-fg);
  font-family:var(--font-display);font-size:21px;font-weight:700;font-style:italic;
  text-decoration:underline;line-height:var(--lh-tight);background-image:var(--action-gradient);
  background-color:var(--action-bg);border-radius:var(--radius-note);
  box-shadow:var(--action-inner-glow);text-align:center;box-sizing:border-box;
}
.en-hero__follow{color:#fff;padding-top:30px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.en-hero__follow h3{font-size:18px;font-weight:bold;font-family:var(--font-accent);margin:0;color:#fff}

/* ------------------------------------------------------ sections/Testimonials */
/* The system's signature animation, and very nearly its only one: the active face
   lifts 10px and goes from grayscale to full colour over .3s. */
.en-testimonials{background:var(--surface-card);font-family:var(--font-body)}
.en-testimonials__inner{width:var(--layout-width);max-width:100%;margin:0 auto;text-align:center;padding:var(--section-pad-y) 0;overflow:hidden}
.en-testimonials__faces{width:var(--testimonial-photos);max-width:100%;margin:0 auto;padding-bottom:25px;position:relative}
.en-testimonials__faces ul{display:flex;justify-content:center;gap:20px;list-style:none;margin:0;padding:10px 0;height:100px;align-items:center}
.en-testimonials__faces li{cursor:pointer;position:relative;top:0;transition:all var(--transition-fast) var(--transition-ease)}
.en-testimonials__faces img{width:80px;height:80px;filter:var(--filter-grayscale);transition:all var(--transition-fast) var(--transition-ease)}
.en-testimonials__faces li.is-active{top:-10px}
.en-testimonials__faces li.is-active img{filter:none}
.en-testimonials__quote{width:var(--testimonial-track);max-width:100%;margin:0 auto;min-height:250px;font-size:var(--fs-testimonial)}
.en-testimonials__quote p{padding-bottom:20px;line-height:var(--lh-loose);margin:0;color:var(--text-body)}
.en-testimonials__author{font-family:var(--font-accent);font-weight:var(--weight-bold);padding-bottom:20px;color:var(--en-sky-300)}
.en-testimonials__note{font-size:var(--fs-meta);color:var(--text-meta);text-transform:uppercase;letter-spacing:var(--ls-meta)}

/* ------------------------------------------------------------------ widgets */
.en-widget{margin-bottom:20px}
.en-widget-title{font-size:var(--fs-post-title);margin:0 0 10px}

/* widgets/CategoriesWidget — grey chips with pill counts */
.en-catlist,.en-catlist ul{list-style:none;margin:0;padding:0;font-family:var(--font-body)}
.en-catlist li{display:block;font-size:var(--fs-widget-link);position:relative}
.en-catlist ul li{padding-left:10px}
.en-catlist a{text-decoration:none;display:block;padding:10px 0;color:var(--text-link)}
.en-catlist a:hover{text-decoration:underline}
.en-catlist .en-count{font-size:var(--fs-widget-count);background:var(--en-grey-200);color:var(--en-ink-700);padding:6px 10px;line-height:var(--lh-tight);border-radius:var(--radius-pill);position:absolute;top:5px;right:0;z-index:2}

/* widgets/SidebarBox + ArrowList — red title bars with arrow lists */
.en-sidebox{margin-bottom:20px}
.en-sidebox__title{background:var(--accent);color:#eee;font-family:var(--font-accent);font-size:var(--fs-body);font-weight:500;text-transform:uppercase;padding:10px 20px;line-height:var(--lh-tight)}
.en-arrowlist{list-style:none;margin:0;padding:0}
.en-arrowlist li{padding:0}
.en-arrowlist a{
  display:block;line-height:var(--lh-tight);padding:10px 20px 11px 35px;background-repeat:no-repeat;
  background-position:15px 14px;color:#333;font-family:var(--font-accent);font-size:15px;
  text-decoration:none;border-bottom:1px solid var(--border-rule);box-sizing:border-box;
}
.en-arrowlist a:hover{background-color:var(--surface-card);padding-right:15px;border-right:5px solid var(--accent)}

/* widgets/SidebarList + BlogSearch — the bordered white stack */
.en-sidelist{border:1px solid var(--border-hairline);background:var(--surface-card);list-style:none;margin:0 0 8.5%;padding:0;font-family:var(--font-body)}
.en-sidelist li{background:#fff;border-bottom:1px solid var(--border-hairline);display:block;padding:3.5% 7%}
.en-sidelist li:last-child{border-bottom:none}
.en-sidelist__title span{color:var(--text-muted);display:block;font-weight:bold}
.en-sidelist a{color:var(--text-muted);text-decoration:none}
.en-blogsearch{margin:0 0 8.5%}
.en-blogsearch input{background:#fff;border:1px solid var(--border-input);color:#4A4A4A;height:40px;box-shadow:var(--search-inset);padding:0 0 0 7%;width:100%;border-radius:0;line-height:40px;box-sizing:border-box;font-family:var(--font-body);font-size:14px;color-scheme:light}

/* widgets/SearchWidget — PNG submit set as the input background, label hidden */
.en-search{font-family:var(--font-body)}
.en-search__inner{position:relative;margin:12px 0}
.en-search__field{width:100%;padding:10px;font-size:var(--fs-body);background:var(--surface-inset);border:none;box-sizing:border-box;font-family:var(--font-body);color:var(--en-ink-400);color-scheme:light}
.en-search__submit{background:transparent no-repeat center;width:30px;height:41px;padding:0;border:none;position:absolute;right:6px;top:0;z-index:3;font-size:0;cursor:pointer}

/* widgets/TopSearchBar */
.en-topsearch{background:var(--surface-card);padding:15px 0}
.en-topsearch__inner{width:var(--layout-width);max-width:100%;margin:0 auto;display:flex;align-items:center;gap:15px;padding-left:5px;box-sizing:border-box}
.en-topsearch label{color:var(--accent);font-family:var(--font-accent);font-size:var(--fs-body);font-weight:500;text-transform:uppercase}
.en-topsearch form{display:flex}
.en-topsearch input[type=search],.en-topsearch input[type=text]{height:29px;width:245px;max-width:100%;background:var(--surface-inset);padding:0 10px;margin:0;border:none;box-sizing:border-box;font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-body);color-scheme:light}
.en-topsearch input[type=submit]{height:29px;width:32px;margin:0;border:none;cursor:pointer;font-size:0;background-color:var(--accent);background-repeat:no-repeat;background-position:center center}

/* widgets/TagCloud */
.en-tagcloud{display:flex;flex-wrap:wrap;gap:4px;padding-top:10px;font-family:var(--font-body)}
.en-tagcloud a{display:inline-block;padding:8px;background:var(--surface-chip);text-decoration:none;font-size:var(--fs-chip)!important;color:var(--en-ink-600)}
.en-tagcloud a:hover{background:var(--en-sky-400);color:var(--text-on-dark)}

/* widgets/SidebarBanner */
.en-banner{padding-bottom:10px}
.en-banner a{display:block}
.en-banner img{max-width:100%;display:block}
.en-banner__empty{background:var(--surface-inset);color:var(--text-meta);padding:20px;text-align:center;font-family:var(--font-body);font-size:var(--fs-body)}
/* Dual-frame hover swap (member uploaded default + hover images) */
.en-banner--hover-swap a{position:relative;display:block;line-height:0}
.en-banner--hover-swap .en-banner__hover{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}
.en-banner--hover-swap:hover .en-banner__hover,
.en-banner--hover-swap a:focus .en-banner__hover{opacity:1}
.en-banner--hover-swap img{width:100%;height:auto;display:block}

/* ------------------------------------------------------------------ layouts */

.en-main{padding:var(--section-pad-y) 0}
.en-columns{display:flex;gap:var(--layout-gutter);align-items:flex-start}
.en-content{flex:1 1 var(--layout-main);min-width:0}
.en-sidebar{width:var(--layout-sidebar);flex:0 0 auto}
.en-no-sidebar .en-content{flex:1 1 100%}

.en-stream{display:flex;flex-direction:column;gap:var(--layout-gutter)}
.en-stream--cards-2,.en-stream--cards-3{display:grid;gap:var(--layout-gutter)}
.en-stream--cards-2{grid-template-columns:repeat(2,1fr)}
.en-stream--cards-3{grid-template-columns:repeat(3,1fr)}
.en-stream--rows .en-row{display:flex;gap:20px;align-items:flex-start;background:var(--surface-card);box-shadow:var(--shadow-card)}
.en-stream--rows .en-row__thumb{width:271px;flex:0 0 auto}
.en-stream--rows .en-row__body{padding:20px;min-width:0}

.en-entry{background:var(--surface-card);box-shadow:var(--shadow-card);padding:35px 25px}
.en-entry__title{margin:0 0 10px}
.en-entry__content{line-height:var(--lh-body)}
.en-entry__content img{height:auto}
.en-entry__thumb{margin:0 0 20px}
.en-entry__thumb img{width:100%;display:block}

.en-page-title{margin:0 0 var(--sp-11)}
.en-empty{background:var(--surface-card);box-shadow:var(--shadow-card);padding:35px 25px}

/* ------------------------------------------------------------ home screen -- */
/* The composed landing page each kit's Home renders. Sections are declared per
   design in design.json and rendered by inc/home.php. */

/* The composed home is a sequence of full-bleed bands, so <main> must not add the
   section padding it gives an ordinary blog page — that renders as a dead strip
   between the nav and the hero. */
.en-home .en-main{padding:0}

/* The opt-in fields come from en-network when that plugin is present, so they
   arrive as plain inputs with none of the design on them. Styling them by element
   inside the opt-in means the real subscribe form picks up each design's own
   treatment instead of looking like a default form dropped onto a hero. */
.en-optin input[type="text"],.en-optin input[type="email"],.en-optin input:not([type]){
  box-sizing:border-box;padding:10px;font-size:var(--fs-body);background:var(--surface-card);
  font-family:var(--font-body);color:var(--en-ink-400);border:none;
  flex:1 1 auto;min-width:0;width:100%;color-scheme:light;
}
.en-optin input[type="submit"],.en-optin button[type="submit"]{
  display:block;width:100%;padding:15px;margin-top:12px;border:none;
  background:var(--action-bg);color:var(--action-fg);text-align:center;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-body);
}
.en-optin input[type="submit"]:hover,.en-optin button[type="submit"]:hover{background:var(--action-bg-hover)}
.en-optin form{display:block;padding-top:12px}
.en-optin form p{margin:0 0 12px}

.en-home-hero{
  background-color:var(--hero-fallback,var(--surface-band));
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
.en-home-hero__inner{
  width:var(--layout-width);max-width:100%;margin:0 auto;
  /* --nav-offset is 0 on designs with no fixed bar, and a hero with no
     vertical room reads as a cropped photograph rather than a hero. */
  padding:max(56px,var(--nav-offset,85px)) 15px;
  display:flex;gap:20px;align-items:flex-start;box-sizing:border-box;
}
/* The 5px mat around the still is the one use of transparency in the system. */
.en-home-hero__media{width:var(--hero-media);max-width:100%;padding:5px;background:var(--media-frame);box-sizing:border-box}
.en-home-hero__media img{width:100%;display:block}
.en-home-hero__form{width:var(--hero-form);max-width:100%;flex:1 1 auto;min-width:0}

/* The two-tone heading — white or ink plus accent — is the system's most repeated
   device, so it is one class rather than a per-section rule. */
.en-home-heading{
  font-size:var(--fs-h2);padding:0 0 24px;margin:0;color:var(--text-heading);
  line-height:var(--lh-tight);text-transform:uppercase;
}
.en-home-heading span{color:var(--accent)}

/* Band extras used by the Organic kits: an eyebrow above the title, a CTA under
   the body, and alternating photo side — the alternation is the page's rhythm. */
.en-band__eyebrow{
  font-size:var(--fs-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;
  margin:0 0 10px;opacity:.85;
}
.en-band__cta{margin:20px 0 0}
.en-band--flip .en-band__inner{margin-left:auto;margin-right:0;text-align:right}
.en-band--flip .en-band__cta{text-align:right}

.en-home-features{padding:var(--section-pad-y) 0;border-top:1px solid var(--border-hairline)}
.en-home-features__row{display:grid;grid-template-columns:repeat(var(--en-features,3),1fr);gap:var(--layout-gutter)}
.en-home-feature{text-align:center}
.en-home-feature__img{width:100%;display:block;margin-bottom:14px;aspect-ratio:16/10;object-fit:cover}
.en-home-feature__title{margin:0 0 8px;font-size:19px;color:var(--text-heading)}
.en-home-feature__text{margin:0 0 10px;line-height:var(--lh-body)}
@media (max-width:900px){.en-home-features__row{grid-template-columns:1fr}}

.en-home-about{padding:var(--section-pad-y) 0}
.en-home-about__row{display:flex;gap:16px;flex-wrap:wrap}

.en-home-posts{padding:var(--section-pad-y) 0 40px}
.en-home-posts__row{display:grid;gap:20px}
.en-home-posts__row.en-stream--cards-1{grid-template-columns:1fr}
.en-home-posts__more{text-align:right;padding-top:20px;margin:0}
.en-home-posts .en-postcard{height:420px}

@media (max-width:900px){
  .en-home-hero__inner{flex-wrap:wrap;padding-top:40px;padding-bottom:40px}
  .en-home-hero__media,.en-home-hero__form{width:100%}
}
@media (max-width:640px){
  .en-home-posts .en-postcard{height:auto}
}

/* --------------------------------------------------------------- capture -- */
/* Shared structure across every kit's capture page: eyebrow, headline, sub, gated
   video still, two-field optin, a what-this-is/is-not block, disclaimer colophon.
   No countdown timers — a timer that resets on reload is worse than none. */
.en-capture{background:var(--surface-band);color:var(--text-on-dark);min-height:100vh;padding:var(--section-pad-y) 0}
.en-capture__inner{width:var(--layout-width);max-width:100%;margin:0 auto;text-align:center}
.en-capture__eyebrow{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--accent-hi);margin:0 0 12px}
.en-capture__headline{font-size:var(--fs-optin-headline);margin:0 0 12px;color:var(--text-on-dark);line-height:var(--lh-tight)}
.en-capture__sub{font-size:var(--fs-hero-text);margin:0 auto 30px;max-width:44em;line-height:var(--lh-body)}
.en-capture__media{position:relative;max-width:640px;margin:0 auto 30px;cursor:pointer;border:5px solid var(--media-frame);background:#000}
.en-capture__media img{width:100%;display:block}
.en-capture__form{width:480px;max-width:100%;margin:0 auto}
.en-capture__points{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;padding:30px 0 0;list-style:none;margin:0;text-align:left}
.en-capture__points li{width:280px;background:rgba(255,255,255,.08);padding:15px}
.en-gate{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:999}
.en-gate[hidden]{display:none}
.en-gate__panel{background:var(--surface-card);color:var(--text-body);padding:30px;max-width:420px;text-align:center}
.en-gate__panel{padding:0;text-align:left}
.en-gate__strip{margin:0;background:var(--accent);color:var(--accent-hi);padding:13px 20px;font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.04em}
.en-gate__body{margin:0;padding:20px 20px 18px;line-height:var(--lh-body)}
.en-gate__actions{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;padding:0 20px 20px}
.en-gate__accept{border:none;background:var(--action-bg,var(--accent));color:var(--action-fg,#fff);font-weight:700;text-transform:uppercase;padding:13px 18px;cursor:pointer;font-family:inherit;font-size:14px}
.en-gate__dismiss{border:1px solid var(--border-rule);background:#f4f4f4;color:var(--text-meta);padding:13px 18px;cursor:pointer;font-family:inherit;font-size:14px}

/* ---------------------------------------------------------- funnel chrome -- */
/* Capture, sales and thank-you render outside the shell — see inc/funnel.php — so
   they reclaim <main>'s padding and end on their own bar rather than the site's.
   Fixed-nav skins also set padding-top on .en-site for the navbar; that offset
   must drop on funnel pages or the slim brand bar floats below empty space. */
.en-funnel .en-main{padding:0}
body.en-funnel .en-site{padding-top:0}
.en-funnel-footer{background:var(--surface-footer);color:var(--text-on-footer);padding:20px 0;text-align:center;font-family:var(--font-accent);font-size:var(--fs-meta);line-height:1.8}
.en-funnel-footer ul{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 4px;padding:0}
.en-funnel-footer a{color:#fff;text-decoration:none}
.en-funnel-footer a:hover{text-decoration:underline}
.en-funnel-footer__line{margin:0}

/* ------------------------------------------------------------------ mobile */
/* The originals are pre-responsive fixed-width. These are the minimum rules that
   stop a 1076px design scrolling sideways on a phone; nothing above 900px is
   touched, so the desktop recreation stays pixel-faithful. */
@media (max-width:900px){
  .en-columns{flex-wrap:wrap}
  .en-content,.en-sidebar{flex:1 1 100%;width:100%}
  .en-stream--cards-3{grid-template-columns:repeat(2,1fr)}
  .en-hero__inner{flex-wrap:wrap}
  .en-hero__body{padding-top:30px}
  .en-hero__photo{padding:30px 0}
  .en-brick{width:100%}
  .en-footer__inner{min-height:0}
  .en-footer__copy,.en-footer__social{position:static;text-align:center}
  .en-footer__menu{flex-wrap:wrap;justify-content:center}
}
@media (max-width:640px){
  .en-navbar{height:auto}
  .en-navbar__brand{position:static}
  .en-navbar__menu{display:none;flex-direction:column;gap:0;text-align:left;padding:0}
  .en-navbar__menu.is-open{display:flex}
  .en-navbar__menu a{display:block;padding:12px 15px}
  .en-nav-toggle{display:block}
  .en-stream--cards-2,.en-stream--cards-3{grid-template-columns:1fr}
  .en-stream--rows .en-row{flex-wrap:wrap}
  .en-stream--rows .en-row__thumb{width:100%}
  .en-postcard{height:auto}
  .en-related>*{width:100%}
  .en-masthead__profile{position:static;width:auto;height:auto;margin:0 auto}
  .en-latest__panel{width:100%}
  .en-latest__photo{position:static;height:200px;left:auto}
  .en-latest__arrow{display:none}
  .en-brick{flex-wrap:wrap}
  .en-brick__photo,.en-brick__text{width:100%}
  .en-brick__arrow{display:none}
}

/* Motion is near-absent by design, and where these themes did animate they guarded
   it so copy stayed visible when scripts failed. Honour the OS setting too. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}