/* personal.css | frankvitetta.org
   Cobalt on pale paper, system type, no scripts.
   Mobile first: the base rules are the phone layout. Wider layouts are added at 701px and 1001px. */

:root{
--blue:#2149ef;
--navy:#101a38;
--ink:#141a25;
--paper:#fafbfe;
--white:#fff;
--pale:#f0f3f8;
--tint:#edf1fa;
--tint-line:#d4ddf1;
--panel:#e8edf6;
--foot:#e9eef8;
--foot-line:#ccd5e7;
--line:#d9dee7;
--field:#7a8598;
--muted:#566176;
--copy:#3c4759;
--soft:#4a5465;
--num:#8390ab;
--yellow:#edff78;
--sans:Arial,Helvetica,sans-serif;
--serif:Georgia,'Times New Roman',serif;
--edge:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
::selection{background:var(--yellow);color:var(--navy)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.personal-table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
strong{font-weight:700}

.fv-skip{position:absolute;left:12px;top:10px;z-index:5;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fv-skip:focus{clip-path:none;width:auto;height:auto;padding:14px 16px;background:var(--white);color:var(--blue);font-size:15px;font-weight:700;outline-offset:0}

/* Shell */
.personal-header,.fv-main{max-width:1390px;margin:0 auto;padding-left:var(--edge);padding-right:var(--edge)}
.personal-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.personal-logo{display:inline-flex;align-items:center;min-height:44px;font-size:20px;line-height:1.2;letter-spacing:-.8px;font-weight:700;white-space:nowrap}
.personal-logo:hover{color:var(--ink)}
.personal-logo span{color:var(--blue)}
.personal-nav{display:flex;align-items:center;gap:18px;font-size:14px;line-height:1.2}
.personal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1px}
.personal-nav a[aria-current]{color:var(--blue);font-weight:700}
.personal-nav a:last-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* Small labels */
.personal-kicker{display:block;font-size:11px;line-height:1.6;letter-spacing:1.45px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.fv-category{display:block;font-size:11px;line-height:1.5;letter-spacing:1.15px;font-weight:700;text-transform:uppercase;color:var(--blue)}
.personal-meta{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.fv-trail ol{list-style:none;display:flex;flex-wrap:wrap}
.fv-trail li+li::before{content:"/";margin:0 .7em;color:var(--num)}
.fv-trail a{color:var(--muted);padding:16px 0}
.fv-trail a:hover{color:var(--blue)}

/* Buttons and quiet links */
.personal-button{display:inline-flex;align-items:center;gap:26px;min-height:50px;font-family:var(--sans);font-size:15px;line-height:1.2;font-weight:400;color:var(--white);background:var(--blue);border:0;border-radius:0;padding:14px 20px;cursor:pointer;transition:background-color .2s,transform .2s}
.personal-button span{font-size:22px;line-height:1}
.personal-button:hover{background:var(--navy);color:var(--white);transform:translateY(-2px)}
.quiet-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.intro-actions{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;margin-top:26px}

/* Display lines: the emphasised phrase is set in blue, not italic */
.personal-intro h1 em,.page-heading h1 em,.info-page h1 em,.article-masthead h1 em,.fv-display em{font-style:normal;color:var(--blue)}
.fv-display{font-size:30px;line-height:1.14;font-weight:400;letter-spacing:-.9px;color:var(--ink);text-wrap:balance}

/* Home: introduction and picture */
.personal-hero{padding:34px 0 44px}
.personal-intro h1{font-size:clamp(33px,9.4vw,52px);line-height:1.08;letter-spacing:-.04em;font-weight:400;margin:16px 0 0;text-wrap:balance}
.personal-intro>p{font-size:17px;line-height:1.7;color:var(--muted);max-width:560px;margin-top:20px}
.personal-visual{position:relative;display:grid;grid-template-rows:230px auto;background:var(--panel);padding-top:38px;margin-top:38px;overflow:hidden}
.personal-visual img{width:100%;height:100%;min-height:0;object-fit:cover}
.visual-corner{position:absolute;top:13px;left:16px;font-size:10px;line-height:1.3;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.visual-caption{display:flex;justify-content:space-between;gap:4px 20px;flex-wrap:wrap;padding:14px 16px;font-size:10px;line-height:1.4;letter-spacing:1px;text-transform:uppercase;color:#48566f}

/* Home: journal */
.selected-writing{border-top:1px solid var(--ink);padding:34px 0 46px}
.personal-section-header{margin-bottom:28px}
.personal-section-header .fv-display{margin-top:14px;max-width:800px}
.personal-section-header>p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:16px}
.personal-feature{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:var(--tint);border-top:1px solid var(--tint-line);border-bottom:1px solid var(--tint-line);padding:24px 22px 26px}
.feature-index{display:flex;align-items:center;gap:18px}
.feature-index>span{display:block;font-size:30px;line-height:1;letter-spacing:-1px;color:var(--blue)}
.feature-index small{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.personal-feature h3,.personal-story h3{font-size:25px;line-height:1.2;font-weight:400;letter-spacing:-.6px;text-wrap:balance}
.personal-feature p,.personal-story p{font-size:16px;line-height:1.7;color:var(--muted);margin:14px 0}
.feature-plus{display:none}
.personal-feature h3 a::after,.personal-story h3 a::after,.news-row h2 a::after{content:"";position:absolute;inset:0}
.personal-feature:hover h3 a,.personal-story:hover h3 a{color:var(--blue)}
.personal-secondary-grid{margin-top:10px}
.personal-story{position:relative;padding:26px 0;border-bottom:1px solid var(--line)}
.personal-story h3{margin:14px 0}
.all-writing{margin-top:22px}

/* Home: themes */
.personal-themes{border-top:1px solid var(--line);padding:36px 0 50px}
.theme-card{border-top:1px solid var(--ink);padding-top:20px;margin-top:34px}
.theme-number{display:block;font-size:36px;line-height:1;letter-spacing:-1.5px;color:var(--blue);margin:14px 0 16px}
.theme-card h3{font-size:25px;line-height:1.2;letter-spacing:-.6px;font-weight:400}
.theme-card p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:14px}
.theme-card .theme-start{font-size:16px;line-height:1.9;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.theme-start a,.personal-note a,.personal-intro>p:not(.intro-actions) a,.personal-section-header>p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.theme-start a:hover,.personal-note a:hover,.personal-intro>p:not(.intro-actions) a:hover,.personal-section-header>p a:hover{color:var(--blue)}

/* Home: about and method */
.personal-about{border-top:1px solid var(--line);padding:36px 0 40px}
.about-mark{display:flex;align-items:center;justify-content:center;min-height:170px;background:var(--blue);color:var(--white);font-size:92px;line-height:1;font-weight:400;letter-spacing:-15px;padding-right:15px;margin-bottom:30px}
.about-mark span{color:#7e9bff;margin-top:36px}
.personal-about .fv-display{margin:14px 0 16px}
.personal-about p:not(.fv-display){font-size:16px;line-height:1.75;color:var(--muted);max-width:550px}
.personal-about .quiet-link{margin-top:14px}
.personal-note{border-top:1px solid var(--line);padding:30px 0 50px}
.personal-note h2{margin-bottom:12px}
.personal-note p{font-size:16px;line-height:1.75;color:var(--muted);max-width:620px}
.personal-note p+p{margin-top:12px}

/* Footer */
.personal-footer{background:var(--foot);color:var(--ink);padding:38px var(--edge) 26px}
.footer-invite,.personal-footer-bottom,.personal-footer-legal{max-width:1250px;margin:0 auto}
.footer-invite{padding-bottom:36px}
.footer-invite .fv-display{max-width:800px;margin-top:14px}
.footer-invite-text{font-size:16px;line-height:1.7;color:var(--muted);max-width:620px;margin-top:18px}
.footer-invite .intro-actions{margin-top:24px}
.personal-footer-bottom{border-top:1px solid var(--foot-line);padding-top:16px;font-size:14px;color:var(--muted)}
.personal-footer-bottom .personal-logo{font-size:19px;color:var(--ink)}
.personal-footer-bottom:first-child{border-top:0;padding-top:0}
.personal-footer-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.personal-footer-bottom ul a{display:inline-flex;align-items:center;min-height:44px}
.personal-footer-legal{padding-top:14px;font-size:13px;line-height:1.6;color:var(--muted)}
.personal-footer-legal p+p{margin-top:4px}

/* Journal index */
.listing-page{padding-top:6px;padding-bottom:50px}
.page-kicker{font-size:11px;line-height:1.6;letter-spacing:1.3px;font-weight:700;text-transform:uppercase;color:var(--blue);padding-top:26px}
.page-heading{padding:8px 0 26px}
.page-heading h1,.info-page h1{font-size:42px;line-height:1.02;letter-spacing:-1.7px;font-weight:400;margin:12px 0;text-wrap:balance}
.page-heading p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:18px}
.page-heading p a,.info-deck a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.news-list{list-style:none;border-top:2px solid var(--navy)}
.news-row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;border-bottom:1px solid var(--line);padding:26px 0 28px}
.row-number{font-size:22px;line-height:1.3;letter-spacing:-1px;font-weight:700;color:var(--num)}
.news-row h2{font-size:24px;line-height:1.18;letter-spacing:-.6px;font-weight:400;margin:10px 0 0}
.news-row p{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--muted);max-width:850px;margin:14px 0 16px}
.news-row:hover h2 a{color:var(--blue)}
.row-read{display:none}
.listing-note{padding-top:30px}
.listing-note p{font-size:16px;line-height:1.75;color:var(--muted);max-width:770px;margin-top:10px}
.listing-note a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.listing-note a:hover{color:var(--blue)}

/* Pieces */
.personal-article-page{padding-bottom:6px}
.article-masthead{max-width:970px;margin:22px auto 26px}
.fv-kickline{display:flex;flex-wrap:wrap;align-items:baseline;font-size:11px;line-height:1.5;letter-spacing:1.15px;font-weight:700;text-transform:uppercase}
.fv-kickline .fv-category::before{content:"/";margin:0 .7em;color:var(--num)}
.article-masthead h1{font-size:clamp(30px,8.4vw,38px);line-height:1.1;letter-spacing:-1.1px;font-weight:400;margin:16px 0 18px;text-wrap:balance}
.article-deck{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--muted)}
.fv-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:22px}
.fv-meta dt{font-size:10px;line-height:1.6;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.fv-meta dd{font-size:14px;line-height:1.5;color:var(--ink)}
.fv-meta a{padding:16px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--num)}
.article-layout{max-width:1120px;margin:0 auto;border-top:1px solid var(--line);padding-top:24px}
.article-rail{margin-bottom:30px}
.rail-label{display:block;font-size:11px;line-height:1.6;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.article-rail ul{list-style:none}
.article-rail li a{display:flex;align-items:center;min-height:46px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--muted)}
.article-rail li a:hover{color:var(--blue)}
.rail-author{display:none}
.article-body h2{font-size:25px;line-height:1.2;letter-spacing:-.7px;font-weight:700;margin:38px 0 18px;scroll-margin-top:20px}
.article-body p,.article-body li{font-family:var(--serif);font-size:18px;line-height:1.75;color:var(--copy)}
.article-body p{margin:0 0 20px}
.article-body ul{margin:0 0 20px;padding-left:22px}
.article-body li{margin:0 0 10px;padding-left:3px}
.article-body li::marker{color:var(--blue)}
.article-body strong{color:var(--ink)}
.article-body a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.article-body a:hover{color:var(--navy)}
.summary-box{background:var(--pale);border-left:3px solid var(--blue);padding:22px 20px 10px;margin:0 0 30px;scroll-margin-top:20px}
.article-body .summary-box h2{font-size:11px;line-height:1.6;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:var(--blue);margin:0}
.article-body .summary-box ul{margin:0;padding-left:20px}
.article-body .summary-box li{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);margin:14px 0;padding-left:2px}
.personal-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:30px 0}
.personal-table-wrap table{width:100%;min-width:460px;border-collapse:collapse;font-size:15px;line-height:1.55;text-align:left}
.personal-table-wrap caption{max-width:calc(100vw - 44px);font-size:16px;line-height:1.4;font-weight:700;text-align:left;padding-bottom:14px}
.personal-table-wrap thead th{background:var(--blue);color:var(--white);font-size:13px;padding:14px}
.personal-table-wrap tbody th,.personal-table-wrap tbody td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.personal-table-wrap tbody th{width:32%;font-size:14px}
.personal-table-wrap tbody tr:nth-child(even){background:var(--pale)}
.fv-steps{list-style:none;counter-reset:fv-step;border-top:1px solid var(--ink);margin:0 0 24px}
.article-body ol.fv-steps,.info-copy ol.fv-steps{padding-left:0}
.article-body .fv-steps li,.info-copy .fv-steps li{counter-increment:fv-step;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;margin:0;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.65}
.fv-steps li::before{content:counter(fv-step,decimal-leading-zero);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--blue)}
.article-body .fv-note{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--muted)}
.article-body .fv-checked{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--muted)}
.source-list{margin:0;padding-left:26px}
.article-body .source-list li{font-size:16px;line-height:1.55;margin:0 0 18px;padding-left:3px}
.article-body .source-list li::marker{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.source-list a{font-family:var(--sans);font-size:14px;line-height:1.6;overflow-wrap:anywhere;padding:5px 0}
.article-end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-family:var(--sans);font-size:11px;line-height:1.6;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.article-body .article-end a{text-decoration:none;padding:15px 0}
.article-layout:last-child{margin-bottom:44px}
.next-story{border-top:1px solid var(--line);margin:44px 0;padding-top:24px}
.next-story h2{font-size:11px;line-height:1.6;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:var(--blue)}
.next-story ul{list-style:none;margin-top:8px}
.next-story li{font-size:22px;line-height:1.22;letter-spacing:-.5px;font-weight:700;max-width:850px;text-wrap:balance}
.next-story li a{display:block;padding:11px 0}

/* Information pages */
.info-page{padding-bottom:56px}
.info-page h1{margin:16px 0 18px;max-width:1000px}
.info-page h1.fv-long{font-size:32px;line-height:1.1;letter-spacing:-1.1px;max-width:1040px}
.info-deck{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--muted);max-width:800px}
.info-deck+.info-deck{margin-top:16px}
.fv-updated{font-size:13px;line-height:1.6;color:var(--muted);margin-top:20px}
.info-copy{max-width:770px;border-top:1px solid var(--line);padding-top:22px;margin-top:30px}
.info-copy h2{font-size:24px;line-height:1.2;letter-spacing:-.4px;font-weight:400;margin:34px 0 14px;scroll-margin-top:20px}
.info-copy>section:first-child>h2{margin-top:6px}
.info-copy p,.info-copy li,.info-copy dd{font-family:var(--serif);font-size:18px;line-height:1.75;color:var(--soft)}
.info-copy p{margin:0 0 18px}
.info-copy a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.info-copy a:hover{color:var(--navy)}
.info-copy strong{color:var(--ink)}
.info-copy .fv-display{font-family:var(--sans);font-size:27px;line-height:1.18;letter-spacing:-.8px;color:var(--ink);margin:0 0 20px}
.fv-rules,.fv-links{list-style:none;border-top:1px solid var(--ink);margin:0 0 24px}
.fv-rules li,.fv-links li{padding:14px 0;border-bottom:1px solid var(--line)}
.fv-links a{padding:14px 0}
.info-copy>.fv-links:first-child{border-top:0}
.fv-facts{border-top:1px solid var(--ink);margin:0 0 24px}
.fv-facts>div{padding:14px 0;border-bottom:1px solid var(--line)}
.fv-facts dt{font-size:11px;line-height:1.6;letter-spacing:1.2px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.topic-intro{max-width:770px;margin-top:40px}
.topic-intro h2{font-size:24px;line-height:1.2;letter-spacing:-.4px;font-weight:400;margin-bottom:12px}
.topic-intro p{font-family:var(--serif);font-size:18px;line-height:1.75;color:var(--soft)}
.topic-grid{border-top:2px solid var(--navy);margin-top:24px}
.topic-card{border-bottom:1px solid var(--line);padding:24px 0 26px;scroll-margin-top:20px}
.topic-card:last-child{border-bottom:0}
.topic-number{display:block;font-size:32px;line-height:1.1;letter-spacing:-1.5px;font-weight:700;color:var(--num)}
.topic-card .personal-kicker{margin-top:14px}
.topic-card h3{font-size:25px;line-height:1.2;letter-spacing:-.6px;font-weight:400;margin:8px 0 12px}
.topic-card p{font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--muted)}
.topic-card .fv-receive{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--copy);border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.fv-receive strong{display:block;font-size:11px;line-height:1.6;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.info-page>.intro-actions{margin-top:24px}
.info-copy .fv-steps strong{display:block}
.fv-questions{border-top:1px solid var(--ink);margin:0 0 24px}
.fv-questions>div{border-bottom:1px solid var(--line);padding:18px 0 2px}
.info-copy .fv-questions h3{font-family:var(--sans);font-size:19px;line-height:1.3;letter-spacing:-.2px;font-weight:700;color:var(--ink);margin:0 0 8px}
.info-copy #faq,.info-copy #enquire{scroll-margin-top:20px}

/* Contact form */
.fv-form{max-width:770px;margin-top:34px}
.fv-field{margin-bottom:24px}
.fv-field label{display:block;font-size:14px;line-height:1.4;font-weight:700;color:var(--ink);margin-bottom:4px}
.fv-field label small{font-size:inherit;font-weight:400;color:var(--muted)}
.fv-field input,.fv-field select,.fv-field textarea{display:block;width:100%;min-height:48px;margin:0;font-family:var(--sans);font-size:17px;line-height:1.4;color:var(--ink);background-color:transparent;border:0;border-bottom:1px solid var(--field);border-radius:0;padding:11px 2px}
.fv-field input:hover,.fv-field select:hover,.fv-field textarea:hover{border-color:var(--ink)}
.fv-field input:focus,.fv-field select:focus,.fv-field textarea:focus{border-color:var(--blue)}
.fv-field select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 13px) 55%,calc(100% - 7px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.fv-field textarea{min-height:190px;border:1px solid var(--field);background-color:var(--white);padding:13px 14px;margin-top:8px;resize:vertical}
.fv-send{margin:30px 0 0}
.fv-form .fv-after{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--muted);max-width:620px;margin:20px 0 0}
.fv-form .fv-after a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.fv-form .fv-after a:hover{color:var(--blue)}
.fv-trap{display:none}

