/* 13 June paper mock-ups: new components for the inner pages, built only from the tokens in paper-base.css
   (colour, type scale, spacing, radius, shadow, motion). No new colour, font or size.
   Each block says where it is used. Vibe files (vibe-a.css, vibe-b.css, vibe-c.css) only choose which variant goes where. */

/* ---- inner page basics. Used on all 12 pages: .actions (button and link rows), light buttons on black, the title sheet's drop below the strip,
   .hero-lead (the lead under the title), .text-block--centre (centred intro text on Websites and Pricing), .grid--tight and .grid--top (grid rhythm inside sheets). */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-6)}
.black-section .button{background:var(--color-paper);color:var(--color-ink)}
.black-section .button:focus-visible{outline-color:var(--color-on-black)}
.black-section .text-link:focus-visible{outline-color:var(--color-on-black)}
.paper-sheet--title{margin-top:var(--title-top,280px)}
@media (max-width:1023px){.paper-sheet--title{--title-top:260px}}
@media (max-width:767px){.paper-sheet--title{--title-top:236px}}
.grid--tight{row-gap:0}
.hero-lead{max-width:var(--measure-hero,26em)}
.text-block--centre{text-align:center}
.text-block--centre .text-block__body{margin-inline:auto}
.text-block--centre .actions{justify-content:center}
@media (max-width:767px){
  .button{min-height:44px}
  .text-link{padding-block:11px}
}

/* ---- split: a section title beside its text on one row. Used on every page in Vibes A and B, inside cards in C. */
.split{display:grid;grid-template-columns:subgrid;column-gap:var(--gutter);row-gap:var(--sp-5);padding-block:var(--sp-7);border-top:1px solid var(--color-line-paper);align-items:start}
.split:last-child{border-bottom:1px solid var(--color-line-paper)}
.split__head{grid-column:1 / span var(--h,4)}
.split__body{grid-column:calc(var(--h,4) + 1) / -1}
.split__body>.text-link,.split__body>.actions{margin-top:var(--sp-5)}
.split--black{border-color:var(--color-line-black)}
.split--plain{border:0}
@media (max-width:1023px){
  .split__head,.split__body{grid-column:1 / -1}
}

/* ---- price-ladder (all four pages, every vibe): a two column list of labels and prices. Used for website, AI and branding prices, website support,
   and (terms) for payment terms and the portfolio results. Variants: --ruled (hairlines), --dotted (a dotted leader, on black), --steps (stepped paper cards). */
.price-ladder{display:grid;grid-template-columns:subgrid;list-style:none}
.price-ladder__row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:var(--gutter);row-gap:var(--sp-2);align-items:baseline;padding:var(--sp-5) 0}
.price-ladder__label{grid-column:1 / span var(--lab,4);font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-track)}
.price-ladder__value{grid-column:calc(var(--lab,4) + 1) / -1;font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--text-2,var(--color-ink-2))}
.price-ladder__price{font-family:var(--font-display);font-weight:600;font-size:var(--type-lead-size);line-height:var(--type-lead-lh);letter-spacing:var(--type-lead-track);color:var(--price-ink,var(--color-ink))}
@media (max-width:1023px){
  .price-ladder__label,.price-ladder__value{grid-column:1 / -1}
}
.price-ladder--ruled .price-ladder__row{border-bottom:1px solid var(--color-line-paper)}
.price-ladder--ruled .price-ladder__row:first-child{border-top:1px solid var(--color-line-paper)}
.price-ladder--ruled .price-ladder__row:hover{background:linear-gradient(var(--color-line-paper),var(--color-line-paper)) bottom/100% 1px no-repeat}
/* dotted: the leader is a row of dots, as in the lattice; the price is mono */
.price-ladder--dotted{--text-2:var(--color-on-black-2);--price-ink:var(--color-on-black)}
.price-ladder--dotted .price-ladder__row{background:radial-gradient(circle,rgba(240,240,240,.55) 1px,transparent 1.5px) bottom left/8px 4px repeat-x;padding-bottom:calc(var(--sp-5) + 4px)}
.price-ladder--dotted .price-ladder__price{font-family:var(--font-label);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:var(--type-ui-l-size);line-height:var(--type-ui-l-lh)}
.price-ladder--dotted .price-ladder__row:hover .price-ladder__label{text-decoration:underline;text-underline-offset:6px}
/* steps: each row is a paper card, stepping across by one column like a ladder */
.price-ladder--steps{row-gap:var(--sp-4)}
.price-ladder--steps .price-ladder__row{grid-template-columns:minmax(0,12em) minmax(0,1fr);background:var(--color-paper);border-radius:var(--radius-frame);padding:var(--sp-5) var(--sp-6);filter:var(--shadow-e1);margin-left:calc(var(--i,0) * var(--step));transition:transform var(--dur-small) var(--ease)}
.price-ladder--steps .price-ladder__label,.price-ladder--steps .price-ladder__value{grid-column:auto}
.price-ladder--steps .price-ladder__row:hover{transform:translateY(-3px)}
@media (max-width:1023px){
  .price-ladder--steps .price-ladder__row{margin-left:0;grid-template-columns:1fr}
}

