/* The CV page on the operandor design system: every colour, size and font is one of operandor.css's tokens, so the
   light and dark themes follow the design system. Mobile first where it matters; the page reads in one column below
   960px. The script's states (focus, filter, search, one-page view) are classes and data attributes styled here. */

body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page)}
.cv-page{min-height:100vh;display:flex;flex-direction:column}
/* The script hides and shows elements with the hidden attribute; components such as the design system's buttons set a
   display of their own, which would win over the browser's [hidden] rule. */
.cv-page [hidden]{display:none !important}
.cv-main{flex:1}
.cv-main :target{scroll-margin-top:96px}

/* Skip link: off screen until focused. */
.cv-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface-card);color:var(--text-link);padding:8px 16px;border-radius:var(--radius-2);box-shadow:var(--shadow-raised)}
.cv-skip:focus{left:16px}

/* The brand in the header: operandor's mark without its name, then the person's name. */
.cv-brand{display:inline-flex;align-items:center;gap:12px;font-weight:var(--fw-semibold);font-size:17px;letter-spacing:-0.01em;color:var(--text-heading);white-space:nowrap}
.cv-brand__mark{display:inline-flex;flex:none}
.cv-brand__mark--compact{display:none}
@media (max-width:640px){.cv-brand__mark--wide{display:none}.cv-brand__mark--compact{display:inline-flex}}
/* The operandor chevron (∧) of the highlights' bullets. */
:root{--cv-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1.5 9.5 L8 2.5 L14.5 9.5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E")}

/* Hero */
.cv-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:56px;align-items:start}
.cv-hero__name{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.375rem);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-semibold);color:var(--text-heading);margin:20px 0 12px}
.cv-hero__title{font-size:var(--fs-h4);line-height:var(--lh-tight);font-weight:var(--fw-medium);color:var(--text-heading);margin:0}
.cv-hero__tagline{font-family:var(--font-mono);font-size:var(--fs-body-sm);letter-spacing:var(--ls-mono);color:var(--text-muted);margin:8px 0 0}
.cv-hero__summary{font-size:var(--fs-body-lg);line-height:var(--lh-body);max-width:var(--measure-prose);margin:28px 0 0}
/* The tailored view's note, under the job title: a box, not a pill, as a pill's round ends would squeeze a wrapped line. */
.cv-view-note{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 10px;width:fit-content;max-width:100%;box-sizing:border-box;margin:16px 0 8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:8px;background:var(--surface-accent-tint);color:var(--text-heading);font-size:var(--fs-body-sm)}
.cv-view-note .cv-glyph{margin-top:calc((1lh - 18px) / 2);color:var(--accent)}
/* The text takes at most the line's width less the glyph and its gap (18px and 10px), so a long text wraps beside the
   glyph instead of starting a line of its own under it. */
.cv-view-note > span{min-width:0;max-width:calc(100% - 28px)}
.cv-view-note__full{display:inline-flex;align-items:center;gap:6px;color:var(--text-link);font-weight:var(--fw-medium);white-space:nowrap}
.cv-hero__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cv-availability{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-on-accent-tint);background:var(--surface-accent-tint);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:4px 12px 4px 10px;border-radius:var(--radius-full)}
a.cv-availability:hover{border-color:var(--accent)}
.cv-availability__dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-400) 25%,transparent)}
.cv-availability--onrequest .cv-availability__dot{background:var(--text-subtle);box-shadow:none}
.cv-hero__facts{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:24px;box-shadow:var(--shadow-card)}
.cv-facts{margin:0;display:grid;gap:16px}
.cv-facts__row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start}
.cv-facts dt{color:var(--text-muted);padding-top:4px;margin:0}
.cv-facts dd{margin:0;color:var(--text-body);overflow-wrap:anywhere}
/* The separator closes the item before it, so a wrapped line ends with the dot instead of starting with it. */
.cv-facts__profile:not(:last-child)::after{content:"·";color:var(--text-subtle);margin:0 8px}
.cv-hero__all-downloads{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-subtle);width:100%;font-weight:var(--fw-medium)}