/* From a large phone upwards the wordmark has room to grow */
@media (min-width:400px){
.personal-logo{font-size:23px;letter-spacing:-1px}
.personal-nav{gap:24px}
.personal-visual{grid-template-rows:270px auto}
}

/* Tablet and desktop */
@media (min-width:701px){
:root{--edge:5%}
.personal-header{padding-top:20px;padding-bottom:20px;gap:0 30px}
.personal-logo{font-size:24px}
.personal-nav{gap:30px}
.personal-button{gap:30px;font-size:14px;padding:17px 22px;min-height:54px}
.quiet-link{font-size:14px}
.intro-actions{gap:20px 27px;margin-top:32px}
.fv-display{font-size:40px;line-height:1.13;letter-spacing:-1.2px}
.personal-meta{font-size:12px}

.personal-hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:35px;align-items:center;padding:70px 0 80px}
.personal-intro h1{font-size:clamp(38px,4.45vw,62px);line-height:1.07;margin-top:24px}
.personal-intro>p{line-height:1.8;margin-top:28px}
.personal-visual{align-self:stretch;grid-template-rows:minmax(330px,1fr) auto;min-height:430px;padding-top:42px;margin-top:0}
.visual-corner{top:15px;left:18px}
.visual-caption{padding:17px 18px}

