/*
Responsive 960 Grid by Arnold Floeck http://iamarnold.com
inspired by the 960.gs Grid http://960.gs
and the Less Framework by Joni Korpi http://lessframework.com
*/

/* =========================
   Fonts
   ========================= */

@font-face {
  font-family: 'apercu-bold';
  src: url('apercu-bold.eot');
  src: url('apercu-bold.eot?#iefix') format('embedded-opentype'),
       url('apercu-bold.woff2') format('woff2'),
       url('apercu-bold.woff') format('woff'),
       url('apercu-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'apercu-regular';
  src: url('apercu-regular.eot');
  src: url('apercu-regular.eot?#iefix') format('embedded-opentype'),
       url('apercu-regular.woff2') format('woff2'),
       url('apercu-regular.woff') format('woff'),
       url('apercu-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =========================
   Reset
   ========================= */

@import url("reset.css");

/* =========================
   Clear floated Elements
   ========================= */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix { display: block; }
* html .clearfix { height: 1%; }

/* =========================
   Modern base / global
   ========================= */

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

html { font-size: 62.5%; } /* keep your 10px = 1rem convention */
html, body { margin: 0; padding: 0; }

body {
  font-family: 'apercu-regular', Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #000000;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Links */
a:link, a:visited, a:focus, a:active {
  color: #000;
  text-decoration: underline;
  font-weight: normal;
  font-family: 'apercu-bold';
}

/* Modern hover (no layout jump). If you really want the old "drop down 2px" effect, restore it. */
a:hover {
  opacity: 0.8;
}

/* Misc */
#test a { background-color: transparent; }
#disqus_thread { margin-top: 20px; }

.medium { font-family: 'apercu-bold'; }

/* =========================
   Typography (desktop scales better)
   ========================= */

p {
  font-size: clamp(1.7em, 1.1vw + 1.2em, 2.1em);
  line-height: 1.55em;
  font-weight: normal;
  /*letter-spacing: -0.05em;*/
}

h1 {
  font-size: clamp(2.4em, 1.6vw + 1.6em, 3.4em);
  line-height: 1.2em;
}

h2 {
  font-size: clamp(2.0em, 1.1vw + 1.4em, 2.6em);
  line-height: 1.25em;
  font-weight: normal;
}

h3 {
  font-size: clamp(3.2em, 2.6vw + 1.4em, 4.6em);
  line-height: 1em;
  font-family: 'apercu-bold';
  margin-bottom: -10px;
}

/* =========================
   Layout / wrappers
   ========================= */

.wrapper { min-height: 100%; position: relative; }
.full { position: relative; left: 0; width: 100%; min-height: 100%; }

/*
  IMPORTANT CHANGE:
  .layout is no longer fixed to 300/620px.
  It becomes fluid with a max width so desktop looks great.
*/
.layout {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .layout {
    width: min(1200px, 100%);
    padding: 0 32px;
  }
}

/* =========================
   Media (images/iframes responsive)
   ========================= */

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

/* Keep original "header image" hook */
.headerImg { width: 100% !important; }

/* You had these special rules: keep them */
.special { width: auto !important; height: auto !important; }

/* Default for manualResize (mobile-first) */
.special.manualResize {
  width: 150px;
  height: auto;
}

/* Scale manualResize a bit on desktop */
@media (min-width: 768px) {
  .special.manualResize { width: 220px; }
}

/* iframes responsive by default */
iframe {
  max-width: 100%;
  display: block;
}

/* Optional responsive embed wrapper (use in HTML if needed) */
.embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================
   Sections / components
   ========================= */

.header { padding: 0px 0 20px 0px; }

.arnold {
  position: absolute;
  z-index: -1;
  margin-left: 310px;
  margin-top: -310px;
  width: 315px;
}

.push20 { margin-bottom: 50px; }

.blogPost { background-color: #f9f9f9; }
.blogArchive { background-color: #f1f1f1; }
.footer { background-color: #e8e8e8; }

.logo { margin: 0px 0 40px 0px; width: 200px !important; }

.blogDetail { padding: 20px 0 20px 0px; }
.footerDetail { padding: 20px 0 20px 0px; }

.blogHeadline { margin-top: -15px; }

.warning { color: #f43333; }
.succsess { color: #5eaa07; }

/* Divider line (was duplicated inside media queries) */
.line {
  color: #f00;
  height: 1px;
  border-bottom: 1px solid #d4d4d4;
  margin-top: 20px;
}

/* =========================
   Form inputs
   ========================= */

.emailInput, .emailText {
  width: 100%;
  border: 0;
  background-color: #e8e8e8;
  font-size: 1.6em;
  padding: 10px;
  color: #000;
  box-sizing: border-box;
}

.emailButton {
  width: 150px;
  border: 0;
  background-color: #e8e8e8;
  font-size: 1.6em;
  padding: 10px;
  color: #000;
}

input, textarea, select {
  font-family: 'apercu-regular', Helvetica, Arial, sans-serif;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #444444;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #444444;
}

/* =========================
   Footer positioning (kept, but your red border looked like debug)
   ========================= */

.footerLeft { position: relative; }

/*
  You had .footerFloatLeft with a red border in desktop.
  I’m removing the red border by default (looks like debug).
  If you still want it, add it back.
*/
.footerFloatLeft {
  position: relative;
}

/* =========================
   Modern responsive base
   ========================= */

/* Better box sizing everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* Typography: scale up gently on desktop */
html { font-size: 62.5%; } /* keep your 10px=1rem convention */
body {
  font-family: 'apercu-regular', Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #000;
  margin: 0;
}

/* Make text more readable on large screens */
p {
  font-size: clamp(1.7em, 1.1vw + 1.2em, 2.1em);
  line-height: 1.55em;
}

h1 {
  font-size: clamp(2.4em, 1.6vw + 1.6em, 3.4em);
  line-height: 1.2em;
}

h2 {
  font-size: clamp(2.0em, 1.1vw + 1.4em, 2.6em);
  line-height: 1.25em;
  font-weight: normal;
}

h3 {
  font-size: clamp(3.2em, 2.6vw + 1.4em, 4.6em);
  line-height: 1.0em;
  font-family: 'apercu-bold';
  margin-bottom: -10px;
}

/* Links: remove the "jump down" hover (optional but modern) */
a:link, a:visited, a:focus, a:active {
  color: #000;
  text-decoration: underline;
  font-weight: normal;
  font-family: 'apercu-bold';
}
a:hover { position: static; top: auto; opacity: 0.8; }

/* =========================
   Layout container
   ========================= */

/*
  Replace fixed widths (300/620) with:
  - fluid width
  - max-width for readability
  - side padding so it doesn't touch edges on mobile
*/
.layout {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 20px; /* gutter on small screens */
}

/* Optional: give content a bit more vertical rhythm */
.header { padding: 0 0 24px 0; }
.blogDetail, .footerDetail { padding: 24px 0; }
.push20 { margin-bottom: 50px; }

/* =========================
   Responsive media defaults
   ========================= */

/* Images: never force fixed width; scale down inside container */
img {
  max-width: 100%;
  height: auto;
  display: block; /* avoids baseline gaps */
}

/* If you have inline images you want to behave inline, override with .inline */
img.inline { display: inline; }

/* Iframes/videos: responsive */
iframe {
  max-width: 100%;
  display: block;
}

/* If you embed YouTube/Vimeo, wrap iframe in .embed for correct aspect ratio */
.embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Your “special” images can keep their size */
.special { width: auto !important; height: auto !important; }
.special.manualResize { width: 150px; height: auto; } /* default mobile-ish */

/* Desktop enhancement for manualResize */
@media (min-width: 768px) {
  .special.manualResize { width: 220px; }
}

/* =========================
   Desktop scaling tweaks
   ========================= */

@media (min-width: 1024px) {
  .layout {
    width: min(1200px, 100%);
    padding: 0 32px;
  }

  /* More comfortable line length if your posts are long */
  .blogPost, .blogArchive, .footer {
    border-radius: 12px; /* subtle modern touch */
  }
}

/* Keep your existing .line style but make it global (no need to duplicate in media queries) */
.line {
  height: 1px;
  border-bottom: 1px solid #d4d4d4;
  margin-top: 20px;
}

/* =========================
   Homepage hero fixes
   ========================= */

/* Make header a positioning context for the portrait */
.header {
  position: relative;
}

/* Keep the text above the portrait if they overlap */
.header h3,
.header h2 {
  position: relative;
  z-index: 2;
}

/* Portrait: anchor to top-right instead of using negative margins */
.arnold {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;               /* kill old offsets */
  z-index: -1;
  width: min(360px, 38vw); /* scales nicely on desktop */
  height: auto;
}

/* Give the hero text some room so it doesn't run under the portrait */
@media (min-width: 900px) {
  .header h3,
  .header h2 {
    max-width: 100%;
  }
}

/* YouTube iframe: force full width + correct aspect ratio */
.header iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  margin: 24px 0;
}

/* Small screens: stop absolute positioning and center the portrait */
@media (max-width: 900px) {
  .arnold {
    position: static;
    display: block;
    margin: 12px auto 20px auto;
    width: min(320px, 70%);
  }

  .header h3,
  .header h2 {
    max-width: 100%;
  }
}

/* Always all images in one row, scaled to fit */
.img-row{
  display: flex;
  gap: 16px;
  margin: 16px 0;
}

.img-row img{
  flex: 1 1 0;     /* every image takes equal share */
  min-width: 0;    /* critical: allows shrinking */
  max-width: 100%;
  height: auto;
  display: block;
}

/* Default blog images */
.blogDetail img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Portrait images get special treatment */
.blogDetail img.portrait{
  max-width: 500px;     /* ideal reading width */
  width: 100%;
  margin: 24px auto;    /* center */
}

/* =========================
   Responsive YouTube/Vimeo in posts
   ========================= */

/* Make all iframes inside blog posts full-width */
.blogDetail iframe,
.blogDetail embed,
.blogDetail object {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

/* Keep a nice 16:9 ratio when supported */
.blogDetail iframe {
  aspect-ratio: 16 / 9;
  height: auto !important;
  margin: 24px 0;
}