/* Filter panel: the reader's tools in a dialog the header's button opens. On a wide screen it sits under the header, at the
   right, and the page makes room for it; on a phone it is a bottom sheet over a backdrop (the narrow-screen rules below). */
.cv-glyph{flex:none}
.cv-filter-toggle{position:relative;display:inline-flex;flex:none;align-items:center;gap:8px;height:32px;padding:0 var(--sp-4);border:1px solid var(--border-default);border-radius:var(--radius-2);background:transparent;color:var(--text-heading);font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.cv-filter-toggle:hover,.cv-filter-toggle[aria-expanded="true"]{background:var(--surface-hover)}
.cv-filter-toggle:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.cv-filter-toggle__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;min-height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent);color:var(--text-on-accent);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:0;line-height:1}
/* The script closes the panel when a click's target is the dialog itself, as a tap on a phone's backdrop is, so the dialog
   has no padding, border or scrollbar of its own: the inner element has them all and fills it. The head sticks to the top
   as the panel scrolls, and scroll-padding keeps a focused control from sliding under it. The panel starts under the
   sticky header: the script measures it when the panel opens, and 73px is design system 0.2.0's 72px header and border. */
.cv-panel[open]{position:fixed;top:var(--cv-panel-top,73px);right:0;bottom:0;left:auto;z-index:20;box-sizing:border-box;width:360px;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--surface-card);color:var(--text-body)}
.cv-panel__inner{--cv-panel-pad:20px;box-sizing:border-box;height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:72px;padding:0 var(--cv-panel-pad) 24px;border-left:1px solid var(--border-subtle)}
.cv-panel__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 calc(var(--cv-panel-pad) * -1);padding:12px var(--cv-panel-pad);background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.cv-panel__title{margin:0;font-family:var(--font-heading);font-size:var(--fs-h4);line-height:var(--lh-tight);font-weight:var(--fw-semibold);color:var(--text-heading)}
/* The space between the fields is a margin, not a grid gap, so the search's status line takes none while it is empty. */
.cv-panel__fields{display:grid;margin-top:20px}
.cv-panel__fields > * + *{margin-top:16px}
.cv-field{display:grid;gap:6px;min-width:0}
.cv-field .op-select{max-width:none}
.cv-field__label{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-muted)}
.cv-switch{display:flex;border:1px solid var(--border-default);border-radius:var(--radius-2);overflow:hidden;height:40px}
.cv-switch__option{flex:1 1 0;border:0;background:var(--surface-card);padding:0 14px;font:inherit;font-size:var(--fs-body-sm);color:var(--text-body);cursor:pointer}
.cv-switch__option + .cv-switch__option{border-left:1px solid var(--border-default)}
.cv-switch__option[aria-pressed="true"]{background:var(--accent);color:var(--text-on-accent)}
.cv-switch__option:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:-2px}
/* The hits and the status line close up to the search field above them. */
.cv-tools__status{margin:8px 0 0;font-size:var(--fs-caption);color:var(--text-muted)}
.cv-tools__status:empty{margin:0}
.cv-search-results{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.cv-search-results[hidden]{display:none}
/* A long title wraps on a phone, which a pill's round ends would squeeze. */
.cv-search-results a{font-size:var(--fs-body-sm);padding:4px 10px;border:1px solid var(--border-default);border-radius:var(--radius-4);background:var(--surface-card)}
/* The copy button's label changes for a moment to a longer one in some languages, so the buttons wrap onto a second line
   and a button's own text wraps before it overflows. */
.cv-panel__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cv-panel__actions .op-btn{max-width:100%;height:auto;min-height:32px;padding-top:5px;padding-bottom:5px;line-height:1.3;text-align:center}
.cv-match{margin-top:20px;border-top:1px solid var(--border-subtle);padding-top:12px}
.cv-match__summary{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-weight:var(--fw-medium);color:var(--text-heading)}
.cv-match__summary .op-icon{margin-top:calc((1lh - 18px) / 2)}
.cv-match__body{display:grid;gap:10px;margin-top:12px}
.cv-match__body .op-btn{justify-self:start}
.cv-match__result{font-size:var(--fs-body-sm)}
.cv-match__result ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.cv-panel__clear{display:block;margin-top:16px;padding:6px 0;border:0;background:none;font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-link);cursor:pointer}
.cv-panel__clear:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
.cv-panel__clear:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
/* Below 1360px the panel lies over the content, so it casts a shadow; from there up the page makes room for it beside the
   920px column, so the reader sees each change take effect. Screen only: a zoomed print's width can pass the breakpoint. */