.selected-writing{padding:46px 0 80px}
.personal-section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:40px}
.personal-section-header .fv-display{margin-top:17px}
.personal-section-header>p{font-size:14px;line-height:1.8;max-width:400px;margin-top:0}
.personal-feature{grid-template-columns:90px minmax(0,1fr) 30px;gap:25px;align-items:center;padding:36px 34px}
.feature-index{display:block;align-self:start}
.feature-index>span{font-size:48px;letter-spacing:-2px}
.feature-index small{margin-top:20px}
.personal-feature h3,.personal-story h3,.theme-card h3{font-size:28px;letter-spacing:-.8px}
.personal-feature h3{max-width:820px;text-wrap:balance}
.personal-feature p,.personal-story p{font-size:15px;line-height:1.75;margin:18px 0}
.personal-feature p{max-width:720px}
.feature-plus{display:block;font-size:32px;line-height:1;color:var(--blue);text-align:right}
.personal-secondary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px;margin-top:34px}
.personal-story{padding:20px 0 28px}
.personal-story h3{margin:21px 0;max-width:560px;text-wrap:balance}
.personal-story p{max-width:470px}
/* Staggered release: a lone second story sits as a full-width row on the feature's columns */
.personal-story:only-child{grid-column:1/-1;display:grid;grid-template-columns:90px minmax(0,1fr) 30px;gap:0 25px;padding:6px 34px 30px}
.personal-story:only-child>*{grid-column:2}
.personal-story:only-child>.personal-kicker{grid-column:1;grid-row:1/span 3;padding-top:9px}
.personal-story:only-child h3{max-width:820px;margin:0}
.personal-story:only-child p{max-width:720px}
.all-writing{margin-top:25px}

