/*
 * United World Executive — コラム.
 *
 * Enqueued only on the column routes (functions.php), so nothing here can
 * reach the nine pages at the recorded baseline. The site chrome — nav,
 * footer, `.ax-section`, `.ax-page-hero`, `.ax-cta-section` — comes from
 * style.css and is not restated.
 *
 * Two rules the rest of this file follows without exception:
 *
 * 1. Every selector that sets a link colour is prefixed `.ax `.
 *    `.ax a{color:inherit}` is (0,1,1) and sits late in style.css, so a bare
 *    `.ax-col-tab` (0,1,0) loses to it and renders navy-on-navy. That trap has
 *    already cost this site the hero H1, the wordmark, the nav CTA and the
 *    section CTA button — four times, each found by measuring rather than by
 *    reading. It is not going to be found a fifth time here.
 *
 * 2. Muted copy is never the body grey `#64748B` on a dark background. That
 *    pairing is 3.96:1 and it is the accessibility item deliberately deferred
 *    on this site (docs/HUMAN-TASKS.md §P2-1, 14 occurrences on /services/*).
 *    New text does not join a known defect. On light, muted copy here is
 *    #5A6679 and #4A5668; on navy the site's own `--ax-slate` is correct and
 *    measures 7.34:1. Every value below was measured on the rendered page, not
 *    reasoned about — twice today reasoning about it produced the wrong number.
 */

