/*
Theme Name: IOIM Hub
Theme URI: https://ioim.io/
Author: IOIM
Description: A lightweight editorial hub for the IOIM body of work.
Version: 0.9.4
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ioim-hub
*/

:root {
  --ink: #12232b;
  --ink-soft: #31434a;
  --paper: #f5f3ec;
  --paper-deep: #ebe8dc;
  --cream: #fffdf7;
  --line: #cbd0c8;
  --gold: #805c2f;
  --gold-light: #d7ba83;
  --muted: #5a6662;
  --max: 1192px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea { font: inherit; }
img, svg { max-width: 100%; }
::selection { background: #e8d5ae; color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; z-index: 1000; padding: 12px 18px; background: var(--cream); color: var(--ink); }
.ioim-shell { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }
.ioim-main { min-height: 60vh; }
.ioim-main > .wp-block-post-content { width: 100%; max-width: none !important; margin: 0 !important; }
.ioim-main > .wp-block-post-content > :where(.ioim-page-head,.ioim-section,.ioim-quote) { width: 100%; max-width: none !important; margin: 0 !important; }

/* The surrounding frame is quiet; the pages carry the visual story. */
.ioim-header { position: relative; z-index: 20; background: rgba(245,243,236,.96); border-bottom: 1px solid var(--line); }
.ioim-header__inner { min-height: 84px; display: flex; align-items: center; gap: 42px; }
.ioim-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.ioim-brand__mark { width: 44px; height: 44px; flex: none; background: url('assets/ioim-mark-micro.png') center / contain no-repeat; }
.ioim-brand__word { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; letter-spacing: .11em; }
.ioim-brand__small { display: block; padding-top: 6px; color: var(--muted); font: 9px/1.2 'Inter', Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.ioim-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(18px, 2.7vw, 38px); }
.ioim-nav a, .ioim-footer a { text-decoration: none; }
.ioim-nav a { font-size: 13px; font-weight: 600; letter-spacing: .035em; }
.ioim-nav a:hover, .ioim-footer a:hover { color: var(--gold); }
.ioim-nav .ioim-nav__end { padding: 10px 15px; border: 1px solid var(--ink); border-radius: 2px; }
.ioim-nav .ioim-nav__end:hover { color: var(--cream); background: var(--ink); }
.ioim-mobile-nav { display: none; margin-left: auto; }

.ioim-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--gold); font-size: 11px; line-height: 1.35; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; }
.ioim-kicker::before { content: ''; display: block; width: 24px; height: 1px; background: currentColor; }
.ioim-kicker--light { color: var(--gold-light); }
.ioim-display, .ioim-title, .ioim-section-title, .ioim-card-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.ioim-display { font-size: clamp(62px, 6.5vw, 108px); margin: 0 0 27px; }
.ioim-display em, .ioim-title em { font-weight: 400; color: var(--gold); }
.ioim-section-title { font-size: clamp(37px, 4vw, 62px); margin: 0; }
.ioim-title { font-size: clamp(58px, 6vw, 92px); margin: 0 0 22px; }
.ioim-intro { max-width: 700px; color: var(--ink-soft); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.62; }
:where(.ioim-main--about, .ioim-main--framework, .ioim-main--contact, .ioim-main--work, .ioim-main--inner-order, .ioim-main--inner-media) .ioim-page-head { position: relative; isolation: isolate; overflow: hidden; }
:where(.ioim-main--about, .ioim-main--framework, .ioim-main--contact, .ioim-main--work, .ioim-main--inner-order, .ioim-main--inner-media) .ioim-page-head::after { content: ''; position: absolute; z-index: 1; right: max(5vw, 48px); top: 50%; width: min(33vw, 460px); aspect-ratio: 1322 / 1190; background: url('assets/ioim-emblem-detail.png') center / contain no-repeat; opacity: .72; transform: translateY(-50%); pointer-events: none; }
:where(.ioim-main--work, .ioim-main--inner-media) .ioim-page-head::after { background-image: url('assets/ioim-emblem-reverse.png'); opacity: .78; }
:where(.ioim-main--about, .ioim-main--framework, .ioim-main--contact, .ioim-main--work, .ioim-main--inner-order, .ioim-main--inner-media) .ioim-page-head .ioim-shell { position: relative; z-index: 2; }
.ioim-copy { color: var(--ink-soft); max-width: 640px; font-size: 17px; }
.ioim-meta { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.ioim-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 22px; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--cream); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .025em; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.ioim-btn:hover { background: #253b43; transform: translateY(-2px); }
.ioim-btn--plain { background: transparent; color: var(--ink); }
.ioim-btn--plain:hover { background: var(--paper-deep); }
.ioim-text-link { display: inline-flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--gold); padding-bottom: 6px; font-weight: 700; font-size: 13px; text-decoration: none; }
.ioim-text-link span { transition: transform .2s; }
.ioim-text-link:hover span { transform: translateX(4px); }