@media (max-width:1359.98px){.cv-panel[open]{box-shadow:var(--shadow-raised)}}
@media screen and (min-width:1360px){html.cv-panel-open .cv-main,html.cv-panel-open .op-footer{margin-right:360px}}

/* Sections */
.cv-sections{max-width:920px;margin:0 auto;display:grid;gap:72px}
.cv-section__head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--border-subtle);padding-bottom:12px;margin-bottom:28px}
.cv-section__title{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0}
.cv-subtitle{font-size:var(--fs-caption);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);margin:32px 0 14px}
.cv-anchor{font-family:var(--font-mono);color:var(--text-subtle);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);padding:0 4px;border-radius:var(--radius-1)}
.cv-section__head:hover .cv-anchor,.cv-item__head:hover .cv-anchor,.cv-anchor:focus-visible{opacity:1}
@media (hover:none){.cv-anchor{opacity:1}}
.cv-anchor.is-copied{color:var(--accent);opacity:1}

/* Strengths */
.cv-strengths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cv-strength{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-3);padding:20px 22px}
.cv-strength__title{font-size:var(--fs-body);line-height:var(--lh-tight);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0 0 8px}
.cv-strength__summary{margin:0;font-size:var(--fs-body-sm);color:var(--text-body)}

/* Positions and projects */
.cv-items{display:grid;gap:44px}
.cv-item{position:relative;transition:opacity var(--dur-base) var(--ease-standard)}
.cv-item__head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.cv-item__title{font-size:var(--fs-h4);line-height:var(--lh-tight);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0}
.cv-item__org,.cv-item__client{display:block;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--accent);margin-top:4px}
.cv-item__meta{grid-column:1;display:flex;flex-wrap:wrap;gap:2px 0;margin:6px 0 0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.cv-item__meta > span:not(:last-child)::after{content:"·";margin:0 10px;color:var(--text-subtle)}
.cv-item__head .cv-anchor{grid-column:2;grid-row:1}
.cv-item__note{margin:6px 0 0;font-size:var(--fs-body-sm);font-style:italic;color:var(--text-muted)}
.cv-item__summary{margin:12px 0 0;max-width:var(--measure-prose)}
.cv-highlights{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-width:var(--measure-prose)}
.cv-highlights li{position:relative;padding-left:24px}
.cv-highlights li::before{content:"";position:absolute;left:2px;top:0.62em;width:11px;height:8px;background:var(--accent);-webkit-mask:var(--cv-chevron) no-repeat center/contain;mask:var(--cv-chevron) no-repeat center/contain}
.cv-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cv-tags .op-tag{transition:background var(--dur-fast),border-color var(--dur-fast)}
.cv-engagements{margin-top:28px;padding-left:22px;border-left:2px solid var(--border-subtle);display:grid;gap:32px}
.cv-engagements__title{font-size:var(--fs-micro);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);margin:0}
.cv-engagement .cv-item__title{font-size:var(--fs-body-lg)}