body.ax-col-body{background:#fff}

/* --- breadcrumb ----------------------------------------------------------- */
.ax-col-breadcrumb{max-width:880px;margin:0 auto;padding:26px 32px 0;
font-size:12px;line-height:1.9;color:#5A6679}
.ax-col-breadcrumb span{margin:0 8px;color:#A5AEBC}
.ax-col-breadcrumb .ax-col-breadcrumb-here{margin:0;color:#5A6679}
.ax .ax-col-breadcrumb a{color:#35415A;border-bottom:1px solid transparent}
.ax .ax-col-breadcrumb a:hover{border-bottom-color:#35415A}

/* --- article head --------------------------------------------------------- */
.ax-col-head{max-width:880px;margin:0 auto;padding:28px 32px 0}
.ax-col-head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:20px}
.ax-col-head h1{font-size:34px;font-weight:800;line-height:1.5;letter-spacing:-.3px;color:var(--ax-navy)}
.ax-col-lead{margin-top:24px;padding-left:18px;border-left:3px solid var(--ax-gold);
font-size:16px;line-height:1.95;color:#3D4A5C}
.ax-col-dates{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;padding-bottom:22px;
border-bottom:1px solid #E5E9F0;font-size:12px;letter-spacing:.5px;color:#6B7684}

/* --- the badge that names the reader -------------------------------------- */
/* Two variants, both drawn from the brand's two colours. A third hue for a
   third audience is not needed, because there is no third audience. */
.ax-col-badge{display:inline-block;flex-shrink:0;padding:4px 11px;border-radius:2px;
font-size:11px;font-weight:700;letter-spacing:1.5px;line-height:1.6;white-space:nowrap}
.ax-col-badge-employer{background:var(--ax-navy);color:var(--ax-gold-light)}
.ax-col-badge-candidate{background:#fff;color:var(--ax-navy);box-shadow:inset 0 0 0 1px rgba(11,17,32,.38)}
.ax-col-kicker,.ax-col-card-kicker{font-size:11px;font-weight:700;letter-spacing:2px;
text-transform:uppercase;color:#7A6427}

/* --- article body --------------------------------------------------------- */
/* 880px outer, 32px gutters: about 41 full-width Japanese characters a line at
   16px, which is inside the 35-45 range Japanese typography treats as readable.
   A 1200px measure — what an unconstrained `.ax` child would get — is not. */
.ax-col-body-copy{max-width:880px;margin:0 auto;padding:12px 32px 8px;
font-size:16px;line-height:2.05;color:#253044}
.ax-col-body-copy > *:first-child{margin-top:32px}
.ax-col-body-copy p{margin:0 0 26px}
.ax-col-body-copy h2{margin:60px 0 22px;padding-left:16px;border-left:4px solid var(--ax-gold);
font-size:24px;font-weight:800;line-height:1.6;color:var(--ax-navy)}
.ax-col-body-copy h3{margin:40px 0 14px;font-size:18px;font-weight:700;line-height:1.7;color:var(--ax-navy)}
.ax-col-body-copy h4{margin:30px 0 12px;font-size:16px;font-weight:700;color:var(--ax-navy)}
.ax-col-body-copy strong{font-weight:700;color:var(--ax-navy)}
.ax-col-body-copy ul,.ax-col-body-copy ol{margin:0 0 26px;padding-left:1.5em}
.ax-col-body-copy li{margin-bottom:11px}
.ax-col-body-copy li::marker{color:#8A93A3}
.ax .ax-col-body-copy a{color:var(--ax-navy);border-bottom:1px solid var(--ax-gold);
padding-bottom:1px;transition:background .2s}
.ax .ax-col-body-copy a:hover{background:rgba(201,168,76,.18)}
.ax-col-body-copy blockquote{margin:0 0 26px;padding:4px 0 4px 22px;border-left:3px solid #D6DCE5;
font-size:15px;line-height:1.95;color:#48566B}
.ax-col-body-copy hr{margin:44px 0;border:0;border-top:1px solid #E5E9F0}

/* Tables scroll inside their own box. A comparison table is the most useful
   shape for "these three options differ in these four ways", and it is also
   the one that breaks a phone layout if it is allowed to set the page width. */
.ax-col-table{overflow-x:auto;margin:0 0 30px;border:1px solid #E5E9F0;border-radius:2px}
.ax-col-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.8}
.ax-col-table th,.ax-col-table td{padding:13px 16px;text-align:left;vertical-align:top;
border-bottom:1px solid #E5E9F0}
.ax-col-table th{background:#F1F4F8;font-weight:700;color:var(--ax-navy);white-space:nowrap}
.ax-col-table tr:last-child td{border-bottom:0}

/* A single point worth carrying away, marked as one. */
.ax-col-callout{margin:0 0 30px;padding:24px 26px;background:#F8FAFC;
border-left:4px solid var(--ax-navy);border-radius:0 2px 2px 0}
.ax-col-callout p:last-child{margin-bottom:0}
.ax-col-callout-label{display:block;margin-bottom:10px;font-size:11px;font-weight:700;
letter-spacing:2px;text-transform:uppercase;color:#7A6427}

/* --- sources -------------------------------------------------------------- */
/* Every figure in an article points at a named public source with the date it
   was read. `scripts/column_gate.py` refuses to publish a piece that states a
   number without one, so this block is not decoration — it is the thing the
   gate checks, rendered. */
/* Rendered from inside `the_content`, so it is already inside the 880px
   measure and must not open a second one. */
.ax-col-body-copy .ax-col-sources{max-width:none;margin:44px 0 0}
.ax-col-sources{max-width:880px;margin:44px auto 0;padding:26px 30px;background:#F8FAFC;
border:1px solid #E5E9F0;border-radius:2px;font-size:13px;line-height:1.9;color:#3D4A5C}
.ax-col-sources h2{margin:0 0 14px;padding:0;border:0;font-size:12px;font-weight:700;
letter-spacing:2px;text-transform:uppercase;color:#5A6679}
.ax-col-sources ol{margin:0;padding-left:1.4em}
.ax-col-sources li{margin-bottom:9px}
.ax-col-sources li:last-child{margin-bottom:0}
.ax .ax-col-sources a{color:var(--ax-navy);border-bottom:1px solid #B9C2CF;word-break:break-word}
.ax .ax-col-sources a:hover{border-bottom-color:var(--ax-navy)}
.ax-col-sources-note{margin:14px 0 0;font-size:12px;line-height:1.85;color:#5A6679}

/* --- topics --------------------------------------------------------------- */
.ax-col-topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
max-width:880px;margin:36px auto 0;padding:0 32px 8px}
.ax-col-topics-label{font-size:11px;font-weight:700;letter-spacing:2px;color:#6B7684}
.ax .ax-col-topics a{padding:6px 14px;border-radius:999px;background:#F1F4F8;
font-size:12px;font-weight:700;color:#35415A;transition:.2s}
.ax .ax-col-topics a:hover{background:var(--ax-navy);color:#fff}

.ax-col-single{padding-bottom:8px}
.ax-col-cta{margin-top:64px}

/* --- cards ---------------------------------------------------------------- */
.ax-col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ax-col-card{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;
background:#fff;border:1px solid #E5E9F0;border-radius:2px;overflow:hidden;transition:.25s}
.ax-col-card:hover{border-color:rgba(201,168,76,.55);transform:translateY(-2px);
box-shadow:0 10px 30px rgba(11,17,32,.09)}
.ax-col-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.ax-col-card-title{font-size:17px;font-weight:700;line-height:1.65;color:var(--ax-navy);margin-bottom:12px}
.ax-col-card-desc{flex:1;font-size:13px;line-height:1.85;color:#4A5668;margin-bottom:18px}
.ax-col-card-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;letter-spacing:.5px;color:#6B7684}
.ax-col-card-line{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ax-gold);transition:width .3s}
.ax-col-card:hover .ax-col-card-line{width:100%}

/* --- audience tabs -------------------------------------------------------- */
.ax-col-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.ax .ax-col-tab{padding:10px 20px;border-radius:999px;background:#fff;
box-shadow:inset 0 0 0 1px #D6DCE5;font-size:13px;font-weight:700;color:#35415A;transition:.2s}
.ax .ax-col-tab:hover{box-shadow:inset 0 0 0 1px var(--ax-navy)}
.ax .ax-col-tab.is-current{background:var(--ax-navy);color:#fff;box-shadow:inset 0 0 0 1px var(--ax-navy)}

/* --- pagination ----------------------------------------------------------- */
.ax-col-pagination{margin-top:48px}
.ax-col-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ax-col-pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ax-col-pagination .page-numbers{display:inline-block;min-width:42px;padding:10px 14px;text-align:center;
background:#fff;box-shadow:inset 0 0 0 1px #D6DCE5;border-radius:2px;font-size:13px;font-weight:700;transition:.2s}
.ax .ax-col-pagination a.page-numbers{color:#35415A}
.ax .ax-col-pagination a.page-numbers:hover{box-shadow:inset 0 0 0 1px var(--ax-navy)}
.ax .ax-col-pagination .page-numbers.current{background:var(--ax-navy);color:#fff;box-shadow:inset 0 0 0 1px var(--ax-navy)}
.ax-col-pagination .page-numbers.dots{background:none;box-shadow:none;color:#8A93A3}

/* --- the two routes off the index ----------------------------------------- */
.ax-col-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ax-col-route{display:block;padding:34px 32px;background:#fff;border:1px solid #E5E9F0;
border-radius:2px;transition:.25s}
.ax-col-route:hover{border-color:rgba(201,168,76,.55);box-shadow:0 10px 30px rgba(11,17,32,.09)}
.ax-col-route h3{margin:16px 0 12px;font-size:19px;font-weight:700;line-height:1.6;color:var(--ax-navy)}
.ax-col-route p{font-size:14px;line-height:1.9;color:#4A5668;margin-bottom:20px}
.ax-col-route-go{font-size:13px;font-weight:700;color:#7A6427;letter-spacing:.5px}

/* --- odds and ends -------------------------------------------------------- */
.ax-col-more{margin-top:44px;text-align:center}
.ax .ax-col-more a{font-size:14px;font-weight:700;color:var(--ax-navy);
border-bottom:1px solid var(--ax-gold);padding-bottom:3px}
.ax .ax-col-more a:hover{color:#7A6427;border-bottom-color:#7A6427}
.ax-col-empty{font-size:15px;line-height:1.9;color:#5A6679}

/* --- responsive ----------------------------------------------------------- */
@media(max-width:1024px){
.ax-col-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
.ax-col-grid,.ax-col-routes{grid-template-columns:1fr;gap:18px}
.ax-col-breadcrumb{padding:20px 20px 0;font-size:11px}
.ax-col-breadcrumb span{margin:0 6px}
.ax-col-head{padding:22px 20px 0}
.ax-col-head h1{font-size:26px;line-height:1.55}
.ax-col-lead{font-size:15px;margin-top:20px}
.ax-col-dates{gap:12px;margin-top:22px}
.ax-col-body-copy{padding:8px 20px;font-size:15.5px;line-height:2}
.ax-col-body-copy h2{margin:46px 0 18px;font-size:20px}
.ax-col-body-copy h3{margin:32px 0 12px;font-size:17px}
.ax-col-sources{margin-top:36px;padding:22px 20px;border-left:0;border-right:0;border-radius:0}
.ax-col-topics{padding:0 20px 8px;margin-top:30px}
.ax-col-route{padding:26px 22px}
.ax-col-cta{margin-top:48px}
}

/* --- the inline source marker --------------------------------------------- */
/* Rendered by scripts/column.py next to every figure. It is small, but it is
   not decoration: `scripts/column_gate.py` refuses to publish an article whose
   figure has no cite, so a number without one of these next to it means the
   gate did not run. */
.ax-col-cite{font-size:.78em;letter-spacing:0;white-space:nowrap;color:#5A6679}
.ax .ax-col-cite a{color:#5A6679;border-bottom:1px solid #C3CBD6;padding-bottom:0}
.ax .ax-col-cite a:hover{color:var(--ax-navy);border-bottom-color:var(--ax-navy);background:none}

/* --- the article's call to action ----------------------------------------- */
/* Nothing is overridden here, and the reason is worth recording.
 *
 * A rule lightening `.ax-col-cta p` was written and then removed. It was based
 * on reading `--ax-slate` as the colour behind docs/HUMAN-TASKS.md §P2-1's
 * 3.96:1 items. It is not: §P2-1 is the body grey `#64748B` used inside
 * `.ax-dark`, and that same document records `--ax-slate` at **7.34:1** on
 * `#0B1120`. Measured here on 2026-09-04 on the live page: 7.34:1. It passes.
 *
 * So the CTA paragraph inherits `.ax-cta-section p` like every other call to
 * action on the property. Giving this one a different shade would have made the
 * article pages inconsistent with the nine pages around them, to fix a number
 * that was never failing. */

/* ===========================================================================
 * Figures — 2026-09-04
 *
 * The first fourteen articles were prose with the occasional table, and the
 * site owner's verdict was "文字の並びだけで見にくい". These are the shapes that
 * were missing.
 *
 * They are all HTML and CSS, not SVG and not images. Three reasons, in order:
 *
 *  1. ConoHa's WAF rejects a POST body carrying `<script` or `<link`. Plain
 *     markup is the payload shape already proven to pass, every day, without
 *     anyone having to reason about a signature.
 *     docs/08-WAF-AND-AUTOMATION.md.
 *  2. The text inside a diagram stays selectable, translatable, indexable and
 *     readable by a screen reader. Text baked into a picture is none of those.
 *  3. They reflow. A four-column process becomes one column on a phone, which
 *     is where most of this traffic reads.
 *
 * Not here, deliberately: anything whose SIZE carries meaning. A bar whose
 * length encodes a quantity is a claim about that quantity, and a claim about a
 * quantity needs a source (scripts/column_gate.py, category B). `.ax-col-stack`
 * draws every layer the same width for exactly that reason.
 * ========================================================================= */

.ax-col-fig{margin:40px 0}
.ax-col-fig-cap{margin:14px 0 0;font-size:12.5px;line-height:1.8;color:#5A6679;
letter-spacing:.3px}
.ax-col-body-copy .ax-col-fig .ax-col-table{margin:0}

/* --- photographs ---------------------------------------------------------- */
/* Generated stock, said so under every one. docs/15-IMAGERY.md. The box is
   held by width/height plus aspect-ratio so the picture arriving late cannot
   move the paragraph a reader is in the middle of. */
.ax-col-photo{margin:40px 0}
.ax-col-photo img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;
object-fit:cover;border-radius:2px}
.ax-col-photo figcaption{margin-top:8px;font-size:11px;letter-spacing:.5px;color:#5A6679}

/* --- steps: a process, in order ------------------------------------------- */
.ax-col-steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.ax-col-step{position:relative;padding:22px 20px 20px;background:#fff;
box-shadow:inset 0 0 0 1px #E5E9F0;border-radius:2px}
.ax-col-step-num{display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;margin-bottom:14px;border-radius:50%;
background:var(--ax-navy);color:var(--ax-gold-light);
font-size:13px;font-weight:700;line-height:1}
.ax-col-step h4{margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ax-navy)}
.ax-col-step p{margin:0;font-size:13px;line-height:1.85;color:#4A5668}
/* The connector. Drawn between the number rows, not between the boxes, so it
   lines up whatever height the text runs to. */
.ax-col-step:not(:last-child):after{content:"";position:absolute;top:37px;right:-20px;
width:20px;height:1px;background:#D6DCE5}

/* --- branch: one thing that is really several ----------------------------- */
.ax-col-branch{text-align:center}
.ax-col-branch-root{display:inline-block;padding:13px 30px;border-radius:2px;
background:var(--ax-navy);color:#fff;font-size:15px;font-weight:700;letter-spacing:.5px}
.ax-col-branch-items{position:relative;display:grid;gap:18px;margin-top:34px;
grid-template-columns:repeat(auto-fit,minmax(0,1fr));text-align:left}
/* The stem down from the root, and the bar the items hang from.
   The bar has to stop at the centre of the first and last item or it points at
   nothing, and where those centres are depends on how many items there are.
   `data-count` is written by the renderer for this: the inset is 100/(2n)%. */
.ax-col-branch-items:before{content:"";position:absolute;top:-34px;left:50%;
width:1px;height:18px;background:#C3CBD6}
/* 100/(2n)% is the answer only when the columns touch. With an 18px gap the
   first column's centre sits further in than that, and the bar overshot both
   ends by 7px — measured: bar 654-1266 against item centres 647 and 1273.
   Taking the gaps out of the width first puts the ends on the centres. */
.ax-col-branch-items:after{content:"";position:absolute;top:-16px;height:1px;background:#C3CBD6}
.ax-col-branch-items[data-count="2"]:after{left:calc((100% - 18px) / 4);right:calc((100% - 18px) / 4)}
.ax-col-branch-items[data-count="3"]:after{left:calc((100% - 36px) / 6);right:calc((100% - 36px) / 6)}
.ax-col-branch-items[data-count="4"]:after{left:calc((100% - 54px) / 8);right:calc((100% - 54px) / 8)}
.ax-col-branch-items[data-count="5"]:after{left:calc((100% - 72px) / 10);right:calc((100% - 72px) / 10)}
.ax-col-branch-item{position:relative;padding:20px;background:#fff;
box-shadow:inset 0 0 0 1px #E5E9F0;border-top:3px solid var(--ax-gold);border-radius:0 0 2px 2px}
.ax-col-branch-item:before{content:"";position:absolute;top:-19px;left:50%;
width:1px;height:16px;background:#C3CBD6}
.ax-col-branch-item h4{margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ax-navy)}
.ax-col-branch-item p{margin:0;font-size:13px;line-height:1.85;color:#4A5668}

/* --- stack: layers that sit on top of each other -------------------------- */
.ax-col-stack{display:flex;flex-direction:column;gap:2px}
.ax-col-layer{display:grid;grid-template-columns:minmax(140px,190px) 1fr;
align-items:center;gap:20px;padding:18px 22px;background:#F8FAFC;
border-left:4px solid var(--ax-gold)}
.ax-col-layer:first-child{border-radius:2px 2px 0 0}
.ax-col-layer:last-child{border-radius:0 0 2px 2px}
.ax-col-layer-label{font-size:14px;font-weight:700;line-height:1.6;color:var(--ax-navy)}
.ax-col-layer-text{font-size:13px;line-height:1.85;color:#4A5668}

/* --- matrix: two axes, four boxes ----------------------------------------- */
/* Quadrant order is top-left, top-right, bottom-left, bottom-right — reading
   order, so the article file reads the way the picture does. */
.ax-col-matrix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:stretch}
/* `writing-mode` belongs on the labels, not on the flex container.
   Measured 2026-09-04 on the live page: with it on the container, the block
   axis turns horizontal, so `flex-direction:column` laid the two labels out
   SIDE BY SIDE at the top left (x 552 and 577, both y 210) instead of at the
   top and bottom of the axis. The picture said the two ends of the axis were
   the same end. */
.ax-col-axis-y{display:flex;flex-direction:column;justify-content:space-between;
align-items:center;padding:34px 0 0;font-size:11.5px;font-weight:700;
line-height:1.4;color:#5A6679}
.ax-col-axis-y span{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:1px}
.ax-col-matrix-body{min-width:0}
.ax-col-axis-x{display:flex;justify-content:space-between;margin-bottom:10px;
font-size:12px;font-weight:700;letter-spacing:1px;color:#5A6679}
.ax-col-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
background:#E5E9F0;box-shadow:0 0 0 1px #E5E9F0}
.ax-col-cell{padding:20px;background:#fff}
.ax-col-cell h4{margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.6;color:var(--ax-navy)}
.ax-col-cell p{margin:0;font-size:13px;line-height:1.85;color:#4A5668}

@media(max-width:768px){
.ax-col-fig,.ax-col-photo{margin:30px 0}
.ax-col-steps{grid-template-columns:1fr;gap:14px}
/* Vertical run: the connector moves from the right edge to the bottom. */
.ax-col-step:not(:last-child):after{top:auto;bottom:-14px;right:auto;left:35px;
width:1px;height:14px}
.ax-col-branch-items{grid-template-columns:1fr;gap:14px;margin-top:26px}
.ax-col-branch-items:before{top:-26px;height:14px}
/* One column: there is nothing to span, and the stems would point sideways. */
.ax-col-branch-items:after,.ax-col-branch-item:before{display:none}
.ax-col-layer{grid-template-columns:1fr;gap:6px;padding:16px 18px}
.ax-col-matrix{grid-template-columns:1fr;gap:10px}
/* Vertical Japanese down the side needs height to work against, and there is
   none on a phone. The axis becomes a line of text above the grid. */
.ax-col-axis-y{flex-direction:row;justify-content:space-between;padding:0}
.ax-col-axis-y span{writing-mode:horizontal-tb;text-orientation:mixed}
.ax-col-cells{grid-template-columns:1fr}
}