:root{
--navy:#0F3251;--navy-2:#1A4E78;--blue:#2E86B8;--gold:#C08422;--gold-lt:#E0BC6B;--gold-dp:#94651A;
--paper:#FCFAF5;--panel:#F2EBDC;--panel-2:#EAE0CB;--ink:#15263A;--muted:#5A6675;--muted-2:#8A7F66;
--dark:#0B2540;--dark-2:#08192C;--line:rgba(15,50,81,.13);--gline:rgba(192,132,34,.35);
--serif:'Source Serif 4',Georgia,'Times New Roman',serif;--display:'Cinzel',Georgia,serif;
--maxw:1160px;--gut:clamp(20px,5vw,56px);--sh:0 20px 44px -32px rgba(11,37,64,.55);}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}a{color:var(--navy-2);text-decoration:none}a:hover{color:var(--gold-dp)}
h1,h2,h3,h4{color:var(--navy);line-height:1.15;letter-spacing:-.012em;font-weight:600;margin:0 0 .5em}
p{margin:0 0 1.05em}strong{color:var(--navy);font-weight:600}::selection{background:var(--gold);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
body[data-lang="en"] [lang="tr"].lng{display:none}body[data-lang="tr"] [lang="en"].lng{display:none}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--navy);color:#fff;padding:12px 20px;font-family:var(--display);font-size:13px;letter-spacing:.06em}
.skip:focus{left:0}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.eyebrow{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp);display:flex;align-items:center;gap:.75em;margin:0 0 1.15em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:0 0 auto}
/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:100;background:rgba(252,250,245,.97);backdrop-filter:saturate(1.08) blur(8px);border-bottom:1px solid var(--line)}
.mast::after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-lt) 42%,transparent 78%)}
.mast-in{display:flex;align-items:center;gap:18px;max-width:1300px;margin:0 auto;padding:8px var(--gut);min-height:78px}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand img{width:62px;height:auto;flex:0 0 auto}
.brand b{font-family:var(--display);font-weight:700;color:var(--navy);font-size:15px;letter-spacing:.035em;line-height:1.18;display:block;max-width:20ch}
.brand small{font-family:var(--display);font-weight:600;font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);display:block;margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.mast-in .tools{flex:0 0 auto}
.nav a{font-family:var(--display);font-weight:600;font-size:11.4px;letter-spacing:.075em;text-transform:uppercase;color:var(--navy);padding:10px 10px;border-radius:3px;position:relative;white-space:nowrap}
.nav a:hover{background:var(--panel)}.nav a.active{color:var(--gold-dp)}
.nav a.active::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:var(--gold)}
.langbtn{font-family:var(--display);font-weight:700;font-size:11.4px;letter-spacing:.12em;border:1px solid var(--gline);background:transparent;color:var(--navy);border-radius:3px;padding:9px 12px;cursor:pointer;margin-left:10px}
.langbtn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.navtog{display:none;margin-left:auto;width:46px;height:42px;border:1px solid var(--line);background:none;border-radius:3px;cursor:pointer;color:var(--navy)}
.navtog span,.navtog span::before,.navtog span::after{content:"";display:block;width:21px;height:2px;background:currentColor;margin:0 auto;transition:.25s}
.navtog span::before{transform:translateY(-6px)}.navtog span::after{transform:translateY(4px)}
.navtog[aria-expanded="true"] span{background:transparent}
.navtog[aria-expanded="true"] span::before{transform:rotate(45deg)}
.navtog[aria-expanded="true"] span::after{transform:translateY(-2px) rotate(-45deg)}
@media(max-width:1100px){.navtog{display:block}
.nav{position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px var(--gut) 18px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s;box-shadow:var(--sh)}
.nav.open{opacity:1;visibility:visible;transform:none}
.nav a{padding:15px 4px;font-size:14px;border-bottom:1px solid var(--line)}.nav a.active::after{display:none}
}
/* ---------- routes ---------- */
.route{display:none}.route.active{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.route.active{animation:none}}
/* ---------- split hero (no text over the seal) ---------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;background:var(--navy);color:#fff;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;
background-image:radial-gradient(circle at 18% 30%,rgba(224,188,107,.5),transparent 42%),radial-gradient(circle at 82% 78%,rgba(46,134,184,.45),transparent 46%)}
.hero-panel{position:relative;z-index:1;display:flex;align-items:center;padding:clamp(44px,6vw,84px) clamp(24px,4.5vw,64px)}
.hero-in{width:100%;max-width:36rem;margin:0 auto}
.hero-seal{width:clamp(78px,9vw,108px);height:auto;margin-bottom:22px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero .eyebrow{color:var(--gold-lt)}.hero .eyebrow::before{background:var(--gold-lt)}
.hero h1{color:#fff;font-size:clamp(30px,4.3vw,50px);letter-spacing:-.022em;margin:0 0 .42em;max-width:16ch}
.hero .lede{font-size:clamp(16.5px,1.55vw,19.5px);line-height:1.6;color:#D9E2EC;max-width:44ch;margin-bottom:1.6em}
.hero .lede strong{color:#fff}
.hero-photo{position:relative;min-height:clamp(300px,50vw,620px);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
@media(max-width:900px){.hero-photo img{object-position:50% 12%}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,50,81,.55),rgba(15,50,81,.05) 42%,transparent)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-photo{order:-1;min-height:270px}
.hero-photo::after{background:linear-gradient(180deg,rgba(15,50,81,.15),rgba(15,50,81,.55))}}
.founded{display:flex;flex-wrap:wrap;gap:7px 20px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.17);
font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#A9B7C6}
.founded b{color:var(--gold-lt);font-weight:700}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--display);font-weight:600;font-size:12.2px;letter-spacing:.085em;text-transform:uppercase;padding:13px 22px;border-radius:3px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;transition:.18s}
.btn-gold{background:var(--gold);color:#1E1503}.btn-gold:hover{background:var(--gold-lt)}
.btn-line{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.5)}.btn-line:hover{background:#fff;color:var(--navy)}
.btn-nv{background:var(--navy);color:#fff}.btn-nv:hover{background:var(--navy-2)}
.btn .arw{transition:transform .18s}.btn:hover .arw{transform:translateX(3px)}
.motif{height:24px;background-repeat:repeat-x;background-position:center;background-size:auto 20px;opacity:.9;
background-image:url("data:image/svg+xml;utf8, opens exactly at the masthead edge */
@media(min-width:1100px){
.mast-in{min-height:0;padding-top:15px;padding-bottom:15px;gap:18px}
.wnav{display:flex;justify-content:flex-end}
.brand{flex:0 0 auto}
.brand img{width:56px}
.brand b{max-width:19ch;font-size:13.2px;line-height:1.2}
.brand small{margin-top:3px}
.wnav{flex:1 1 auto;display:flex;justify-content:flex-end}
.wnav>ul{flex-wrap:nowrap}
.wnav>ul>li>.wnav-item>a,.wnav>ul>li>a{padding:9px 8px;font-size:11.4px;letter-spacing:.062em}
.mast-tools{flex:0 0 auto}
}
/* mobile: the search control lives in the drawer, so it is never lost */
.wnav-srch{display:none}
.wnav-srch-btn{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;
padding:14px 2px;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
font:600 14px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);
text-align:left}
.wnav-srch-btn::before{content:"";width:17px;height:17px;flex:0 0 auto;
background:currentColor;-webkit-mask:center/contain no-repeat url("data:image/svg+xml;utf8, */
.nojs-map{border-bottom:1px solid var(--line);background:var(--panel);
padding:18px max(var(--gut),env(safe-area-inset-left))}
.nojs-map ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 18px}
.nojs-map a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;
color:var(--navy-2);text-decoration:underline}
.nojs-map .eyebrow{margin-bottom:.6em}
/* interior pages: a little less vertical air on phones */
@media(max-width:600px){
.phead{padding-top:22px;padding-bottom:20px}
.phead-in h1{margin-bottom:.3em}
.otp{margin-bottom:20px}
.sec{padding-top:26px;padding-bottom:26px}
}
/* ---------- navigation and contents refinements -------------------- */
/* the full navigation bar is used only where it stays legible */
@media(max-width:700px){
/* "On this page" is a scanning aid, not the first thing to read */
.otp{margin-bottom:18px}
.otp>summary{min-height:48px;padding:10px 16px}
}
/* the search dialog owns the screen while it is open */
body[data-srchopen="true"]{overflow:hidden}
#srch [inert],[inert]{pointer-events:none}
/* an integrity hash is one unbreakable 64-character token; it must be allowed
to wrap or it will push the whole page sideways on a phone */
.pubhash{display:block;margin-top:5px;font-size:11.4px;line-height:1.5;color:var(--muted-2);
word-break:break-all;overflow-wrap:anywhere;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.meta dd a[href$=".pdf"]{overflow-wrap:anywhere}
/* ---------- two-row institutional masthead ------------------------ */
/* Row 1 carries the identity and the controls; row 2 is a persistent
navigation bar. Both use the existing navy / gold / paper variables. */
/* Below the breakpoint the drawer lives inside this wrapper, so the wrapper
must disappear without hiding its child: display:contents removes the box
but keeps the navigation renderable and positionable. */
.navbar,.navbar-in{display:contents}
@media(min-width:1100px){
.mast-in{align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;min-height:0}
.brand{flex:0 0 auto}
.brand img{width:58px}
.brand b{max-width:24ch;font-size:15px;line-height:1.22}
.mast-tools{margin-left:auto}
.navbar{display:block;border-top:1px solid var(--line);background:var(--panel)}
.navbar-in{display:flex}
.navbar-in{max-width:var(--maxw,1240px);margin:0 auto;
padding:0 max(var(--gut),env(safe-area-inset-left));
display:flex;justify-content:center}
.navbar .wnav{margin:0;flex:0 1 auto}
.navbar .wnav>ul{flex-wrap:nowrap;justify-content:center;gap:2px}
.wnav>ul>li>.wnav-item>a,.wnav>ul>li>a{
min-height:46px;padding:11px 13px;font-size:11.6px;letter-spacing:.07em;white-space:nowrap}
.wnav-tog{width:32px;min-height:46px}
/* the panel hangs from the bar itself, so the pointer can travel into it */
.wnav-sub{top:100%;min-width:262px}
.wnav-item::after{content:"";position:absolute;left:0;right:-32px;top:100%;height:10px}
}
@media(min-width:1100px) and (max-width:1279px){
.wnav>ul>li>.wnav-item>a,.wnav>ul>li>a{padding:11px 9px;font-size:11.2px;letter-spacing:.055em}
.wnav-tog{width:28px}
}
/* ---------- footer: three separated institutional levels ----------- */
/* Level 1 identity + site map, level 2 contact band, level 3 colophon.
Everything uses the existing footer palette; no new colour is introduced. */
.foot-in{grid-template-columns:minmax(280px,1.15fr) 2fr;align-items:start;
padding-bottom:clamp(28px,4vw,40px);gap:clamp(28px,5vw,56px)}
.foot img.seal{width:60px;margin-bottom:14px}
.foot-id .iname{margin-bottom:16px}
/* institutional facts as an orderly archival metadata block, not prose */
.fmeta{margin:0 0 20px;display:grid;gap:9px 18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fmeta>div{min-width:0}
.fmeta>div.wide{grid-column:1 / -1}
.fmeta dt{font-family:var(--display);font-size:9.6px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold-lt);margin:0 0 2px;line-height:1.4}
/* in the two-column layout one label wraps to a second line; a shared minimum
keeps the values on a common baseline instead of stepping down */
@media(min-width:561px){.fmeta>div:not(.wide) dt{min-height:2.8em}}
.fmeta dd{margin:0;font-size:14px;line-height:1.55;color:#C3CDD7}
.fmeta>div.wide dd{font-size:13.2px;color:#94A2B0;line-height:1.6;max-width:46ch}
/* WTCA channels: restrained circular controls, footer palette only */
.fsoc h4{font-family:var(--display);font-size:9.6px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold-lt);margin:0 0 10px}
.fsoc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fsoc li{margin:0}
.soc{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
border:1px solid rgba(255,255,255,.20);border-radius:50%;color:#AFBBC7;
background:rgba(255,255,255,.03);transition:color .16s,border-color .16s,background .16s}
.soc svg{width:15px;height:15px;display:block}
.soc:hover{color:var(--gold-lt);border-color:var(--gold-lt);background:rgba(255,255,255,.07)}
.soc:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.fmap{gap:20px clamp(20px,3vw,40px)}
.fmap h4{margin-bottom:10px}
.fmap a{min-height:0;padding:7px 0;font-size:14.6px;line-height:1.45}
/* level 2: contact and related web presence, no literal separators */
.foot-c{border-top:1px solid rgba(255,255,255,.10)}
.foot-cin{max-width:1300px;margin:0 auto;
padding:14px max(var(--gut),env(safe-area-inset-left))}
.foot-cin ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
.foot-cin li{margin:0}
.foot-cin a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;color:#AFBBC7;
text-decoration:none;font-size:14px;line-height:1.4}
.foot-cin a svg{width:15px;height:15px;flex:0 0 auto;opacity:.72}
.foot-cin a:hover{color:var(--gold-lt);text-decoration:underline}
.foot-cin a:hover svg{opacity:1}
.foot-cin a:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:3px}
/* level 3: quiet colophon */
.foot-b{border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)}
.foot-bin{max-width:1300px;margin:0 auto;
padding:16px max(var(--gut),env(safe-area-inset-left))
calc(20px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-right))}
.foot-bin p{margin:0;font-size:12.8px;line-height:1.7;color:#7F8D9A;max-width:84ch}
@media(max-width:1099px){
.foot-in{grid-template-columns:1fr;gap:32px}
.fmap a{min-height:44px;padding:11px 0;font-size:15px}
.soc{width:44px;height:44px}
.soc svg{width:17px;height:17px}
.foot-cin a{min-height:44px}
}
@media(max-width:820px){
.foot-cin ul{gap:2px 22px}
}
@media(max-width:560px){
.fmeta{grid-template-columns:1fr;gap:11px}
.fmeta>div.wide dd{max-width:none}
.foot-cin ul{flex-direction:column;gap:0}
.foot-bin p{font-size:13.2px;max-width:none}
}
/* ---------- Founding President: restrained institutional portraits ---- */
/* A calm three-image strip. The photographs share a wide format, so a single
aspect ratio keeps the row even without cropping anything oddly, and the
block stays well under the height of the text it accompanies. */
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin:0}
.pgrid figure{margin:0;background:var(--panel);border:1px solid var(--line);
border-top:2px solid var(--gold);border-radius:0 0 3px 3px;overflow:hidden}
.pgrid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* the third photograph is nearly square and its subject sits high in the
frame, so the crop is anchored to the top rather than the centre */
.pgrid figure:nth-child(3) img{object-position:center 12%}
.pgrid figcaption{padding:10px 13px 12px;font-family:var(--serif);font-size:13.6px;
line-height:1.5;color:var(--muted)}
.pgrid figcaption b{display:block;font-family:var(--display);font-size:9.8px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold-dp);margin-bottom:4px;font-weight:600}
@media(max-width:820px){
.pgrid{grid-template-columns:repeat(2,1fr)}
.pgrid figure:first-child{grid-column:1 / -1}
.pgrid figure:first-child img{aspect-ratio:21/9}
}
@media(max-width:520px){
.pgrid{grid-template-columns:1fr}
.pgrid figure:first-child img{aspect-ratio:16/9}
.pgrid figcaption{font-size:14.2px}
}
/* ---------- scholarly publications ---------- */
.scholpub-all{font-family:var(--display);font-weight:600;font-size:11.4px;letter-spacing:.115em;text-transform:uppercase;margin:0 0 clamp(22px,3vw,34px)}
.scholpub-all a{display:inline-block;color:var(--navy-2);border-bottom:1px solid var(--gline);padding:14px 0;line-height:1.45}
.scholpub-all a:hover{color:var(--gold-dp);border-bottom-color:var(--gold)}
.scholpub-grid{display:grid;gap:clamp(26px,3.2vw,44px)}
.scholpub-grid:has(.scholpub-recent){grid-template-columns:1.7fr 1fr;align-items:start}
.scholpub-featured{background:#FDFBF6;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:clamp(20px,2.5vw,30px);display:grid;grid-template-columns:minmax(160px,200px) 1fr;gap:clamp(20px,2.8vw,36px);align-items:start}
.scholpub-thumb{margin:0;min-width:0}
.scholpub-thumb img{width:100%;height:auto;border:1px solid var(--line);background:#fff}
.scholpub-body{min-width:0}
.scholpub-kind{font-family:var(--display);font-weight:600;font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .6em}
.scholpub-title{font-family:var(--serif);font-weight:600;font-size:clamp(18.5px,2vw,23px);line-height:1.34;letter-spacing:-.004em;color:var(--navy);margin:0 0 .45em;overflow-wrap:break-word}
.scholpub-author{font-size:15.4px;color:var(--muted);margin:0}
.scholpub-featured .meta,.scholpub-item .meta{margin-top:14px}
.scholpub-ext{font-family:var(--display);font-weight:600;font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 0}
.scholpub-ext a{display:inline-block;color:var(--navy-2);border-bottom:1px solid var(--gline);padding:14px 0;line-height:1.45}
.scholpub-ext a:hover{color:var(--gold-dp);border-bottom-color:var(--gold)}
.scholpub-ext a+a{margin-left:clamp(16px,2.2vw,30px)}
.scholpub-recent{min-width:0}
.scholpub-recent-h{font-family:var(--display);font-weight:600;font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1em}
.scholpub-item{padding:22px 0;border-top:1px solid var(--line)}
.scholpub-item:first-of-type{border-top:0;padding-top:0}
.scholpub-year{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,25px);color:var(--navy);margin:0 0 .8em;padding-bottom:.35em;border-bottom:1px solid var(--gline)}
@media(max-width:1099px){.scholpub-featured{grid-template-columns:minmax(150px,180px) 1fr}}
@media(max-width:760px){
.scholpub-grid:has(.scholpub-recent){grid-template-columns:1fr}
.scholpub-featured{grid-template-columns:1fr;gap:20px}
.scholpub-thumb img{max-width:200px}
}
@media(max-width:430px){
.scholpub-featured{padding:18px}
.scholpub-thumb img{max-width:168px}
}
.wnav>ul>li>.wnav-item>a[data-section-current="true"]{color:var(--gold-dp)}
.wnav>ul>li>.wnav-item>a[data-section-current="true"]::after{content:"";position:absolute;
left:9px;right:9px;bottom:5px;height:2px;background:var(--gold)}
@media(max-width:1099px){
.wnav>ul>li>.wnav-item>a[data-section-current="true"]::after{left:2px;right:auto;width:20px;bottom:9px}
}
/* ===================================================================
Greek edition — narrowly scoped integration
=================================================================== */
/* ---------- 15. Greek display face -------------------------------- */
/* Cinzel is published with the latin and latin-ext subsets only; it carries
no Greek glyphs, so Greek headings, navigation, buttons and the eyebrow
rules would fall back to an arbitrary system serif. Source Serif 4 is
already loaded for body text and does ship a Greek subset, so on Greek
pages the display variable is pointed at it. This is one declaration,
scoped to lang="el": no new font request is made and the English and
Turkish editions are untouched. Because the document declares lang="el",
browsers apply Greek casing rules and drop the accents in the uppercased
display rules, as Greek typography requires. */
html[lang="el"]{--display:'Source Serif 4',Georgia,'Times New Roman',serif}
html[lang="el"] .brand b,html[lang="el"] .wnav a,html[lang="el"] .wnav-tog,
html[lang="el"] .mast-tools .tbtn,html[lang="el"] .btn,html[lang="el"] .eyebrow,
html[lang="el"] h1,html[lang="el"] h2,html[lang="el"] h3,html[lang="el"] h4{
font-family:var(--display),Georgia,"Times New Roman",serif}
/* The masthead lockup and the language codes are the same Latin text in all
three editions, so they keep Cinzel and the header reads identically
whichever edition the reader is in. */
html[lang="el"] .brand b,html[lang="el"] .mast-tools .tbtn{
font-family:'Cinzel',"CinzelFallback",Georgia,"Times New Roman",serif}
/* ---------- 16. three-language selector --------------------------- */
/* The masthead now carries two language links instead of one. Between 381px
and 430px that extra 44px control leaves too little room for the
institution name, so the header search icon is withdrawn at that width as
well — exactly as the design already does below 381px. The search row
inside the navigation drawer is shown at every width below 1100px, so
nothing becomes unreachable. */
@media(max-width:430px){
#srchbtn{display:none}
}
/* ===================================================================
French edition — narrowly scoped integration
=================================================================== */
/* ---------- 17. five-language selector ---------------------------- */
/* A fifth edition adds a fourth 44px language link to the masthead. Measured
at the required widths, four language links plus the drawer button leave
the lockup less room than the longest word of the institution name below
about 400px, so the name ran underneath the buttons: at 320px the
four-language header already did this, and the fourth link carried it up to
375px and squeezed the 44px emblem to 34px.
Below 400px the masthead therefore wraps onto two rows — the lockup keeps
the full width on the first, the language links and the drawer button sit
right-aligned on the second. Every control keeps its 44px target, the
emblem keeps its size, the institution name stays whole, and no language is
hidden or abbreviated. Nothing at 400px and above changes, and the drawer
offset follows the measured masthead height as it already did. */
@media(max-width:400px){
.mast-in{flex-wrap:wrap;row-gap:6px}
.brand{flex:1 1 100%}
.mast-tools{width:100%;justify-content:flex-end}
}
/* ===================================================================
German edition — narrowly scoped integration
=================================================================== */
/* ---------- 18. six-language selector ----------------------------- */
/* A sixth edition adds a fifth 44px language link to the masthead, and that
moves the width at which the lockup and the controls stop fitting on one
row. Measured on actual element bounds, reading the institution-name element
and every visible control out of the live layout, on every edition:
four links (baseline) the name box collides with the controls from
431px to 459px — an inherited condition, present
on all five editions — and clears above it.
five links (this work) the collision band becomes 401-497px on the
editions whose masthead reads "World Turkish
Cuisine Academy", and 401-509px on Turkish, whose
masthead reads "Dünya Türk Mutfağı Akademisi" and
is the widest of the six.
So the sixth link widens the band at both ends: 401-430, which was clean at
the baseline, and 460-509, which was also clean. Below 401px section 17
already wraps the masthead and nothing changes there.
This block extends section 17's treatment — and nothing else — up to 520px,
ten pixels above the widest measured boundary. Section 17 is preserved
exactly as the French integration left it and remains correct on its own
terms; this block subsumes it rather than replacing it, so the earlier fix
is not touched. Every control keeps its 44px target, the emblem keeps its
size, the institution name stays whole and no language is hidden or
abbreviated. Nothing at 521px and above changes, and the drawer offset
follows the measured masthead height as it already did.
Carving 431-459px back out to preserve the inherited collision there is not
possible with one contiguous query and would serve no one; that band is
fixed as an unavoidable consequence of covering the two bands the sixth
link broke. */
@media(max-width:520px){
.mast-in{flex-wrap:wrap;row-gap:6px}
.brand{flex:1 1 100%}
.mast-tools{width:100%;justify-content:flex-end}
}
/* ===================================================================
Arabic edition — narrowly scoped integration
===================================================================
Every selector below is confined to html[lang="ar"] or to the Arabic
row of the shared 404 document (.e404 [lang="ar"]). None of them can
match a page of the six existing editions, so nothing about EN, TR,
EL, ES, FR or DE changes — including the AR language link those pages
now carry, which is Latin text and is deliberately left alone.
Three kinds of rule appear here and nothing else:
19. type — the Arabic family is appended to the two existing family
stacks rather than replacing them, so Latin identifiers keep
Source Serif 4 and Cinzel exactly as in the other editions and
only Arabic falls through to Noto Naskh Arabic;
20. Latin typographic conventions that damage Arabic — decorative
tracking breaks the joined script, and the all-caps convention
is a Latin one — neutralised on the elements that carry Arabic
text, and only those;
21. the handful of places where the baseline states a physical
direction that has to follow the writing direction instead.
No layout is mirrored wholesale, no image is mirrored, and the
masthead breakpoint is not touched here: the seventh locale was
measured on actual element bounds first, and section 22 records what
the measurement required.
=================================================================== */
/* ---------- 19. Arabic type ---------------------------------------- */
/* Cinzel and Source Serif 4 carry no Arabic subset (verified against the
live Google Fonts css2 endpoint), so an Arabic family is required. It
is appended, never substituted: Source Serif 4 and Cinzel still win
for every Latin glyph, and Noto Naskh Arabic is reached only for the
Arabic block. One new family, on the origin the site already uses. */
html[lang="ar"]{
--serif:'Source Serif 4','Noto Naskh Arabic',Georgia,'Times New Roman',serif;
--display:'Cinzel','Noto Naskh Arabic',Georgia,serif}
/* The shared 404 loads no webfont for any locale, so its Arabic row gets
the same system fallback the other six rows get; the stacks are named
here so the row is consistent if a font is ever added to that page. */
.e404 [lang="ar"]{
--serif:'Source Serif 4','Noto Naskh Arabic',Georgia,'Times New Roman',serif;
--display:'Cinzel','Noto Naskh Arabic',Georgia,serif}
.e404 p[lang="ar"]{font-family:var(--serif)}
.e404 h1 span[lang="ar"]{font-family:var(--display)}
.e404 .row[lang="ar"] a.btn2{letter-spacing:normal;text-transform:none}
/* ---------- 20. Latin typographic conventions, neutralised --------- */
/* Tracking pulls joined Arabic letters apart and is never applied to the
script; the uppercase convention has no Arabic equivalent. Both are
removed from the elements that carry Arabic text. .brand b, .foot
.iname and .mast-tools .tbtn are deliberately absent: their content is
the Latin institution name and the six Latin locale codes, and those
keep the treatment they have in every other edition. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .hero h1,html[lang="ar"] .scholpub-title,
html[lang="ar"] .bc,html[lang="ar"] .btn,html[lang="ar"] .card .cat,
html[lang="ar"] .card .more,html[lang="ar"] .cite .tag,html[lang="ar"] .cline .k,
html[lang="ar"] .eyebrow,html[lang="ar"] .fig figcaption b,
html[lang="ar"] .fmap h4,html[lang="ar"] .fmeta dt,html[lang="ar"] .foot h4,
html[lang="ar"] .foot-base-in,html[lang="ar"] .founded,html[lang="ar"] .fsoc h4,
html[lang="ar"] .meta dt,html[lang="ar"] .note .tag,html[lang="ar"] .otp>summary,
html[lang="ar"] .pgrid figcaption b,html[lang="ar"] .pull cite,
html[lang="ar"] .record .host,html[lang="ar"] .record .lnk,
html[lang="ar"] .rel-go,html[lang="ar"] .rel-k,html[lang="ar"] .scholpub-all,
html[lang="ar"] .scholpub-ext,html[lang="ar"] .scholpub-kind,
html[lang="ar"] .scholpub-recent-h,html[lang="ar"] .skip,html[lang="ar"] .src,
html[lang="ar"] .srch-item b,html[lang="ar"] .srcs .srcs-h,
html[lang="ar"] .srcs .srcs-note,html[lang="ar"] .wnav a,html[lang="ar"] .wnav-tog,
html[lang="ar"] .wnav-srch-btn,html[lang="ar"] .wnav-sub a,
html[lang="ar"] .wnav>ul>li>.wnav-item>a,html[lang="ar"] .wnav>ul>li>a,
html[lang="ar"] .xcard .go{letter-spacing:normal;text-transform:none}
/* The chrome sizes are set for a tracked, all-caps Latin line. With both
removed, and with a naskh face whose x-height sits lower than Cinzel's
cap height, the same nominal size reads smaller. These four raise it
back to the size the Latin editions actually present, and change
nothing else. */
html[lang="ar"] .wnav a,html[lang="ar"] .wnav-tog{font-size:12.6px}
html[lang="ar"] .bc{font-size:12px}
html[lang="ar"] .eyebrow{font-size:12.6px}
html[lang="ar"] .card .cat,html[lang="ar"] .note .tag,html[lang="ar"] .cite .tag,
html[lang="ar"] .rel-k,html[lang="ar"] .meta dt,html[lang="ar"] .cline .k,
html[lang="ar"] .foot h4,html[lang="ar"] .fmap h4,html[lang="ar"] .fsoc h4,
html[lang="ar"] .fmeta dt,html[lang="ar"] .fig figcaption b,
html[lang="ar"] .pgrid figcaption b,html[lang="ar"] .src{font-size:11.6px}
/* Naskh carries marks above the letters and descenders well below them, so
the face asks for a taller line box than the Latin display face does: the
loaded Noto Naskh Arabic measures 1.35em of ascent plus descent against
Cinzel's 1.05em. The baseline heading leading of 1.15 is therefore shorter
than one Arabic line occupies, and in the two- and three-line headings the
Arabic copy actually produces the fathas of the lower line meet the
descenders of the upper one. Measured on every Arabic heading on all
eighteen pages at 360, 768 and 1280px, 1.35em is the largest requirement;
this sets 1.4, the smallest conventional Arabic heading leading above it.
Latin editions are untouched. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .scholpub-title,html[lang="ar"] .scholpub-year,
html[lang="ar"] .xcard h3{line-height:1.4}
/* Justification is never forced with kashida, and Arabic is not
hyphenated. */
html[lang="ar"] .prose,html[lang="ar"] .prose p,html[lang="ar"] .prose li,
html[lang="ar"] .lede,html[lang="ar"] .sub{text-align:start;hyphens:none}
/* ---------- 21. Physical directions that must follow the script ---- */
html[lang="ar"] .skip{left:auto;inset-inline-start:-9999px}
html[lang="ar"] .skip:focus{left:auto;inset-inline-start:8px}
html[lang="ar"] .mast-tools{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .wnav{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .wnav-tog{margin-left:0;margin-inline-start:-4px}
html[lang="ar"] .wnav-sub{left:auto;inset-inline-start:0}
html[lang="ar"] .wnav-sub[data-align="right"]{left:auto;right:auto;
inset-inline-start:auto;inset-inline-end:0}
html[lang="ar"] .phead-seal{right:auto;inset-inline-end:-58px}
html[lang="ar"] .prose ul{padding-left:0;padding-inline-start:1.15em}
html[lang="ar"] .cite ol{padding-left:0;padding-inline-start:1.2em}
html[lang="ar"] .pull{border-left:0;border-inline-start:3px solid var(--gold);
padding:2px 0;padding-inline-start:24px}
html[lang="ar"] .record{border-left:1px solid var(--line);
border-inline-start:3px solid var(--gold)}
html[lang="ar"] .record .markmini{float:left;margin:0 14px 10px 0}
html[lang="ar"] .otp{border-left:1px solid var(--line);
border-inline-start:3px solid var(--gold);border-radius:4px 0 0 4px}
html[lang="ar"] .scholpub-featured{border-left:1px solid var(--line);
border-inline-start:3px solid var(--gold)}
html[lang="ar"] .scholpub-ext a+a{margin-left:0;
margin-inline-start:clamp(16px,2.2vw,30px)}
html[lang="ar"] .srch-item,html[lang="ar"] .wnav-srch-btn{text-align:start}
/* the forward arrow in a button is a genuine directional affordance and
is written ← in the Arabic copy, so its hover nudge follows it */
html[lang="ar"] .btn:hover .arw{transform:translateX(-3px)}
@media(max-width:1099px){
html[lang="ar"] .wnav a[aria-current="page"]::after,
html[lang="ar"] .wnav>ul>li>.wnav-item>a[data-section-current="true"]::after{
left:auto;right:auto;inset-inline-start:2px;inset-inline-end:auto}
html[lang="ar"] .wnav-tog{border-left:0;
border-inline-start:1px solid var(--line)}
}
@media(min-width:1100px){
html[lang="ar"] .mast-tools{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .wnav-item::after{left:auto;right:auto;
inset-inline-start:0;inset-inline-end:-32px}
}
/* ---------- 22. seven-language selector ---------------------------- */
/* A seventh edition adds a sixth 44px language link to the masthead, and
that moves the width at which the lockup and the controls stop fitting
on one row. Measured on actual element bounds, reading the institution
name element and every visible control out of the live layout, one
pixel at a time from 320 to 720, on all seven editions and with the
production Arabic font loaded:
five links (section 18) the collision band was 401-497px on the
editions whose masthead reads "World Turkish
Cuisine Academy" and 401-509px on Turkish,
whose masthead reads "Dünya Türk Mutfağı
Akademisi" and is the widest of the seven.
Section 18 covers that band up to 520px.
six links (this work) the band moves to 521-563px on six editions
and 521-572px on Turkish — that is, entirely
above where section 18 stops. Nothing below
521px changed: section 18 already wraps the
masthead there, and no edition collides
between 320 and 520.
So the sixth link does not widen the band downward at all; it lifts the
top of it from 509 to 572. This block extends section 18's treatment —
and nothing else — up to 582px, ten pixels above the widest measured
boundary, exactly as section 18 sat ten pixels above its own. Sections
17 and 18 are preserved untouched and remain correct on their own
terms; this block subsumes them.
It is not scoped to Arabic, because the collision is not Arabic's: the
seventh link appears in all seven mastheads and all seven collide in
the same band. `flex-end` follows the writing direction, so the
control row sits at the inline end in both LTR and RTL. Every control
keeps its 44px target, the emblem keeps its size, the institution name
stays whole and no language is hidden or abbreviated. Nothing at 583px
and above changes, and the drawer offset follows the measured masthead
height as it already did. */
@media(max-width:582px){
.mast-in{flex-wrap:wrap;row-gap:6px}
.brand{flex:1 1 100%}
.mast-tools{width:100%;justify-content:flex-end}
}
/* Below 352px the control row itself stops fitting: six 44px language links
plus the 44px drawer button need 332px of the 280px the 320px viewport
leaves after the gutter, so the first link was clipped off the inline edge.
Measured one pixel at a time from 320 to 460 on all seven editions, the
band is 320-351px and identical everywhere, because the control row is the
same in every edition.
The row therefore wraps below 360px — eight pixels above the measured
boundary — onto a second control line that keeps the same inline-end
alignment. Nothing is hidden, nothing is abbreviated, no language is
dropped and every control keeps its 44px target; the masthead simply grows
one row taller at the narrowest widths, and the drawer offset follows the
measured masthead height as it already did. */
@media(max-width:360px){
.mast-tools{flex-wrap:wrap;row-gap:4px}
}