/* Opening composition */
.ioim-hero { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.ioim-hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr); min-height: 640px; }
.ioim-hero__copy { padding: clamp(88px, 10vw, 136px) 7% 100px 0; align-self: center; }
.ioim-hero__copy .ioim-intro { max-width: 580px; margin: 0; }
.ioim-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 37px; }
.ioim-hero__note { margin: 55px 0 0; color: var(--muted); font: italic 17px Georgia, serif; }
.ioim-hero__visual { position: relative; min-height: 640px; padding: 44px; color: #f3f0e7; background: #152a32; border-left: 1px solid #213840; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.ioim-hero__visual::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(223,228,217,.07) 1px, transparent 1px), linear-gradient(90deg,rgba(223,228,217,.07) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2)); }
.ioim-hero__visual::after { content: ''; position: absolute; z-index: -1; width: 680px; height: 680px; border: 1px solid rgba(215,186,131,.23); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 82px rgba(215,186,131,.035), 0 0 0 164px rgba(215,186,131,.02); }
.ioim-diagram-head, .ioim-diagram-foot { color: #b0c0bd; font-size: 10px; text-transform: uppercase; letter-spacing: .21em; display: flex; justify-content: space-between; gap: 15px; }
.ioim-diagram-head strong { color: var(--gold-light); font-weight: 600; }
.ioim-diagram { width: min(100%, 480px); margin: 30px auto; }
.ioim-diagram__center { width: 104px; height: 104px; margin: 0 auto 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-light); box-shadow: 0 0 0 12px rgba(215,186,131,.08); color: var(--cream); font: 30px Georgia, serif; letter-spacing: .07em; position: relative; }
.ioim-diagram__center::after { content: ''; position: absolute; top: 100%; height: 38px; width: 1px; background: var(--gold-light); }
.ioim-diagram__item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 15px; min-height: 48px; border-top: 1px solid rgba(216,221,209,.23); }
.ioim-diagram__item:last-child { border-bottom: 1px solid rgba(216,221,209,.23); }
.ioim-diagram__item b { color: var(--gold-light); font: 12px Georgia, serif; font-weight: 400; }
.ioim-diagram__item span { font-family: Georgia, serif; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.015em; }
.ioim-diagram__item i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); }

