/* FDesign landing pages · author profile
   fdesign.com.gr/dorothy-fiedor

   Page stylesheet for the author profile. Loads AFTER fdesign-landing-core.css
   and only overrides context, never structure: the grids, the counters, the
   card shells and the spacing all stay in core. What changes here is colour.

   Core ships .hero, .case, .vectors, .steps, .callout, .author, .sources and
   .final on dark, which is right for the service pages. This page is a CV in
   web form and reads better on paper tones, so the dark surfaces are repainted
   light with the palette the printed CV uses. The one exception is the
   Experience band (.case), kept dark on purpose. Everything is scoped to
   .fdsec.fd-author, which outranks core's single class without !important and
   cannot leak into the service pages.

   Two components are new here and belong to this page only:
     .timeline  the dated role list down the left of the .case-cols block
     .facts     the small key/value strip under the hero
   If a second page ever needs either one, promote it into core.
   --------------------------------------------------------------------------- */

.fdsec.fd-author{
  --paper-3:#FAFAF8;
  --rule:#E5E4E1;
  --faint:#9B9A95;
  background:var(--paper);
}

/* ---------------------------------------------------------------------------
   Hero, repainted light. The radial wash stays, at a third of the strength,
   because on paper tones the full one reads as a printing fault.
   --------------------------------------------------------------------------- */
.fdsec.fd-author .hero{background:var(--paper-2);color:var(--fg)}
.fdsec.fd-author .hero::after{
  background:radial-gradient(60% 55% at 85% 0%, rgba(255,0,64,.05), transparent 62%),
             radial-gradient(50% 50% at 0% 100%, rgba(52,167,155,.05), transparent 55%);
}
.fdsec.fd-author .hero h1{color:var(--ink)}
.fdsec.fd-author .hero .lead{color:var(--fg-soft)}
.fdsec.fd-author .hero-note{color:var(--fg-soft)}
.fdsec.fd-author .btn-ghost{color:var(--fg);border-color:var(--paper-line)}
.fdsec.fd-author .btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}

/* Portrait beside the hero copy. Squared off like the CV photo block, not
   circled, so it sits with the rest of the page rather than on top of it. */
.fdsec.fd-author .portrait{
  border:1px solid var(--paper-line);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;aspect-ratio:1/1;
  width:100%;max-width:340px;justify-self:end;
}
.fdsec.fd-author .portrait img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.fdsec.fd-author .portrait{justify-self:start;max-width:220px}}

/* Key/value strip under the hero copy: location, languages, years. */
.fdsec.fd-author .facts{
  display:flex;flex-wrap:wrap;gap:.35rem 2.2rem;margin-top:1.8rem;
  padding-top:1.4rem;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:.78rem;color:var(--fg-soft);
}
.fdsec.fd-author .facts b{color:var(--ink);font-weight:600}
.fdsec.fd-author .facts .k{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.15rem;
}

/* ---------------------------------------------------------------------------
   Section shells on light.
   --------------------------------------------------------------------------- */
.fdsec.fd-author .section-paper{background:var(--paper)}
.fdsec.fd-author .section-white{background:var(--paper-2)}
/* The Experience band is the one section left on core's dark .case surface, so
   the page has a single deliberate change of pace between the light sections.
   Core styles the shell; these rules only colour what core leaves unset on dark. */