/* Timeline: the chart is as wide as the column and as tall as its height attribute, so its text keeps its size. The
   position bars' and their labels' colours are properties, which the legend's key shares and the dark theme sets. */
.cv-timeline{--cv-bar-position:var(--slate-500);--cv-bar-label:var(--n-0);margin:0 0 48px}
.cv-timeline__chart{display:block;width:100%;overflow:visible}
.cv-timeline__tick{stroke:var(--border-subtle);stroke-width:1}
.cv-timeline__year{fill:var(--text-subtle);font-family:var(--font-mono);font-size:12px}
.cv-timeline__bar{transition:opacity var(--dur-fast)}
.cv-timeline__bar--position{fill:var(--cv-bar-position)}
.cv-timeline__bar--engagement{fill:var(--accent)}
.cv-timeline__link:hover .cv-timeline__bar,.cv-timeline__bar.is-dim{opacity:0.35}
.cv-timeline__link:hover .cv-timeline__bar{opacity:0.8}
.cv-timeline__label{fill:var(--cv-bar-label);font-family:var(--font-body);font-size:12px;font-weight:var(--fw-medium);pointer-events:none}
.cv-timeline__legend{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:var(--fs-caption);color:var(--text-muted)}
.cv-timeline__key{display:inline-flex;align-items:center;gap:8px}
.cv-timeline__key::before{content:"";width:14px;height:8px;border-radius:2px;background:var(--cv-bar-position)}
.cv-timeline__key--engagement::before{background:var(--accent)}
:root[data-theme="dark"] .cv-timeline{--cv-bar-position:var(--slate-300);--cv-bar-label:var(--n-950)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .cv-timeline{--cv-bar-position:var(--slate-300);--cv-bar-label:var(--n-950)}}

/* Skills */
/* The legend sits close under the heading, whose margin is for content. */
.cv-scale{display:grid;gap:8px;margin:-12px 0 28px;font-size:var(--fs-caption);color:var(--text-muted)}
.cv-scale__steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}
.cv-scale__step{display:inline-flex;align-items:center;gap:8px}
.cv-scale__note{margin:0;max-width:var(--measure-prose)}
.cv-skill-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px 48px}
/* Levels written in more than a word: a wider level column, and wider groups to keep room for the name. */
.cv-skill-groups--long-levels{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.cv-skill-groups--long-levels .cv-skill__row{grid-template-columns:minmax(0,1fr) auto 20ch}
.cv-skill-group__title{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0 0 8px}
.cv-skills{list-style:none;margin:0;padding:0}
.cv-skill{border-bottom:1px solid var(--border-subtle)}
.cv-skill__row{display:grid;grid-template-columns:minmax(0,1fr) auto 10ch;align-items:center;gap:12px;padding:8px 0}
summary.cv-skill__row{cursor:pointer;list-style:none}
summary.cv-skill__row::-webkit-details-marker{display:none}
summary.cv-skill__row:hover .cv-skill__name{color:var(--text-link)}
.cv-skill__label{display:flex;flex-direction:column;min-width:0}
.cv-skill__name{color:var(--text-heading);overflow-wrap:anywhere}
.cv-skill__used{font-size:var(--fs-caption);color:var(--text-muted)}
summary.cv-skill__row .cv-skill__name{text-decoration:underline dotted var(--text-subtle);text-underline-offset:4px}
.cv-skill__level{font-size:var(--fs-caption);color:var(--text-muted);text-align:right}
.cv-meter{--cv-step:15px;position:relative;display:inline-block;width:calc(var(--cv-step) * 5 - 3px);height:6px;background:repeating-linear-gradient(to right,var(--border-default) 0 12px,transparent 12px var(--cv-step))}
.cv-meter::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--cv-step) * var(--cv-level) - 3px);background:repeating-linear-gradient(to right,var(--accent) 0 12px,transparent 12px var(--cv-step))}
.cv-meter--1{--cv-level:1}.cv-meter--2{--cv-level:2}.cv-meter--3{--cv-level:3}.cv-meter--4{--cv-level:4}.cv-meter--5{--cv-level:5}
.cv-evidence{padding:4px 0 14px;font-size:var(--fs-body-sm)}
.cv-evidence__span{margin:0 0 6px;color:var(--text-muted)}
.cv-evidence__items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}