.personal-themes{padding:56px 0 84px}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:8px}
.theme-card{padding-top:22px;margin-top:0}
.theme-number{font-size:48px;letter-spacing:-2px;margin:22px 0 26px}
.theme-card p{font-size:15px;line-height:1.75;margin-top:16px}
.theme-card .theme-start{font-size:13px;line-height:1.8;padding-top:16px;margin-top:20px}

.personal-about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:45px;align-items:center;padding:64px 0 70px}
.about-mark{min-height:280px;font-size:130px;letter-spacing:-22px;padding-right:22px;margin-bottom:0}
.about-mark span{margin-top:50px}
.personal-about .fv-display{font-size:35px;line-height:1.2;letter-spacing:-1px;margin:20px 0}
.personal-about p:not(.fv-display){line-height:1.85}
.personal-about .quiet-link{margin-top:18px}
.personal-note{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:45px;padding:34px 0 84px}
.personal-note h2{margin-bottom:0}
.personal-note p{font-size:14px;line-height:1.8}

.personal-footer{padding:52px 5% 28px}
.footer-invite{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-bottom:55px}
.footer-invite .fv-display{font-size:38px;line-height:1.1;letter-spacing:-1.3px;margin-top:18px}
.footer-invite-text{font-size:14px;line-height:1.8;margin-top:22px}
.footer-invite .intro-actions{flex:none;flex-direction:column;align-items:flex-end;gap:8px;margin-top:0}
.personal-footer-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:0 28px;padding-top:12px;font-size:13px}
.personal-footer-bottom .personal-logo{margin-right:auto}
.personal-footer-bottom ul{gap:0 26px;margin-top:0}
.personal-footer-legal{display:flex;flex-wrap:wrap;gap:4px 28px;padding-top:10px;font-size:12px}
.personal-footer-legal p:first-child{margin-right:auto}
.personal-footer-legal p+p{margin-top:0}