/* ---- rule-list: a plain list of short statements. Used for What I do and Roles. Variants: --ruled, --dots (on black), --cards, --chips. */
.rule-list{list-style:none}
.rule-list li{font-size:var(--type-body-size);line-height:var(--type-body-lh)}
.rule-list--ruled li{padding:var(--sp-4) 0;border-bottom:1px solid var(--color-line-paper);color:var(--color-ink)}
.rule-list--ruled li:first-child{border-top:1px solid var(--color-line-paper)}
.rule-list--dots li{padding:var(--sp-4) 0 calc(var(--sp-4) + 4px);color:var(--color-on-black);background:radial-gradient(circle,rgba(240,240,240,.55) 1px,transparent 1.5px) bottom left/8px 4px repeat-x}
.rule-list--cards{display:grid;gap:var(--sp-3)}
.rule-list--cards li{background:var(--color-paper);border-radius:var(--radius-frame);padding:var(--sp-4) var(--sp-5);filter:var(--shadow-e1);color:var(--color-ink)}
.rule-list--chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.rule-list--chips li{font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:var(--type-ui-lh);padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--color-control-paper);border-radius:var(--radius-control)}
.rule-list--two{columns:2;column-gap:var(--gutter)}
.rule-list--two li{break-inside:avoid}
@media (max-width:1023px){.rule-list--two{columns:1}}

/* ---- dated-list: a short dated history. Used for Experience on About. Variants: --ruled, --timeline (on black), --cards. */
.dated-list{display:grid;grid-template-columns:subgrid}
.dated-list__entry{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:var(--gutter);row-gap:var(--sp-4);padding-block:var(--sp-7)}
.dated-list__title{grid-column:1 / span var(--h,4);text-wrap:balance}
.dated-list__text{grid-column:calc(var(--h,4) + 1) / -1}
.dated-list__date{display:block;margin-top:var(--sp-2);color:var(--color-ink-2)}
@media (max-width:1023px){.dated-list__title,.dated-list__text{grid-column:1 / -1}}
.dated-list--ruled .dated-list__entry{border-top:1px solid var(--color-line-paper)}
.dated-list--ruled .dated-list__entry:last-child{border-bottom:1px solid var(--color-line-paper)}
.dated-list--timeline{--text-2:var(--color-on-black-2)}
.dated-list--timeline .dated-list__entry{position:relative;padding-top:var(--sp-6);border-top:1px solid var(--color-line-black);margin-top:var(--sp-7)}
.dated-list--timeline .dated-list__entry::after{content:"";position:absolute;left:0;top:-7px;width:13px;height:13px;border-radius:50%;background:var(--color-on-black);box-shadow:0 0 0 4px rgba(240,240,240,.1),0 0 16px rgba(240,240,240,.45)}
.dated-list--timeline .dated-list__title,.dated-list--timeline .dated-list__text{grid-column:1 / -1}
.dated-list--timeline .dated-list__title{max-width:var(--measure-body)}
.dated-list--timeline .dated-list__date,.dated-list--timeline .text-block__body{color:var(--color-on-black-2)}
.dated-list--cards{row-gap:var(--sp-5)}
.dated-list--cards .dated-list__entry{background:var(--color-paper);border-radius:var(--radius-frame);padding:var(--sp-6);filter:var(--shadow-e1)}

