/* Cloud to Print — "print grid" concept.
   IBM Plex Mono for structural type, IBM Plex Serif for body. Cream paper,
   CMYK accents, 8px grid pattern lifted from print test pages. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif;color:#101418;background:#f5f1e6;line-height:1.65;font-size:17px;
  background-image:linear-gradient(#e3dccb 1px,transparent 1px),linear-gradient(90deg,#e3dccb 1px,transparent 1px);
  background-size:40px 40px;background-position:-1px -1px;background-attachment:fixed}
img{max-width:100%;height:auto;display:block}
a{color:#0f766e;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#d6336c}
.skip{position:absolute;left:-9999px;top:0;background:#101418;color:#f5f1e6;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* generic */
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.cmyk{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.cmyk i{width:9px;height:9px;border-radius:50%;display:inline-block}
.cmyk .c{background:#00a8c7}.cmyk .m{background:#d6336c}.cmyk .y{background:#f4b400}.cmyk .k{background:#101418}
hr.rule{border:0;border-top:1px solid #101418;margin:0}
.bar-cmyk{height:6px;background:linear-gradient(90deg,#00a8c7 0 25%,#d6336c 25% 50%,#f4b400 50% 75%,#101418 75% 100%);border-radius:1px}

/* header — a "control strip" */
.strip{background:#101418;color:#f5f1e6;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;padding:6px 20px}
.strip a{color:#f5f1e6}
.site-head{border-bottom:1px solid #101418;background:rgba(245,241,230,.92);backdrop-filter:saturate(1.1)}
.site-head .wrap{display:flex;align-items:center;gap:22px;padding:14px 20px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#101418}
.brand svg{width:40px;height:40px;flex:none}
.brand .name{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:20px;letter-spacing:.02em;line-height:1}
.brand .tag{display:block;font-size:11px;color:#5f5a4f;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{display:inline-block;padding:7px 11px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:#101418;text-decoration:none;border:1px solid transparent;border-radius:3px}
.site-nav a:hover{background:#101418;color:#f5f1e6}
.site-nav a[aria-current="page"]{border-color:#101418}
.nav-toggle{display:none}
.nav-label{display:none;cursor:pointer;margin-left:auto;padding:7px 11px;border:1px solid #101418;border-radius:3px;font-family:"IBM Plex Mono",monospace;font-size:13px}

/* hero / masthead card */
.mast{padding:40px 0 10px}
.mast .title{font-family:"IBM Plex Mono",monospace;font-size:clamp(28px,4.4vw,48px);font-weight:700;line-height:1.08;margin:0 0 10px;letter-spacing:-.01em}
.mast .lede{font-size:clamp(17px,1.6vw,20px);max-width:720px;margin:0 0 14px;color:#2a2823}
.mast .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#5f5a4f;letter-spacing:.08em;text-transform:uppercase}

/* contact sheet of articles */
.sheet{padding:30px 0 50px}
.sheet .sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid #101418;padding-bottom:10px;margin-bottom:18px}
.sheet h2{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.sheet .sheet-head a{font-family:"IBM Plex Mono",monospace;font-size:12px}
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:#fdfbf3;border:1px solid #cfc7b0;border-radius:4px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.card .frame{position:relative;background:#101418;aspect-ratio:3/2;overflow:hidden}
.card .frame img{width:100%;height:100%;object-fit:cover}
.card .frame::after{content:"";position:absolute;inset:0;background-image:linear-gradient(135deg,rgba(0,168,199,.25),transparent 60%),linear-gradient(315deg,rgba(214,51,108,.2),transparent 60%);pointer-events:none}
.card .tag{position:absolute;top:10px;left:10px;background:#f5f1e6;color:#101418;padding:3px 7px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px}
.card .body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:"IBM Plex Serif",serif;font-weight:700;margin:0 0 8px;font-size:19px;line-height:1.3}
.card h3 a{color:#101418;text-decoration:none}
.card h3 a:hover{color:#d6336c;text-decoration:underline}
.card p{margin:0 0 10px;color:#2a2823;font-size:15px;line-height:1.55}
.card .foot{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#5f5a4f;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;flex-wrap:wrap}

/* home two-column layout: pinned + grid */
.pinned{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;padding:28px 0 10px;align-items:start}
.pinned article.lead{background:#fdfbf3;border:1px solid #101418;border-radius:4px;overflow:hidden}
.pinned article.lead .frame{aspect-ratio:16/9;background:#101418;position:relative}
.pinned article.lead .frame img{width:100%;height:100%;object-fit:cover}
.pinned article.lead .body{padding:20px 22px 24px}
.pinned article.lead h2{font-family:"IBM Plex Serif",serif;font-size:clamp(22px,2.4vw,30px);margin:6px 0 10px;line-height:1.2;font-weight:700}
.pinned article.lead h2 a{color:#101418;text-decoration:none}
.pinned article.lead h2 a:hover{color:#d6336c;text-decoration:underline}
.pinned article.lead .tag{display:inline-block;background:#101418;color:#f5f1e6;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.pinned .sidelist{background:#fdfbf3;border:1px dashed #101418;border-radius:4px;padding:16px 18px}
.pinned .sidelist h3{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.pinned .sidelist ol{list-style:none;counter-reset:n;margin:0;padding:0}
.pinned .sidelist li{counter-increment:n;padding:10px 0;border-top:1px solid #e3dccb;display:grid;grid-template-columns:28px 1fr;gap:10px}
.pinned .sidelist li:first-child{border-top:0}
.pinned .sidelist li::before{content:counter(n,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:12px;color:#d6336c}
.pinned .sidelist a{color:#101418;text-decoration:none;font-weight:600}
.pinned .sidelist a:hover{color:#d6336c}
.pinned .sidelist .kic{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;color:#5f5a4f;text-transform:uppercase;margin-bottom:3px}

/* about / contact / write / 404 pages */
.page{padding:36px 0 60px}
.page h1{font-family:"IBM Plex Mono",monospace;font-size:clamp(28px,4vw,42px);margin:4px 0 16px;letter-spacing:-.01em}
.page h2{font-family:"IBM Plex Mono",monospace;font-size:20px;margin:28px 0 10px;letter-spacing:.02em}
.page p,.page li{font-size:17px;line-height:1.7}
.page .prose{max-width:720px}
.kicker-line{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5f5a4f}
.kicker-line::before{content:"";width:40px;height:1px;background:#101418}

/* article */
.article{padding:30px 0 70px}
.breadcrumbs{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:#5f5a4f;margin-bottom:20px}
.breadcrumbs a{color:#5f5a4f}
.article-head{max-width:760px}
.article-head .tag{display:inline-block;background:#101418;color:#f5f1e6;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:3px 10px;border-radius:2px;margin-bottom:12px;text-decoration:none}
.article-head h1{font-family:"IBM Plex Serif",serif;font-weight:700;font-size:clamp(28px,3.8vw,40px);line-height:1.15;margin:0 0 14px}
.article-head .standfirst{font-size:19px;color:#2a2823;line-height:1.5;margin:0 0 18px}
.byline{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#5f5a4f;letter-spacing:.06em;padding-bottom:16px;border-bottom:1px solid #101418;margin-bottom:26px}
.byline time{color:#101418}
.article .hero{margin:0 0 28px;border:1px solid #101418;border-radius:3px;overflow:hidden;background:#101418}
.article .hero figcaption{background:#101418;color:#f5f1e6;font-family:"IBM Plex Mono",monospace;font-size:12px;padding:8px 14px;line-height:1.5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.article .hero figcaption a{color:#f5f1e6;text-decoration:underline}
.prose{max-width:720px;margin:0 auto}
.prose h2{font-family:"IBM Plex Mono",monospace;font-size:22px;margin:38px 0 10px;padding-top:10px;letter-spacing:-.005em}
.prose h2::before{content:"§ ";color:#d6336c;font-weight:600}
.prose h3{font-family:"IBM Plex Mono",monospace;font-size:16px;margin:24px 0 6px;letter-spacing:.02em}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}
.prose li{margin-bottom:6px}
.prose blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid #d6336c;background:#fdfbf3;font-style:italic;color:#2a2823}
.prose .callout{border:1px dashed #101418;background:#fdfbf3;padding:14px 16px;margin:22px 0;font-size:16px}
.prose .callout strong{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px;color:#d6336c}
.prose figure{margin:24px 0}
.prose figure img{border:1px solid #cfc7b0;border-radius:3px}
.prose figure figcaption{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#5f5a4f;margin-top:6px}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;font-family:"IBM Plex Mono",monospace}
.prose th,.prose td{border:1px solid #cfc7b0;padding:9px 11px;text-align:left}
.prose th{background:#101418;color:#f5f1e6}
.prose tr:nth-child(even) td{background:#fdfbf3}

/* read-next */
.readnext{margin:40px auto 0;max-width:760px;border-top:1px solid #101418;padding-top:20px}
.readnext h3{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px}
.readnext ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.readnext li{padding:12px 14px;background:#fdfbf3;border:1px solid #cfc7b0;border-radius:3px}
.readnext li a{color:#101418;font-weight:600;text-decoration:none}
.readnext li a:hover{color:#d6336c;text-decoration:underline}
.readnext .kic{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;color:#5f5a4f;text-transform:uppercase;display:block;margin-bottom:4px}

/* forms */
form.pitch{display:grid;gap:12px;max-width:520px;margin-top:16px}
form.pitch label{display:grid;gap:4px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
form.pitch input,form.pitch textarea{font:inherit;font-family:"IBM Plex Serif",serif;padding:10px 12px;border:1px solid #101418;background:#fdfbf3;border-radius:2px}
form.pitch textarea{min-height:140px;resize:vertical}
form.pitch button{font-family:"IBM Plex Mono",monospace;background:#101418;color:#f5f1e6;border:0;padding:12px 16px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:2px}

/* footer */
.site-foot{background:#101418;color:#f5f1e6;padding:34px 0 20px;margin-top:40px}
.site-foot a{color:#f5f1e6}
.foot-grid{display:grid;gap:26px;grid-template-columns:2fr 1fr 1fr;align-items:start}
.foot-grid h4{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;color:#f4b400}
.foot-grid ul{list-style:none;margin:0;padding:0;font-family:"IBM Plex Mono",monospace;font-size:13px}
.foot-grid li{margin:5px 0}
.foot-grid .brand-foot{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.foot-grid .brand-foot svg{width:36px;height:36px}
.foot-base{margin-top:26px;padding-top:14px;border-top:1px solid #2a2823;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#c7bfa8;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* a4 sheet chart (SVG wrapper for comparison figure) */
.chart{background:#fdfbf3;border:1px solid #cfc7b0;border-radius:3px;padding:18px}
.chart .chart-cap{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#5f5a4f;margin-top:6px}

/* responsive */
@media (max-width: 820px){
  .pinned{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .site-head .wrap{gap:12px}
  .nav-label{display:inline-block}
  .site-nav{order:3;width:100%;max-height:0;overflow:hidden;margin-left:0}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:8px 0 4px}
  .site-nav a{display:block;padding:10px 6px;border-bottom:1px solid #e3dccb;border-radius:0}
  .nav-toggle:checked ~ .site-nav{max-height:460px}
  .site-nav a:hover{background:transparent;color:#d6336c}
}
@media (max-width: 480px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wrap{padding:0 16px}
}