.listing-page{padding-top:25px;padding-bottom:75px}
.page-kicker{padding-top:30px}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding:15px 0 37px}
.page-heading h1{font-size:53px;line-height:1;letter-spacing:-2.3px;margin:15px 0}
.page-heading p{font-size:14px;max-width:400px;margin:0 0 7px}
.news-row{grid-template-columns:75px minmax(0,1fr) 50px;gap:30px;padding:30px 0 34px}
.row-number{font-size:34px;line-height:1.1;letter-spacing:-2px}
.news-row h2{font-size:30px;line-height:1.15;letter-spacing:-.8px;max-width:980px}
.news-row p{margin:16px 0 18px}
.row-read{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);font-size:24px;line-height:1;transition:background-color .2s,color .2s,border-color .2s}
.news-row:hover .row-read{background:var(--blue);border-color:var(--blue);color:var(--white)}
.listing-note{display:grid;grid-template-columns:75px minmax(0,1fr);gap:0 30px;padding-top:34px}
.listing-note h2,.listing-note p{grid-column:2}
.listing-note p{font-size:14px;line-height:1.8}

.article-masthead{margin:40px auto 30px}
.article-masthead h1{font-size:45px;line-height:1.08;letter-spacing:-1.5px;margin:20px 0}
.article-deck{font-size:22px}
.fv-meta{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:24px}
.fv-meta dd{font-size:13px}
.article-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px;padding-top:35px}
.article-rail{position:sticky;top:28px;align-self:start;max-height:calc(100vh - 56px);overflow-y:auto;margin-bottom:0}
.rail-label{font-size:10px;margin-bottom:8px}
.article-rail li a{min-height:44px;font-size:12px;line-height:1.45}
.rail-author{display:block;margin-top:35px}
.author-avatar{width:46px;height:46px;display:grid;place-items:center;background:var(--blue);color:var(--white);font-size:17px;font-weight:700;margin-bottom:15px}
.rail-author strong{display:block;font-size:13px;margin:10px 0 6px}
.rail-author>span:last-of-type{display:block;font-size:12px;line-height:1.7;color:var(--muted)}
.rail-author a{display:inline-block;font-size:12px;color:var(--blue);padding:14px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.article-body h2{font-size:28px;letter-spacing:-.8px;margin:44px 0 20px;scroll-margin-top:25px}
.article-body p,.article-body li{font-size:20px;line-height:1.8}
.article-body p{margin-bottom:22px}
.article-body ul{margin-bottom:22px;padding-left:24px}
.summary-box{padding:24px 28px 12px;margin-bottom:34px}
.article-body .summary-box li{line-height:1.7;margin:15px 0}
.personal-table-wrap{margin:35px 0}
.personal-table-wrap caption{max-width:none}
.personal-table-wrap table{font-size:14px;line-height:1.6}
.personal-table-wrap thead th{font-size:12px;padding:15px}
.personal-table-wrap tbody th,.personal-table-wrap tbody td{padding:18px 15px}
.personal-table-wrap tbody th{font-size:13px}
.article-body .fv-steps li,.info-copy .fv-steps li{grid-template-columns:52px minmax(0,1fr);padding:17px 0;font-size:19px}
.article-body .fv-note{font-size:13px}
.article-body .fv-checked{font-size:14px}
.article-body .source-list li{margin-bottom:14px}
.source-list a{font-size:13px;line-height:1.5}
.article-end{margin-top:40px;padding-top:22px}
.article-layout:last-child{margin-bottom:60px}
.next-story{margin:60px 0;padding-top:25px}
.next-story ul{margin-top:12px}
.next-story li{font-size:29px;line-height:1.2;letter-spacing:-.6px}

.info-page{padding-bottom:80px}
.info-page h1{font-size:52px;line-height:1;letter-spacing:-2.3px;margin:22px 0}
.info-page h1.fv-long{font-size:42px;line-height:1.06;letter-spacing:-1.7px}
.info-deck{font-size:23px}
.info-deck+.info-deck{margin-top:18px}
.fv-updated{font-size:12px;margin-top:24px}
.info-copy{padding-top:25px;margin-top:35px}
.info-copy h2{font-size:25px;margin:38px 0 16px;scroll-margin-top:25px}
.info-copy>section:first-child>h2{margin-top:8px}
.info-copy p,.info-copy li,.info-copy dd{font-size:19px}
.info-copy .fv-display{font-size:32px;letter-spacing:-.9px;margin-bottom:22px}
.fv-rules,.fv-links,.fv-facts{margin-bottom:26px}
.fv-rules li,.fv-links li{padding:15px 0}
.fv-facts>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:15px 0}
.fv-facts dt{margin-bottom:0}
.topic-intro{margin-top:50px}
.topic-intro h2{font-size:25px}
.topic-intro p{font-size:19px}
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:28px}
.topic-card{border-bottom:0;padding:30px 0 10px;scroll-margin-top:25px}
.topic-number{font-size:39px;letter-spacing:-2px}
.topic-card .personal-kicker{margin-top:16px;min-height:3.2em}
.topic-card h3{font-size:26px;margin:8px 0 14px}
.topic-card p{font-size:17px}
.topic-card .fv-receive{font-size:15px;padding-top:16px;margin-top:18px}
.info-page>.intro-actions{margin-top:30px}
.fv-questions{margin-bottom:26px}
.fv-questions>div{padding:20px 0 4px}
.info-copy .fv-questions h3{font-size:21px;margin-bottom:10px}