.ioim-route { border-bottom: 1px solid var(--line); background: var(--cream); }
.ioim-route__inner { display: flex; align-items: center; gap: 35px; padding-block: 23px; }
.ioim-route__label { flex: none; padding-right: 27px; border-right: 1px solid var(--line); color: var(--gold); font: 11px/1.4 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .17em; font-weight: 700; }
.ioim-route__links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ioim-route__links a { font-size: 12px; text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.ioim-route__links a:hover { color: var(--gold); }

.ioim-section { padding-block: clamp(90px, 10vw, 155px); }
.ioim-section--tight { padding-block: clamp(75px, 8vw, 112px); }
.ioim-section--cream { background: var(--cream); }
.ioim-section--ink { background: var(--ink); color: var(--cream); }
.ioim-section__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: 35px; margin-bottom: 50px; }
.ioim-section__heading p:last-child { margin: 0 0 6px; color: var(--muted); max-width: 500px; }
.ioim-section--ink .ioim-section__heading p:last-child { color: #aebfbd; }
.ioim-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ioim-branch { position: relative; padding: clamp(29px, 4vw, 48px); min-height: 340px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; text-decoration: none; border: 1px solid var(--line); background: #f8f7f1; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ioim-branch:hover, .ioim-project:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(18,35,43,.06); }
.ioim-branch::after { content: ''; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(163,123,70,.18); border-radius: 50%; right: -110px; bottom: -130px; }
.ioim-branch--media { background: #e7ebe8; }
.ioim-branch__number { color: var(--gold); font: 12px Georgia, serif; }
.ioim-card-title { font-size: clamp(34px, 3.2vw, 49px); margin: 48px 0 12px; }
.ioim-branch p { max-width: 380px; color: var(--ink-soft); margin: 0 0 30px; }
.ioim-branch__arrow { margin-top: auto; padding-top: 20px; color: var(--gold); font-size: 23px; line-height: 1; }
.ioim-projects { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.ioim-project { min-height: 295px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); text-decoration: none; background: var(--cream); transition: border-color .2s, transform .2s, box-shadow .2s; }
.ioim-project__label { color: var(--gold); font: 11px/1.4 'Inter',Arial,sans-serif; letter-spacing: .15em; font-weight: 700; text-transform: uppercase; }
.ioim-project h3 { font: 31px/1.12 Georgia,serif; letter-spacing: -.035em; margin: 38px 0 13px; }
.ioim-project p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.ioim-project__arrow { display: block; margin-top: auto; padding-top: 20px; color: var(--gold); font-size: 22px; line-height: 1; }
.ioim-mountains { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #62747a; margin-top: 48px; }
.ioim-mountain { min-height: 170px; padding: 24px 17px 24px 0; border-right: 1px solid #62747a; }
.ioim-mountain:not(:first-child) { padding-left: 17px; }
.ioim-mountain:last-child { border-right: 0; }
.ioim-mountain__num { color: var(--gold-light); font: 15px Georgia,serif; }
.ioim-mountain h3 { font: clamp(20px,2vw,28px)/1.1 Georgia,serif; font-weight: 400; letter-spacing: -.025em; margin: 39px 0 7px; }
.ioim-mountain p { color: #aebfbd; font-size: 12px; line-height: 1.5; margin: 0; }
.ioim-mountain-cta { margin-top: 37px; }
.ioim-mountain-cta a { color: var(--cream); border-color: var(--gold-light); }
.ioim-quote { padding-block: 100px; border-bottom: 1px solid var(--line); }
.ioim-quote blockquote { max-width: 900px; margin: 0 auto; text-align: center; font: italic clamp(29px,3.5vw,49px)/1.35 Georgia,serif; letter-spacing: -.025em; }
.ioim-quote p { margin: 24px 0 0; text-align: center; color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.ioim-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; }
.ioim-next p { margin: 16px 0 0; max-width: 630px; color: var(--muted); }

/* Inner pages */
.ioim-page-head { padding-block: clamp(86px,10vw,142px) clamp(70px,8vw,110px); background: var(--cream); border-bottom: 1px solid var(--line); }
.ioim-page-head--dark { background: var(--ink); color: var(--cream); }
.ioim-page-head--dark .ioim-intro { color: #b8c6c1; }
.ioim-page-head--dark .ioim-title em { color: var(--gold-light); }
.ioim-page-head__line { display: flex; gap: 24px; align-items: center; margin-top: 70px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ioim-page-head--dark .ioim-page-head__line { border-color: #506068; color: #b8c6c1; }
.ioim-page-head__action { margin: 25px 0 0; }
.ioim-page-head--dark .ioim-page-head__action .ioim-btn { border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); }
.ioim-page-head--dark .ioim-page-head__action .ioim-btn:hover { background: var(--cream); }
.ioim-page-head__line span:last-child { margin-left: auto; }
.ioim-path-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 7vw, 110px); }
.ioim-side-note { padding-top: 8px; border-top: 1px solid var(--gold); color: var(--muted); font-size: 13px; }
.ioim-side-note strong { display: block; margin-bottom: 11px; color: var(--ink); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.ioim-prose { max-width: 760px; color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.ioim-prose p:first-child { margin-top: 0; }
.ioim-prose h2 { margin: 2em 0 .4em; color: var(--ink); font: 43px/1.13 Georgia,serif; letter-spacing: -.035em; }
.ioim-prose a { color: #805c2f; }
.ioim-list { margin-top: 45px; border-top: 1px solid var(--line); }
.ioim-list__row { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.ioim-list__row b { color: var(--gold); font: 17px Georgia,serif; font-weight: 400; }
.ioim-list__row h3 { margin: 0 0 7px; font: 29px/1.16 Georgia,serif; }
.ioim-list__row p { max-width: 610px; margin: 0; color: var(--muted); font-size: 15px; }
.ioim-work-group { display: grid; grid-template-columns: 180px 1fr; gap: 35px; border-top: 1px solid var(--line); padding: 34px 0; }
.ioim-work-group__label { margin: 4px 0 0; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.ioim-work-group__items { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.ioim-work-tile { padding: 30px; min-height: 220px; background: var(--cream); border: 1px solid var(--line); }
.ioim-work-tile h3 { margin: 20px 0 10px; font: 31px/1.13 Georgia,serif; letter-spacing: -.035em; }
.ioim-work-tile p { margin: 0; color: var(--muted); font-size: 14px; }
.ioim-work-tile a { display: inline-block; margin-top: 20px; color: #805c2f; font-size: 13px; font-weight: 700; }
.ioim-work-tile a.ioim-work-tile__secondary { margin-left: 18px; color: var(--ink-soft); font-weight: 500; }
.ioim-work-tile small { display: block; margin-top: 17px; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.ioim-contact-card { max-width: 820px; border: 1px solid var(--line); padding: clamp(30px,5vw,64px); background: var(--cream); }
.ioim-contact-card h2 { margin: 0 0 20px; font: 44px/1.1 Georgia,serif; }
.ioim-contact-card p { max-width: 590px; color: var(--ink-soft); }
.ioim-contact-card .ioim-btn { margin-top: 18px; }

.ioim-footer { color: #dce3dc; background: #102128; border-top: 1px solid #2e454c; }
.ioim-footer__main { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 60px; padding-block: 80px; }
.ioim-footer__brand { margin: 0 0 18px; font: 42px Georgia,serif; letter-spacing: .1em; }
.ioim-footer__brand + p { max-width: 360px; color: #9eb0ae; font: italic 18px/1.5 Georgia,serif; }
.ioim-footer h2 { margin: 5px 0 23px; color: var(--gold-light); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.ioim-footer nav { display: grid; gap: 10px; }
.ioim-footer nav a { font-size: 14px; }
.ioim-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 30px; border-top: 1px solid #32474c; color: #95a9a7; font-size: 11px; letter-spacing: .08em; }

@media (max-width: 1250px) {
  :where(.ioim-main--about, .ioim-main--framework, .ioim-main--contact, .ioim-main--work, .ioim-main--inner-order, .ioim-main--inner-media) .ioim-page-head::after { display: none; }
}
@media (max-width: 1050px) {
  .ioim-projects { grid-template-columns: repeat(2, 1fr); }
  .ioim-mountains { grid-template-columns: repeat(3,1fr); }
  .ioim-mountain:nth-child(3) { border-right: 0; }
  .ioim-mountain:nth-child(n+4) { border-top: 1px solid #62747a; }
}
@media (max-width: 760px) {
  .ioim-shell { width: min(calc(100% - 38px), var(--max)); }
  .ioim-header__inner { min-height: 70px; }
  .ioim-brand__mark { width: 34px; height: 34px; }
  .ioim-brand__word { font-size: 23px; }
  .ioim-nav { display: none; }
  .ioim-mobile-nav { display: block; position: relative; }
  .ioim-mobile-nav summary { list-style: none; cursor: pointer; padding: 9px 11px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
  .ioim-mobile-nav summary::-webkit-details-marker { display: none; }
  .ioim-mobile-nav nav { position: absolute; right: 0; top: calc(100% + 11px); width: min(280px, 86vw); display: grid; gap: 0; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(18,35,43,.12); }
  .ioim-mobile-nav nav a { padding: 12px 17px; text-decoration: none; border-bottom: 1px solid var(--line); font-size: 14px; }
  .ioim-mobile-nav nav a:last-child { border-bottom: 0; }
  .ioim-hero__grid { display: block; }
  .ioim-hero__copy { padding: 85px 0 78px; }
  .ioim-display { font-size: clamp(56px, 12vw, 76px); }
  .ioim-hero__note { margin-top: 38px; }
  .ioim-hero__visual { min-height: 540px; margin-inline: -19px; padding: 28px; }
  .ioim-route__inner { display: block; }
  .ioim-route__label { display: inline-block; padding: 0; border: 0; margin-bottom: 12px; }
  .ioim-section__heading { display: block; }
  .ioim-section__heading p:last-child { margin-top: 22px; }
  .ioim-branches, .ioim-work-group__items { grid-template-columns: 1fr; }
  .ioim-mountains { grid-template-columns: repeat(2,1fr); }
  .ioim-mountain:nth-child(3) { border-right: 1px solid #62747a; border-top: 1px solid #62747a; padding-left: 0; }
  .ioim-mountain:nth-child(2n) { border-right: 0; }
  .ioim-mountain:nth-child(n+3) { border-top: 1px solid #62747a; }
  .ioim-mountain:nth-child(2n+1) { padding-left: 0; }
  .ioim-path-grid, .ioim-work-group { display: block; }
  .ioim-side-note { margin-bottom: 36px; }
  .ioim-work-group__label { margin-bottom: 20px; }
  .ioim-next { display: block; }
  .ioim-next .ioim-btn { margin-top: 30px; }
  .ioim-footer__main { grid-template-columns: 1fr 1fr; gap: 45px 25px; padding-block: 60px; }
  .ioim-footer__main > div:first-child { grid-column: 1/-1; }
}
@media (max-width: 520px) {
  .ioim-hero__actions { display: grid; }
  .ioim-hero__actions .ioim-btn { justify-content: space-between; }
  .ioim-hero__visual { min-height: 510px; }
  .ioim-diagram-head, .ioim-diagram-foot { font-size: 9px; }
  .ioim-projects { grid-template-columns: 1fr; }
  .ioim-project { min-height: 240px; }
  .ioim-branch { min-height: 310px; }
  .ioim-mountains { grid-template-columns: 1fr; }
  .ioim-mountain, .ioim-mountain:nth-child(3), .ioim-mountain:nth-child(2n) { border-right: 0; padding: 18px 0; min-height: 115px; border-top: 1px solid #62747a; }
  .ioim-mountain:first-child { border-top: 0; }
  .ioim-mountain h3 { margin: 9px 0 5px; }
  .ioim-page-head__line { flex-wrap: wrap; }
  .ioim-page-head__line span:last-child { margin-left: 0; }
  .ioim-list__row { grid-template-columns: 46px 1fr; }
  .ioim-footer__bottom { display: block; }
  .ioim-footer__bottom span { display: block; margin-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}