/* Education, awards, languages */
.cv-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cv-list__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px}
.cv-list__title{font-weight:var(--fw-medium);color:var(--text-heading)}
.cv-list__detail{grid-column:1;font-size:var(--fs-body-sm)}
.cv-list__date{grid-column:2;grid-row:1;font-size:var(--fs-body-sm);font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap}
.cv-list__summary{grid-column:1/-1;font-size:var(--fs-body-sm);color:var(--text-muted)}
.cv-list__points{grid-column:1/-1;margin:4px 0 0;padding-left:20px;font-size:var(--fs-body-sm);color:var(--text-muted)}
.cv-languages{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 32px}
.cv-languages__row{border-bottom:1px solid var(--border-subtle);padding-bottom:8px}
.cv-languages dt{font-weight:var(--fw-medium);color:var(--text-heading)}
.cv-languages dd{margin:2px 0 0;font-size:var(--fs-body-sm);color:var(--text-muted)}

/* Downloads */
.cv-downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cv-download-group{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-3);padding:20px 22px}
.cv-download-group__title{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0}
.cv-download-group__hint{margin:6px 0 14px;font-size:var(--fs-caption);color:var(--text-muted)}
.cv-download-group__files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* The icon sits on a label's first line, which may wrap. */
.cv-download{display:inline-flex;align-items:flex-start;gap:8px;font-weight:var(--fw-medium)}
.cv-download .op-icon{margin-top:calc((1lh - 16px) / 2)}
.cv-download:hover{color:var(--text-link-hover)}
/* A tailored version: the profile, then its formats on one line. */
.cv-download-row{display:grid;gap:2px}
.cv-download-row__label{font-size:var(--fs-body-sm);color:var(--text-body)}
.cv-download-row__files{display:flex;flex-wrap:wrap;gap:2px 20px}

/* The script's states. */
.cv-main[data-cv-view="short"] [data-cv-short="false"],.cv-main[data-cv-view="short"] [data-cv-extra]{display:none}
.cv-dim{opacity:0.35}
.cv-dim:hover,.cv-dim:focus-within{opacity:0.75}
/* A search hit's or a profile's item: a bar in the gutter, apart from the text. */
.cv-hit,.cv-focus{position:relative}
.cv-hit::before,.cv-focus::before{content:"";position:absolute;left:-14px;top:2px;bottom:2px;width:3px;border-radius:var(--radius-full);background:var(--accent)}
.op-tag.cv-tag--match,.op-tag.cv-tag--ad{border-color:var(--accent);background:var(--surface-accent-tint);color:var(--text-on-accent-tint)}
.cv-skill--match .cv-skill__name,.cv-skill--ad .cv-skill__name{color:var(--accent);font-weight:var(--fw-medium)}