.fv-form{margin-top:40px}
.fv-field{margin-bottom:28px}
.fv-field label{font-size:13px;margin-bottom:6px}
.fv-send{margin-top:34px}
.fv-form .fv-after{font-size:13px;margin-top:22px}
}

/* Wide desktop: the full measure of the design */
@media (min-width:1001px){
.personal-header{padding-top:22px;padding-bottom:22px}
.personal-hero{gap:60px;padding:78px 0 88px}
.personal-visual{grid-template-rows:minmax(350px,1fr) auto;min-height:480px}
.personal-feature{grid-template-columns:130px minmax(0,1fr) 45px;gap:40px}
.personal-feature h3,.personal-story h3,.theme-card h3{font-size:31px}
.personal-secondary-grid{gap:60px}
.personal-story:only-child{grid-template-columns:130px minmax(0,1fr) 45px;gap:0 40px}
.theme-grid{gap:48px}
.personal-about,.personal-note{gap:80px}
.personal-about .fv-display{font-size:39px}
.footer-invite .fv-display{font-size:44px;letter-spacing:-1.5px}
.page-heading h1{font-size:64px;letter-spacing:-2.7px}
.info-page h1{font-size:60px;letter-spacing:-2.7px}
.info-page h1.fv-long{font-size:48px;letter-spacing:-2px}
.article-masthead h1{font-size:clamp(45px,4vw,57px);letter-spacing:-1.8px}
.article-layout{grid-template-columns:195px minmax(0,740px);gap:65px}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}