/* ---- paper-card: an off-white card that sits on a grey sheet. Used for grouped text in Vibe C. */
.paper-card{background:var(--color-paper);border-radius:var(--radius-frame);padding:var(--sp-7) var(--sp-6);filter:var(--shadow-e1);color:var(--color-ink)}
.paper-card .section-title{margin-bottom:var(--sp-5)}
.paper-card .text-block__body+.text-block__body{margin-top:var(--sp-4)}

/* ---- project-card: a project, its cover and its card line. Used in the portfolio groups.
   Variants: --row (a small circle and text on a hairline row), --tile (a 16:9 screen on black), --circle (a large pressed-in circle on a grey sheet). */
.project-grid{display:grid;grid-template-columns:subgrid}
.project-card{position:relative;display:block;text-decoration:none;color:inherit;outline:none}
.project-card__name{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-track)}
.project-card__line{display:block;margin-top:var(--sp-2);font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--text-2,var(--color-ink-2))}
.project-card__face .circle-item__face{width:100%}
.project-card:hover .circle-item__face,.project-card:focus-visible .circle-item__face{transform:translateY(-6px) scale(1.035);box-shadow:var(--lift-out)}
.project-card:hover .circle-item__face::after,.project-card:focus-visible .circle-item__face::after{opacity:0}
.project-card:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:4px}
.project-card--row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:var(--gutter);align-items:center;padding:var(--sp-5) 0;border-bottom:1px solid var(--color-line-paper)}
.project-card--row:first-child{border-top:1px solid var(--color-line-paper)}
.project-card--row .project-card__face{grid-column:1 / span 1;width:min(100%,96px)}
.project-card--row .project-card__text{grid-column:2 / -1}
.project-card--row .project-card__name{display:inline-block;position:relative;padding-bottom:var(--sp-1)}
.project-card--row .project-card__name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-small) var(--ease)}
.project-card--row:hover .project-card__name::after,.project-card--row:focus-visible .project-card__name::after{transform:scaleX(1)}
@media (max-width:767px){.project-card--row .project-card__face{width:64px}.project-card--row .project-card__text{grid-column:2 / -1}}
.project-card--tile{--text-2:var(--color-on-black-2)}
.project-card__frame{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--color-black);border-radius:var(--radius-frame);box-shadow:var(--glow-side),0 0 0 1px rgba(240,240,240,.08),0 2px 4px rgba(0,0,0,.5);transition:box-shadow var(--dur-large) var(--ease),transform var(--dur-large) var(--ease)}
.project-card__frame img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.project-card__frame .circle-item__face{height:84%;aspect-ratio:1;width:auto}
.project-card--tile:hover .project-card__frame,.project-card--tile:focus-visible .project-card__frame{transform:translateY(-4px);box-shadow:var(--glow-centre),0 0 0 1px rgba(240,240,240,.16),0 2px 4px rgba(0,0,0,.5)}
.project-card--tile .project-card__name{margin-top:var(--sp-4)}
.project-card--circle{text-align:center}
.project-card--circle .project-card__name{margin-top:var(--sp-5);font-size:var(--type-ui-size);line-height:var(--type-ui-lh)}
.project-card--circle .project-card__line{margin-top:var(--sp-1)}
.project-card--circle .project-card__face{display:block;width:min(100%,200px);margin-inline:auto}