/* Narrow screens */
@media (max-width:960px){
  .cv-hero{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .cv-sections{gap:56px}
  /* The filter button shows its glyph and badge only. The label is the button's one accessible name (the badge is hidden
     from assistive technology), so it is visually hidden with the design system's own declarations, never display:none. */
  .cv-filter-toggle{height:30px;padding:0 8px;gap:6px}
  .cv-filter-toggle__label{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}
  /* The panel is a bottom sheet, three quarters of the screen high (vh for browsers without dvh), over a backdrop. */
  .cv-panel[open]{top:auto;left:0;right:0;width:auto;height:75vh;height:75dvh;border-radius:var(--radius-4) var(--radius-4) 0 0}
  .cv-panel__inner{border-left:0;border-top:1px solid var(--border-subtle);border-radius:inherit}
  .cv-panel::backdrop{background:var(--scrim,rgba(20,24,28,.44))}
  .cv-view-note__full{flex-basis:100%}
  .cv-skill-groups{grid-template-columns:1fr}
  .cv-skill__row{grid-template-columns:minmax(0,1fr) auto 8ch;gap:10px}
  /* A long level goes on its own line under the name, where it has the row's whole width. */
  .cv-skill-groups--long-levels{grid-template-columns:1fr}
  .cv-skill-groups--long-levels .cv-skill__row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .cv-skill-groups--long-levels .cv-skill__level{grid-column:1/-1;text-align:left}
  .cv-engagements{padding-left:14px}
  .cv-list__item{grid-template-columns:1fr}
  .cv-list__date{grid-column:1;grid-row:auto}
  .cv-timeline__label{display:none}
}

/* Not-found page: operandor.io's own rules, which live in its site stylesheet, not in the design system's. Its one band
   fills the main area, which grows to the window's height, so no strip of the page's background shows above the footer. */
.cv-main--notfound{display:flex;flex-direction:column}
.cv-main--notfound > .op-band{flex:1}
.op-notfound{display:flex;flex-direction:column;align-items:center;text-align:center}
.op-notfound__drawing{width:min(100%,560px);height:auto}
.op-notfound__number{font-family:var(--font-mono);font-weight:500;font-size:clamp(4.5rem,3rem + 6vw,8rem);line-height:1;letter-spacing:-0.04em;color:var(--text-heading);margin:28px 0 0}
.op-notfound__languages{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* Print: the reader's current view (full or one page, with a focus) in the light theme, without the site's chrome.
   The downloads hold the designed PDF; this is the page as the reader arranged it. */
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme]){--surface-page:#fff;--surface-card:#fff;--surface-accent-tint:#F1FBE6;--text-heading:#14181C;--text-body:#333833;--text-muted:#636A61;--text-subtle:#7F857C;--text-link:#2D7612;--text-on-accent-tint:#164B10;--border-subtle:#E8EAE6;--border-default:#D6D9D3;--accent:#2D7612;--brand-mark:#3E891A;color-scheme:light}
  @page{margin:14mm 14mm 16mm}
  body{background:#fff;font-size:10pt}
  .op-header,.op-footer,.cv-panel,.cv-anchor,.cv-hero__actions,.cv-hero__all-downloads,.cv-section--downloads,.cv-skip,.cv-timeline,.cv-view-note__full{display:none !important}
  /* The note prints as plain text, as the focus line did: its glyph and link are for the screen, and the text needs no
     room for a glyph that is not there. */
  .cv-view-note{margin:12px 0 0;padding:0;border:0;background:none}
  .cv-view-note > span{max-width:none}
  .cv-view-note .cv-glyph{display:none}
  .op-band{padding:0 !important;background:#fff !important}
  .cv-hero{grid-template-columns:minmax(0,1fr) 200px;gap:24px;margin-bottom:18px}
  .cv-hero__name{font-size:24pt;margin-top:0}
  .cv-hero__summary{font-size:10.5pt;margin-top:12px}
  .cv-hero__facts{box-shadow:none;padding:12px}
  .cv-sections{gap:20px;max-width:none}
  .cv-section__head{margin-bottom:12px;padding-bottom:6px}
  .cv-section__title{font-size:14pt}
  .cv-items{gap:16px}
  .cv-item,.cv-strength,.cv-skill-group,.cv-list__item{break-inside:avoid}
  .cv-section__head,.cv-item__head{break-after:avoid}
  .cv-dim{opacity:1}
  .cv-meter,.cv-meter::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cv-strengths{grid-template-columns:1fr 1fr}
  .cv-skill-groups{grid-template-columns:1fr 1fr;gap:12px 24px}
  .cv-skill__row{padding:3px 0}
  details > :not(summary){display:none}
  a{color:inherit}
}