@media print{
.fv-skip,.personal-nav,.fv-trail,.article-rail,.fv-form,.personal-footer .footer-invite,.personal-footer-bottom ul,.row-read,.feature-plus{display:none}
body{background:#fff;font-size:10.5pt}
.personal-header,.fv-main{max-width:none;padding-left:0;padding-right:0}
.article-layout{display:block}
.article-body p,.article-body li{font-size:11pt;line-height:1.5}
.personal-footer{background:#fff;padding:12pt 0}
h1,h2,h3{break-after:avoid}
.personal-table-wrap tr,.fv-steps li{break-inside:avoid}
}

/* Larger wordmark and a mobile menu (no script: a checkbox drives it) */
.personal-logo{font-size:24px}
.personal-menu-check,.personal-menu-btn{display:none}
@media (min-width:400px){.personal-logo{font-size:27px}}
@media (min-width:701px){.personal-logo{font-size:31px;letter-spacing:-1.4px}}
.personal-footer-bottom .personal-logo{font-size:19px;letter-spacing:-.8px}
@media (max-width:700px){
.personal-header{position:relative}
.personal-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px}
.personal-menu-btn span{position:relative;display:block;width:24px;height:2px;background:var(--ink);transition:background .2s}
.personal-menu-btn span::before,.personal-menu-btn span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--ink);transition:transform .25s}
.personal-menu-btn span::before{top:-7px}
.personal-menu-btn span::after{top:7px}
.personal-menu-check{display:block;position:absolute;top:14px;right:calc(var(--edge) - 10px);z-index:2;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.personal-menu-check:focus-visible + .personal-menu-btn{outline:2px solid var(--blue);outline-offset:2px}
.personal-menu-check:checked + .personal-menu-btn span{background:transparent}
.personal-menu-check:checked + .personal-menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.personal-menu-check:checked + .personal-menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
.personal-nav{display:none;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:0;margin-top:12px;border-top:1px solid var(--line);font-size:20px;letter-spacing:-.4px}
.personal-menu-check:checked ~ .personal-nav{display:flex}
.personal-nav a{display:flex;min-height:58px;padding:0;border-bottom:1px solid var(--line)}
.personal-nav a:last-child{border-bottom:0;color:var(--blue);font-weight:700;text-decoration:none}
}
@media print{.personal-menu-btn,.personal-menu-check{display:none}}