/* ---- portrait: the portrait A002. Used on About only. Variants: --screen (16:9 crop), --circle (a circle cut-out). */
.portrait{margin:0;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--screen{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-frame);box-shadow:var(--glow-side),0 0 0 1px rgba(20,20,20,.12),0 2px 4px rgba(0,0,0,.3)}
.portrait--screen img{object-position:50% 22%}
.portrait--circle{aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--press-rim)}
.portrait--circle img{object-position:50% 24%}
.portrait--circle::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:var(--press-in)}

/* ---- solo screen: the carousel's own card shown on its own. Used for the one website example on Websites in Vibes B and C. */
.screen-carousel__track--solo{--cw:100%;display:block;overflow:visible;padding:0;margin:0;scroll-snap-type:none}
.screen-carousel__track--solo .screen-card{flex:none;width:100%;transform:none}
.screen-carousel__caption{position:relative;z-index:4;margin-top:var(--sp-6);text-align:center}
.screen-carousel__caption .text-block__body{margin-inline:auto}

/* ---- cta-band: the closing call to action on black (Vibe A) */
.cta-band{text-align:center}
.cta-band .text-block__body{margin-inline:auto;color:var(--color-on-black-2)}
.cta-band .actions{justify-content:center;margin-top:var(--sp-6)}
.text-block .actions{margin-top:var(--sp-6)}
.paper-card .item-title{margin-bottom:var(--sp-3)}

/* ---- additions. Used on: .price-ladder--stack (Portfolio A results, Pricing B payment), .split__body--grid and .project-grid (Portfolio A),
   .col-auto and .project-tile-wrap (Portfolio B tiles), .goal-portrait (About A), .portrait-wrap and .portrait-black (About B and C). */
.price-subhead{margin-top:var(--sp-6);padding-bottom:var(--sp-2)}
.price-ladder--stack .price-ladder__label,.price-ladder--stack .price-ladder__value{grid-column:1 / -1}
.split__body--grid{display:grid;grid-template-columns:subgrid}
.split__body--grid>*{grid-column:1 / -1}
.project-flex{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-7) var(--gutter)}
.project-flex>.project-card{flex:0 0 calc((100% - 3 * var(--gutter)) / 4)}
.project-flex--one>.project-card{flex-basis:min(100%,240px)}
@media (max-width:1023px){.project-flex>.project-card{flex-basis:calc((100% - var(--gutter)) / 2)}}
@media (max-width:479px){.project-flex>.project-card{flex-basis:100%}}
.project-card--circle .project-card__text{display:block;margin-top:var(--sp-5)}
.project-card--circle .project-card__name{margin-top:0}
.project-card--tile{align-self:start}
.grid--top{align-items:start}
.goal-portrait{margin-top:var(--sp-7)}
.portrait-wrap{align-self:center}
.portrait-black{margin-bottom:var(--sp-11)}
.col-auto{grid-column:auto / span var(--span,4)}
@media (max-width:1023px){.col-auto{grid-column:auto / span var(--span-t,4)}}
@media (max-width:767px){.col-auto{grid-column:auto / span var(--span-p,4)}}
.project-tile-wrap{margin-top:var(--sp-6)}
.project-tile-wrap>.project-card{margin-top:0}
/* the Vibe C title sheet is only a title, so it is given more height to keep the curves round (every curve radius at least 40px) */
.paper-sheet--over.paper-sheet--title{--sheet-pad-top:var(--sp-10);--sheet-pad-bottom:var(--sp-10)}
.paper-sheet--over.paper-sheet--title{min-height:400px}
@media (max-width:1023px){.paper-sheet--over.paper-sheet--title{min-height:340px}}
@media (max-width:767px){.paper-sheet--over.paper-sheet--title{min-height:250px}}
/* reduced motion: the new hover and focus states change colour or line only, nothing moves */
@media (prefers-reduced-motion:reduce){
  .price-ladder--steps .price-ladder__row:hover{transform:none}
  .project-card:hover .circle-item__face,.project-card:focus-visible .circle-item__face{transform:none;box-shadow:var(--press-rim)}
  .project-card--tile:hover .project-card__frame,.project-card--tile:focus-visible .project-card__frame{transform:none}
}