.fdsec.fd-author .case .lead{color:var(--fg-inv-soft)}
.fdsec.fd-author .case h3{color:#fff}
.fdsec.fd-author .case .timeline li{border-bottom-color:var(--ink-3)}
.fdsec.fd-author .case .timeline .what b{color:#fff}
.fdsec.fd-author .case .timeline .what span,
.fdsec.fd-author .case .timeline .when{color:var(--fg-inv-soft)}

/* Four-up cards, repainted. */
.fdsec.fd-author .vector{background:var(--paper-2);border-color:var(--paper-line)}
.fdsec.fd-author .vector h3{color:var(--ink)}
.fdsec.fd-author .vector p{color:var(--fg-soft)}
.fdsec.fd-author .vector h3 .tag{color:var(--brand-deep);border-color:rgba(196,0,54,.35)}

/* Numbered list. Core puts the counter at top .55rem against a dark rule;
   on paper the rule is lighter and the text sits a hair higher, so the
   offset comes down with it. */
.fdsec.fd-author .steps li{border-bottom-color:var(--rule);color:var(--fg-soft)}
.fdsec.fd-author .steps li::before{color:var(--secure-deep);top:.5rem}
.fdsec.fd-author .steps li strong{color:var(--ink)}

/* Numbered list inside the dark Experience band: back to core's dark values. */
.fdsec.fd-author .case .steps li{border-bottom-color:var(--ink-3);color:var(--fg-inv-soft)}
.fdsec.fd-author .case .steps li::before{color:var(--secure)}
.fdsec.fd-author .case .steps li strong{color:var(--fg-inv)}

/* Editorial standards: the rule names in brand red. Note: #ff0040 on this paper
   ground measures 3.6:1, under the 4.5:1 WCAG AA minimum for text this size.
   var(--brand-deep) measures 5.7:1 if that ever needs to pass an audit. */
.fdsec.fd-author .editorial .steps li strong{color:var(--brand)}

.fdsec.fd-author .callout{background:var(--paper-3);border-color:var(--paper-line);border-left-color:var(--caution)}
.fdsec.fd-author .callout p{color:var(--fg)}
.fdsec.fd-author .callout .k{color:#B77C1E}

/* ---------------------------------------------------------------------------
   Dated role list. Left column of .case-cols, so it inherits the stacking
   behaviour at 820px and needs no breakpoint of its own.
   --------------------------------------------------------------------------- */
.fdsec.fd-author .timeline{list-style:none;padding:0;margin:0}
.fdsec.fd-author .timeline li{
  padding:.95rem 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
}
.fdsec.fd-author .timeline li:last-child{border-bottom:0}
.fdsec.fd-author .timeline .what{font-size:.95rem}
.fdsec.fd-author .timeline .what b{color:var(--ink);font-weight:600;display:block;margin-bottom:.35rem}
.fdsec.fd-author .timeline .what span{color:var(--fg-soft)}
.fdsec.fd-author .timeline .when{
  flex:0 0 auto;font-family:var(--f-mono);font-size:.74rem;color:var(--fg-soft);
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.03em;
}

/* ---------------------------------------------------------------------------
   Author band, credentials and sources on light.
   --------------------------------------------------------------------------- */
/* Overflow fix, not a colour change. Core's .author links row is a nowrap flex
   line, and its grid track is 1fr, whose automatic minimum is the row's
   min-content width. Add a long email address and the track grows past the
   viewport, which is what pushed this page 46px wide at 390. Both declarations
   now live in core as well, since every service page reuses the card; they stay
   here so this page keeps working if an older core is still cached. */
.fdsec.fd-author .author > *{min-width:0}
.fdsec.fd-author .author .links{flex-wrap:wrap;gap:.6rem 1.1rem}

.fdsec.fd-author .author{background:var(--paper-2);border-color:var(--paper-line)}
.fdsec.fd-author .author h3{color:var(--ink)}
.fdsec.fd-author .author p{color:var(--fg-soft)}
.fdsec.fd-author .author .role{color:var(--secure-deep)}
.fdsec.fd-author .author .links a{color:var(--fg);border-bottom-color:var(--paper-line)}
.fdsec.fd-author .author .links a:hover{color:var(--brand-deep);border-color:var(--brand-deep)}
.fdsec.fd-author .creds span{color:var(--fg-soft);border-color:var(--paper-line)}

.fdsec.fd-author .sources{color:var(--fg-soft)}
.fdsec.fd-author .sources .k{color:var(--fg-soft)}
.fdsec.fd-author .sources a{color:var(--secure-deep);border-bottom-color:rgba(31,126,116,.3)}
.fdsec.fd-author .sources a:hover{color:var(--ink)}

/* Closing band. The gradient wash inverts to a faint brand tint on paper. */
.fdsec.fd-author .final{background:var(--paper-2);color:var(--fg)}
.fdsec.fd-author .final::before{background:radial-gradient(50% 90% at 50% 0%, rgba(255,0,64,.06), transparent 62%)}
.fdsec.fd-author .final h2{color:var(--ink)}
.fdsec.fd-author .final .lead{color:var(--fg-soft)}
.fdsec.fd-author .guarantee{color:var(--secure-deep)}

/* ---------------------------------------------------------------------------
   Links. Core resets every link to inherit colour with no underline, which is
   right for buttons and cards and wrong for a link inside running text: on
   this page it would make the portfolio, terms and correction links invisible.
   .inline marks a link in prose; .more is the small "see the page" link that
   closes a card or a list.
   --------------------------------------------------------------------------- */
.fdsec.fd-author a.inline{color:var(--brand-deep);border-bottom:1px solid rgba(196,0,54,.3)}
.fdsec.fd-author a.inline:hover{border-bottom-color:var(--brand-deep)}
.fdsec.fd-author .more{margin:1rem 0 0;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em}
.fdsec.fd-author .more a{color:var(--brand-deep);border-bottom:1px solid rgba(196,0,54,.3)}
.fdsec.fd-author .more a:hover{border-bottom-color:var(--brand-deep)}
.fdsec.fd-author .timeline .what b a:hover{color:var(--brand-deep)}
.fdsec.fd-author .creds a{color:var(--fg)}
.fdsec.fd-author .creds a:hover{color:var(--brand-deep)}

/* ---------------------------------------------------------------------------
   Selected work. Three .cost cards from core, each holding a list of sites with
   a one-line note of what was done. .n is reused as the group label.
   --------------------------------------------------------------------------- */
.fdsec.fd-author .work .n{letter-spacing:.14em;text-transform:uppercase}
.fdsec.fd-author .sites{list-style:none;padding:0;margin:1rem 0 0}
.fdsec.fd-author .sites li{padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:.92rem;line-height:1.45}
.fdsec.fd-author .sites li:last-child{border-bottom:0}
.fdsec.fd-author .sites a,
.fdsec.fd-author .sites b{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
.fdsec.fd-author .sites a:hover{color:var(--brand-deep)}
.fdsec.fd-author .sites span{color:var(--fg-soft);font-size:.86rem}
.fdsec.fd-author .work .note{margin:1rem 0 0;font-size:.86rem;color:var(--fg-soft)}

/* ---------------------------------------------------------------------------
   What I work on. Each card is a column so the service link can sit at the
   bottom centre whatever the length of the text above it.
   --------------------------------------------------------------------------- */
.fdsec.fd-author .services .cost{display:flex;flex-direction:column}
.fdsec.fd-author .services .cost .more{margin-top:auto;padding-top:1.2rem;text-align:center}

/* Closing band. Core already centres .hero-cta in .final; stated again here with
   the width so a theme or builder wrapper cannot pull the buttons off centre. */
.fdsec.fd-author .final .wrap{text-align:center}
.fdsec.fd-author .final .hero-cta{justify-content:center;width:100%;margin-inline:auto}
.fdsec.fd-author .final .hero-cta .btn{float:none;margin:0}

/* Tabular figures for the two places this page stacks digits in a column. */
.fdsec.fd-author .timeline .when,
.fdsec.fd-author .facts{font-variant-numeric:tabular-nums}

/* Links inside the dark Experience band. The paper-tone .inline colour
   (--brand-deep) is too dark to read on the band, so here the text is white
   with a brand underline. */
.fdsec.fd-author .case a.inline{color:#fff;border-bottom:1px solid var(--brand)}
.fdsec.fd-author .case a.inline:hover{color:var(--brand)}